// import { mapState } from "vuex";
import axios from 'axios'
import request from '../../utils/request'
import { getDetails,getReply,getBKendTicket } from "../../api/work"

export default {
  data() {
    return {

      imgSrc: "https://studio.glassnode.com/images/crypto-icons/btc.png",
      navLabel: "Bitcoin (BTC)",
      userName: "LX",
      from: {
        title: "",
        kinds: "",
        description: "",
        radio: "",
      },
      kindsList: [{
        value: "购买咨询",
        label: "购买咨询",
      }, {
        value: "财务咨询",
        label: "财务咨询",
      }, {
        value: "网页问题",
        label: "网页问题",
      },
      {
        value: "账户问题",
        label: "账户问题",
      },
      {
        value: "移动端问题",
        label: "移动端问题",
      },
      {
        value: "消息订阅",
        label: "消息订阅",
      },
      {
        value: "指标数据问题",
        label: "指标数据问题",
      },
      {
        value: "其他",
        label: "其他",
      }],
      params: [],
      input: 1,
      tableData: [{
        num: 1,
        time: "2022-09-01 16:00",
        problem: "账户问题",
        questionTitle: "账户不能登录",
        state: "已解决"
      }],
      textarea: "我是提交内容",
      textarea1: "我是回复内容",
      textarea2: "",
      replyInput: true,
      ticketDetails: {
        id: "",
        type: "",
        title: "",
        userName: "",
        desc: "",
        responName: "",
        respon: "",
        submitTime: "",
        status: "",
        fileIds: "",
        files: "",
        responTime: ""

      },
      //上传后的文件列表
      fileList: [],
      // 允许的文件类型
      fileType: ["jpg", "jpeg", "png", "mp3", "aif", "aiff", "wav", "wma", "mp4", "avi", "rmvb",],
      // 运行上传文件大小，单位 M
      fileSize: 20,
      // 附件数量限制
      fileLimit: 3,
      //请求头
      headers: { "Content-Type": "multipart/form-data" },
      FormDatas: null,
      filesId: [],
      paramsDownload: {
        id: ""
      },
      //回复工单参数
      paramsResponTicket: {
        id: "",
        files: "",
        respon: "",

      },
      //审核工单参数
      paramsAuditTicket: {
        id: "",
        msg: ""
      },
      //提交审核参数
      paramsSubmitAuditTicket: {
        id: ""
      },
      identity: {},
      detailsID: "",

      downloadUrl: "",
      // --------------
      workOrderId: "",
      recordList: [
        // {
        //   time: "2021-3-5",
        //   content: "这是内容",
        //   name: "lx888",
        //   videoPath: "",
        //   audioPath: "",
        //   imagePath: "",
        // },
        // {
        //   time: "2021-3-8",
        //   content: "这是内容2",
        //   name: "admin",
        //   videoPath: "",
        //   audioPath: "",
        //   imagePath: "",
        // },

      ],
      replyParams: {
        id: "",
        respon: "",
        files: "",
      },
      totalDetailsLoading: false,
      faultList:[],

        statusList:[
          {//待处理
              value:1,
              label:"work.pendingProcessing"
          },
          {//处理中
              value:2,
              label:"work.processed"
          },
          {//已完结
              value:10,
              label:"work.completeWK"
          }
          
      ],
      typeList:[],
      machineCoding: "",
      warrantyList: [],
      closeDialogVisible:false,
      lang: 'zh',


    }
  },

  mounted() {
    this.lang = this.$i18n.locale; // 初始化语言值
    this.workOrderId = localStorage.getItem("totalID")
    this.fetchTicketDetails({ id: this.workOrderId })
    // this.faultList = JSON.parse(localStorage.getItem('faultList') ) 
    // this.stateList = JSON.parse(localStorage.getItem('stateList') )
    // this.typeList = JSON.parse(localStorage.getItem('typeList') )

    this.registerRecoveryMethod('fetchTicketDetails', { id: this.workOrderId });

  },
  methods: {
    async fetchBKendTicket(params){
      // this.totalDetailsLoading =true
      this.setLoading('totalDetailsLoading', true);
      const data = await getBKendTicket(params)
      if (data && data.code == 200) {
          this.$message({
            message:this.$t(`work.WKend`),
            type: "success",
          });
          this.$router.push(`/${this.lang}/workOrderBackend`);

      }

      this.setLoading('totalDetailsLoading', false);
    },

      async fetchReply(params){
      // this.totalDetailsLoading = true
      this.setLoading('totalDetailsLoading', true);
      const data  = await getReply(params)
      if (data && data.code == 200) {
        this.$message({
          message:this.$t(`work.submitted`),
          type: 'success',
          
        })
        for (const key in this.replyParams) {
          this.replyParams[key] =""
        }
        this.fileList = []
        this.fetchTicketDetails({ id: this.workOrderId })
      }
      

      this.setLoading('totalDetailsLoading', false);
    },
    handelType2(label){
      if (label) {
         return this.typeList.find(item=>item.name==label).label
      }
  },
    handelStatus2(label){

     try{
        if (label) {
          let value = this.statusList.find(item=>item.value==label).label
          return  this.$t(value)
       }
      }catch{
        return ""
      }
  },
    handelPhenomenon(id){
      if (id) {
       return  this.faultList.find(item=>item.id==id).label
      }
     
   },
    //请求工单详情
    async fetchTicketDetails(param) {
      // this.totalDetailsLoading = true
      this.setLoading('totalDetailsLoading', true);
      const { data } = await getDetails(param)

      this.recordList = data.list
      this.ticketDetails = data


      this.setLoading('totalDetailsLoading', false);
    },





    //点击下载附件
    downloadExcel(id) {
        this.downloadUrl = ` ${request.defaults.baseURL}pool/ticket/downloadFile?ids=${id}`
      let a = document.createElement(`a`)
      a.href = this.downloadUrl
      a.click()
    },
 
    handelChange(file, fileList) { //控制显示上传显示列表   
      // 校验文件类型和大小
      const fileType = file.name.slice(file.name.lastIndexOf('.') + 1).toLowerCase();
      const isTypeValid = this.fileType.includes(fileType);
      const isSizeValid = file.size / 1024 / 1024 <= this.fileSize;
      if (!isTypeValid) {//不支持的文件类型
        this.$message.error(`${this.$t(`work.notSupported`)}${fileType}`);
        this.fileList = this.fileList.filter(item => item.name != file.name);
        return false;
      }
      if (!isSizeValid) {//文件大小不能超过
        this.fileList = this.fileList.filter(item => item.name != file.name);
        this.$message.error(`${this.$t(`work.notSupported2`)} ${this.fileSize} MB.`);
        return false;
      }
      let flag = this.fileList.some(item => item.name == file.name)
      if (flag) {
        this.$message.warning(this.$t(`work.notSupported3`));
        this.$refs.upload.handleRemove(file)

        return false
      }
      // this.fileName.push(file.name)    
      this.fileList.push(file.raw)

    },
    //上传了的文件给移除的事件
    handleRemove(file, fileList) {
      // this.fileList = this.fileList.filter(item => item.name !== file.name)
      // this.fileName = this.fileName.filter(item => item !== file.name)

      let index = this.fileList.indexOf(file); // 获取第一个重复元素的索引

      if (index !== -1) {
        this.fileList.splice(index, 1); // 删除第一个重复元素
      }
    },

    //超出文件个数的回调
    handleExceed() {
      this.$message({
        type: 'warning',
        message: this.$t(`work.notSupported4`)
      }); return
    },
    //下载附件
    handelDownload(id) {

      if (id) {
         this.downloadUrl = ` ${request.defaults.baseURL}pool/ticket/downloadFile?ids=${id}`
        let a = document.createElement(`a`)
        a.href = this.downloadUrl
        a.click()
      }


    },



    //上传成功后的回调
    handleSuccess() {

    },

    handelTime(time) {

      if (time && time.includes(`T`)) {
        return `${time.split(`T`)[0]} ${time.split(`T`)[1].split(`.`)[0]}`
      }

    },

    handelResubmit(){
      if (!this.replyParams.respon) {

      console.log();
       
          this.$message({
            message:  this.$t(`work.replyContent2`),
            type: 'error',
            customClass: 'messageClass'
          })

          return
      }
      this.replyParams.id = this.ticketDetails.id


      this.fetchReply(this.replyParams)


    },
    handelEnd(){
      this.closeDialogVisible=true
    },
    handleClose(){
      this.closeDialogVisible=false
    },
    confirmCols(){
      this.fetchBKendTicket({id:this.ticketDetails.id})
    },
    
  }
}