<template>
 <!-- 导入按钮 -->
  <el-button @click="show=!show" v-if="!contentType||contentType=='Article'" :priv="'com.zving.cms.Catalog.Content.Add.'+catalogId">
    <i class="fa fa-arrow-down"></i>导入
    <el-dialog title="导入内容" :visible.sync="show" @close="dialogClose" :append-to-body="true" size="small" class="import_dailog">
      <el-form label-position="right" label-width="100px">
        <el-form-item label="文件：">
            <el-upload ref="upload" :multiple="true" action="" :file-list="tmpFileList" :auto-upload="false" :http-request="fileUploadHandler" :on-exceed="exceedFile" :on-remove="removeFileHandler" :on-change="selectFileChangeHandler" :accept="allowType">
              <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="show = false">取 消</el-button>
        <el-button type="primary" @click="confirm" :loading="handlerLoading">确 定</el-button>
      </div>
    </el-dialog>
  </el-button>
</template>
<script>
import util from '@src/common/util.js'
export default {
  props: {
    catalogId: {
      type: [String, Number]
    },
    contentType: {
      type: String
    }
  },
  data() {
    return {
      show: false,
      handlerLoading: false,
      tmpFileList: [],
      allowType: '.doc,.docx,.xls,.xlsx,.ppt,.pptx'
    }
  },
  methods: {
    dialogClose() {
      this.tmpFileList = []
      this.$refs.upload.clearFiles()
    },
    async fileUploadHandler(files) {
      let formData = new FormData()
      for (let i = 0; i < files.length; i++) {
        formData.append('file', files[i].raw)
      }
      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.show = false
        await util.showProgress(res.data.taskID, '文章导入中...')
        this.$emit('refresh-content')
      } else {
        util.showErrorMessageBox(res.data.message)
      }
    },
    exceedFile(files) {
      this.tmpFileList = files
    },
    // 文件列表移除文件
    removeFileHandler(file, files) {
      this.tmpFileList = files
    },
    // 改变选中文件触发事件
    selectFileChangeHandler(file, files) {
      this.tmpFileList = files
    },
    //  确定资源选中事件返回callback回调函数，附带文件预览路径、文件路径、资源id参数
    confirm() {
      if (this.tmpFileList.length === 0) {
        this.$alert('请选择要上传的文件', '提示', {
          type: 'info',
          confirmButtonText: '确定'
        })
        return
      }
      this.fileUploadHandler(this.tmpFileList)
    }
  }
}
</script>
<style scoped>
.import_dailog {
  vertical-align: center;
}
</style>
