<template>
    <dialog-edit :appendToBody="true" :autoClose="true" @close="close" :form="form" :title="title" :visible.sync="visible" class="el-dialog--center"
                 :close-on-click-modal="false" :editModel="editModel">
        <el-row class="textRight marginBottom">
            <btn-batch-download @click="batchDown" type="primary" size="medium" :classType="true" :downloadButtonMsg="$t('approval.batchDownload')"></btn-batch-download>
        </el-row>
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane :label="firstLabel" name="first">
                <data-table :handleFlag.sync="handleFlag" :showSelection="true" :toolMenuFlag="false"
                            :sourceData.sync="firstList" :menuFlag="true" operateBtnLayout="false"
                            :columns="columns" :border="true" :stripe="true">
                    <el-table-column align="center" :label="tableLabel">
                        <template slot-scope="scope">
                            <btn-download size="medium" @click="down(scope.row)"></btn-download>
                        </template>
                    </el-table-column>
                </data-table>
            </el-tab-pane>
            <el-tab-pane :label="secondLabel" name="second">
                <data-table :handleFlag.sync="handleFlag" :showSelection="true" :toolMenuFlag="false"
                            :sourceData.sync="secondList" :menuFlag="true" operateBtnLayout="false"
                            :columns="columns" :border="true" :stripe="true">
                    <el-table-column align="center" :label="tableLabel">
                        <template slot-scope="scope">
                            <btn-download size="medium" @click="down(scope.row)"></btn-download>
                        </template>
                    </el-table-column>
                </data-table>
            </el-tab-pane>
            <el-tab-pane :label="threeLabel" name="three">
                <data-table :handleFlag.sync="handleFlag" :showSelection="true" :toolMenuFlag="false"
                            :sourceData.sync="threeList" :menuFlag="true" operateBtnLayout="false"
                            :columns="columns" :border="true" :stripe="true">
                    <el-table-column align="center" :label="tableLabel">
                        <template slot-scope="scope">
                            <btn-download size="medium" @click="down(scope.row)"></btn-download>
                        </template>
                    </el-table-column>
                </data-table>
            </el-tab-pane>
        </el-tabs>
    </dialog-edit>
</template>

<script>
import { DataTable, authButton, DialogEdit, btnBatchDownload, btnDownload } from 'newepoch-components'
import mixin from '@/pages/mixin'
import BasePage from '@/pages/basePage'
export default {
  extends: new BasePage(),
  mixins: [mixin],
  components: {
    DataTable,
    authButton,
    DialogEdit,
    btnBatchDownload,
    btnDownload
  },
  data () {
    return {
      title: this.$i18n.messages[this.$i18n.locale].traceMgr.fileDown,
      activeName: 'first',
      firstLabel: this.$i18n.messages[this.$i18n.locale].traceMgr.archive,
      secondLabel: this.$i18n.messages[this.$i18n.locale].traceMgr.supplierUploadFile,
      threeLabel: this.$i18n.messages[this.$i18n.locale].traceMgr.companyUploadFile,
      firstList: [
        {
          fileName: this.$i18n.messages[this.$i18n.locale].traceMgr.basicContract,
          url: 'xxx'
        },
        {
          fileName: this.$i18n.messages[this.$i18n.locale].traceMgr.basicContract,
          url: 'xxx'
        },
        {
          fileName: this.$i18n.messages[this.$i18n.locale].traceMgr.basicContract,
          url: 'xxx'
        }
      ],
      secondList: [
        {
          fileName: this.$i18n.messages[this.$i18n.locale].traceMgr.invoice,
          url: 'xxx'
        },
        {
          fileName: this.$i18n.messages[this.$i18n.locale].traceMgr.invoice,
          url: 'xxx'
        },
        {
          fileName: this.$i18n.messages[this.$i18n.locale].traceMgr.invoice,
          url: 'xxx'
        }
      ],
      threeList: [
        {
          fileName: this.$i18n.messages[this.$i18n.locale].traceMgr.qualifications,
          url: 'xxx'
        },
        {
          fileName: this.$i18n.messages[this.$i18n.locale].traceMgr.qualifications,
          url: 'xxx'
        },
        {
          fileName: this.$i18n.messages[this.$i18n.locale].traceMgr.qualifications,
          url: 'xxx'
        }
      ],
      handleFlag: true,
      columns: [
        {
          prop: 'fileName',
          align: 'center',
          label: this.$i18n.messages[this.$i18n.locale].traceMgr.fileName,
          showOverflowTooltip: true
        }
      ],
      authLabelBatch: this.$i18n.messages[this.$i18n.locale].approval.batchDownload,
      tableLabel: this.$i18n.messages[this.$i18n.locale].common.operate
    }
  },
  props: {
    visible: {
      type: Boolean
    },
    editModel: {
      type: String
    },
    api: {
      type: String,
      default: ''
    },
    form: {
      type: Object
    },
    closeDownBatch: {
      type: Function
    }
  },
  methods: {
    handleClick (tab, event) {
      console.log(tab, event)
    },
    batchDown () {
      console.log('batchDown')
    },
    down (row) {
      console.log(row)
    },
    close () {
      this.visible = false
      this.closeDownBatch()
    }
  },
  mounted () {

  }
}
</script>

<style scoped>

</style>
