<template>
  <div>
    <!--中登异常列表 -->
    <div style="margin-top: 3%">
      <div  class="textRight handle-divider-style">
        <el-button size="medium" :class="oponMess?'el-icon-arrow-down':'el-icon-arrow-up'" circle  @click="changeButton()"> </el-button>
      </div>
<!--      单选-->
      <div  class="handle-text-margin-bottom title">
        <div class="handle-text-margin-bottom-supplier">
          <label role="checkbox" :class="checkbox?checkboxLableClassON:checkboxLableClassOff"  aria-checked="true">
            <span aria-checked="mixed" :class="checkbox?checkboxSpanClassON:checkboxSpanClassOff">
              <span class="el-checkbox__inner"></span>
              <input  :disabled="solved" :readonly="solved" @click="changeCheckbox()" type="checkbox" aria-hidden="true" class="el-checkbox__original" value="">
            </span><!----></label>
          <span> &nbsp;{{$t('common.chinaClearException')}}{{index+1}}</span>
        </div>
        <el-divider></el-divider>
      </div>

      <div  class="textRight abnormal_handle_list_style">
        <el-row >
          <btnBatchDownload  size="medium" :beforeBtchDownload="beforeBtchDownload" :fileID="fileIds" :classType="true" :downloadButtonMsg="$t('traceMgr.abnormalFileDownLoad')" type="primary" class="iconfont "  v-if="oponMess"></btnBatchDownload>
          <el-button  size="medium" type="primary" class="iconfont " @click="openOtherDialog"   v-if="oponMess&&otherTask" > {{$t('traceMgr.abnormalTask')}}</el-button>
        </el-row>
      </div>
    </div>
    <!--                v-loading = "loading"-->
    <!--                element-loading-background = "rgb(255, 255, 255)"-->
    <!--                element-loading-text = "数据正在加载中"-->
    <!--                element-loading-spinner = "el-icon-loading">-->
    <!--    上面是页头 -->
    <el-form  validate-on-rule-change  :model="abnormalHandleTableList[4]"   ref="form" :show-message="true">
    <data-table :cellStyle="cellStyle"
                :stripe="false"
                v-if="oponMess"
                :row-class-name="tableRowClassName"
                :highlightCurrentRow="false"
                :handleFlag.sync="handleFlag"
                :border="true"
                :showPage="false"
                :menuFlag="false"
                :span-method="objectSpanMethod"
                :queryParas="queryParas"
                @getTableData="tableData"
                :sourceData.sync="abnormalHandleTableList"
                :loadPage="loadPage"
                :row-style="{height:'1px'}"
                :loadCount.sync="loadCount"
                :columns="columns"
                :operateBtnLayout="operateBtnLayout"
                :cell-style="{padding:'0px',height:'1px'}" >

      <template slot="theregistrationNumber" slot-scope="scope">
<!--        第一行   -->
      <span class="row-span-font-size" v-if="scope.data.$index===0">
      {{scope.data.row.theregistrationNumber}}
      </span>
<!--        第2行   -->
        <div  v-if="scope.data.$index===1"  class="cell">
       <h4>
         {{scope.data.row.propertyDescriptionTitle}}
       </h4>
        </div>
      <span class="row-span-font-size" v-if="scope.data.$index===2">
      {{scope.data.row.propertyDescription}}
      </span>

        <div  v-if="scope.data.$index===3"  class="cell">
          <h4>
            {{scope.data.row.factoringProposalTitle}}
          </h4>
        </div>
        <div v-if="scope.data.$index===4">
          <el-form-item class="el-form-item-size" validate-on-rule-change    prop="factoringProposal"
                        :rules="[{ required: true, message:'',trigger: 'change' }]"
          >
            <select-dictionary         :disabled="solved" :readonly="solved"
              v-model="scope.data.row.factoringProposal"
              :dictTypeCode="'tracemgr_zhongdeng_solution'"
            >
            </select-dictionary>
          </el-form-item>
        </div>
      </template>

      <template slot="recordDate" slot-scope="scope">
