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

    <link href="~/Content/Style/MobileProductRegist/QueryProblemCustom.css" rel="stylesheet" />

    <script src="~/Content/Style/MobileProductRegist/ProblemIcon.js"></script>

    <script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
    <style>
        .mui-btn-primary {
            border: 1px solid #00aaff;
            background-color: #00aaff;
        }
    </style>

    <div id="vue" v-cloak>
        <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>
        </header>
        <div class="mui-content mui-scroll-wrapper" id="pullrefresh">
            <div class="mui-scroll">
                <div style="margin-top:10px">
                    <input style="font-size:15px; margin:auto;width:75%" v-model="searchText" 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 v-on:click="Deatil(p2.ID)" v-for="p2 in ProblemData" class='mui-card' style='margin: 0px;margin-top: 5px;'><div class='mui-card-content my'><div class="imgstyle"><img v-bind:src="p2.附件路径" class="imgcover"></div><div style='flex:1'><div class='ncs'><div class='we'><div class='overf' style='-webkit-line-clamp: 1;width:150px;margin-top:10px'>{{p2.性质}}-{{p2.登记人}}</div><div style='margin-right:5px'><svg class='icon' aria-hidden='true'><use v-bind:xlink:href='p2.icon'></use></svg></div></div><div class='boxx'><p class='overf' style='-webkit-line-clamp: 1;'>{{p2.问题标题}}</p></div><div class='we'><div><p></p></div><div><p style='margin-right:5px'>{{p2.登记日期}}</p></div></div></div></div></div></div>
                </div>
            </div>
        </div>
    </div>
    <script>
        var vm = new Vue({
            el: '#vue',
            data: {
                searchText: '',
                ProblemData: [],
                Pages: 0
            },
            watch:{
            },
            methods: {
                ///进入详细页面
                Deatil: function (id) {
                    //mui.openWindow({
                    //    url: '/MobileProblem/ProblemDetail/' + id
                    //});
                    window.location.href = '/MobileProblem/ProblemDetail/' + id
                },
                DoSearch:function(){
                    this.Pages = 0;
                    this.ProblemData = [];
                    mui('#pullrefresh').pullRefresh().refresh(true);
                    mui('#pullrefresh').pullRefresh().pullupLoading(false);
                },
                pullupRefresh: function () {
                    var that = this;
                    that.Pages++;
                    setTimeout(function () {
                       var self= mui('#pullrefresh').pullRefresh(); //参数为true代表没有更多数据了。
                        mui.get('/MobileProblem/QuerckSearch',
                            {
                                SelectConditon: that.searchText,
                                Pages: that.Pages,
                                rows:6
                            }, function (data) {
                            //获得服务器响应
                                var info = data;
                                if (info.length == 0) {//当datas.length为0时，表示没有数据了
                                    self.endPullupToRefresh(true);//当为true时，底部出现没有更多数据，并且不能滑动
                                } else {
                                    for (var di in info) {
                                        var dd = info[di];
                                        if (!dd.附件路径) {
                                            dd.附件路径 = "/Content/Images/zlpng.png";

                                        } else {
                                            dd.附件路径 = "/MobileProblem/ViewProblemImage/" + dd.附件路径 + "?type=s"
                                        }
                                        if (dd.是否终止 == '1') {
                                            dd.icon = "#icon-yizhongzhi1";
                                        } else if (dd.是否解决 == '1') {
                                            dd.icon = "#icon-yijiejue3";
                                        }
                                        else {
                                            dd.icon = "#icon-weijiejue";
                                        }
                                        that.ProblemData.push(dd);
                                    }
                                    self.endPullupToRefresh(false);//当为false或空时，底部出现正在加载，滑动到下一页
                                }
                            },'json');
                    }, 1500);


                }
            },
            mounted: function () {
                var that = this;
                mui.init({
                    pullRefresh: {
                        container: '#pullrefresh',
                        up: {
                            auto: false,
                            contentrefresh: '正在加载...',
                            callback: that.pullupRefresh,
                        }
                    }
                });
                
                mui(".mui-scroll").on('tap', '.mui-card', function (event) {
                    this.click();
                });
            }
        })
    </script>