@extends('layouts.base')
@section('title', '工单详情')
@section('content')
<style>
.content{
    background: #eff3f6;
    padding: 10px!important;
}
    .el-textarea__inner {
        height: 218px;
    }

    .el-upload__input {
        opacity: 0;
        width: 0;
    }
    .bigJian{
    }
    #textarea{
        border: 1px solid #ccc;
        padding: 10px;
        width:1113px;
        min-height: 218px;
        height:100%;
        overflow: hidden;
    }
    .img_grop{
        /* position: absolute; */
        /* top: 50%; */
        /* left: 50%; */
        /* transform: translate(-50%,-50%); */
    }
    .img_grop img{
        width: 100%;
        height: 100%;
    }
    .el-dialog{
        background: rgba(255,255,255,.1);
    }
    .vue-crumbs a {
    color: #333;
    }
    .vue-crumbs a:hover {
    color: #29ba9c;
    }
    .vue-crumbs {
    margin: 0 20px;
    font-size: 14px;
    color: #333;
    font-weight: 400;
    padding-bottom: 10px;
    line-height: 32px;
    }
    .workOrder-detail .block{
    padding:10px;
    background-color:#fff;
    border-radius: 8px;
}
.workOrder-detail .title{
    font-size:18px;
 
    display:flex;
    align-items:center;
}
.confirm-btn{
            width: calc(100% - 266px);
            position:fixed;
            bottom:0;
            right:0;
            margin-right:10px;
            line-height:63px;
            background-color: #ffffff;
            box-shadow: 0px 8px 23px 1px
            rgba(51, 51, 51, 0.3);
            background-color:#fff;
            text-align:center;
        }