<!--        第一行   -->
      <span class="row-span-font-size" v-if="scope.data.$index===0">
      {{scope.data.row.recordDate}}
      </span>
        <div  v-if="scope.data.$index===3"  class="cell">
          <h4>
            {{scope.data.row.fileTitle}}
          </h4>
        </div>
     <el-row  v-if="scope.data.$index===4">
       <el-col v-if="!solved" :span="scope.data.row.fileId!==undefined&&scope.data.row.fileId!==''&&scope.data.row.fileId!==0?12:24">
         <btn-upload         :disabled="solved" :readonly="solved" :hidden="solved"
                              :icon="(scope.data.row.uploadFileId!==undefined&&scope.data.row.uploadFileId!=='')||(scope.data.row.fileId!==undefined&&scope.data.row.fileId!=='')?'iconfont iconzhongxinshangchuan':''"
                      :uploadApi="uploadApi" :rowData="scope.data.row"
                      @uploadSuccess="uploadSuccess"
                      :title="(scope.data.row.uploadFileId!==undefined&&scope.data.row.uploadFileId!=='')||(scope.data.row.fileId!==undefined&&scope.data.row.fileId!=='')?$t('common.reUpload'):$t('common.upload')"
                      :classType="true"></btn-upload>
       </el-col>
       <el-col  v-if="scope.data.row.fileId!==undefined&&scope.data.row.fileId!==''&&scope.data.row.fileId!==0"
                       readonly :span="12">
         <btn-download          :disabled="solved" :readonly="solved"
                                 :fileID="scope.data.row.fileId" :title="$t('traceMgr.loadDownLoding')"></btn-download>
       </el-col>
     </el-row>
      </template>

      <template slot="pledgeeAssignee" slot-scope="scope">
<!--        第一行   -->
      <span class="row-span-font-size" v-if="scope.data.$index===0">
      {{scope.data.row.pledgeeAssignee}}
      </span>
        <div  v-if="scope.data.$index===3"  class="cell">
          <h4>
            {{scope.data.row.abnormalProposalStatusTitle}}
          </h4>
        </div>
        <span class="row-span-font-size" v-if="scope.data.$index===4">
      {{scope.data.row.abnormalProposalStatus}}
      </span>
      </template>

      <template slot="pradeType" slot-scope="scope">
        <!--        第一行   -->
      <span class="row-span-font-size" v-if="scope.data.$index===0">
      {{getValueFromZDZD0002(scope.data.row.pradeType)}}
      </span>
        <div v-if="scope.data.$index===1" class="cell">
        <h4>
      {{scope.data.row.abnormalStatusTitle}}
      </h4>
        </div>
        <!--        第2行   -->
        <span class="row-span-font-size" v-if="scope.data.$index===2">
      {{scope.data.row.abnormalStatus}}
      </span>
        <div  v-if="scope.data.$index===3"  class="cell">
          <h4>
            {{scope.data.row.auditOpinionTitle}}
          </h4>
        </div>
        <span class="row-span-font-size" v-if="scope.data.$index===4">
      {{scope.data.row.auditOpinion}}
      </span>
      </template>

      <template slot="overdueSituation" slot-scope="scope">
<!--        第一行   -->
       <span class="row-span-font-size" v-if="scope.data.$index===0">
      {{scope.data.row.overdueSituation}}
      </span>
        <div  v-if="scope.data.$index===3"  class="cell">
          <h4>
            {{scope.data.row.reviewedByTitle}}
          </h4>
        </div>
        <span class="row-span-font-size" v-if="scope.data.$index===4">
      {{scope.data.row.reviewedBy}}
      </span>
      </template>

      <template slot="feedbackPeople" slot-scope="scope">
        <!--        第一行   -->
        <span class="row-span-font-size" v-if="scope.data.$index===0">
      {{scope.data.row.feedbackPeople}}
      </span>

        <div v-if="scope.data.$index===1" class="cell">
        <h4 >
      {{scope.data.row.proposalTitle}}
      </h4>
        </div>
        <!--        第2行   -->
        <span class="row-span-font-size" v-if="scope.data.$index===2">
      {{scope.data.row.proposal}}
      </span>
        <div  v-if="scope.data.$index===3"  class="cell">
          <h4>
            {{scope.data.row.auditTimeTitle}}
          </h4>
        </div>
        <span class="row-span-font-size" v-if="scope.data.$index===4 && scope.data.row.auditTime !== '1900-01-01 00:00:00' " >
      {{scope.data.row.auditTime}}
      </span>
      </template>

      <template slot="feedbackTheDate" slot-scope="scope">
        <!--        第一行   -->
        <span class="row-span-font-size" v-if="scope.data.$index===0">
      {{scope.data.row.feedbackTheDate}}
      </span>
        <div  v-if="scope.data.$index===3&&scope.data.row.signFign==='1'"  class="cell">
          <h4>
            {{scope.data.row.messageTitle}}
          </h4>
        </div>
        <div v-if="scope.data.$index===4&&scope.data.row.signFign==='1'&&!solved">
          <el-button
                             readonly :loading="helpMeLoding" :hidden="solved" size="medium" type="primary" @click="helpMe(scope.data.row)" :disabled="del||solved">发起协助</el-button>
        </div>

      </template>

    </data-table>
      </el-form>
  </div>
