@{
    ViewBag.Title = "UpdateViewProcessInfo";
    Layout = "~/Views/Shared/_MainLayoutPage.cshtml";
}
<link href="~/Content/Scripts/plugins/umeditor-1.2.3/themes/default/_css/umeditor.css?v=1.1" rel="stylesheet" />
<script src="~/Content/Scripts/plugins/umeditor-1.2.3/umeditor.min.js"></script>
<script src="~/Content/Scripts/plugins/umeditor-1.2.3/umeditor.config.js?v=1.41"></script>
<script src="~/Content/Scripts/plugins/umeditor-1.2.3/lang/zh-cn/zh-cn.js"></script>
<script src="~/ViewModels/projectproblem.index.js?r=1.1"></script>
<script type="text/javascript">
    $(function () {
        $('#btnClose').bind('click', function () { Close(); });
        $('#btnUpdate').bind('click', function () {
            var r = $('#updateprocess').form('validate');
            if (r) {//post到后台	
                var param = escape(JSON.stringify(ZLPMS.FormToObject('updateprocess')));
                $.post("/Problem/UpdateProblemProcess", { text: param }, function (data) {
                    if(data.code==200)
                    {
                        if (problemlObj.Choose == 1)
                        {
                            document.getElementById("btn_upload").click();
                        }
                        else {
                            top.ZLPMS.Msg("修改成功!", 1);
                            ZLPMS.CloseTopWindow(true)
                        }
                    }
                    else
                    {
                        top.ZLPMS.Msg("修改失败!", 2);
                        ZLPMS.CloseTopWindow(true)
                    }
                })
            }
        });

        //问题描述
        $(function () {
            var um = UM.getEditor('MS', {
                toolbar: [
                    'source | undo redo | emotion forecolor backcolor | removeformat |',
                    'insertorderedlist insertunorderedlist | selectall cleardoc paragraph | fontsize',
                    '| justifyleft justifycenter justifyright justifyjustify |',
                    '| horizontal print preview']
            });
        })

        //加载附件信息
        var attfiles = '@Model.附件';
        if (attfiles != '') {
            var files = attfiles.split(',')
            var imghtml = '';
            $.each(files, function (i, n) {
                var imgs = n.split('|');
                var id = imgs[0];
                var ft = imgs[1];
                if (ft == '1') {//图像类型，显示缩略图 o原图，s缩略图，m大图
                    imghtml += '<div id="Attachment'+id+'"><a href="#" onclick="OpenImage(' + id + ')"><img src="/Problem/ViewProblemImage?id=' + id + '&type=s" class="img"/></a><i class="fa fa-times" id="icon' + id + '" aria-hidden="true" onclick="Delete_img(' + id + ')"></i></div>';
                } else {//非图像类型，显示下载附件
                    imghtml += '<div id="Attachment' + id + '"><a href="#" onclick="downloadfile(' + id + ')">下载附件' + (i + 1) + '</a><i class="fa fa-times" id="icon' + id + '" aria-hidden="true" onclick="Delete_img(' + id + ')"></i></div>';
                }
            });
            $('#attach').html(imghtml);
        }

        //放大图片
        var img = $('#content').find("img");
        if (img) {
            img.bind("click", function () {
                var src = $(this).attr("src")
                top.ZLPMS.OpenNewWindow("查看图片", "/Problem/ViewImg?src=" + src, "850px", "620px")
            })
        }
    });

    //查看附件大图
    function OpenImage(id) {
        top.ZLPMS.OpenNewWindow('', '/Problem/ViewProblemImage?id=' + id + '&type=m', '80%', '90%');
    };

    //下载附件文件
    function downloadfile(id) {
        window.open('/Problem/ViewProblemImage?id=' + id);
    }

    //删除附件
    function Delete_img(data) {
        top.ZLPMS.Confirm('删除后无法恢复,您确定要删除该附件吗？', 3, function () {
            $.post("/Problem/Delete_Img", { id: data }, function (d) {
                if (d == 1) {
                    top.ZLPMS.Msg("删除成功", 1);
                    var name = "#Attachment" + data;
                    var icon = "#icon" + data;
                    $(name).attr("style", "display:none;")
                    $(icon).attr("style", "display:none;")
                }
                else {
                    top.ZLPMS.Msg("删除失败", 2)
                }
            })
        });
    }

    //附件上传
    layui.use('upload', function () {
        var upload = layui.upload;
        var demoListView = $('#AttachData');
        var uploadInst = upload.render({
            elem: '#ChooseFile'  //文件选择按钮
        , url: '/Problem/ProcessFileUpload?problemID='+"@Model.ID"+"&processID="+"@ViewBag.id"
        , method: "post"
        , accept: 'file' //普通文件（文件类型）
        , multiple: true  //多文件上传
        , auto: false  //自动上传
        , size: 5120
        , bindAction: "#btn_upload"
        , number: 3//最大允许上传文件数量
        , choose: function (obj) {
            var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
            //读取本地文件
            obj.preview(function (index, file, result) {
                var display = "none";
                if (file.type == "image/jpeg" || file.type == "image/png") {
                    display = "";
                }
                var tr = $(['<tr id="upload-' + index + '">'
                    , '<td class="uplad-filename">' + file.name + '</td>'
                    , '<td>' + (file.size / 1014).toFixed(1) + 'kb</td>'
                    , '<td>等待上传</td>'
                    , '<td>'
                    , '<button class="layui-btn layui-btn-mini demo-reload layui-hide">重传</button>'
                    , '<button class="layui-btn layui-btn-mini layui-btn-danger demo-delete" style="height:25px;line-height:25px">删除</button>'
                    , '<img src="' + result + '" class="CheckImg" width="auto" height="40" style="margin-left:10px;display:' + display + '"/>'
                    , '</td>'
                    , '</tr>'].join(''));

                //单个重传
                tr.find('.demo-reload').on('click', function () {
                    obj.upload(index, file);
                });

                //删除
                tr.find('.demo-delete').on('click', function () {
                    delete files[index]; //删除对应的文件
                    tr.remove();
                    uploadInst.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
                });
                problemlObj.Choose = 1;
                demoListView.append(tr);
            });
        }
        , done: function (res, index, upload) {
            if (res==1) {
                top.ZLPMS.Msg("修改成功!", 1);
                ZLPMS.CloseTopWindow(true)
            }
            else {
                top.ZLPMS.Msg("附件上传失败", 2);
                return;
            }
        }
        });
    });
