@{
    ViewBag.Title = "ProblemReamrk";
    Layout = "~/Views/MobileProblem/_APPMain.cshtml";
}
@model PMS.BusinessModels.MobileProblem.ProblemDetailModel
<link href="~/Content/Scripts/plugins/mui/css/mui.imageviewer.css" rel="stylesheet" />
@* 图 *@
<link href="~/Content/Style/MobileProductRegist/ProblemDeatail.css" rel="stylesheet" />
<script src="~/Content/Scripts/plugins/mui/js/webuploader.js?v=1.2"></script>
<script src="~/Content/Scripts/plugins/mui/js/PlusUploader.js?v=1.612"></script>
<script src="~/Content/Scripts/plugins/mui/js/feedback-icon.js"></script>
<script src="~/Content/Scripts/plugins/mui/js/mui.zoom.js"></script>
<script src="~/Content/Scripts/plugins/mui/js/mui.previewimage.js"></script>


<style>
    .UplodImg {
        display: flex;
        justify-content: space-between;
        flex-direction: row;
        align-content: center;
        padding: 7px 27px;
    }

    .filep {
        -webkit-line-clamp: 1;
        overflow: hidden;
        word-break: break-all;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        text-overflow: ellipsis;
        position: absolute;
        bottom: 12px;
        background-color: rgba(0, 0, 0, 0.6);
        font-size: 13px;
        color: white;
        width: 100px;
    }

    .destory {
        position: absolute;
        top: 0;
        right: -6px;
        width: 10px;
        height: 10px;
        font-size: 20px;
        color: #cc9a9a;
        margin-bottom: 11px;
        transition: color 0.2s ease-out;
        background-color: transparent;
        border: transparent;
    }

        .destory:after {
            content: '×';
            position: absolute;
            top: -10px;
            right: 5px;
        }

    .UplodImg {
        padding-left: 10px;
    }

    .scoreDivTop {
        display: flex;
        flex-direction: row;
        margin-top: 10px;
    }

    .scoreDiv {
        background-color: white;
        padding: 5px 10px;
        margin-top: 10px;
    }

        .scoreDiv img {
            height: 20px;
            margin-right: 10px;
        }

        .scoreDiv p {
            color: black;
            font-weight: 500;
        }

    .icon {
        width: 1em;
        height: 1em;
        vertical-align: -0.15em;
        fill: currentColor;
    }

    .scoreCotent {
        margin: 20px 0;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
    }

        .scoreCotent div {
            font-size: 14px;
            margin-right: 10px;
        }

        .scoreCotent svg {
            margin: 0 5px;
        }

    .mui-btn-success {
        border: 1px solid #00aaff;
        background-color: #00aaff;
    }

    .mylist {
        width: 100%;
        height: auto;
        background-color: white;
        padding: 0.6rem 1rem;
        margin-top: 0.3rem;
    }