</template>

<script>
import * as format from '@/filters/index'
import { DataTable, btnDownload, btnUpload, paymentInfo, speechCraftInput, authButton, DialogEdit, SelectDictionary, btnBatchDownload } from 'newepoch-components'
import BasePage from '@/pages/basePage'
import tracemgrApi from '@/api/tracemgrApi'
import { UPLOAD_API } from '@/constant.js'
import fileApi from '@/api/fileApi'
import { downFile } from '@/utils/devUtils'
import mixin from '@/pages/mixin'
export default {
  extends: new BasePage('abnormalHandleList'),
  mixins: [mixin],
  name: 'abnormalHandleList',
  components: {
    tracemgrApi,
    DataTable,
    fileApi,
    SelectDictionary,
    btnBatchDownload,
    DialogEdit,
    downFile,
    format,
    speechCraftInput,
    paymentInfo,
    authButton,
    UPLOAD_API,
    btnDownload,
    btnUpload
  },
  data () {
    return {
      resetData1: false,
      spanArr: [],
      operateBtnLayout: '',
      loadCount: 0,
      uploadApi: UPLOAD_API,
      uploadWraing: false,
      helpMeLoding: false,
      oponMess: true,
      loadPage: 'getList',
      solved: false,
      othrTaskListSize: 0,
      checkbox: false,
      otherTask: false,
      checkboxLableStyle: 'el-checkbox',
      checkboxSpanStyle: 'el-checkbox__input',
      sourceData: [],
      checkboxLableClassOff: 'el-checkbox',
      checkboxLableClassON: 'el-checkbox is-checked',
      checkboxSpanClassON: 'el-checkbox__input is-checked',
      checkboxSpanClassOff: 'el-checkbox__input',
      columns: [
        // 登记编号
        {
          prop: 'theregistrationNumber',
          showOverflowTooltip: true,
          label: this.$i18n.messages[this.$i18n.locale].traceMgr.theregistrationNumber,
          align: 'left',
          width: 100,
          slot: true
        },
        // 登记日期
        {
          prop: 'recordDate',
          showOverflowTooltip: true,
          label: this.$i18n.messages[this.$i18n.locale].traceMgr.recordDate,
          align: 'center',
          width: 100,
          slot: true
        },
        // 受让人/质权人
        {
          prop: 'pledgeeAssignee',
          showOverflowTooltip: true,
          label: this.$i18n.messages[this.$i18n.locale].traceMgr.pledgeeAssignee,
          align: 'center',
          width: 100,
          slot: true
        },
        // 交易类型
        {
          prop: 'pradeType',
          showOverflowTooltip: true,
          label: this.$i18n.messages[this.$i18n.locale].traceMgr.pradeType,
          align: 'left',
          width: 100,
          slot: true
        },
        // 过期情况
        {
          prop: 'overdueSituation',
          showOverflowTooltip: true,
          label: this.$i18n.messages[this.$i18n.locale].traceMgr.overdueSituation,
          align: 'left',
          width: 100,
          slot: true
        },
        // 反馈人
        {
          prop: 'feedbackPeople',
          showOverflowTooltip: true,
          label: this.$i18n.messages[this.$i18n.locale].traceMgr.feedbackPeople,
          align: 'left',
          width: 100,
          slot: true
        },
        // 反馈日期
        {
          prop: 'feedbackTheDate',
          showOverflowTooltip: true,
          label: this.$i18n.messages[this.$i18n.locale].traceMgr.feedbackTheDate,
          align: 'left',
          width: 100,
          slot: true
        }
      ],
      queryParas: {},
      message: {
        eiditMess: [],
        uploadMess: []
      },
      fileIds: [],
      handleFlag: true,
      del: false,
      opinion: ''
    }
  },
  props: {
    abnormalHandleTableList: {
      type: Array
    },
    resetData: {
      type: Boolean
    },
    index: {
      type: Number
    },
    checkCheckboxAndData: {
      type: Boolean
    },
    requestAssistance: {
      type: Object
    },
    addAbnormalHandleFormData: {
      type: Function
    },
    synchronizationObj: {
      type: Object
    },
    checkboxs: {
      type: Boolean
    },
    checkboxList: {
      type: Number
    },
    getMessages: {
      type: Function
    },
    addCheckboxList: {
      type: Function
    },
    submitCheck: {
      type: Boolean
    },
    sign: {
      type: String
    },
    homePageResetDataList: {
      type: Function
    },
    openOtherAbnormal: {
      type: Function
    },
    loading: {
      type: Boolean
    },
    toHandleClose: {
      type: Boolean
    },
    colseAbnormalHandle: {
      type: Function
    },
    createAbnormalList: {
      type: Function
    },
    fileIdList: {
      type: Array
    }
  },
  methods: {
    tableRowClassName ({ row, rowIndex }) {
      if (rowIndex === 1 || rowIndex === 3) {
        return 'is-center is-leaf  common-table-header'
      }
      return ''
    },
    getValueFromZDZD0002 (code) {
      return format.formatDict(code, 'ZDZD0002')
    },
    changeButton () { this.oponMess = !this.oponMess },
    changeCheckbox () { this.checkbox = !this.checkbox },
    cellStyle ({ row, column, rowIndex, columnIndex }) {
      return ''
    },
    tableData (data) {
      this.sourceData = data
    },
    clearOpinion (row) {
    },
    openOtherDialog: function () {
      let row = this.abnormalHandleTableList[4]
      row['caichan'] = this.abnormalHandleTableList[2].propertyDescription
      this.openOtherAbnormal(row)
    },
    helpMe (item) {
      let $this = this

      let param = {
        'assetId': $this.requestAssistance.assetInfoId,
        'Id': item.id,
        'taskId': item.taskId,
        'assetCode': item.assetCode,
        'processInstanceId': item.processInstanceId
      }
      $this.helpMeLoding = true
      tracemgrApi['abnormalHandleApi'].requestAssistance(param).then(res => {
        if (res.data) {
          $this.helpMeLoding = false
          $this.success(this.$i18n.messages[this.$i18n.locale].traceMgr.sendHelpSucess)
          $this.homePageResetDataList($this.requestAssistance.assetInfoId)
        } else {
          $this.helpMeLoding = false

          $this.error(this.$i18n.messages[this.$i18n.locale].traceMgr.sendHelpFail)
        }
      }, res => {
        $this.helpMeLoding = false

        $this.error(this.$i18n.messages[this.$i18n.locale].traceMgr.sendHelpFail)
      })
    },
    uploadSuccess (returnData, rowData) {
      this.success(this.$i18n.messages[this.$i18n.locale].traceMgr.file + returnData.fileName + this.$i18n.messages[this.$i18n.locale].traceMgr.UploadSucessFileIdIs)
      this.$set(rowData, 'uploadFileId', returnData.fileID)
      this.$set(rowData, 'uploadFileName', returnData.fileName)
      this.$set(this, 'abasicContractNameLocal[4]', rowData)
    },
    beforeBtchDownload: function () {
      if (this.fileIds.length > 0) {
        return true
      } else {
        this.warning(this.$i18n.messages[this.$i18n.locale].traceMgr.NOHaveDownLoadFile)
        return false
      }
    },
    objectSpanMethod ({ row, column, rowIndex, columnIndex }) {
      //  对第二行第一个title进行行合并
      if (columnIndex === 0) {
        if (rowIndex === 1) {
          // this.status = rowIndex
          return {
            rowspan: 1,
            colspan: 3
          }
        }
      }
      // 避免发生表格错乱  对第二行的第2个元素 进行隐藏
      if (columnIndex === 1) {
        if (rowIndex === 1) {
          return {
            rowspan: 0,
            colspan: 0
          }
        }
      }
      // 避免发生表格错乱  对第二行的第3个元素 进行隐藏
      if (columnIndex === 2) {
        if (rowIndex === 1) {
          return {
            rowspan: 0,
            colspan: 0
          }
        }
      }
      // 对第二行第二个title进行 行合并
      if (columnIndex === 3) {
        if (rowIndex === 1) {
          return {
            rowspan: 1,
            colspan: 2
          }
        }
      }
      // 避免发生表格错乱  对第二行的第4个元素 进行隐藏
      if (columnIndex === 4) {
        if (rowIndex === 1) {
          return {
            rowspan: 0,
            colspan: 0
          }
        }
      }

      // 避免发生表格错乱  对第二行的第4个元素 进行隐藏
      if (columnIndex === 5) {
        if (rowIndex === 1) {
          return {
            rowspan: 1,
            colspan: 2
          }
        }
      }
      // 避免发生表格错乱  对第二行的第4个元素 进行隐藏
      if (columnIndex === 6) {
        if (rowIndex === 1) {
          return {
            rowspan: 0,
            colspan: 0
          }
        }
      }
      // 对第三行进行合并
      if (columnIndex === 0) {
        if (rowIndex === 2) {
          return {
            rowspan: 1,
            colspan: 3
          }
        }
      }

      if (columnIndex === 1) {
        if (rowIndex === 2) {
          return {
            rowspan: 0,
            colspan: 0
          }
        }
      }
      if (columnIndex === 2) {
        if (rowIndex === 2) {
          return {
            rowspan: 0,
            colspan: 0
          }
        }
      }

      if (columnIndex === 3) {
        if (rowIndex === 2) {
          return {
            rowspan: 1,
            colspan: 2
          }
        }
      }
      if (columnIndex === 4) {
        if (rowIndex === 2) {
          return {
            rowspan: 0,
            colspan: 0
          }
        }
      }
      if (columnIndex === 5) {
        if (rowIndex === 2) {
          return {
            rowspan: 1,
            colspan: 2
          }
        }
      }
      if (columnIndex === 6) {
        if (rowIndex === 2) {
          return {
            rowspan: 0,
            colspan: 0
          }
        }
      }
    }
  },
  watch: {
    resetData1: {
      deep: true,
      handler: function (newValue) {
        let $this = this
        $this.$set($this, 'sourceData', $this.abnormalHandleTableList)
        $this.sourceData = $this.abnormalHandleTableList
        $this.othrTaskListSize = $this.abnormalHandleTableList[4].othrTaskList
        $this.fileIdList.forEach(item => {
          $this.fileIds.push(item.fileUuid)
        })

        if (newValue) {
          $this.oponMess = true
          $this.$nextTick(() => {
            $this.$refs['form'].clearValidate()
          })
        } else {
          this.$nextTick(() => {
            this.$refs['form'].clearValidate()
          })
          $this.checkbox = false
        }
      }
    },
    checkboxs: {
      handler: function (newValue) {
        let $this = this
        $this.$emit('update:synchronizationObj', {
          taskIdListLength: $this.synchronizationObj.taskIdListLength,
          index: $this.synchronizationObj.index += 1
        })
        $this.addCheckboxList($this.checkbox ? 1 : 0, $this.synchronizationObj.taskIdListLength === $this.synchronizationObj.index, $this.sign)
      }
    },
    toHandleClose: {
      handler: function (newValue) {
        let $this = this
        $this.$emit('update:synchronizationObj', {
          taskIdListLength: $this.synchronizationObj.taskIdListLength,
          index: $this.synchronizationObj.index += 1
        })
        this.createAbnormalList(this.abnormalHandleTableList[4])
        this.colseAbnormalHandle($this.synchronizationObj)
      }

    },
    checkCheckboxAndData: {
      handler: function (newValue) {
        let $this = this
        let message = {
          eiditMess: [],
          uploadMess: [],
          factoringProposals: []
        }
        $this.$emit('update:synchronizationObj', {
          taskIdListLength: $this.synchronizationObj.taskIdListLength,
          index: $this.synchronizationObj.index += 1
        })
        let formRow = $this.abnormalHandleTableList[4]
        if ($this.checkbox) {
          if (formRow.fileId === undefined) {
            formRow.fileId = ''
          } if (formRow.uploadFileId === undefined) {
            formRow.uploadFileId = ''
          }
          // //  校验文件是否上传
          // if (formRow.fileId === '' && formRow.uploadFileId === '') {
          //   message.uploadMess.push('【' + $this.$i18n.messages[this.$i18n.locale].common.chinaClearException + ($this.index + 1) + '】')
          // }
          // //  校验是否修改数据
          // if (formRow.uploadFileId === '' && formRow.factoringProposal === formRow.factoringProposalCopy) {
          //   message.eiditMess.push('【' + $this.$i18n.messages[this.$i18n.locale].common.chinaClearException + ($this.index + 1) + '】')
          // }

          if (formRow.factoringProposal === '' || formRow.factoringProposal === undefined) {
            message.factoringProposals.push('【' + $this.$i18n.messages[this.$i18n.locale].common.chinaClearException + ($this.index + 1) + '】')
          }
        }
        $this.getMessages(message, $this.synchronizationObj.taskIdListLength === $this.synchronizationObj.index, 'save', formRow, $this.checkbox)
        $this.addAbnormalHandleFormData(formRow, $this.synchronizationObj.taskIdListLength === $this.synchronizationObj.index, 'save')
      }
    },
    submitCheck: {
      handler: function (newValue) {
        let $this = this
        let message = {
          eiditMess: [],
          uploadMess: []
        }
        $this.$emit('update:synchronizationObj', {
          taskIdListLength: $this.synchronizationObj.taskIdListLength,
          index: $this.synchronizationObj.index += 1
        })
        let formRow = $this.abnormalHandleTableList[4]
        if ($this.checkbox) {
          if (formRow.fileId === undefined) {
            formRow.fileId = ''
          } if (formRow.uploadFileId === undefined) {
            formRow.uploadFileId = ''
          }
          // //  校验文件是否上传
          // if (formRow.fileId === '' && formRow.uploadFileId === '') {
          //   message.uploadMess.push('【' + $this.$i18n.messages[this.$i18n.locale].common.chinaClearException + ($this.index + 1) + '】')
          // }
          //  校验是选中下拉框
          if (formRow.factoringProposal === undefined || formRow.factoringProposal === '') {
            message.eiditMess.push('【' + $this.$i18n.messages[this.$i18n.locale].common.chinaClearException + ($this.index + 1) + '】')
          }
        }
        $this.getMessages(message, $this.synchronizationObj.taskIdListLength === $this.synchronizationObj.index, 'submit', formRow, $this.checkbox)
        $this.addAbnormalHandleFormData(formRow, $this.synchronizationObj.taskIdListLength === $this.synchronizationObj.index, 'submit')
      }
    },
    abnormalHandleTableList: {
      deep: true,
      handler: function (newValue) {
        this.othrTaskListSize = this.abnormalHandleTableList[4].othrTaskList
        if (this.abnormalHandleTableList[4].dealStatus !== '1') {
          this.$set(this, 'solved', true)
        } else {
          this.$set(this, 'solved', false)
        }
      }
    }
  },
  mounted: function () {
    let $this = this
    this.resetData1 = $this.resetData
    let otherTaskSize = $this.abnormalHandleTableList[4].othrTaskList
    if (otherTaskSize > 0) {
      $this.otherTask = true
    } else {
      $this.otherTask = false
    }
    $this.chatTimer = setInterval(() => {
      if ($this.abnormalHandleTableList[4].message === '1') {
        $this.del = true
      }
      if ($this.abnormalHandleTableList[4].dealStatus !== '1') {
        $this.$set($this, 'solved', true)
      } else {
        $this.$set($this, 'solved', false)
      }
    }, 200)
  }
}
</script>
<style scoped lang="scss">
  @import '~@/styles/tracemgr/factoringCommissioner/taskTable/abnormalHandle/taskDialog.scss';
</style>