b{
    font-size:14px;
}
.el-form-item{
    margin-bottom:0;
}
</style>
<!-- <div style="margin-left:20px;">我的工单</div> -->
<div id="app">
    <div class="vue-crumbs">    
                <a @click="goBack">系统</a> > 工单管理  >  工单详情
    </div>
    <template>
        <div class="workOrder-detail" style="background-color:#fff;">
            <div class="block">
            <div class="title"><span style="width: 4px;height: 18px;background-color: #29ba9c;margin-right:15px;display:inline-block;"></span><b>基本信息</b></div>
                <el-form ref="first_list" :model="first_list"  label-width="15%" >
                    <el-form-item label="工单状态：" v-if="!isempty(first_list.work_order_sn)">
                        <span v-text="first_list.status_name"></span>
                    </el-form-item>
                    <el-form-item label="工单编号：" v-if="!isempty(first_list.work_order_sn)">
                        <span v-text="first_list.work_order_sn"></span>
                    </el-form-item>
                    <el-form-item label="工单分类： " v-if="!isempty(first_list.status)">
                        <span v-if="first_list.category_id==1">bug提交</span>
                        <span v-if="first_list.category_id==2">优化建议</span>
                        <span v-if="first_list.category_id==3">开发需求</span>
                        <span v-if="first_list.category_id==4">其他</span>
                    </el-form-item>
                    <el-form-item label="提交时间：" v-if="!isempty(first_list.created_at)">
                        <span v-text="first_list.created_at"></span>
                    </el-form-item>
                    <el-form-item label="受理时间：" v-if="!isempty(first_list.completion_time)">
                        <span v-text="first_list.completion_time"></span>
                    </el-form-item>
                    <el-form-item label="完成时间：" v-if="!isempty(first_list.updated_at)">
                        <span v-text="first_list.updated_at"></span>
                    </el-form-item>
                    <el-form-item label="处理时长：" v-if="!isempty(first_list.difference)">
                        <span  v-text="first_list.difference"></span>
                    </el-form-item>
                </el-form>
            </div>
            <div style="background: #eff3f6;width:100%;height:15px;"></div>
            <div class="block">
            <div class="title"><span style="width: 4px;height: 18px;background-color: #29ba9c;margin-right:15px;display:inline-block;"></span><b>工单信息</b></div>
                <el-form ref="first_list" :model="first_list"  label-width="15%" >
                    <el-form-item label="站点：">
                        <span v-text="first_list.domain"></span>
                    </el-form-item>
                    <el-form-item label="问题标题：" >
                        <span v-text="first_list.question_title">
                    </el-form-item>
                    <!-- <el-form-item label="问题描述：" >
                        清晰的描述问题产生的操作流程，问题结果，期望的正确结果；
                        如果是涉及到分销佣金、分红、返现等模式计算，要清晰的讲解设置、会员关系、正确的结算结果、错误的计算结果等；<br>
                        如果您觉得下方编辑框操作麻烦可使用附件上传按钮 直接上传Word、excel等说明文档。
                    </el-form-item> -->
                    <el-form-item label="问题描述：" >
                    <el-input show-word-limit style="overflow:hidden;width:60%;" type="textarea" disabled v-html="first_list.question_describe" placeholder=""></el-input>
                    </el-form-item>
                    <el-form-item label=" " >
                        <div class="imgInfo" style="border:1px solid rgba(187, 187, 187, 1);width:989px;display:flex;align-items:center;flex-wrap:wrap;">
                            <div  v-for="(item,index) in first_list.thumb_url"  style="padding: 10px;display: inline-block;width: 200px;display:flex;align-items:center;justify-content:center;flex-direction:column;">
                                <img v-if="item.indexOf('xlsx')!=-1" style="width:50px;height:50px;" src="{!! resource_get('static/images/icon/xlsx.png') !!}" alt="">
                                <img v-if="item.indexOf('docx')!=-1||item.indexOf('doc')!=-1" style="width:50px;height:50px;" src="{!! resource_get('static/images/icon/word.png') !!}" alt="">
                                <img v-if="item.indexOf('mp4')!=-1" style="width:50px;height:50px;" src="{!! resource_get('static/images/icon/mp4.png') !!}" alt="">
                                <img v-if="item.indexOf('mp3')!=-1" style="width:50px;height:50px;" src="{!! resource_get('static/images/icon/mp3.png') !!}" alt="">
                                <img v-if="item.indexOf('zip')!=-1" style="width:50px;height:50px;" src="{!! resource_get('static/images/icon/zip.png') !!}" alt="">
                                <img v-if="item.indexOf('txt')!=-1" style="width:50px;height:50px;" src="{!! resource_get('static/images/icon/txt.png') !!}" alt="">
                                <img  v-if="item.indexOf('png')!=-1||item.indexOf('jpeg')!=-1||item.indexOf('jpg')!=-1" @click="tapFimg(item)" :src="item" alt="" style="width:146px;height:129px;margin:12px 8px 24px 15px;">
                                <div v-if="!item.show"  v-text="" style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis;" ></div>
                                <img v-if="item.indexOf('png') == -1 || item.indexOf('jpeg') == -1 ||item.indexOf('jpg') == -1 " style="width:20px;height:20px;cursor:pointer;margin-top:20px;"  src="{!! resource_get('static/images/icon/down.png') !!}"  @click="gotoTxt(item)" alt="">
                            </div>
                        </div>
                    </el-form-item>
                </el-form> 
            </div>
            <div style="background: #eff3f6;width:100%;height:15px;"></div>
            <div class="block">
            <div class="title"><span style="width: 4px;height: 18px;background-color: #29ba9c;margin-right:15px;display:inline-block;"></span><b>沟通记录</b></div>
            <div class="info" v-if="first_list.has_many_comment.length>0" >
               
               <div class="imgBox" style="padding-left:15%;" >
               <div style="margin-bottom:10px;" v-for="(item,index) in first_list.has_many_comment ">
                   <div  v-text="item.created_at" style="margin-right:20px;vertical-align: top;"></div>
                   <div v-if="item.user_id!=0" style="font-weight:800;margin: 20px 0;vertical-align: top;">
                       售后人员：
                   </div>
                   <div style="font-weight:800;margin: 20px 0;vertical-align: top;" v-if="item.user_id==0">
                       用户回复：
                   </div>
                   
                   <!-- <span v-text="item.content"></span> -->
                   <el-input v-model="item.content" type="textarea" style="width:989px;margin:10px 0" readonly="readonly"></el-input> 
                   <div v-if="item.imgData.length>0" class="imgInfo" style="border:1px solid rgba(187, 187, 187, 1);width:989px;display:flex;align-items:center;flex-wrap:wrap;">
                   <div  v-for="(item,index) in item.imgData"  style="padding: 10px;width: 200px;height:200px;display:flex;align-items:center;justify-content:center;flex-direction:column;">
                       <img v-if="!item.imgShow&&item.val.indexOf('xlsx')!=-1" style="width:50px;height:50px;" src="{!! resource_get('static/images/icon/xlsx.png') !!}" alt="">
                       <img v-if="item.val.indexOf('docx')!=-1||item.val.indexOf('doc')!=-1" style="width:50px;height:50px;" src="{!! resource_get('static/images/icon/word.png') !!}" alt="">
                       <img v-if="item.val.indexOf('mp4')!=-1" style="width:50px;height:50px;" src="{!! resource_get('static/images/icon/mp4.png') !!}" alt="">
                       <img v-if="item.val.indexOf('mp3')!=-1" style="width:50px;height:50px;" src="{!! resource_get('static/images/icon/mp3.png') !!}" alt="">
                       <img v-if="item.val.indexOf('zip')!=-1" style="width:50px;height:50px;" src="{!! resource_get('static/images/icon/zip.png') !!}" alt="">
                       <img v-if="item.val.indexOf('txt')!=-1" style="width:50px;height:50px;" src="{!! resource_get('static/images/icon/txt.png') !!}" alt="">
                       <img v-if="item.defaultshow" style="width:50px;height:50px;" src="{!! resource_get('static/images/icon/defailt.png') !!}" alt="">
                       <div v-if="!item.show"  v-text="" style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis;" ></div>
                       <!-- <div v-if="!item.show" style="margin-left: 20px;"  class="txt_title"  >( 下载 )</div> -->
                       <img v-if="!item.show" style="width:20px;height:20px;cursor:pointer;margin-top:20px;" src="{!! resource_get('static/images/icon/down.png') !!}"  @click="gotoTxt(item.val)" alt="">
                       <img   v-if="item.show"    @click="tapFimg(item.val)" :src="item.val" alt="" style="width:146px;height:129px;margin:12px 8px 24px 15px;">
                   </div>
                   </div>
                   <br>
                    </div>
                   </div>
               </div>
               </div>
                <!-- 弹出大的图片   -->
                <el-dialog
                   :visible.sync="dialogVisible"
                   :show-close="false"

                  top="20%"
                   >
                   <div style="" class="img_grop" v-if="dialogVisible">
                   <img :src="thumb_url" id="thumb_url" alt="" @load="onLoad">
                    </div>
                   </el-dialog>

                   <div style="background: #eff3f6;width:100%;height:15px;"></div>
                <!-- 弹出大的图片   -->
                   <div class="block" style="padding-bottom:70px;">
                    <div class="title"><span style="width: 4px;height: 18px;background-color: #29ba9c;margin-right:15px;display:inline-block;"></span><b>追加说明</b></div>
                        <div>
                        <div class="bigJian" style="padding-left:15%;">
                        <div contentEditable="true" ref="textarea"   id="textarea" >
                        </div>
                        </div>
                       
                        <!-- <p style="margin-top:10px;padding-left:10%;">点击上传图片 选中输入框可直接粘贴QQ截图</p> -->
                        <div class="upImg" style="width: 989px;height:152px;padding-left:15%;">
                    <el-upload
                        class="upload-demo"
                        action="{!!yzWebFullUrl('setting.work-order.upload-file')!!}"
                        :on-success="onSuccess"
                        :before-upload="beforeUpload"
                        :on-remove="handleRemove"
                        :auto-upload="true"
                        multiple
                        :limit="6"
                        :on-exceed="exceed"
                      
                    
                        >
                       
                        <el-button size="small" type="primary"  style="margin-top:20px;">点击上传文件/图片</el-button>
                        <!-- <P class="text" style="margin-top:10px;padding-left:10%;">文件大小不能超过20M</P> -->
                    </el-upload>
                        </div>
                        <br/>
                        <div >
                       
                        </div>
                    </div>
                </div>
            </div>
            <div class="confirm-btn">
            <el-button type="primary" @click="detailCate">提交</el-button>
            </div>
        </div>
    </template>
