// 导入岗位
<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
          v-if="role == 2"
          label="所属单位"
          prop="adminId"
        >
          <el-select
            v-model="form.adminId"
            filterable
            clearable
            placeholder="请选择单位简称"
            style="width: 100%"
          >
            <el-option
              v-for="item in account_list"
              :key="item.adminId"
              :label="item.username"
              :value="item.adminId"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="申请理由" prop="reason" required>
          <el-input
            v-model="form.reason"
            maxlength="250"
            show-word-limit
            type="textarea"
            :rows="2"
            placeholder="请输入申请理由"
          />
        </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 { excelInsertDeptPost, getPostRecursionList } from '@/api/user_manage'

export default {
  components: { },
  filters: {
    matchNull(str) {
      if (!str) {
        return '暂无'
      } else {
        return str
      }
    }
  },
  props: {
    account_list: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      department_list: [],
      role: this.$store.getters.role,
      form: {
        reason: null, // 申请理由 250字数
        adminId: null,
        file: null
      },
      rules: {
        adminId: [
          { required: true, message: '请选择', trigger: 'change' }
        ],
        reason: [
          {
            required: 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 {
          if (this.role !== 2) {
            this.form.adminId = this.$store.getters.adminId
          }
          var formData = new FormData() // 必需声明一个FormData对象
          formData.append('file', this.form.file)
          formData.append('reason', this.form.reason)
          formData.append('adminId', this.form.adminId)
          await excelInsertDeptPost(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>
