<template>
  <el-dialog v-bind="$attrs" v-on="$listeners">
    <el-form :model="form" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="关联项目">
        <el-select @change="$forceUpdate()" filterable multiple v-model="form.projects_id" placeholder="请选择">
          <el-option v-for="item in options" :key="item.id" :label="item.title" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <el-upload
      style="text-align: center"
      class="file-import"
      ref="upload"
      action="#"
      :auto-upload="false"
      :file-list="fileList"
      :limit="1"
      :before-upload="beforeUpload"
      :http-request="fetchFileUpload"
      accept=".xls,.xlsx"
      drag
    >
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
    </el-upload>
    <div style="text-align: center">
      <a
        href="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/pages/highway/road/A%E4%BA%BA%E5%91%98%E6%A8%A1%E6%9D%BF.xlsx"
        download="人员模板.xlsx"
        style="color: #1655b2"
      >
        <i class="el-icon-download"></i>人员模板.xlsx</a
      >
    </div>
    <div style="text-align: center; margin-top: 15px">
      <el-button size="mini" @click="cancel">取消</el-button>
      <el-button type="primary" size="mini" @click="submitUpload" style="margin-right: 5px"> 确认提交</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { splitStrLast } from '@/utils/util'
import { importPeople, getProjectList } from '../api'
export default {
  data() {
    return {
      options: [],
      form: {
        projects_id: []
      },
      file: '',
      activityOption: [],
      stepOption: [],
      fileList: []
    }
  },
  computed: {},
  mounted() {
    this.getProjectList()
  },
  methods: {
    // 获取项目列表
    getProjectList() {
      getProjectList({ 'per-page': '1000' }).then(res => {
        this.options = res.data.list.filter(item => item.status !== '2')
      })
    },
    beforeUpload(file) {
      const suffix = splitStrLast(file.name, '.')
      if (!['xlsx', 'xls'].includes(suffix)) {
        this.$message.error('只能上传excel文件')
        return false
      } else {
        return true
      }
    },
    fetchFileUpload(data) {
      importPeople({
        file: data.file,
        projects_id: this.form.projects_id.toString()
      }).then(res => {
        if (res.code === 0) {
          this.$message.success('导入数据成功')
          // history.go(0)
        }
      })
    },
    submitUpload() {
      this.$refs.upload.submit()
    },
    cancel() {
      this.$emit('cancel')
    }
  }
}
</script>
<style lang="scss" scoped>
.file-import {
  ::v-deep {
    .el-upload-dragger {
      width: 260px !important;
    }
  }
}
</style>
