<template>
    <dialog-edit :visible.sync="dialogVisible"
                 :title="$t('traceMgr.exceptionDetailsShould')"
                 :footerBtnShow="isFootView"
                 :editModel="'V'"
                 :form="form"
                 :appendToBody="true">
        <component :is="currentComponentName" :ref="currentComponentName" :readonly="!needComplete"></component>
         <el-row>
                    <div>
                        <payment-info :keyId="assetInfoId" :title="$t('traceMgr.basicInformationOfOrder')"></payment-info>
                    </div>
        </el-row>
                <el-row>
                    <el-tabs>
                        <el-tab-pane :label="$t('traceMgr.mailFile')">
                        </el-tab-pane>
                    </el-tabs>
                </el-row>
            <el-form :show-message="false">
            <data-table :cellStyle="cellStyle" :loadList="loadList" :stripe="true"
                        :api="api"
                        :handleFlag.sync="handleFlag"
                        @getTableData="tableData"
                        :border="true"
                        :showPage="false"
                        :menuFlag="false"
                        :queryParas="queryParas"
                        :sourceData.sync="sourceData"
                        :loadCount.sync="loadCount"
                        :columns="columns"
                        :operateBtnLayout="operateBtnLayout">

                <el-table-column :label="$t('common.operate')" align="center" fixed="right" :width="180">
                    <template slot-scope="scope">
                        <btn-download :fileID="scope.row.fileCode"></btn-download>
                    </template>
                </el-table-column>
            </data-table>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button size="medium" @click="dialogVisible=false">{{$t('common.close')}}</el-button>
            </div>
    </dialog-edit>
</template>
<script>
import { DataTable, btnDownload, DialogEdit, paymentInfo } from 'newepoch-components'
import tracemgrApi from '@/api/tracemgrApi'
import * as format from '@/filters/index'
import BasePage from '@/pages/basePage'
import mixin from '@/pages/mixin'

export default {
  extends: new BasePage(),
  name: 'supplemenFileInPoolAbnormalDetailDialog',
  mixins: [mixin],
  components: {
    format,
    DataTable,
    btnDownload,
    DialogEdit,
    paymentInfo,
    tracemgrApi
  },
  props: {
    processParas: {
      type: Object
    },
    visible: {
      type: Boolean
    },
    url: {
      type: String
    },
    needComplete: {
      type: Boolean
    },
    form: {
      type: [Object],
      required: true
    },
    item: {
    },
    editModel:
      {

      }
  },
  mounted () {

  },
  data () {
    return {
      loadList: 'getOdditionalFileById',
      handleFlag: true,
      isFootView: false,
      keyId: '2002241636461020001',
      assetInfoId: '',
      dialogForm: {},
      dialogApi: {},
      queryParas: {
        pageIndex: 1,
        pageSize: 1
      },
      loadCount: 0,
      operateBtnLayout: '',
      sourceData: [
      ],
      columns: [
        {
          // 任务类型
          prop: 'taskType',
          align: 'center',
          label: this.$i18n.messages[this.$i18n.locale].traceMgr.taskType,
          showOverflowTooltip: true,
          width: '30px',
          format: (row) => {
            return format.formatDict(row.taskType === '0' || row.taskType === undefined || row.taskType === 0 ? '' : row.taskType + '', 'tracemgr_supplementary_task_type')
          }
        },
        {
          // 补寄类型
          prop: 'replacementFileType',
          align: 'center',
          label: this.$i18n.messages[this.$i18n.locale].traceMgr.supplementaryType,
          showOverflowTooltip: true,
          width: '30px',
          format: (row) => {
            return format.formatDict(row.replacementFileType === '0' || row.replacementFileType === undefined || row.replacementFileType === 0 ? '' : row.replacementFileType + '', 'tracemgr_supplementary_type')
          }
        },
        {
          // 需补资料
          prop: 'fileName',
          align: 'center',
          label: this.$i18n.messages[this.$i18n.locale].traceMgr.needToSupplementData,
          showOverflowTooltip: true,
          width: '30px'
        },
        {
          // 对应人
          prop: 'auditUserName',
          align: 'left',
          label: this.$i18n.messages[this.$i18n.locale].traceMgr.correspondingToOne,
          showOverflowTooltip: true,
          width: '30px'
        },
        {
          // 审核意见
          prop: 'auditOpinion',
          align: 'left',
          label: this.$i18n.messages[this.$i18n.locale].approval.opinions,
          showOverflowTooltip: true,
          width: '30px'
        },
        {
          // 份数
          prop: 'replacementCount',
          align: 'center',
          label: this.$i18n.messages[this.$i18n.locale].traceMgr.copies,
          showOverflowTooltip: true,
          width: '30px'
        },
        {
          // 解决状态
          prop: 'status',
          align: 'center',
          label: this.$i18n.messages[this.$i18n.locale].traceMgr.toSolveTheState,
          showOverflowTooltip: true,
          width: '30px',
          format: (row) => {
            return format.formatDict(row.status === '0' || row.status === undefined || row.status === 0 ? '' : row.status + '', 'tracemgr_supplementary_process_status')
          }
        }
      ],
      currentProcessParas: {},
      currentComponentName: null
    }
  },
  computed: {
    dialogVisible: {
      get: function () {
        this.getComp()
        return this.visible
      },
      set: function (val) {
        this.$emit('update:visible', val)
      }
    },
    getTitle: {
      get: function () {
        return this.title
      },
      set: function (val) {
        this.$emit('update:title', val)
      }
    },
    api () {
      return tracemgrApi['supplemenFileAbnormalDetailDialog']
    }
  },
  watch: {
    visible: {
      handler: function (newValue) {
        if (newValue) {
          this.queryParas['assetInfoId'] = this.form.assetInfoId
          this.assetInfoId = this.form.assetInfoId
          this.sourceData = []
          this.$nextTick(function () {
            this.handleFilter()
          })
        }
      }
    }
  },
  methods: {
    tableData (data) {
      this.sourceData = data.detailDtoList
      this.assetInfoId = this.form.assetInfoId
    },
    getComp: function () {
      if (!this.visible) {
        // return
      }
    },
    handleFilter: function () {
      this.loadCount = this.loadCount + 1
    },
    cellStyle ({ row, column, rowIndex, columnIndex }) {
      if (row.errorFields instanceof Array) {
        let flag = false
        row.errorFields.forEach(row => {
          if (row === column.property) {
            flag = true
          }
        })
        if (flag) {
          return 'color: red'
        } else {
          return ''
        }
      } else {
        return ''
      }
    }
  }
}
</script>
