// 导入黑名单
<template>
  <div>
    <el-dialog
      title="批量导入"
      width="600px"
      :visible.sync="dialogVisible"
      :destroy-on-close="false"
      :close-on-click-modal="false"
      @close="dialogClose"
    >
      <el-form
        ref="form"
        :rules="rules"
        :model="form"
        label-position="left"
        label-width="80px"
        enctype="multipart/form-data"
      >
        <el-form-item label="任务名称" prop="taskName" required>
          <el-input
            v-model="form.taskName"
            placeholder="请输入任务名称"
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item label="购买方" prop="purchaserId" required>
          <el-select
            v-model="form.purchaserId"
            placeholder="请选择购买方"
            filterable
            style="width: 100%"
          >
            <el-option
              v-for="(item, index) in buyList"
              :key="index"
              :label="item.companyName"
              :value="item.purchaserId"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="上传文件" prop="file" required>
          <a href="javascript:;" class="custom_file">选择文件
            <input
              id="fileSelect"
              ref="referenceUpload"
              type="file"
              style="opacity: 0"
              accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel"
              runat="server"
              @change="upload"
            >
          </a>
          {{ form.file && form.file.name ? form.file.name : "" }}
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false"> 取消 </el-button>
        <el-button :loading="submitLoading" type="primary" @click="submit"> 确定 </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

import { importBlackTask } from '@/api/blacklist'

export default {
  components: { },
  filters: {
    matchNull(str) {
      if (!str) {
        return '暂无'
      } else {
        return str
      }
    }
  },
  props: {
    buyList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      form: {
        taskName: null, // 任务名称
        purchaserId: null,
        file: null
      },
      rules: {
        taskName: [
          {
            required: true,
            message: '任务名称不能为空!',
            trigger: ['change', 'blur']
          }
        ],
        purchaserId: [
          {
            required: true,
            type: 'number',
            whitespace: true,
            message: '购买方不能为空!',
            trigger: ['change', 'blur']
          }
        ],
        file: [
          {
            required: true,
            message: '文件不能为空!',
            trigger: ['change', 'blur']
          }
        ]
      },
      submitLoading: false,
      dialogVisible: false
    }
  },
  created() {
  },
  methods: {
    open() {
      this.dialogVisible = true
      this.$nextTick(() => {
        this.$refs.form.resetFields()
      })
    },
    dialogClose() {
    },
    upload(e) {
      console.log(e)
      // 处理excel
      this.form.file = e.target.files[0]
    },
    submit(e) {
      e.preventDefault()
      this.$refs.form.validate(async(valid) => {
        if (!valid) {
          this.submitLoading = false
          return false
        }
        if (this.submitLoading) {
          return
        }
        this.submitLoading = true
        console.log(this.form)
        try {
          var formData = new FormData() // 必需声明一个FormData对象
          formData.append('file', this.form.file)
          formData.append('purchaserId', this.form.purchaserId)
          formData.append('taskName', this.form.taskName)
          await importBlackTask(formData)
          this.dialogVisible = false
          this.$message.success(`添加成功`)
          this.$emit('finish')
        } catch (e) {
          this.$refs.form.resetFields()
        } finally {
          this.submitLoading = false
        }
      })
    }
  }
}
</script>

<style scoped>
.custom_file {
  position: relative;
  margin-right: 10px;
  background: #d0eeff;
  border: 1px solid #99d3f5;
  border-radius: 4px;
  padding: 10px 20px;
  box-sizing: border-box;
  overflow: hidden;
  color: #1e88c7;
  text-decoration: none;
  text-indent: 0;
  cursor: pointer;
}
.custom_file input {
  position: absolute;
  font-size: 14px;
  width: 106px;
  height: 40px;
  left: 0;
  top: 0;
  opacity: 0;
  cursor: pointer;
}
.custom_file:hover {
  background: #aadffd;
  border-color: #78c3f3;
  color: #004974;
  text-decoration: none;
}
</style>
<style scoped>
::v-deep .el-select {
  width: 100%;
}
.table {
  margin-top: 15px;
}
</style>
