<template>
    <el-dialog v-model="visible" title="导入" width="80%" append-to-body>
      <el-row>
        <el-col>
          <a href="excel/dictlist.xlsx" rel="external nofollow" download="职工信息字典下载">
            <el-button style="margin-left: 20px" size="small" type="success">职工信息字典下载</el-button>
          </a>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <el-tag>导入时，部分字段需严格按照字典值填写</el-tag>
        </el-col>
      </el-row>

      <el-row>
        <el-upload
          class="upload-demo"
          action="/professional/file/importTeacherInfoSimple"
          :headers="headers"
          :accept="'.xls,.xlsx'"
          :on-success="handleUploadSuccess"
          :on-error="handleAvatarError"
          list-type="picture">
          <el-button size="small" type="primary">点击上传</el-button>
          <template #tip>
            <div class="el-upload__tip">只能上传后缀为xls,xlsx的文件</div>
          </template>
        </el-upload>
      </el-row>
    </el-dialog>
</template>

<script setup lang="ts">
  import { ref, computed } from 'vue'
  import { ElNotification } from 'element-plus'
  import { Session } from '/@/utils/storage'

  // 响应式数据
  const visible = ref(false)

  // 计算属性
  const headers = computed(() => {
        return {
      "Authorization": 'Bearer ' + Session.getToken()
        }
  })

  // 方法
  const init = () => {
    visible.value = true
  }

  const handleUploadSuccess = () => {
    visible.value = false
    ElNotification({
      title: '成功',
      message: '导入成功',
      type: 'success',
    })
  }

  const handleAvatarError = (err: any) => {
    const result = JSON.parse(err.message)
    if (result.code == "1") {
      ElNotification.error({
        title: '错误',
        message: result.msg,
        duration: 30000
      })
      }
    }

  // 暴露方法给父组件
  defineExpose({
    init
  })
</script>

<style scoped>

</style>
