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


    <link href="~/Content/Scripts/plugins/mui/css/webuploader.css" rel="stylesheet" />

    <script src="~/Content/Scripts/plugins/mui/js/webuploader.js"></script>

    <script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>


    <style>


        .SelectDiv {
            float: right;
            font-size: 14px;
            color: #8f8f94;
        }

        [v-cloak] {
            display: none !important;
        }
         .mui-btn-success{
            color: #fff;
            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>
        <nav class="mui-bar mui-bar-tab">
            <button v-on:click="SubmitDistribition" type="button" class="mui-btn mui-btn-primary" style="width:90%;background-color: #2ab8ff;border:none;margin-left:5%">提交</button>
        </nav>
        <div class="mui-content">
            <h5 style="font-size:15px;padding:10px 17px">选择分配人</h5>
            <ul class="mui-table-view mui-table-view-chevron">
               
                <li class="mui-table-view-cell">
                    <a href="#modal" class="mui-navigate-right" style="font-size:14px">
                        分配人
                        <div class="SelectDiv">{{Person.姓名}}</div>
                    </a>
                </li>
            </ul>
            <h5 style="font-size:15px;padding:10px 17px">分配描述</h5>
            <div class="mui-input-row" style="font-size:14px">
                <textarea v-model="Detail" rows="6" placeholder="请填写相关说明描述" style="font-size:15px"></textarea>
            </div>

            <ul id="fileList" class="mui-table-view mui-grid-view mui-grid-9" style="border-color:transparent;"></ul>
            <button style="margin:10px" id="pick" type="button" class="mui-btn mui-btn-success mui-icon mui-icon-plus">添加附件</button>

            <div style="display:none" id="picker">选择文件</div>
            <button style="margin-top: 30px;display:none;" id="ctlBtn" class="btn btn-default">开始上传</button>

        </div>
        <div id="modal" class="mui-modal">
            <header class="mui-bar mui-bar-nav">
                <a class="mui-icon mui-icon-close mui-pull-right" href="#modal" style="color:white"></a>
                <h1 class="mui-title" style="color:white">分配人员选择</h1>

            </header>
            <div class="mui-input-row mui-search" style="z-index:4">
                <input v-model="Search" type="search" class="mui-input-clear mui-indexed-list-search-input" placeholder="搜索人员">
            </div>
            <div class="mui-scroll-wrapper" style="margin-top:78px">
                <div class="mui-scroll">
                    <ul class="mui-table-view">
                        <li v-on:click="ChoosePerson(ps)" v-for="ps in PersonSelect" class="mui-table-view-cell">{{ps.姓名}}（{{ps.职务}}）
                        <div style="float:right">{{ps.公司名称}}</div>
                        </li>
                    </ul>
                </div>
            </div>

        </div>
    </div>
    <script>
        var ProblemId = '@ViewBag.ID';
        var PersonProperty = @ViewBag.PersonProperty;
        var CompanyID = '@ViewBag.CompanyID';
        var DefaultProjectID = '@ViewBag.DefaultProjectID';
        var ProcessId;
        var t;
        var Count = 0;
        var vm = new Vue({
            el: '#vue',
            data: {
                msg: 'Hello World!',
                ProblemId: ProblemId,
                Search: '',//搜索条件
                PersonSelect: [],//人员选择项
                Person: {},//选中人员
                Detail:''
            }, created: function () {

            },
            watch: {
                Search: function (val, oldVal) {
                    mui('.mui-scroll-wrapper').scroll().scrollTo(0,0,100);
                    this.GetPerson();
                },
            },
            methods: {
                
                //获取人员
                GetPerson: function () {
                    var that = this;
                    mui.post('/MobileProblem/GetDistribuPerson', { search: that.Search, problemId: ProblemId }, function (data) {
                        that.PersonSelect = data;
                    }, 'json');
                },
                //选择人员
                ChoosePerson: function (Person) {
                    this.Person = Person;
                    $("#modal").removeClass("mui-active");
                },
                
                //提交分配请求
                SubmitDistribition:function(){
                    var that=this;
                    if(!this.Person){
                        mui.toast('请选择分配的人员');
                        return;
                    }
                    if(!this.Detail){
                        mui.toast('请填写说明描述');
                        return;
                    }
                    var t = mui.showLoading("分配中..", "div");
                    //提交
                    mui.post('/MobileProblem/ProblemDistributeSubmit/' + ProblemId, {PersonID:that.Person.ID,Deatil:that.Detail,PersonName:that.Person.姓名}, function (data) {
                        if (data.code== 200) {
                            ProcessId = data.msg;
                            $("#ctlBtn").click();
                        }else{
                            mui.hideLoading(t);
                            mui.toast(data.msg);
                        } 
                    }, 'json');
                },
                //初始化上传接口
                InitUploader: function () {
                    var $list = $("#fileList");
                    var $btn = $("#ctlBtn");
                    var uploader = WebUploader.create({
                        auto: false,
                        // swf文件路径
                        swf: '/Content/Scripts/plugins/mui/js/Uploader.swf',

                        // 文件接收服务端。
                        server: '/MobileProblem/FlieUploadAndSave',

                        // 选择文件的按钮。可选。
                        // 内部根据当前运行是创建，可能是input元素，也可能是flash.
                        pick: '#picker',

                        // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
                        resize: false
                    });
                    uploader.on('fileQueued', function (file) {
                        $list.append('<li id="' + file.id + '" class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><span class="mui-icon mui-icon-upload"></span>' +
                            '<div class="mui-media-body">' + file.name + '</div> </li>');
                    });
                    uploader.on('uploadSuccess', function (file,response) {
                        var $li = $('#' + file.id),
                          $error = $li.find('div.error');

                        // 避免重复创建
                        if (!$error.length) {
                            $error = $('<div class="error" style="color:#4cd964;font-size:13px"></div>').appendTo($li);
                        }

                        $error.text('上传成功');
                        if (response.code ==200) {
                            Count += 1;
                        }
                    });

                    uploader.on('uploadError', function (file) {
                        var $li = $('#' + file.id),
                        $error = $li.find('div.error');

                        // 避免重复创建
                        if (!$error.length) {
                            $error = $('<div class="error" style="color:red;font-size:13px"></div>').appendTo($li);
                        }

                        $error.text('上传失败');
                    });

                    uploader.on('uploadComplete', function (file) {
                   
                    });
                    uploader.on('uploadFinished', function () {
                        mui.hideLoading(t);
                        mui.toast("处理成功!成功上传" + Count + "个附件");
                        setTimeout(function () {
                            //mui.openWindow({
                            //    url: '/MobileProblem/ProblemDetail/' + ProblemId
                            //});
                            window.location.href = '/MobileProblem/ProblemDetail/' + ProblemId
                        }, 500);
                    })
                    $btn.on('click', function () {
                        uploader.options.formData.ProcessId = ProcessId;
                        uploader.upload();

                    });
                    document.getElementById('pick').addEventListener('tap', function () {

                        $(".webuploader-element-invisible").click();

                    });
                },
            },
            mounted: function () {
                mui.init();
                mui('.mui-scroll-wrapper').scroll();
                this.GetPerson();
                this.InitUploader();
            }
        })
    </script>