</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" v-if="@Model.是否评价===0">
        <button v-on:click="Submit()" type="button" style="margin-top: 10px;border-radius: 10px;font-size:15px;margin:auto" class="mui-btn mui-btn-success mui-btn-block btn_2">提交</button>

    </nav>
    <div class="mui-content mui-scroll-wrapper" id="scr1">
        <div class="mui-scroll">

            <div id="item1" class="mui-control-content mui-active" style="overflow:hidden;">

                <div id="HtmlDeatil" class="mylist">
                    <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="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>
                </div>
            </div>

            <div v-if="@Model.是否评价===0">

                <div class="mui-input-row " style="font-size:14px;margin-top:10px">
                    <textarea v-model="detail" id="detail" rows="8" placeholder="请在这里填写您对此次服务的评价。" style="font-size:15px;margin-bottom:-10px"></textarea>
                    <span id="deatilSpeech" class="mui-icon  mui-icon-speech" style="position:absolute;bottom:4px;right:0;color: #999;"></span>
                </div>
                <div style="background-color:white;margin-top:10px">
                    <div class="UplodImg" id="pickImg">
                        <h4 style="font-weight:400">图片</h4>
                        <div>
                            <span class="mui-icon mui-icon-camera" id="pickCamera" style="color:#1296db;margin-right:20px;font-size:28px"></span>
                            <span class="mui-icon mui-icon-image" id="pickPhoto" style="color:#1296db"></span>
                        </div>
                    </div>
                    <ul id="ImgList" class="mui-table-view mui-grid-view mui-grid-9" style="background-color:white;border-color:transparent;margin:0"></ul>
                </div>
                <div style="display:none" id="picker">选择文件</div>
                <div style="display:none" id="picker2">选择文件</div>
                <button style="margin-top: 30px;display:none;" id="ctlBtn" class="btn btn-default">图片上传</button>
                <div class="scoreDiv">
                    <div class="scoreDivTop">
                        <img src="~/Content/Images/zllogo.png" />
                        <p>服务评分</p>
                    </div>
                    <div class="scoreCotent DealTime">
                        <div>处理速度 </div>
                        <svg core="1" class='icon' aria-hidden='true'><use v-bind:xlink:href="DealTime>=1?'#icon-pingjia2':'#icon-pingjia1'"></use></svg>
                        <svg core="2" class='icon' aria-hidden='true'><use v-bind:xlink:href="DealTime>=2?'#icon-pingjia2':'#icon-pingjia1'"></use></svg>
                        <svg core="3" class='icon' aria-hidden='true'><use v-bind:xlink:href="DealTime>=3?'#icon-pingjia2':'#icon-pingjia1'"></use></svg>
                        <svg core="4" class='icon' aria-hidden='true'><use v-bind:xlink:href="DealTime>=4?'#icon-pingjia2':'#icon-pingjia1'"></use></svg>
                        <svg core="5" class='icon' aria-hidden='true'><use v-bind:xlink:href="DealTime>=5?'#icon-pingjia2':'#icon-pingjia1'"></use></svg>
                        <div style="margin-left:10%">{{DealTime+'分'}}</div>
                    </div>
                    <div class="scoreCotent DealQuality">
                        <div>处理质量 </div>
                        <svg core="1" class='icon' aria-hidden='true'><use v-bind:xlink:href="DealQuality>=1?'#icon-pingjia2':'#icon-pingjia1'"></use></svg>
                        <svg core="2" class='icon' aria-hidden='true'><use v-bind:xlink:href="DealQuality>=2?'#icon-pingjia2':'#icon-pingjia1'"></use></svg>
                        <svg core="3" class='icon' aria-hidden='true'><use v-bind:xlink:href="DealQuality>=3?'#icon-pingjia2':'#icon-pingjia1'"></use></svg>
                        <svg core="4" class='icon' aria-hidden='true'><use v-bind:xlink:href="DealQuality>=4?'#icon-pingjia2':'#icon-pingjia1'"></use></svg>
                        <svg core="5" class='icon' aria-hidden='true'><use v-bind:xlink:href="DealQuality>=5?'#icon-pingjia2':'#icon-pingjia1'"></use></svg>
                        <div style="margin-left:10%">{{DealQuality+'分'}}</div>
                    </div>
                    <div class="scoreCotent DealAttitude">
                        <div>服务态度 </div>
                        <svg core="1" class='icon' aria-hidden='true'><use v-bind:xlink:href="DealAttitude>=1?'#icon-pingjia2':'#icon-pingjia1'"></use></svg>
                        <svg core="2" class='icon' aria-hidden='true'><use v-bind:xlink:href="DealAttitude>=2?'#icon-pingjia2':'#icon-pingjia1'"></use></svg>
                        <svg core="3" class='icon' aria-hidden='true'><use v-bind:xlink:href="DealAttitude>=3?'#icon-pingjia2':'#icon-pingjia1'"></use></svg>
                        <svg core="4" class='icon' aria-hidden='true'><use v-bind:xlink:href="DealAttitude>=4?'#icon-pingjia2':'#icon-pingjia1'"></use></svg>
                        <svg core="5" class='icon' aria-hidden='true'><use v-bind:xlink:href="DealAttitude>=5?'#icon-pingjia2':'#icon-pingjia1'"></use></svg>
                        <div style="margin-left:10%">{{DealAttitude+'分'}}</div>
                    </div>
                </div>
            </div>
            <div v-else>
                <div class="mylist">
                    <h4 style="font-size:15px">评价内容</h4>
                    <p style="font-size:13px" id="FileDealDeatil" v-html="detail">{{detail}}</p>

                    <div v-if="FileDealDeatilImg || FileDealDeatilFile" class="Fileflex">
                        <img v-for="item in FileDealDeatilImg" data-preview-src='' data-preview-group='3' v-bind:src="item" style='width:50px;height:50px;padding:5px 5px 5px 0'>
                        <a v-for="flie  in  FileDealDeatilFile" 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>
                </div>

                <div class="scoreDiv">
                    <div class="scoreDivTop">
                        <img src="~/Content/Images/zllogo.png" />
                        <p>服务评分</p>
                    </div>
                    <div class="scoreCotent DealTime">
                        <div>处理速度 </div>
                        <svg core="1" class='icon' aria-hidden='true'><use v-bind:xlink:href="DealTime>=1?'#icon-pingjia2':'#icon-pingjia1'"></use></svg>
                        <svg core="2" class='icon' aria-hidden='true'><use v-bind:xlink:href="DealTime>=2?'#icon-pingjia2':'#icon-pingjia1'"></use></svg>
                        <svg core="3" class='icon' aria-hidden='true'><use v-bind:xlink:href="DealTime>=3?'#icon-pingjia2':'#icon-pingjia1'"></use></svg>
                        <svg core="4" class='icon' aria-hidden='true'><use v-bind:xlink:href="DealTime>=4?'#icon-pingjia2':'#icon-pingjia1'"></use></svg>
                        <svg core="5" class='icon' aria-hidden='true'><use v-bind:xlink:href="DealTime>=5?'#icon-pingjia2':'#icon-pingjia1'"></use></svg>
                        <div style="margin-left:10%">{{DealTime+'分'}}</div>
                    </div>
                    <div class="scoreCotent DealQuality">
                        <div>处理质量 </div>
                        <svg core="1" class='icon' aria-hidden='true'><use v-bind:xlink:href="DealQuality>=1?'#icon-pingjia2':'#icon-pingjia1'"></use></svg>
                        <svg core="2" class='icon' aria-hidden='true'><use v-bind:xlink:href="DealQuality>=2?'#icon-pingjia2':'#icon-pingjia1'"></use></svg>
                        <svg core="3" class='icon' aria-hidden='true'><use v-bind:xlink:href="DealQuality>=3?'#icon-pingjia2':'#icon-pingjia1'"></use></svg>
                        <svg core="4" class='icon' aria-hidden='true'><use v-bind:xlink:href="DealQuality>=4?'#icon-pingjia2':'#icon-pingjia1'"></use></svg>
                        <svg core="5" class='icon' aria-hidden='true'><use v-bind:xlink:href="DealQuality>=5?'#icon-pingjia2':'#icon-pingjia1'"></use></svg>
                        <div style="margin-left:10%">{{DealQuality+'分'}}</div>
                    </div>
                    <div class="scoreCotent DealAttitude">
                        <div>服务态度 </div>
                        <svg core="1" class='icon' aria-hidden='true'><use v-bind:xlink:href="DealAttitude>=1?'#icon-pingjia2':'#icon-pingjia1'"></use></svg>
                        <svg core="2" class='icon' aria-hidden='true'><use v-bind:xlink:href="DealAttitude>=2?'#icon-pingjia2':'#icon-pingjia1'"></use></svg>
                        <svg core="3" class='icon' aria-hidden='true'><use v-bind:xlink:href="DealAttitude>=3?'#icon-pingjia2':'#icon-pingjia1'"></use></svg>
                        <svg core="4" class='icon' aria-hidden='true'><use v-bind:xlink:href="DealAttitude>=4?'#icon-pingjia2':'#icon-pingjia1'"></use></svg>
                        <svg core="5" class='icon' aria-hidden='true'><use v-bind:xlink:href="DealAttitude>=5?'#icon-pingjia2':'#icon-pingjia1'"></use></svg>
                        <div style="margin-left:10%">{{DealAttitude+'分'}}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    var IsPlus = mui.os.plus ? true : false;
        var ProblemID = '@ViewBag.ID';
        var isPJ=@Model.是否评价;
    var CommitID;
    var vm = new Vue({
        el: '#vue',
        data: {
            FivePlusUploder: null,
            DealTime: 5,
            DealQuality: 5,
            DealAttitude: 5,
            detail: '',
            CurrentDealDeatil: null,
            FileDealDeatilImg: null,
            FileDealDeatilFile: null,
        },
        methods: {
            init: function () {
                var that = this;
                mui.init();
                mui.previewImage();
                mui('.mui-scroll-wrapper').scroll();
                mui(".DealTime").on('tap', 'svg', function (event) {
                    if (isPJ == "0") {
                        var core = this.getAttribute('core');
                        that.DealTime = core;
                    }

                });
                mui(".DealQuality").on('tap', 'svg', function (event) {
                    if (isPJ == "0") {
                        var core = this.getAttribute('core');
                        that.DealQuality = core;
                    }
                });
                mui(".DealAttitude").on('tap', 'svg', function (event) {
                    if (isPJ == "0") {
                        var core = this.getAttribute('core');
                        that.DealAttitude = core;
                    }
                });
                mui.plusReady(function () {
                    document.getElementById('deatilSpeech').addEventListener('tap', function () {
                        plus.speech.startRecognize({
                            engine: 'baidu',
                            lang: 'zh-cn'
                        }, function (s) {
                            that.detail = s;
                        }, function (e) {
                            console.log('语音识别失败：' + JSON.stringify(e));
                        });
                    });

                });
                if (isPJ=="0")
                this.LoadUploder();

            },
            //获取产品问题过程
            GetProcess: function () {
                var that = this;
                $.post("/Problem/GetClc?ID=" + ProblemID, {}, 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;
                        }
                    }
                    that.GetCurrentDealDeatil(data[0]);

                })
            },
            GetCurrentDealDeatil(item) {
                var d = item.处理状态;
                if (item.描述 && (d == "回退中" || d == "指派人员" || d == "已终止" || d == "处理中" || d == "已完成")) {
                    this.CurrentDealDeatil = { 描述: item.描述, 图片: item.图片, 文件: item.文件 };
                }
            },
            //获取过程附件
            GetFlie: function (ID) {
                window.open('/MobileProblem/ViewProblemImage/' + ID);

            },

            ///获取评价内容
            GetEvaluationContent: function () {
                var that = this;
                $.post("/MobileProblem/GetEvaluationContent?ProblemID=" + ProblemID, {}, function (data) {
                    if (data.length > 0) {
                        var EvaluationContent = data[0]
                        that.detail = EvaluationContent.DEATIL;
                        that.DealTime = EvaluationContent.DEALTIME;
                        that.DealQuality = EvaluationContent.DEALQUALITY;
                        that.DealAttitude = EvaluationContent.DEALATTITUDE;
                        that.GetEvaluation(EvaluationContent.ID);

                    }


                })

            },
            //评价附件
            GetEvaluation: function (ID) {
                var that = this;
                $.post("/MobileProblem/GetEvaluationFile?ID=" + ID, {}, function (data) {
                    var img = [];
                    var file = [];
                    for (var fj of data) {

                            ///如果为图片
                        if (fj.附件类型== '1') {
                            var ss = "/MobileProblem/ViewProblemImage/" + fj.附件ID + "?type=o"
                                img.push(ss);
                            }
                            //如果为文件
                            else {
                            file.push(fj.附件ID);
                            }
                    }
                    that.FileDealDeatilImg = img;
                    that.FileDealDeatilFile = file;

                })
            },

            ///初始化图片上传插件
            ImagUploaderInit: function () {
                var that = this;
                var $list = $("#ImgList");
                var $btn = $("#ctlBtn");
                var thumbnailWidth = 100;
                var thumbnailHeight = 100;
                var uploader = WebUploader.create({
                    // 选完文件后，是否自动上传。
                    auto: false,
                    // swf文件路径
                    swf: '/Content/Scripts/plugins/mui/js/Uploader.swf',
                    // 文件接收服务端。
                    server: '/MobileProblem/CommitUpload',
                    // 选择文件的按钮。可选。
                    // 内部根据当前运行是创建，可能是input元素，也可能是flash.
                    pick: '#picker2',
                    compress: {
                        width: 1600,
                        height: 1600,
                        // 图片质量，只有type为`image/jpeg`的时候才有效。
                        quality: 90,
                        // 是否允许放大，如果想要生成小图的时候不失真，此选项应该设置为false.
                        allowMagnify: false,
                        // 是否允许裁剪。
                        crop: false,
                        // 是否保留头部meta信息。
                        preserveHeaders: true,
                        // 如果发现压缩后文件大小比原来还大，则使用原来图片
                        // 此属性可能会影响图片自动纠正功能
                        noCompressIfLarger: false,
                        // 单位字节，如果图片大小小于此值，不会采用压缩。
                        compressSize: 0
                    }
                });
                uploader.on('fileQueued', function (file) {
                    var $li = $('<li id="' + file.id + '" class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><img > <button class="destory" ></button><p class="filep">' + file.name + '</p> </li>'),
                        $img = $li.find('img'); // $list为容器jQuery实例
                    $list.append($li);


                    $("#" + file.id).children(".destory").click(function () {
                        uploader.removeFile(file);
                        $("#" + file.id).remove();
                    }); // 创建缩略图
                    // 如果为非图片文件，可以不用调用此方法。
                    // thumbnailWidth x thumbnailHeight 为 100 x 100

                    uploader.makeThumb(file, function (error, src) {
                        if (error) {
                            $img.replaceWith('<span>不能预览</span>');
                            return;
                        }

                        $img.attr('src', src);
                    }, thumbnailWidth, thumbnailHeight);
                }); // 文件上传成功，给item添加成功class, 用样式标记上传成功。

                uploader.on('uploadSuccess', function (file, response) {
                    $('#' + file.id).addClass('upload-state-done');
                    if (response.code = "200") {

                    }
                }); // 文件上传失败，显示上传出错。

                uploader.on('uploadError', function (file) {
                    var $li = $('#' + file.id),
                        $error = $li.find('div.error'); // 避免重复创建

                    if (!$error.length) {
                        $error = $('<div class="error"></div>').appendTo($li);
                    }

                    $error.text('上传失败');
                }); // 完成上传完了，成功或者失败，先删除进度条。

                uploader.on('uploadComplete', function (file) {
                    $('#' + file.id).find('.progress').remove();
                });
                uploader.on('uploadFinished', function () {

                    if (IsPlus) {
                        that.FivePlusUploder.uplodNew(CommitID, function (data) {
                            if (data.code==200) {
                                plus.nativeUI.alert("评论成功!", function (e) {
                                    mui.back();
                                }, "提示", "好");
                            } else {
                                plus.nativeUI.toast("图片提交失败，请联系管理员！");
                                mui.back();
                            }
                        });
                    } else {
                        mui.alert("评论成功!", "提示", "确定", function () {
                            mui.back();
                        }, 'div');
                    }
                });
                $btn.on('click', function () {
                    uploader.options.formData.ID = CommitID;
                    uploader.upload();
                });

                if (!IsPlus) {
                    document.getElementById('pickImg').addEventListener('tap', function () {
                        $("#picker").find('.webuploader-element-invisible').click();
                    });
                }
                uploader.addButton({
                    id: '#picker',
                    innerHTML: '选择文件',
                    accept: {
                        title: 'Images',
                        extensions: 'gif,jpg,jpeg,bmp,png',
                        mimeTypes: 'image/*'
                    },
                    capture: 'camera'
                });
            },
            LoadUploder: function () {
                this.ImagUploaderInit();
                if (IsPlus) {
                    this.FivePlusUploder = new FivePlus({ customUrl: "MobileProblem/CommitUpload" });
                } else {
                    $('#deatilSpeech').remove();
                }
            },
            Submit: function () {
                var that = this;
                var param = {
                    Deatil: that.detail,
                    DealTime: that.DealTime,
                    DealQuality: that.DealQuality,
                    DealAttitude: that.DealAttitude,
                    ProblemId: ProblemID
                }
                if (!this.detail) {
                   // mui.toast('请填写您的评价', {
                   //     duration: 'long',
                   //     type: 'div'
                   // });
                   //return
                }
                var lod = mui.showLoading("正在提交，请稍后...", "div");
                $.post("/MobileProblem/ProblemReamrkSubmit", param, function (data) {
                    mui.hideLoading(lod);
                    if (data.Code == '200') {
                        CommitID = data.CommentsId;
                        if (IsPlus) {
                            var lod2 = mui.showLoading("正在提交，请稍后...", "div");
                            that.FivePlusUploder.uplodNew(CommitID, function (data) {
                                mui.hideLoading(lod2);
                                if (data) {
                                    plus.nativeUI.alert("评论成功!", function (e) {
                                        mui.back();
                                    }, "提示", "好");
                                } else {
                                    plus.nativeUI.toast("图片提交失败，请联系管理员！");
                                    mui.back();
                                }
                            });
                        } else {
                            $("#ctlBtn").click();
                        }

                    } else {
                        mui.toast('数据异常，请重新填写', {
                            duration: 'long',
                            type: 'div'
                        });
                        return false;
                    }
                })
            }
        },
        watch: {
            CurrentDealDeatil(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');
                    }
                    //缩小html中的图片
                    //var s1 = $("#FileDealDeatil").find("img");
                    //if (s1) {
                    //    s1.attr('data-preview-src', '');
                    //    s1.attr('data-preview-group', '9');
                    //    s1.css('height', 'auto');
                    //    s1.css('width', '100px');
                    //}
                })
            },


        },
        mounted: function () {

            this.init();
            this.GetProcess();
            this.GetEvaluationContent();//获取评价内容
        }
    })
</script>