<template>
  <div>
    <el-dialog title="通用词导入" :visible.sync="isShow" size="tiny" class="general-word-import-dlg" @open="beforeDialogOpen" @close="dialogClose">
      <el-form :model="importWord" ref="form" label-width="60%">
        <el-form-item label="是否清空通用词库：">
          <el-switch v-model="importWord.clearDB" active-value="1" inactive-value="0">
          </el-switch>
        </el-form-item>
        <el-form-item label="选择*.txt文件(UTF-8字符集)：">
          <el-upload
            class="upload-additional-dic"
            action=""
            ref="upload"
            :limit="1"
            :file-list="importWord.fileList"
            :multiple="false"
            :http-request="fileUploadSuccessHandler"
            :before-upload="beforeFileUpload"
            :on-change="selectChangeHandler"
            accept=".txt">
            <el-button slot="trigger" type="primary">选取文件</el-button>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="isShow = false">取 消</el-button>
        <el-button type="primary" @click="comfirm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import './css/dicManager.css'

import util from '@src/common/util.js'
export default {
  computed: {
    isShow: {
      get() {
        return this.show
      },
      set(val) {
        this.$emit('update:show', val)
      }
    }
  },
  props: { show: Boolean },
  data() {
    return {
      importWord: { clearDB: '0', fileList: [], fileName: '' } //  导入文件对象
    }
  },
  methods: {
    dialogClose() {
      this.$refs['upload'].clearFiles()
    },
    beforeDialogOpen() {
      this.importWord = { clearDB: '0', fileList: [], fileName: '' }
    },
    async comfirm() {
      if (!this.importWord.fileList || !this.importWord.fileList.length) {
        this.$emit('dialog', '请选择文件')
        return
      }
      if (!this.importWord.fileName) {
        this.$emit('dialog', '未获取到文件名，请重新点击确认')
        return
      }
      try {
        await util.validateForm(this.$refs['form'])
        let res = await axios.get('/ui/dictionary/upload', {
          params: {
            file: encodeURIComponent(this.importWord.fileName),
            cleardb: this.importWord.clearDB
          }
        })
        if (res.data.status === 1) {
          this.$emit('update:show', false)
          this.$emit('callback', res.data.data.taskid)
        } else {
          util.showMessage(res)
        }
      } catch (e) {
        // util.showErrorNotification(e)

      }
    },
    // 上传文件
    async fileUploadSuccessHandler(event) {
      if (!this.importWord.fileList.length) {
        this.$emit('dialog', '请选择文件')
        return
      }
      if (!this.beforeFileUpload(this.importWord.fileList[0])) {
        return
      }
      const { file, onProgress } = event
      const formData = new FormData()
      formData.append('file', file)
      try {
        let res = await axios.post(
          '/ui/dictionary/uploadfile',
          formData,
          event => {
            onProgress(event, file)
          },
          {
            headers: { 'Content-Type': 'multipart/form-data' }
          }
        )
        if (res.data.status === 1) {
          this.importWord.fileName = res.data.file
        } else {
          util.showMessage(res)
        }
      } catch (e) {
        // util.showErrorNotification(e)

      }
    },
    selectChangeHandler(file, files) {
      this.importWord.fileList = files.slice(-1)
      this.beforeFileUpload(file)
    },
    beforeFileUpload(file) {
      const isTxt = file.name.indexOf('txt') === -1
      if (isTxt) {
        this.$emit('dialog', '上传文件只能是txt格式')
      }
      return !isTxt
    }
  }
}
</script>
<style scoped>
.general-word-import-dlg  .el-dialog{
  width:400px;
}
@media (max-width:480px){
  .general-word-import-dlg  .el-dialog{
    width:96%;
  }
}
</style>
