<template>
  <dialog-edit width="800px" :appendToBody="true" :autoClose="true" @close="closeDialog" :form="form" :title="$t('common.documentDownload')" :visible.sync="dialogVisible" class="el-dialog--center" :close-on-click-modal="false" :editModel="editModel">
    <el-row v-show="showButton" class="textRight marginBottom">
      <btn-batch-download :beforeBtchDownload="beforeBtchDownload" :fileID="fileIDs" type="primary" size="medium" :classType="true" :downloadButtonMsg="$t('approval.batchDownload')"></btn-batch-download>
    </el-row>
    <el-tabs v-model="activeName">
      <el-tab-pane
        v-for="item in editableTabs"
        :key="item.name"
        :label="item.title"
        :name="item.name">
        <data-table :handleFlag.sync="handleFlag" :showSelection="true" :toolMenuFlag="false"
                    :sourceData.sync="item.sorceData" :menuFlag="true" operateBtnLayout="false"
                    :columns="columns" :border="true" :stripe="true" :showPage="false" @selectRowChange="selectionData">
          <el-table-column align="center" :label="tableLabel">
            <template slot-scope="scope">
              <btn-download v-if="scope.row.fileId !== '0'" size="medium" :fileID="scope.row.fileId"></btn-download>
            </template>
          </el-table-column>
        </data-table>
      </el-tab-pane>
    </el-tabs>
    <span v-show="!showButton" class="marginLeftDownLoad">{{$t('traceMgr.noneData')}}</span>
  </dialog-edit>
</template>

<script>
import { DataTable, authButton, DialogEdit, btnBatchDownload, btnDownload } from 'newepoch-components'
import mixin from '@/pages/mixin'
import BasePage from '@/pages/basePage'
import tracemgrApi from '@/api/tracemgrApi'
export default {
  extends: new BasePage(),
  mixins: [mixin],
  components: {
    DataTable,
    authButton,
    DialogEdit,
    btnBatchDownload,
    btnDownload,
    tracemgrApi
  },
  data () {
    return {
      fileIDs: [],
      activeName: '1',
      activeNameArr: [],
      editableTabs: {},
      handleFlag: true,
      editModel: 'V',
      columns: [
        {
          prop: 'fileName',
          align: 'center',
          label: this.$i18n.messages[this.$i18n.locale].traceMgr.fileName,
          showOverflowTooltip: true
        }
      ],
      tableLabel: this.$i18n.messages[this.$i18n.locale].common.operate,
      showButton: false
    }
  },
  props: {
    visible: {
      type: Boolean
    },
    form: {
      type: Object
    }
  },
  methods: {
    selectionData (val) {
      let $this = this
      if (val.length > 0) {
        for (let i = 0; i < val.length; i++) {
          $this.fileIDs.push(val[i].fileId)
        }
      }
    },
    closeDialog () {
      this.dialogVisible = false
    },
    addMaterialFileId (arr) {
      for (let i = 0; i < arr.length; i++) {
        if (arr[i].fileId === undefined) {
          arr[i].fileId = '0'
        }
      }
    },
    beforeBtchDownload () {
      if (this.fileIDs.length === 0) {
        this.error(this.$i18n.messages[this.$i18n.locale].traceMgr.messageWorning)
        return false
      }
      return true
    }
  },
  watch: {
    visible: {
      deep: true,
      handler: function (newVal, oldVal) {
        if (newVal) {
          this.activeNameArr = []
          tracemgrApi['businessFileDownloadDialog'].getFileList({ 'tabID': this.form.assetCode + ',' + this.form.assetInfoId }).then(res => {
            let $this = this
            if (Object.keys(res.data).length !== 0) {
              $this.showButton = true
            }
            if (res.data.creditorFilesDto !== undefined && res.data.creditorFilesDto !== null) {
              if (res.data.creditorFilesDto.sorceData.length > 0) {
                $this.editableTabs.creditorFilesDto = res.data.creditorFilesDto
                $this.activeNameArr.push($this.editableTabs.creditorFilesDto.name)
                $this.addMaterialFileId(res.data.creditorFilesDto.sorceData)
              }
            }
            if (res.data.debtorFilesDto !== undefined && res.data.debtorFilesDto !== null) {
              if (res.data.debtorFilesDto.sorceData.length > 0) {
                $this.editableTabs.debtorFilesDto = res.data.debtorFilesDto
                $this.activeNameArr.push($this.editableTabs.debtorFilesDto.name)
                $this.addMaterialFileId(res.data.debtorFilesDto.sorceData)
              }
            }
            if (res.data.archiveFilesDto !== undefined && res.data.archiveFilesDto !== null) {
              if (res.data.archiveFilesDto.sorceData.length > 0) {
                $this.editableTabs.archiveFilesDto = res.data.archiveFilesDto
                $this.activeNameArr.push($this.editableTabs.archiveFilesDto.name)
                $this.addMaterialFileId(res.data.archiveFilesDto.sorceData)
              }
            }
            if (res.data.extraFilesDto !== undefined && res.data.extraFilesDto !== null) {
              if (res.data.extraFilesDto.sorceData.length > 0) {
                $this.editableTabs.extraFilesDto = res.data.extraFilesDto
                $this.activeNameArr.push($this.editableTabs.extraFilesDto.name)
                $this.addMaterialFileId(res.data.extraFilesDto.sorceData)
              }
            }
            if ($this.activeNameArr.length > 0) {
              $this.activeName = $this.activeNameArr[0]
            }
          })
        } else {
          this.editableTabs = {}
          this.showButton = false
        }
      }
    }
  },
  computed: {
    dialogVisible: {
      get: function () {
        return this.visible
      },
      set: function (val) {
        this.$emit('update:visible', val)
      }
    }
  }
}
</script>
