<template>
 <!-- 复制dialog -->
  <el-dialog title="导入内容" :visible.sync="myImportContentShow" size="small" class="import_dailog">
    <el-form label-position="right" label-width="100px">
       <el-form-item label="文件：">
          <el-upload ref="upload" :multiple="false" action="" :limit="1" :disabled="tmpFileList.length>0" :auto-upload="false" class="upload-additional-dic" :http-request="fileUploadHandler" :on-remove="removeFileHandler" :on-change="selectFileChangeHandler" :accept="allowType" style="width:70%;">

            <el-row :gutter="3">
              <el-col :span="18">
                <el-input disabled v-model="allowType" size="small"></el-input>
              </el-col>
              <el-col :span="6">
                <el-button size="small" type="primary">选择文件</el-button>
              </el-col>
            </el-row>
            <div slot="tip" class="el-upload__tip">只能上传 {{allowType}} 文件</div>

          </el-upload>
        </el-form-item>
    </el-form>

    <div slot="footer">
      <el-button @click="myImportContentShow = false">取 消</el-button>
      <el-button type="primary" @click="confirm" :loading="handlerLoading">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import util from '@src/common/util.js'
export default {
  props: ['importContentShow', 'currentCatalogId'],
  data() {
    return {
      handlerLoading: false,
      tmpFileList: [],
      allowType: '.doc,.docx,.xls,.xlsx,.ppt,.pptx'
    }
  },
  computed: {
    myImportContentShow: {
      get() {
        return this.importContentShow
      },
      set(val) {
        this.$emit('update:importContentShow', val)
      }
    }
  },
  methods: {
    async fileUploadHandler(event) {
      const { file } = event
      const formData = new FormData()
      formData.append('file', file)
      formData.append('catalogID', this.catalogId)
      let res = await axios.post(`/ui/article/import`, formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      })
      if (res.data.status === 1) {
        this.myImportContentShow = false
        await util.showProgress(res.data.taskID, '文章导入中...')
        this.$emit('callback')
      } else {
        util.showErrorMessageBox(res.data.message)
      }
    },
    // 文件列表移除文件
    removeFileHandler(file, files) {
      this.tmpFileList = JSON.parse(JSON.stringify(files))
    },
    // 改变选中文件触发事件
    selectFileChangeHandler(file, files) {
      if (files.length > 1) {
        this.$message.info('文件总数量限制为1')
        return
      }
      this.tmpFileList = JSON.parse(JSON.stringify(files))
    },
    //  确定资源选中事件返回callback回调函数，附带文件预览路径、文件路径、资源id参数
    confirm() {
      if (this.tmpFileList.length === 0) {
        this.$alert('请选择要上传的文件', '提示', {
          type: 'info',
          confirmButtonText: '确定'
        })
        return
      }
      this.$refs.upload.submit()
      this.myImportContentShow = false
    }
  },
  created() {}
}
</script>
<style scoped>
.import_dailog {
  width: 80%;
  vertical-align: center;
}
</style>
