@{
    ViewBag.Title = "ProblemDeal";
    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-icon mui-icon-left-nav mui-pull-left mui-action-back" style="color:#ffffff"></a>
            <h1 class="mui-title" style="color:white">问题处理</h1>
        </header>
        <nav class="mui-bar mui-bar-tab">
            <button v-on:click="ProblemDealSubmit()" 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 mui-scroll-wrapper" id="scr1">
            <div class="mui-scroll">
                <template >
                    <h5 style="font-size:15px;padding:10px 17px">处理说明</h5>
                    <div class="mui-input-row" style="font-size:14px">
                        <textarea  v-model="DealDescribe" rows="6" placeholder="请填写相关说明描述" style="font-size:15px"></textarea>
                    </div>
                </template>
                <ul class="mui-table-view mui-table-view-chevron">
                    <li class="mui-table-view-cell">
                        是否完成
                        <div id="Iscomplete" class="mui-switch mui-switch-mini ">
                            <div class="mui-switch-handle"></div>
                        </div>
                    </li>
                    <li v-if="Iscomplete" class="mui-table-view-cell">
                        <a v-on:click="SelectVison" class="mui-navigate-right">
                            解决版本
                            <div class="SelectDiv">{{Vision}}</div>
                        </a>
                    </li>
                </ul>
                @*<div v-if="Iscomplete" class="mui-input-row" style="margin-top:10px">
                    <textarea v-model="SolutionPlan" 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>
    </div>
    <script>
        var ProblemId = '@ViewBag.ID';
        var ProcessId;
        var t;
        var Count = 0;
        var vm = new Vue({
            el: '#vue',
            data: {
                msg: 'Hello World!',
                ProblemId: ProblemId,
                Iscomplete: false,//是否完成
                VisionPicker: null,
                Vision: '',//解决版本
                DealDescribe: '',//处理描述
                SolutionPlan:''//解决方案

            }, created: function () {

            },
            methods: {

                ///获取存在问题产品的所有版本
                GetProblemVison:function(){
                    var that = this;
                    mui.post('/MobileProblem/GetProblemVison/' + ProblemId, {}, function (data) {
                        var d = [];
                        for (var i = 0; i < data.length; i++) {
                            var c = {};
                            c.value = data[i].ID;
                            c.text = data[i].版本号;
                            d.push(c);
                        }
                        that.VisionPicker.setData(d);
                    }, 'json');
                },
                ///选择版本
                SelectVison: function () {
                    var that = this;
                    that.VisionPicker.show(function (items) {
                        that.Vision = items[0].text;
                    });
                },
                //提交处理请求
                ProblemDealSubmit:function(){
                    var that=this;
                    if(!this.DealDescribe){
                        mui.toast('请填写处理描述');
                        return;
                    }
                     t = mui.showLoading("处理中..", "div");
                    //提交
                    mui.post('/MobileProblem/ProblemDealSubmit/' + ProblemId, 
                        {   ProblemID:ProblemId,
                             DealDescribe:that.DealDescribe,
                             Iscomplete:that.Iscomplete,
                             Vision:that.Vision,
                             SolutionPlan:that.SolutionPlan
                        }, function (data) {
                           
                            if (data.code == 200) {
                            ProcessId = data.msg;
                            $("#ctlBtn").click();
                        } else {
                            mui.hideLoading(t);
                            mui.toast(data.msg);
                        }
                    }, 'json');
                
            },
            //初始化
            Init: function () {
                var that = this;
                mui.init();
                mui('.mui-scroll-wrapper').scroll();
                this.GetProblemVison();
                this.VisionPicker = new mui.PopPicker();
                document.getElementById("Iscomplete").addEventListener("toggle", function (event) {
                    that.Iscomplete = event.detail.isActive;
                })
            },
              //初始化上传接口
            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 () {
                this.Init();
                this.InitUploader();
            }
        })
    </script>