@{
    ViewBag.Title = "ProblemDetailCutom";
    Layout = "~/Views/MobileProblem/_APPMain.cshtml";
    var url = HttpContext.Current.Request.Url;
    var webSite = String.Concat(url.Scheme, "://", url.Authority);
}
@model PMS.BusinessModels.MobileProblem.ProblemDetailModel

    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link href="~/Content/Scripts/plugins/mui/css/mui.imageviewer.css" rel="stylesheet" />
    <link href="~/Content/Style/MobileProductRegist/ProblemDeatail.css" rel="stylesheet" />
    <link href="~/Content/Style/MobileProductRegist/ProblemIcon.css" rel="stylesheet" />
    <link href="~/Content/Scripts/plugins/mui/css/TimeLine.css?v=1.0" rel="stylesheet" />

    <script src="~/Content/Scripts/plugins/mui/js/iconfont.deal.js"></script>
    <script src="~/Content/Scripts/plugins/mui/js/mui.zoom.js"></script>
    <script src="~/Content/Scripts/plugins/mui/js/mui.previewimage.js"></script>
    

    <script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
    <script src="~/Content/Scripts/babel.min.js"></script>
    <script src="~/Content/Scripts/polyfill.min.js"></script>
    <style>
        html{
            font-size:15px
        }
        body {
            font-family: -apple-system, BlinkMacSystemFont, "PingFang SC","HelveticaNeue",STHeiti,"Microsoft Yahei",Tahoma,Simsun,sans-serif;
        }

        .mui-bar-nav {
            background-color: #00aaff;
            box-shadow: 0 1px 6px #00aaff;
        }

        .top {
            background-color: #00aaff;
            width: 100%;
            position: relative;
        }

        .card1 {
            width: 80%;
            height: 5rem;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            padding: 1rem;
        }

        .flexcolom {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: space-between;
            font-size: 14px;
            color: white;
            margin-left: 5%;
        }

       .status {
            position: absolute;
            right: 2%;
            top: 10%;
            max-width: 100px;
        }
         .status h4{
            line-height:1.5
        }
        .statusIcon {
            color: white;
            font-size: 18px;
            font-weight: 500;
        }

        .mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active {
            color: #00aaff!important;
            border-bottom: 2px solid #00aaff;
        }
        /*.mui-content {
            background-color: #ffffff;
        }*/
        .mui-segmented-control.mui-segmented-control-inverted .mui-control-item {
            color: #666666;
        }

        .mylist {
            width: 100%;
            height: auto;
            background-color: white;
            padding: 1rem;
            margin-top: 0.3rem;
        }

        .mytable {
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: flex-start;
            margin-top: 0.5rem;
        }

        .mytableRow {
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: flex-start;
        }

            .mytableRow > p {
                margin-bottom: 0px;
            }

        .mytableRowRight {
            margin-left: 3rem;
            color: black;
            font-weight: 400;
            flex:1
        }
        .marleft{
            margin-left:1rem
        }

        p {
            font-size: 12px;
        }

        .fixDiv {
            position: fixed;
            top: -5px;
            z-index: 99;
        }

        .cd-timeline-content p {
            margin: 0;
        }

        .cd-timeline-content .cd-date {
            padding: 0;
            opacity: .7;
            float: right;
        }

        .mui-card-header:after {
            position: relative;
        }

        h2 {
            font-size: 22px;
        }

        h4 {
            font-size: 14px;
        }

        h5 {
            font-size: 12px;
        }

        .iconflex {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: row;
        }

        .mui-grid-view.mui-grid-9 {
            border: transparent;
            background-color: white;
        }

            .mui-grid-view.mui-grid-9 .mui-table-view-cell {
                border: transparent;
            }

        .Fileflex {
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            flex-wrap: wrap;
            align-items: center;
        }

        .activeIcon {
            background-color: #fc8560;
        }

        .DeatlTitle {
            color: white;
            padding: 5px 10px;
            font-size: 15px;
        }
         .mui-popover.mui-active {
            display: flex !important;
        }

        .mui-popover {
            flex-direction: column;
            width: auto;
            padding: 5px;
            background-color: white;
        }
         .mytableRowLeft {
            width: 53px;
        }
          #panel{
       
          background:#fff;
        }

        #panel text{
          line-height: 2rem;
          border-right: 1px solid #ddd;
          border-bottom: 1px solid #ddd;
        }

        .flex-row{
          display: flex;
          flex-direction: row;
          justify-content: flex-start;
          align-items: center;
          font-size:12px
        }
        .flex-column{
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: stretch;
        }

        .flex-cell{
          flex: 1;
        }
        .flex-column p{
            margin:0
        }
        .flexSingle{
            flex:0.33
        }
        .ProblemIcon{
            font-size:20px
        }
          .modify {
            display: flex;
            flex-direction: row;
            font-size: 14px;
            padding: 5px 15px;
            justify-content: center;
            align-items: center;
        }
       .modify .mui-icon{
           color:#677b84;
           padding-right:10px
       }
        .Process{
         margin-top: 5px;
        min-height: 28rem;
        background-color: white;
       }
        .tabflex {
            display: flex !important;
            flex-direction: row;
            justify-content: space-around;
            align-items: center;
            background-color: white;
            box-shadow: 0 0 1px rgb(217, 217, 217);
        }
         .mui-bar .mui-btn {
            top: 0px;
            border-radius: 8px;
            font-size: 0.7rem;
            padding: 6px 18px;
            margin: 0 10px;
        }
    </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:white"></a>
            <h4 class="mui-title" style="color:white">问题详细</h4>
            <a v-if="@Model.撤销权限==1 || @Model.修改权限==1 " href="#Popover_1" class="mui-icon mui-icon-more mui-pull-right" style="color:white"></a>
        </header>
        <nav v-if="IsCommit" class="mui-bar mui-bar-tab  tabflex">
            <button v-on:click="ProblemRemark"  type="button" class="mui-btn mui-btn-success mui-btn-block" style="top: 0px;border-radius: 30px;">评价</button>
        </nav>
        <div class="mui-content ">
            <div class="top">
                @*<div class="status iconflex"><span v-bind:class="ProblemStatus.icon" class="ProblemIcon " style="color:white"></span><h4 style='color:white;margin-left:5px'>{{ProblemStatus.text}}</h4></div>
                    <div style="position:absolute;top:0;right:0.5rem;color:white;z-index:10;"><span style="font-size:3rem" v-bind:class="Iscomp" class="ProblemIcon"></span></div>
                    <div class="card1">
                        <div>
                            <img src="~/Content/Images/Account/wtx.jpg" style="height:4rem;border-radius:50px" />
                        </div>
                        <div class="flexcolom">
                            <div style="font-weight: 700;">@Model.人员性质-@Model.姓名</div>
                            <div style="margin-top:0.3rem"><p style="font-size:15px">@Model.登记日期</p></div>
                        </div>
                    </div>*@
                <div class="card1">
                    <div>
                        <img src="~/Content/Images/Account/wtx.jpg" style="height:3rem;border-radius:50px" />
                    </div>
                    <div class="flexcolom">
                        <div style="font-weight: 700;">@Model.人员性质-@Model.姓名</div>
                        <div ><p style="font-size:14px;color:white">@Model.登记日期</p></div>
                    </div>
                </div>
                <div class="status iconflex"><span v-bind:class="ProblemStatus.icon" class="ProblemIcon " style="color:white"></span><h4 style='color:white;margin-left:5px'>{{ProblemStatus.text}}</h4></div>
            </div>
            <div id="fex">
                <div style="padding:3px;background-color: white;">
                    <div id="segmentedControl" class="mui-segmented-control mui-segmented-control-inverted mui-segmented-control-primary ">
                        <a class="mui-control-item mui-active" href="#item1"><span  class="ProblemIcon icon-xiangqing"></span>问题详情</a>
                        <a class="mui-control-item" href="#item2"><span  class="ProblemIcon icon-liuchengpeizhi"></span>流程概况</a>
                        @*<a class="mui-control-item" href="#item3"><span class="mui-icon mui-icon-chat"></span>过程沟通</a>*@
                    </div>
                </div>
                <div id="item1" class="mui-control-content mui-active" style="overflow:hidden;">
                    <div v-if="CurrentDealDeatil" class="mylist">
                        <h4 style="font-size:15px">处理说明</h4>
                        <p style="font-size:13px" id="CurrentDealDeatil" v-html="CurrentDealDeatil.描述">{{CurrentDealDeatil.描述}}</p>
                        <div v-if="CurrentDealDeatil.图片 || CurrentDealDeatil.文件" class="Fileflex">
                            <img v-for="img in  CurrentDealDeatil.图片" data-preview-src='' data-preview-group='3' v-bind:src="img" style='width:50px;height:50px;padding:5px 5px 5px 0'>
                            <a v-for="(flie,index) in CurrentDealDeatil.文件" v-on:click="GetFlie(flie)" style="padding:5px 5px 5px 0;color:#80b4fb;font-size:14px"><span class="mui-icon mui-icon-paperclip" style="font-size:33px"></span></a>
                        </div>
                        <template v-if="Vison">
                            <h4 style="font-size:15px">解决版本</h4>
                            <p style="font-size:13px">{{Vison}}</p>
                        </template>

                    </div>
                    <div class="mylist" id="HtmlDeatil">
                        <h4 style="font-size:15px;float:right" >编号:@Model.问题编号</h4>
                        <h4 style="font-size:15px">标题</h4>
                        <p style="font-size:13px">@Model.问题标题</p>
                        <h4 style="font-size:15px">详细描述</h4>
                        <p style="font-size:13px">@Html.Raw(Model.问题描述)</p>
                    </div>
                    <div v-if="StopDeatil" class="mylist">
                        <h4 style="font-size:15px">终止说明</h4>
                        <p style="font-size:13px">{{StopDeatil}}</p>
                    </div>
                    <div v-if="ErginDeatil" class="mylist">
                        <h4 style="font-size:15px">紧急描述</h4>
                        <p style="font-size:13px">{{ErginDeatil}}</p>
                    </div>
                    <div v-if="Image.图片 && (Image.图片.length>0 || Image.附件.length>0)" class="mylist">
                        <h4 style="font-size:15px">图片及附件</h4>
                        <ul id="fileList" class="mui-table-view mui-grid-view mui-grid-9">
                            <li v-for="im in Image.图片" class='mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3' style='padding-left: 3px;'>
                                <img data-preview-src='' data-preview-group='1' v-bind:src="im" style='width:100px;height:100px'>
                            </li>
                        </ul>
                        <a v-for="(flie,index) in Image.附件" v-on:click="GetFlie(flie)" style="padding:5px 5px 5px 0;color:#80b4fb;font-size:14px">附件{{index+1}}<span class="mui-icon mui-icon-paperclip" style="font-size:33px"></span></a>
                    </div>
                    @*<div class="mylist">
                        <h4 style="font-size:15px">处理信息</h4>
                        <div class="mytable">
                            <div class="mytableRow">
                                <p class="mytableRowLeft">当前处理人</p>
                                <p class="mytableRowRight"> @Model.当前处理人</p>
                            </div>
                            <div class="mytableRow">
                                <p class="mytableRowLeft">当前环节</p>
                                <p class="mytableRowRight"> @Model.当前环节</p>
                            </div>
                            <div class="mytableRow">
                                <p class="mytableRowLeft">技术支持</p>
                                <p class="mytableRowRight"> @Model.技术支持</p>
                            </div>
                            <div class="mytableRow">
                                <p class="mytableRowLeft">研发支持</p>
                                <p class="mytableRowRight"> @Model.研发支持</p>
                            </div>
                            <div class="mytableRow">
                                <p class="mytableRowLeft">是否解决</p>
                                <p class="mytableRowRight"> @Model.是否解决</p>
                            </div>
                            <div class="mytableRow">
                                <p class="mytableRowLeft">是否终止</p>
                                <p class="mytableRowRight">@Model.是否终止</p>
                            </div>
                            <div class="mytableRow">
                                <p class="mytableRowLeft">终止说明</p>
                                <p class="mytableRowRight">@Model.终止说明</p>
                            </div>

                        </div>
                    </div>
                    <div class="mylist">
                        <h4 style="font-size:15px">其他信息</h4>
                        <div class="mytable">
                           
                            <div class="mytableRow">
                                <p class="mytableRowLeft">渠道</p>
                                <p class="mytableRowRight"> @Model.渠道名称</p>
                            </div>
                            <div class="mytableRow">
                                <p class="mytableRowLeft">项目</p>
                                <p class="mytableRowRight"> @Model.项目名称</p>
                            </div>
                            <div class="mytableRow">
                                <p class="mytableRowLeft">机构</p>
                                <p class="mytableRowRight"> @Model.机构名称</p>
                            </div>
                            <div class="mytableRow">
                                <p class="mytableRowLeft">产品</p>
                                <p class="mytableRowRight"> @Model.产品名称</p>
                            </div>
                            <div class="mytableRow">
                                <p class="mytableRowLeft">版本</p>
                                <p class="mytableRowRight"> @Model.版本号</p>
                            </div>
                            <div class="mytableRow">
                                <p class="mytableRowLeft">来源</p>
                                <p class="mytableRowRight"> @Model.来源</p>
                            </div>
                            <div class="mytableRow">
                                <p class="mytableRowLeft">问题性质</p>
                                <p class="mytableRowRight"> @Model.问题性质</p>
                            </div>
                            <div class="mytableRow">
                                <p class="mytableRowLeft">紧急程度</p>
                                <p class="mytableRowRight"> @Model.紧急程度</p>
                            </div>
                            <div class="mytableRow">
                                <p class="mytableRowLeft">紧急描述</p>
                                <p class="mytableRowRight"> @Model.紧急描述</p>
                            </div>
                            <div class="mytableRow">
                                <p class="mytableRowLeft">关键字</p>
                                <p class="mytableRowRight">@Model.关键字</p>
                            </div>

                        </div>
                    </div>*@
                    <div class="mylist" style="padding-right:0">
                        <h4 style="font-size:15px">其他信息</h4>
                        <div id="panel" class="flex-column">
                            <div class="flex-cell flex-row">
                                <p class="flex-cell flex-row">产品</p>
                                <div class="flex-cell flex-row">@Model.产品名称</div>
                                <p class="flex-cell flex-row">版本</p>
                                <div class="flex-cell flex-row" style="overflow:hidden">@Model.版本号</div>
                            </div>
                            <div class="flex-cell flex-row">
                                <p class="flex-cell flex-row">来源</p>
                                <div class="flex-cell flex-row">@Model.来源</div>
                                <p class="flex-cell flex-row">问题性质</p>
                                <div class="flex-cell flex-row">@Model.问题性质</div>
                            </div>
                            <div class="flex-cell flex-row">
                                <p class="flex-cell flex-row">关键字</p>
                                <div class="flex-cell flex-row">@Model.关键字</div>
                                <p class="flex-cell flex-row">紧急程度</p>
                                <div class="flex-cell flex-row">@Model.紧急程度</div>
                            </div>
                            <div class="flex-cell flex-row">
                                <p class="flex-cell flex-row">当前处理人</p>
                                <div class="flex-cell flex-row">@Model.当前处理人</div>
                                <p class="flex-cell flex-row">当前环节</p>
                                <div class="flex-cell flex-row">@Model.当前环节</div>
                            </div>
                            <div class="flex-cell flex-row">
                                <p class="flex-cell flex-row">技术支持</p>
                                <div class="flex-cell flex-row">@Model.技术支持</div>
                                <p class="flex-cell flex-row">研发支持</p>
                                <div class="flex-cell flex-row">@Model.研发支持</div>
                            </div>
                            <div class="flex-cell flex-row">
                                <p class="flex-cell flex-row">是否解决</p>
                                <div class="flex-cell flex-row">@Model.是否解决</div>
                                <p class="flex-cell flex-row">是否终止</p>
                                <div class="flex-cell flex-row">@Model.终止说明</div>
                            </div>
                            <div class="flex-cell flex-row">
                                <p class="flex-cell flex-row flexSingle">渠道</p>
                                <div class="flex-cell flex-row">@Model.渠道名称</div>
                            </div>
                            <div class="flex-cell flex-row">
                                <p class="flex-cell flex-row flexSingle">项目</p>
                                <div class="flex-cell flex-row">@Model.项目名称</div>
                            </div>
                            <div class="flex-cell flex-row">
                                <p class="flex-cell flex-row flexSingle">机构</p>
                                <div class="flex-cell flex-row">@Model.机构名称</div>
                            </div>
                        </div>
                    </div>

                    </div>
                <div id="item2" class="mui-control-content">
                    <div id="Process" class="Process">
                        <div class="container" style="background-color:white;padding:5px">
                            <ul class="time-vertical">
                                <li v-for="ps in Process">
                                    <span class="ProblemIcon  time-vertical-span" v-bind:class="ps.图标"></span>
                                    <div class="Timeline-v-body">
                                        <h3>{{ps.处理状态}}</h3>
                                        <p style="margin:0">您的问题已进入【{{ps.问题环节}}】环节，操作人：{{ps.职务}}-{{ps.处理人员}}
                                            @*<a v-if="ps.联系电话" v-bind:href="'tel:'+ps.联系电话">【{{ps.联系电话}}】</a>*@
                                        </p>
                                        <p class="ProcessDetail" v-html="ps.描述" v-if="ps.描述" style="line-height:1.3">{{"描述："+ps.描述}}</p>
                                        <div v-if="ps.图片|| ps.文件" class="Fileflex">
                                            <img v-for="img in  ps.图片" data-preview-src='' data-preview-group='2' v-bind:src="img" style='width:50px;height:50px;padding:5px 5px 5px 0'>
                                            <a v-for="(flie,index) in ps.文件" v-on:click="GetFlie(flie)" style="padding:5px 5px 5px 0;color:#80b4fb;font-size:14px"><span class="mui-icon mui-icon-paperclip" style="font-size:33px"></span></a>
                                        </div>
                                        <p>{{ps.记录时间}}</p>
                                    </div>
                                </li>
                            </ul>

                        </div>
                    </div>
                </div>
                <div id="item3" class="mui-control-content">
                    <div id="MyCommunicate">
                        <h5 v-if="show" style='display:flex;flex-direction:column;justify-content:center;align-items:center;height:100px;font-size:15px  '>暂无沟通内容</h5>
                        <div v-for="cc in Communicate" class='mui-card'>
                            <div class='mui-card-header mui-card-media' style='height:100px ;'>
                                <img v-bind:src="cc.头像地址" style='border-radius: 80px; height: 50px; width: 50px;'>
                                <p style='float: right;'>{{cc.记录时间}}</p>
                                <div class='mui-media-body' style='margin-left: 60px'>
                                    <h4>{{cc.记录人}}</h4>
                                    <h5 style='margin-top:10px'>{{cc.沟通内容}}</h5>
                                    <h5 style='float:right;'>{{cc.职务}}</h5>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="mui-input-row" style="margin: 10px 5px;">
                        <textarea v-model="Content" style="font-size:14px" id="textarea" rows="5" placeholder="输入您的沟通内容"></textarea>
                        @*<button v-on:click="SubmitContent" type="button" class="mui-btn mui-btn-primary" style="width: 82px">提交</button>*@
                    </div>
                </div>
            </div>
        </div>
        <div id="Popover_1" class="mui-popover mui-bar-popover">
            <div v-if="@Model.撤销权限==1" v-on:click="DeleteProblem()" class="modify">
                <span class="mui-icon mui-icon-trash"></span>
                <div>撤销问题</div>
            </div>
            <div v-on:click="Modify()" v-if="@Model.修改权限==1" class="modify">
                <span class="mui-icon mui-icon-compose"></span>
                <div>修改问题</div>
            </div>
        </div>
    </div>
    <script >        type = "text/babel"
        //var banOffTop = $("#fex").offset().top;//获取到距离顶部的垂直距离
        //var scTop=0;//初始化垂直滚动的距离
        //$(document).scroll(function () {
        //  debugger
        //    scTop=$(this).scrollTop()+10;//获取到滚动条拉动的距离
        //    //console.log(scTop);查看滚动时，垂直方向上，滚动条滚动的距离
        //    if(scTop>=banOffTop){
        //        //核心部分：当滚动条拉动的距离大于等于导航栏距离顶部的距离时，添加指定的样式
        //        $("#fex").addClass("fixDiv");
        //    }else{
        //        $("#fex").removeClass("fixDiv");
        //    }

        //})
        var ID = '@ViewBag.ID';
        var Plan = `@Model.解决方案`;
        var Vison = `@Model.解决版本`;
        var AssginName = '@Model.指派人';
        var StopDeatil = `@Model.终止说明`;
        var ErginDeatil = `@Model.紧急描述`;
        var vm = new Vue({
            el: '#vue',
            data: {
                ///产品问题过程
                Process: [],
                //过程沟通
                Communicate: [],
                ///沟通内容
                Content: '',
                ///图片
                Image: [],
                Iscomp: '',
                ProblemStatus: {},
                show: false,
                Plan: Plan,
                Vison: Vison,
                AssginName: AssginName,
                StopDeatil: StopDeatil,
                ErginDeatil: ErginDeatil,
                CurrentDealDeatil: null,
                IsCommit:false
            },
            methods: {
                //获取产品问题过程
                GetProcess: function () {
                    var that = this;
                    $.post("/Problem/GetClc?ID=" + ID, {}, function (data) {
                        for (var fj of data) {
                            if (fj.附件) {
                                var img = [];
                                var file = [];
                                //全部附件
                                var All = fj.附件.split(',');
                                //判断单个附件类型
                                for(var s of All) {
                                ///如果为图片
                                    if (s.split('|')[1] == '1') {
                                        var ss = "/MobileProblem/ViewProblemImage/" + s.split('|')[0] + "?type=o"
                                        img.push(ss);
                                    }
                                        //如果为文件
                                    else {
                                        file.push(s.split('|')[0]);
                                    }
                                }
                                fj.图片 = img;
                                fj.文件 = file;

                            }
                        //转换图标
                            switch (fj.处理状态) {
                                case '登记': fj.图标 = "icon-xiangqing activeIcon"; break;
                                case '回退中': fj.图标 = "icon-icon28"; break;
                                case '已终止': fj.图标 = "icon-zhongzhi activeIcon"; break;
                                case '指派人员': fj.图标 = "icon-fenpei"; break;
                                case '向上提交': fj.图标 = "icon-submit"; break;
                                case '处理中': fj.图标 = "icon-shoulizhong"; break;
                                case '已完成': fj.图标 = "icon-queren activeIcon"; break;
                                case '已受理': fj.图标 = "icon-shoulizhong"; break;
                                case '取消受理': fj.图标 = "icon-icon28"; break;
                                case '撤销完成/终止': fj.图标 = "icon-icon28"; break;
                                case '验证确认': fj.图标 = "icon-queren activeIcon"; break;
                                default: fj.图标 = "icon-shoulizhong"
                            }
                        }
                        that.GetCurrentDealDeatil(data[0]);
                        that.Process = data;

                    })
                },
                GetCurrentDealDeatil:function (item) {
                    var d = item.处理状态;
                    if (item.描述 && (d == "回退中" || d == "指派人员" || d == "已终止" || d == "处理中" || d == "已完成")) {
                        this.CurrentDealDeatil = { 描述: item.描述, 图片: item.图片, 文件: item.文件 };
                    }
                },
                ///获取图片
                GetFileFormFTP: function () {
                    var that = this;
                    $.post("/MobileProblem/GetFileFormFTP/" + ID, {}, function (data) {
                        var File = {
                            图片: [],
                            附件:[]
                        };
                        for (var dd of data) {
                            if (dd.类型 == '1') {
                                File.图片.push("/MobileProblem/ViewProblemImage/" + dd.附件ID + "?type=o");
                            } else {
                                File.附件.push(dd.附件ID);
                            }
                        }
                        that.Image = File;
                    })
                },
                ///获取过程沟通
                GetCommunicate: function () {
                    var that = this;
                    this.show = false;
                    $.post("/MobileProblem/GetCommunicates/" + ID, {}, function (data) {
                        if (data.length > 0) {
                            that.Communicate = data;
                        }
                        else {
                            that.show = true;
                        }

                    })
                },
                ///提交过程沟通
                SubmitContent: function () {
                    var that = this;
                    if (!this.Content) {
                        mui.toast('请输入内容', { duration: 'long', type: 'div' });
                        return;
                    }
                    var param = {
                        WTID: ID,
                        GTNR: this.Content
                    }
                    $.post("/MobileProblem/SubmitContent", param, function (data) {
                        if (data.code == 200) {
                            mui.toast('提交成功', { duration: 'long', type: 'div' });
                            that.Content = '';
                            that.GetCommunicate();
                        } else {
                            mui.toast('提交失败', { duration: 'long', type: 'div' });
                        }
                    })
                },
                ToIcon: function () {

                    if ('@Model.是否解决' == "已解决") {
                        this.Iscomp = "icon-yijiejue3";
                    }
                    else {
                        this.Iscomp = "icon-weijiejue";
                    }
                    var Status = "@Model.最新状态";
                    if (Status == "1") {
                        this.ProblemStatus.icon = "icon-dengji";
                        this.ProblemStatus.text = "已登记";

                    } else if (Status == "2") {
                        this.ProblemStatus.icon = "icon-icon28";
                        this.ProblemStatus.text = "回退";
                    }
                    else if (Status == "3") {
                        this.ProblemStatus.icon = "icon-zhongzhi";
                        this.ProblemStatus.text = "已终止";
                    }
                    else if (Status == "4") {
                        this.ProblemStatus.icon = "icon-fenpei";
                        this.ProblemStatus.text = "  分配中 → " + this.AssginName;
                    }
                    else if (Status == "5") {
                        this.ProblemStatus.icon = "icon-submit";
                        this.ProblemStatus.text = "已提交";
                    }
                    else if (Status == "6") {
                        this.ProblemStatus.icon = "icon-shoulizhong";
                        this.ProblemStatus.text = "受理中";
                    }
                    else if (Status == "7") {
                        this.ProblemStatus.icon = "icon-queren";
                        this.ProblemStatus.text = "已完成";
                    }
                    else if (Status == "8") {
                        this.ProblemStatus.icon = "icon-chulizhong";
                        this.ProblemStatus.text = "已受理";
                    } else if (Status == "9") {
                        this.ProblemStatus.icon = "icon-icon28";
                        this.ProblemStatus.text = "取消受理";
                    } else if (Status == "10") {
                        this.ProblemStatus.icon = "icon-icon28";
                        this.ProblemStatus.text = "撤销完成/终止";
                    } else if (Status == "11") {
                        this.ProblemStatus.icon = "icon-queren";
                        this.ProblemStatus.text = "验证确认";
                    }

                },
                //获取过程附件
                GetFlie: function (ID) {
                    window.open('/MobileProblem/ViewProblemImage/' + ID);

                },
                Modify:function () {
                    window.location.href = '/MobileProblem/ModifyProblem/' + ID
                },
                Back:function (){
                    window.location.href = '/MobileProblem/QueryProblem'
                },
                DeleteProblem: function () {
                    var that = this;
                    mui.confirm('确定要撤销该问题吗?', '提示', ['否', '是'], function (e) {
                        if (e.index == 1) {
                            $.post("/Problem/Delete_Problem/" + ID, {}, function (data) {
                                if (data != 0) {
                                    mui.toast("撤销成功!", { duration: 'long', type: 'div' });
                                    mui.later(function () {
                                        window.location.href = '/MobileProblem/QueryProblem'
                                    }, 1000)
                                }
                                else {
                                    mui.toast("撤销失败!", { duration: 'long', type: 'div' });
                                }

                            })
                        }

                    })
                },
                FilterHtml:function (item) {
                    var arrEntities = { 'lt': '<', 'gt': '>', 'nbsp': ' ', 'amp': '&', 'quot': '"' };
                    item = item.replace(/<[^>]+>/g, "").replace(/&(lt|gt|nbsp|amp|quot);/ig, function (all, t) { return arrEntities[t]; });
                    return item;
                },
                ProblemRemark: function () {
                    window.location.href = '/MobileProblem/ProblemReamrk/' + ID;
                },
                getIsCommit: function () {
                    var that = this;
                    $.post("/MobileProblem/IsCommit/" + ID, function (data) {
                        if (data == '1') {
                            that.IsCommit = true;
                        }
                    })
                }
            },
            watch: {
                Process:function (val) {
                    this.$nextTick(() => {
                        //缩小html中的图片
                        var s = $(".ProcessDetail").find("img");
                        if (s) {
                            s.attr('data-preview-src', '');
                            s.attr('data-preview-group', '10');
                            s.css('height', 'auto');
                            s.css('width', '100px');
                        }
                    })

                },
                CurrentDealDeatil:function(val) {
                    this.$nextTick(() => {
                        //缩小html中的图片
                        var s = $("#CurrentDealDeatil").find("img");
                        if (s) {
                            s.attr('data-preview-src', '');
                            s.attr('data-preview-group', '9');
                            s.css('height', 'auto');
                            s.css('width', '100px');
                        }
                    })
                }
            },
            mounted: function () {
                mui.init();
                mui("#Popover_1").on('tap', '.modify', function (event) {
                    this.click();
                });
                mui.previewImage();
                this.getIsCommit();
                this.ToIcon();
                this.GetFileFormFTP();
                this.GetProcess();
                var t = $("#HtmlDeatil").find("img");
                if (t) {
                    t.attr('data-preview-src', '');
                    t.attr('data-preview-group', '9');
                }
            }
        })
    </script>