</div>
<script src="{{resource_get('static/yunshop/tinymce4.7.5/tinymce.min.js')}}"></script>
<script src="{{resource_get('static/yunshop/tinymceTemplate.js')}}"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data() {
            let data={!! $data !!};
            console.log(data,'详情数据');
            if ( data.has_many_comment.length>0) {
                data.has_many_comment.map(item=>{
                 let data=[];
                 for(key in  item.thumb_url){
                     if (item.thumb_url[key]!=null) {
                        data.push(item.thumb_url[key])
                     }

                 }
                 item.imgData=data;

                 item.imgData.map((val,i)=>{
                       if(item.imgData[i].indexOf('png')!=-1||item.imgData[i].indexOf('jpg')!=-1){
                        let json={}
                         json.val=item.imgData[i];
                         json.show=true;
                         item.imgData[i]=json

                      }else if(item.imgData[i].indexOf('png')==-1&&item.imgData[i].indexOf('jpg')==-1&&item.imgData[i].indexOf('mp4')==-1&&item.imgData[i].indexOf('txt')==-1&&item.imgData[i].indexOf('zip')==-1&&item.imgData[i].indexOf('xlsx')==-1&&item.imgData[i].indexOf('docx')==-1){
                        let json={}
                         json.val=item.imgData[i];
                         json.defaultshow=true;
                         item.imgData[i]=json
                      }
                      else{
                        let json={}
                         json.val=item.imgData[i];
                         json.show=false;
                         item.imgData[i]=json
                      }
                 })
                })
            }
            return {
                site_url: 'www.wq.com',
                question_title: '',
                question_describe: '',
                first_list: data,
                dialogImageUrl: '',
                dialogVisible: false,
                disabled: false,
                domin: 'http://gy18465381.imwork.net',
                detailInfo: '', //留意信息
                category_id:'',//分类id
                work_order_id:'',//工单id
                fileList:[],//上传图片数组
                thumb_url:'',//放大的图片1
                thumb_urltwo:'',//放大的图片2
                fileListShop:[],//截图数组
                dialogVisible:false,//弹框
            }
        },
          computed: {

          },
        created() {
        },
        mounted() {

            this.paseImg()
        },
        methods: {
            onLoad(e){
                const img = e.target;
                let width = 0;
                if (img.fileSize > 0 || (img.width > 1 && img.height > 1)) {
                    width = img.width + 40;
                }
                this.width = width + 'px';
            },
            goBack() {
                window.location.href = `{!! yzWebFullUrl('setting.shop.index1') !!}`;
            },
            // paseTra(e){
            //     this.fileListShop.splice(this.fileListShop.length-1,1);
            // },
            isempty(str){
                if ((str == null) || (str == '') || (str == undefined)) {
                        return true
                    } else {
                        return false
                    }
            },
            // 点击图片放大
            tapFimg(item){
                this.dialogVisible=true;
                this.thumb_url=item;
            },
            // 超出个数函数
            exceed(files, fileList){
                this.$message.error('上传个数已超出')
                console.log('超出了');

            },
             // 上传成功的
             onSuccess(res, file, fileList) {
                console.log(res, file, fileList, '东西啊啊');
                if (res.result == 1) {
                    this.fileList.push(res.data.thumb_url);
                    this.$message.success('上传成功')
                } else {
                    this.$message.error(res.msg)
                }

            },
            // 添加说明
            detailCate() {
                      this.detailInfo=this.$refs.textarea.innerText;
                if (this.detailInfo == ''&&this.fileListShop.length==0) {
                    this.$message.error('请输入追加信息')
                    return;
                }
                this.fileListShop.map(key=>{
                    this.fileList.push(key)
                })
                let url = window.location.href;
                url = url.split('?')
                url = url[url.length - 1].split('&')
                let id;
                url.map((item, index) => {
                    if (index == url.length - 1) {
                        id = item.split('=')
                    }
                })
                id = id[1]
                this.work_order_id=id;

                let data={
                    work_order_id:this.work_order_id,
                    content:this.detailInfo,
                    thumb_url:this.fileList,
                    work_order:1
                }
                this.$http.post('{!!yzWebFullUrl('setting.work-order.comment')!!}',data).then(res=>{
                    res=res.body;
                    if (res.result==1) {
                        this.$message.success(res.msg);
                        window.location.href = "{!! yzWebFullUrl('setting.work-order.index') !!}";
                    }else{
                        this.$message.error(res.msg);
                    }
                })

            },
            handleRemove(file, fileList) {
        console.log(file, fileList);
        this.fileList.map((item,index)=>{
            if (item==file.response.data.thumb_url) {
                delete this.fileList[index]
            }
        })
        console.log(this.fileList,'上传的数组');

      },
            beforeUpload(file){
                 console.log(file,'上传之前的操作');
                    const isLt20M = file.size / 1024 / 1024 < 20;
                      if (!isLt20M) {
                        this.$message({
                        message: '上传文件大小不能超过 20MB!',
                        type: 'warning'
                    });
                    return false
                      }
            },
            paseImg() {
                      let that=this;

                    var imgReader = function(item) {
                        var blob = item.getAsFile(),
                            reader = new FileReader();

                        // 读取文件后将其显示在网页中
                        reader.onload = function(e) {
                            let data=new FormData();
                            data.append('file',e.target.result)
                             that.$http.post('{!!yzWebFullUrl('setting.work-order.base64Upload')!!}',data,{headers: { "Content-Type": "multipart/form-data" }}).then(res=>{
                                 res=res.body;
                                 if (res.result==1) {
                                     that.$message.success('上传成功');
                                     var img = new Image();
                                    img.width=146;
                                    img.height=129;
                                    img.src = res.data.thumb_url;
                                    that.fileListShop.push(res.data.thumb_url)
                                    console.log(that.fileListShop)
                                    var box=document.getElementById('textarea')
                                    box.appendChild(img);
                                 }else{
                                    that.$message.error(res.msg);
                                 }
                             })



                        };
                        // 读取文件
                        reader.readAsDataURL(blob);
                    };
                    document.getElementById('textarea').addEventListener('paste', function(e) {
                        // 添加到事件对象中的访问系统剪贴板的接口
                        var clipboardData = e.clipboardData,
                            i = 0,
                            items, item, types;

                        if (clipboardData) {
                            items = clipboardData.items;
                            if (!items) {
                                return;
                            }
                            item = items[0];
                            // 保存在剪贴板中的数据类型
                            types = clipboardData.types || [];
                            for (; i < types.length; i++) {
                                if (types[i] === 'Files') {
                                    item = items[i];
                                    break;
                                }
                            }
                            // 判断是否为图片数据
                            if (item && item.kind === 'file' && item.type.match(/^image\//i)) {

                                imgReader(item);
                            }
                        }
                    });

            },
            // 跳转txt文件
            gotoTxt(filename) {
                let text ="hello word!"
        var pom = document.createElement("a");
        pom.setAttribute(
            "href",
            filename
          );
          pom.setAttribute("download", filename);
          if (document.createEvent) {
            var event = document.createEvent("MouseEvents");
            event.initEvent("click", true, true);
            pom.dispatchEvent(event);
          } else {
            pom.click();
          }
    },
        },
    })
</script>
@endsection