<template>
  <div class="main" v-loading="helpDetailsLoading">
    <!-- 帮助中心后台跳工单详情页面 -->
 
    <div>
      <!-- 工单详情 -->
      <el-row type="flex" justify="end">
        <el-col class="orderDetails">
          <h3>{{$t(`help.processing`)}}</h3>
          <el-col :span="8"> 
            <p>
              <span class="orderTitle">{{$t(`help.orderNumber`)}}:</span>
              <span class="orderContent">{{ticketDetails.id}}</span>
            </p>
          </el-col>
          <el-col :span="8">
            <p>
             <span class="orderTitle">{{$t(`help.problem`)}}:</span>
              <span class="orderContent">{{ticketDetails.type}}</span>
            </p>
          </el-col>
          <!-- <el-col :span="8">
            <p>
               <span class="orderTitle">{{$t(`help.problemTitle`)}}:</span
              ><span class="orderContent">{{ticketDetails.title}}</span>
            </p>
          </el-col> -->
          <el-row>
            <el-col :span="8">
                <!-- 提交用户名 -->
              <p>
                <span class="orderTitle">{{$t(`help.submitName`)}}:</span
                ><span class="orderContent">{{ticketDetails.userName}}</span>
              </p>
            </el-col>
            <el-col :span="8">
              <!-- 提交时间 -->
              <p>
                <span class="orderTitle">{{$t(`help.submissionTime`)}}:</span
                ><span class="orderContent">{{ticketDetails.submitTime}}</span>
              </p>
            </el-col>
            <el-col :span="8">
                <!-- 处理状态 -->
              <p>
                <span class="orderTitle"> {{$t(`help.dealWith`)}}:</span
                ><span class="orderContent">{{ticketDetails.status}}</span>
              </p>
            </el-col>
          </el-row>
        </el-col>     
      </el-row>
      <!-- 问题标题 -->
      <el-row>
          <el-col>
            <h4> {{$t(`help.problemTitle`)}}:</h4>
            <p style="border: 1px solid rgba(0, 0, 0, 0.1); padding: 5px 10px;">{{ticketDetails.title}}</p>
          </el-col>
        </el-row>


        <!-- 提交内容 回复内容 记录 -->
      <h4> {{$t(`help.submitContent`)}}:</h4>
      <div class="submitContent" v-for="item in ticketDetails.list" :key="item.id">       
         <el-row>
          <div>
          <div class="submitTitle"><span>{{$t(`help.account`)}}: {{item.name}}</span> <span>{{$t(`help.time`)}}: {{ handelTime(item.time)}}</span>  </div>
                                                                                     
          <div  class="contentBox"><span>{{item.content}}</span></div> 
            <!-- 下载附件 -->  
          <span  @click="downloadExcel(item.files)" class="downloadBox">{{$t(`help.download`)}}</span>
          </div> 
        </el-row>
      </div>    
        <!-- 审核内容 -->
          <div class="auditBox" v-if="auditList">
            <h4>{{$t(`help.AuditContent`)}}</h4>
            <div class="submitTitle"><span>{{$t(`help.account`)}}: {{auditList.name}} </span> <span>{{$t(`help.time`)}}: {{handelTime(auditList.time)}}</span>  </div>                                                                                    
            <div  class="contentBox"><span>{{auditList.content}}</span></div>
          
          </div>

      <!-- 继续提交  审核人员不可见-->
        <section v-show="ticketDetails.status !==`撤回` && ticketDetails.status !==`已关闭` &&ticketDetails.status !==`待审核` &&ticketDetails.status !==`审核完成`"> <!--关闭案件和撤回案件 不能继续提交编辑-->
      <el-row v-show="identity.roleKey !== `verifier`">
        <el-col>
          <h4>{{$t(`help.Continue`)}}:</h4>
          <el-input
            type="textarea"
            :placeholder="$t(`help.inputContent`)"
            v-model="paramsResponTicket.respon"
            resize="none"
            :autosize="{ minRows: 2, maxRows: 10 }"
          >
          </el-input>
        </el-col>
      </el-row>
      <el-form>
        <!-- 附件 审核人员不可见-->
        <div   v-show="identity.roleKey !== `verifier`&&ticketDetails.status !==`待审核` &&ticketDetails.status !==`审核完成` && ticketDetails.id">
        <el-form-item>
            <div style="width: 100%">
              {{ $t("login.attachment") }}
            </div>
            <!-- <el-tooltip class="item" effect="dark" :content="tag.name" placement="top-start" v-for="(tag,index) in fileList" :key="index">
		        <el-tag style="margin-right:10px;display:flex;" :disable-transitions="false" @close="handleClose(index)" closable  @click="downloadFile(tag)"><i class="el-icon-paperclip"></i><span class="tagtext">{{tag.name}}</span></el-tag>
	          </el-tooltip> -->
              <!-- action="https://jsonplaceholder.typicode.com/posts/" -->
            <el-upload
              class="upload-demo"
              ref="upload"
              action
              drag            
              multiple
              :limit="fileLimit"           
              :on-exceed="handleExceed"
              :on-remove="handleRemove"
              :before-upload="beforeUpload"
              :file-list="fileList"
              :on-change="handelChange" 
              show-file-list
              :auto-upload="false"
            >
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">
                {{ $t("login.Upload") }}<em> {{ $t("login.Upload1") }}</em>
              </div>
          
            </el-upload>
          </el-form-item>
        <!-- 提交回复  请求审核-->
       <el-button v-show="  ticketDetails.status !==`待审核` &&ticketDetails.status !==`审核完成` && ticketDetails.id " type="warning" style="width: 150px" @click="handelResponTicket">{{$t(`help.submitReply`)}}</el-button>
        <el-button type="warning" v-show="ticketDetails.status !==`待审核` &&ticketDetails.status !==`审核完成` && ticketDetails.id " style="width: 150px" @click="handelSubmitAuditTicket">{{$t(`help.requestReview`)}}</el-button>
  
        </div>
        
        <!-- 审核人才有权限查看  在有请求审核的情况才会显示-->
         <!-- v-show="identity.roleKey == `verifier`" -->
        <div  >
     
          <!-- 审核意见框 审核人员可见 并且在待审核订单才显示  -->
          <div  v-show="ticketDetails.status ==`待审核` && identity.roleKey == `verifier`"  >
          <el-row>
            <el-col>
              <h4>{{$t(`help.AuditOpinion`)}}:</h4>
              <el-input
                type="textarea"
                :placeholder="$t(`help.inputContent`)"
                v-model="paramsAuditTicket.msg"
                resize="none"
                :autosize="{ minRows: 2, maxRows: 6 }"
              >
              </el-input>
            </el-col>
          </el-row>
          <el-row style="margin-top: 10px;">
            <el-button type="warning" @click="handelAuditTicket" style="width: 100px">{{$t(`help.audit`)}}</el-button>
            <!-- <el-button type="warning" style="width: 100px">关闭</el-button> -->
          </el-row>
          </div>
        </div>
      </el-form>
      </section>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import IndexJs from "../helpDetails/index";
