<template>
  <div class="right-list-toolbar">
    <el-toolbar>
      <el-button @click="uploadClickHandler" priv="Search.DicManager.UploadAttachmentDic">
        <i class="fa fa-arrow-up"></i>上传附加词典
      </el-button>
    </el-toolbar>
    <div class="scroll general-dictionary">
      <el-table
        :data="additionalDic"
        tooltip-effect="dark"
        @selection-change="onSelectionChange"
        v-loading="tableDataLoading"
        :height="clientHeight">
        <el-table-column type="selection" width="60" align="center"></el-table-column>
        <el-table-column label="名称">
          <template slot-scope="scope">
            <i :class="scope.row.icon"></i>{{scope.row.fileName}}
          </template>
        </el-table-column>
        <el-table-column prop="fileSize" label="大小" width="120" align="center"></el-table-column>
        <el-table-column prop="modifyTime" label="添加时间" width="180" align="center">
          <template slot-scope="scope">
            {{scope.row.modifyTime | fixDateTime}}
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="100" align="right">
          <template slot-scope="scope">
            <el-button @click="downClickHandler(scope.row)" priv="Search.DicManager.DownLoadAttachmentDic" type="text" title="下载">
            <i class="fa fa-download f16"></i></el-button>
            <el-button @click="delClickHandler(scope.row)" priv="Search.DicManager.DeleteAttachmentDic" type="text" title="删除">
            <i class="fa fa-times f16"></i></el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 上传组件 -->
    <upload-dialog
      :show.sync="isShowModal"
      @dialog="dialog"
      @callback="afterUpload">
    </upload-dialog>
  </div>
</template>
<script>
import './css/dicManager.css'
import util from '@src/common/util.js'

import uploadAttachmentDicDialog from './uploadAttachmentDicDialog.vue'
export default {
  props: { tabName: String, clientHeight: [Number, String] },
  filters: {
    fixDateTime: function(val) {
      return util.formatDate(val, 'yyyy-MM-dd HH:mm')
    }
  },
  data() {
    return {
      selectedRows: [], //  选中行
      tableDataLoading: false,
      submitLoading: false,
      additionalDic: [], //   附加词典请求数据
      isShowModal: false
    }
  },
  methods: {
    // 上传回调
    afterUpload() {
      this.loadAdditionalDic()
    },
    // 上传附加词典点击事件
    uploadClickHandler() {
      this.isShowModal = true
    },
    // 删除附加词典点击事件
    async delClickHandler(row) {
      let fileNames = row.fileName ? [row.fileName] : util.getSelectedIDs(this.selectedRows, 'fileName')
      if (!fileNames || !fileNames.length) {
        return
      }
      try {
        await this.$confirm('确认删除？', '系统提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        // console.log(fileNames)
        let res = await axios.delete(`/ui/attachmentdic/${fileNames.join()}`)
        util.showMessage(res)
        if (res.data.status === 1) {
          this.additionalDic = this.additionalDic.filter(val => !fileNames.includes(val.fileName))
          this.selectedRows = []
        }
      } catch (e) {

      }
    },
    // 附加词典table多行选中事件
    onSelectionChange(selection) {
      this.selectedRows = selection
    },
    // 下载附加词典
    downClickHandler(row) {
      window.location.href = `ui/attachmentdic/downloads?fileName=${row.fileName}`
    },
    // 加载附加词典
    async loadAdditionalDic() {
      this.tableDataLoading = true
      try {
        let res = await axios.get('/ui/attachmentdic')
        this.additionalDic = res.data.data
      } catch (e) {
      }
      this.tableDataLoading = false
    },
    // 消息Dialog封装
    dialog(msg) {
      this.$alert(msg, '系统提示', {
        confirmButtonText: '确定',
        showCancelButton: false,
        type: 'warning'
      })
    }
  },
  components: {
    'upload-dialog': uploadAttachmentDicDialog
  },
  watch: {
    tabName: function(val) {
      if (val === 'attachmentdic') {
        this.loadAdditionalDic()
      }
    }
  }
}
</script>
<style scoped>

</style>
