@{
    ViewBag.Title = "VersionProblem";
    Layout = "~/Views/MobileProblem/_APPMain.cshtml";
}

<style>
    .menu {
        width: 100%;
    }

    .menuH4 {
        font-size: 14px;
        text-align: left;
        color: #616161;
        margin: 10px 10px 10px 20px;
    }

    .we {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        width: 100%;
    }

    .miniblok {
        background-color: #efeff4;
        border-radius: 8px;
        padding: 5px 10px 5px 10px;
        font-size: 14px;
        margin-bottom: 10px;
        border: 1px solid #ffffff;
        margin-left: 15px;
        color: #616161;
    }

    .myactive {
        border: 1px solid #b47e7e;
        color: #b47e7e;
        background-color: white;
    }

    .mui-card {
        margin: 5px 0px 0px;
    }

    .mui-card-media img {
        height: 35px !important;
        width: auto !important;
        border-radius: 50px;
    }

    p {
        word-break: break-all;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 1;
    }

    .mui-media-body div {
        font-size: 13px;
        color: #6f6f6f;
        background-color: #ffffff;
        position: absolute;
        z-index: 999999;
        right: 8px;
    }

    .svg-float {
        position: absolute;
        top: 8px;
        right: 6px;
        width: 133px;
        text-align: right;
    }

    .my-content {
        padding: 5px 10px;
        font-size: 13px;
        color: #8f8f94;
        max-height: 80px;
        overflow: hidden;
    }

    .overf {
        word-break: break-all;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .mui-button-row {
    position: absolute;
    padding-top: 5px;
    text-align: center;
    bottom: 0;
    width: 100%;
}
</style>
<!--侧滑菜单容器-->
<div id="offCanvasWrapper" class="mui-off-canvas-wrap mui-draggable">

    <div id="vue" class="mui-inner-wrap">
        <!--菜单部分-->
        <aside id="offCanvasSide" class="mui-off-canvas-right">
            <div id="offCanvasSideScroll" class="mui-scroll-wrapper">
                <div class="mui-scroll">
                    <div id="menu" class="menu">
                        <div style="border-bottom: solid 1px #efeff4;">
                            <h4 class="menuH4">产品类型</h4>
                            <div class="we active" style="flex-wrap:wrap;justify-content:flex-start;">
                                <div v-for="item in Product" class="miniblok " v-on:click="productChange(item)" v-bind:class="item.active?'myactive':''">{{item.名称}}</div>
                            </div>
                        </div>
                    </div>
                </div>
                    <div class="mui-button-row">
                <button type="button" v-on:tap="defaultProduct" class="mui-btn mui-btn-primary" style="width: 48%; background-color: rgb(42, 184, 255); border: none;">重置</button>
                <button type="button" v-on:tap="reload" class="mui-btn mui-btn-danger" style="width: 48%;">确定</button></div>

            </div>
        </aside>
        <header class="mui-bar mui-bar-nav">
            <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="color:#ffffff"></a>
            <h1 class="mui-title" style="color:white">版本问题查询</h1>
            <a v-on:tap="popover" id="icon-menu" class="mui-action-menu mui-icon mui-icon-bars mui-pull-right" style="color: white;"></a>
        </header>
        <div id="offCanvasContentScroll" class="mui-content mui-scroll-wrapper">
            <div class="mui-scroll">
                <div style="margin-top:10px">
                    <input v-on:keydown.enter="DoSearch" v-model="searchText" style="font-size:15px; margin:auto;width:75%"  type="search" class="mui-input-clear" placeholder="问题标题/内容/编号">
                    <button v-on:click="DoSearch" type="button" class="mui-btn mui-btn-primary mui-icon mui-icon-search">
                        搜索
                    </button>
                    <div id="Problem">
                        <div v-for="x in Problem" class="mui-card" v-on:tap="goDetail(x.ID,x.产品问题版本ID)">
                            <div class="mui-card-header mui-card-media">
                                <img src="~/Content/Images/Account/wtx.jpg" />
                                <div class="mui-media-body">
                                    {{x.性质}}-{{x.登记人}}
                                    <p style="font-size:12px">登记于 {{x.登记日期}}</p>
                                    <div>{{x.编号}}</div>
                                    <div class="svg-float overf" style="-webkit-line-clamp: 1;">{{x.产品}}({{x.版本}})</div>
                                </div>
                            </div>
                            <div class="mui-card-content my-content">
                                <div class="overf" style="-webkit-line-clamp: 1;">标题：{{x.问题标题}}</div>
                                <div class="overf" style="-webkit-line-clamp: 2;">说明：{{x.说明}}</div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
        <!-- off-canvas backdrop -->
        <div class="mui-off-canvas-backdrop"></div>
    </div>
</div>
<script>

    var vm = new Vue({
        el: '#vue',
        data: {
            Problem: [],
            Product: [],
            searchText: '',
            Pages: 0
        },
        methods: {
            igonHtml: function (data) {
                var t = [];
                for (var i in data) {
                    var item = data[i];
                    var arrEntities = {
                        'lt': '<',
                        'gt': '>',
                        'nbsp': ' ',
                        'amp': '&',
                        'quot': '"'
                    };
                    item.说明 = item.说明.replace(/<[^>]+>/g, "").replace(/&(lt|gt|nbsp|amp|quot);/ig, function (all, t) {
                        return arrEntities[t];
                    });
                    t.push(item);
                }

                return t
            },
            getVersionProblem: function () {
                var that = this;
                that.Pages++;
                setTimeout(function () {
                    var self = mui('#offCanvasContentScroll').pullRefresh(); //参数为true代表没有更多数据了。
                    mui.get("/Problem/GetVersionProblem",
                        {
                            SearchText: that.searchText,
                            page: that.Pages,
                            ProductId:that.getProductSelect(),
                            rows: 6
                        }, function (data) {
                            //获得服务器响应
                            var info = data.rows;
                            if (info.length == 0) {//当datas.length为0时，表示没有数据了
                                self.endPullupToRefresh(true);//当为true时，底部出现没有更多数据，并且不能滑动
                            } else {
                                data.rows = that.igonHtml(data.rows)
                                that.Problem = that.Problem.concat(data.rows);
                                self.endPullupToRefresh(false);//当为false或空时，底部出现正在加载，滑动到下一页
                            }
                        }, 'json');
                }, 1500);
            },
            DoSearch: function () {
                this.Pages = 0;
                this.Problem = [];
                mui('#offCanvasContentScroll').pullRefresh().refresh(true);
                mui('#offCanvasContentScroll').pullRefresh().pullupLoading(false);
            },
            getProduct: function () {
                var that = this;
                $.post('/Product/ProductInfoCombobox', function (data) {
                    var t = [];
                    for (var i in data) {
                        var item = data[i];
                        item.active = false;
                        t.push(item);
                    }
                    that.Product = t;
                })
            },
            productChange: function (item) {
                item.active = !item.active;
            },
            popover: function () {
                mui('.mui-off-canvas-wrap').offCanvas('show')
            },
            defaultProduct: function () {
                var data = this.Product;
                for (var i in data) {
                    var item = data[i];
                    item.active = false;
                }
            },
            reload: function () {
                mui('.mui-off-canvas-wrap').offCanvas().close()
                this.DoSearch()
            },
            getProductSelect: function () {
                var t=[];
                for(var i in  this.Product) {
                    var item=this.Product[i];
                    if (item.active) {
                        t.push(item.ID)
                    }
                }
                return t.join(',');
            },
            goDetail(id,vpid) {
                window.location.href = "/MobileProblem/VersionProblemDeatil/" + id + "?vpid=" + vpid;
            }
        },
        mounted: function () {
            var that = this;
            mui.init({
                pullRefresh: {
                    container: '#offCanvasContentScroll',
                    up: {
                        auto: false,
                        contentrefresh: '正在加载...',
                        callback: that.getVersionProblem,
                    }
                }
            });
            mui('.mui-scroll-wrapper').scroll();
            mui(".mui-scroll").on('tap', '.miniblok', function (event) {
                this.click();
            });
            this.getProduct();
        }
    })
</script>