</script>

<style>
    table {
        width: 100%;
    }

        table td {
            border: solid 1px #cacaca;
            padding: 3px;
        }

    .lable {
        width: 130px;
        padding: 5px 5px 5px 15px;
        background: #f5f5f5;
        color: #2636a3;
        font-size: 13px;
    }

    .img {
        width: 40px;
        height: 50px;
        border: solid 1px #000;
    }

    file {
        margin: 1px;
    }

    #content img {
        max-width: 400px;
        height: auto;
    }

    .CheckImg:hover {
        transform: scale(3);
        z-index: 999;
        width: auto;
        height: 40px;
    }

    .CheckImg {
        cursor: pointer;
        transition: all 0.6s;
    }

    #attach div{
        float:left;
        margin-left:15px;
        line-height: 55px;
    }
</style>

<form class="easyui-layout" data-options="fit:true" lay-filter="updateprocess" id="updateprocess">
        <div data-options="region:'south',border:false" style="height:50px; padding-top:10px;text-align:right; padding-right:10px;">
            <a id="btnUpdate" href="#" class="easyui-linkbutton c6"><i class="fa fa-pencil"></i> 确认</a>
            <a id="btnClose" href="#" class="easyui-linkbutton c5"><i class="fa fa-power-off"></i> 关闭</a>
        </div>
        <div data-options="region:'center',border:false">
            <div id="tabMyprocess" class="easyui-tabs" data-options="fit:true">
                <div title="过程详细信息" style="padding:3px;">
                    <table>
                        <input type="hidden" id="ID" name="ID" value="@ViewBag.id" />
                        <input type="hidden" id="btn_upload"  />
                        <tr>
                            <td class="lable">问题编号</td>
                            <td id="code" style="width:200px">@Model.编号</td>
                            <td class="lable">处理人</td>
                            <td id="property">@Model.处理人</td>
                        </tr>
                        <tr>
                            <td class="lable">处理时间</td>
                            <td id="code">@Model.记录时间</td>
                            <td class="lable">状态</td>
                            <td id="property">@Model.状态</td>
                        </tr>
                        <tr>
                            <td class="lable">问题标题</td>
                            <td id="title" colspan="3">@Model.问题标题</td>
                        </tr>
                        <tr>
                            <td class="lable">过程描述</td>
                            <td id="content" colspan="3" style="height:200px;overflow:auto;">
                                <textarea id="MS" name="MS" data-options="multiline:true,prompt:'请在此录入处理备注'" style="width:100%; height:220px;">@Html.Raw(Model.描述)</textarea>
                            </td>
                        </tr>
                        <tr>
                            <td class="lable">问题附件</td>
                            <td colspan="3" style="height:50px;" id="attach"></td>
                        </tr>
                        <tr>
                            <td class="lable" id="demoList">
                                <a id="ChooseFile" href="#" class="easyui-linkbutton c8" data-options="plain:true"><i class="fa fa-plus-square-o"></i> 添加附件</a>
                            </td>
                            <td colspan="3"  style="height:50px;" id="AttachData"></td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
</form>