export default {
  mixins: [IndexJs],

  mounted() {},
  methods: {},
};
</script>

<style lang="scss" scoped>
.main {
  width: 100%;
  // height: 100vh;
  padding: 20px 100px;
  margin: 0;
  // outline: 1px solid red;
}
//工单详情
.orderDetails {
  // padding-left: 20px;
  // outline: 1px solid red;
  p {
    width: 80%;
    outline: 1px solid rgba(0, 0, 0, 0.3);
    border-radius: 4px;
    display: flex;
    font-weight: 600;
    padding: 5px 0px;
    font-size: 14px;
  }
  
  .orderTitle {
    //  outline: 1px solid red;
    display: inline-block;
    //  width: 60px;

    width: 100px;
    text-align: center;
  }
  .orderContent {
    flex: 1;
    display: inline-block;
    color: #21a0ff;
    font-weight: normal;
    // font-weight: 600;
    // outline: 1px solid rgba(0,0,0,0.3);
    border-radius: 4px;
    text-align: left;
  }
}
//提交内容
.submitContent{
  // border:1px solid rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  padding: 20px 10px;
  .submitTitle{
      //  border:1px solid red;
      font-size: 14px;
       width: 600px;
       display: flex;
       justify-content: left;
       span:nth-of-type(2){
        margin-left: 50px;
       }
  }
  .contentBox{
    width: 50vw;
    // min-height: 50px;
     border:1px solid rgba(0, 0, 0, 0.1);
      // border:1px solid red;
     padding: 5px 5px;
     padding-left: 5px;
     font-size: 15px;
    //  max-height: 200px;
     max-height: 80px;
     display: inline-block;
     overflow: scroll;
     overflow-x: auto;
     overflow-y: auto;
   

  }
  .downloadBox{
      font-size: 15px;
      color: #21a0ff;
      display: inline-block;
      cursor: pointer;
  }
  .replyBox{
    margin-top: 20px;
  }
}


//提交内容 下载附件
.download {
  display: inline-block;
  // border:1px solid red;
  margin-top: 10px;
  margin-left: 20px;
  padding: 8px 15px;
  border-radius: 4px;
  font-size: 14px;
  background: #f0f9eb;
  color: #67c23a;
  cursor: pointer;
}
.download:hover {
  color: #000;
  outline: 1px solid rgba(0, 0, 0, 0.1);
}
//回复内容

.reply {
  font-size: 15px;
  // outline: 1px solid red;
  margin-top: 10px;
  padding: 5px 0px;
  .replyTitle {
    font-weight: 600;
  }
  .replyContent {
    color: #21a0ff;
  
    // font-weight: 600;
  }
}
::v-deep.replyInput .el-input.is-disabled .el-input__inner {
  color: #000;
}
.edit {
  font-size: 15px;
  color: #21a0ff;
  cursor: pointer;
  margin-left: 10px;
}

//审核内容
.auditBox{
  // outline: 1px solid red;
  .submitTitle{
    //  outline: 1px solid red;
     font-size: 14px;
       width: 600px;
       display: flex;
       justify-content: left;
       span:nth-of-type(2){
        margin-left: 50px;
       }
  }
  .contentBox{
    width: 54vw;
     border:1px solid rgba(0, 0, 0, 0.1);
     padding: 5px 5px;
     padding-left: 5px;
     font-size: 15px;
    //  max-height: 200px;
     max-height: 80px;
     display: inline-block;
     overflow: scroll;
     overflow-x: auto;
     overflow-y: auto;
   

  }
  .downloadBox{
      font-size: 15px;
      color: #21a0ff;
      // border: 1px solid red;
      cursor: pointer;
      display: inline-block;
  }

}
</style>
