<script setup lang="ts">
import { Upload } from '@element-plus/icons-vue'
import { useFileDialog } from '@vueuse/core'
import { ElMessage } from 'element-plus'

import { uploadCheckExperimentRecord } from '../api'

const emit = defineEmits<{
  (e: 'update'): void
}>()

// 批量导入
const { files, open, reset } = useFileDialog()
function handleImport() {
  open({
    accept: '.csv,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel',
    multiple: false
  })
}
watchEffect(() => {
  if (!files.value?.length) return
  const [file] = files.value
  uploadCheckExperimentRecord({ file }).then(() => {
    ElMessage({ message: '导入成功', type: 'success' })
    emit('update')
  })
  reset()
})
</script>

<template>
  <el-dialog title="批量导入" :close-on-click-modal="false" width="400px">
    <div class="box">
      <el-button type="primary" round :icon="Upload" @click="handleImport">本地上传</el-button>
      <p>
        <a href="/saas-lab/%E5%AE%9E%E9%AA%8C%E6%88%90%E7%BB%A9%E5%AF%BC%E5%85%A5%E6%A8%A1%E6%9D%BF.xlsx" download
          >下载模板</a
        >
      </p>
    </div>
  </el-dialog>
</template>

<style lang="scss" scoped>
.box {
  padding: 20px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  .el-button {
    width: 220px;
  }
  p {
    color: #999;
    margin-left: 20px;
  }
}
</style>
