@{
    ViewBag.Title = "ProblemBack";
    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>
         .mui-btn-success{
            color: #fff;
            border: 1px solid #00aaff;
            background-color: #00aaff;
        }
    </style>
    <div id="vue">
        <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="SubmitBack" 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">
                <h5 v-if="Type==1" style="font-size:15px;padding:10px 17px">回退说明</h5>
                <h5 v-if="Type==2" style="font-size:15px;padding:10px 17px">终止说明</h5>
                <div class="mui-input-row" style="font-size:14px">
                    <textarea v-focus v-model="Detail" id="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>
    </div>
    <script>
        var ProblemId='@ViewBag.ID';
        var Type=@ViewBag.type;
        var ProcessId;
        var t;
        var Count = 0;
        var vm = new Vue({
            el: '#vue',
            data: {
                msg: 'Hello World!',
                ProblemId:ProblemId,
                Type:Type,
                Detail:''

            },created: function () {

            },
            directives: {
                focus: {
                    // 指令的定义
                    inserted: function (el) {
                        el.focus()
                    }
                }
            },
            methods:{
                ///提交处理
                SubmitBack:function(){
                    var that=this;
                    if(!this.Detail){
                        mui.toast('请填写说明描述');
                        return;
                    }
                    //回退
                    t = mui.showLoading("操作中..", "div");
                    mui.post('/MobileProblem/ProblemBackSubmit/' + ProblemId, {type:Type,Deatil:that.Detail}, 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.InitUploader();
            }
        })
    </script>