<script setup lang="ts">
import type { FormInstance } from 'element-plus'
import { ElMessage } from 'element-plus'
import { getEventList, importEvent } from '../api'
import type { EventProp } from '../types'
import AppUpload from '@/components/base/AppUpload.vue'

const route = useRoute()

const emit = defineEmits<{
  (e: 'update'): void
  (e: 'update:modelValue', visible: boolean): void
}>()

const formRef = $ref<FormInstance>()
const form = reactive({
  event_id: ''
})

const rules = ref<any>({
  event_id: [{ required: true, message: '请选择' }]
})

// 选择事件
let eventList = $ref<EventProp[]>()
onMounted(() => {
  getEventList().then(res => {
    eventList = res.data
  })
})

const connectionName = computed(() => {
  return eventList?.find((item: EventProp) => item.id === form.event_id)?.connection_name
})

// 下载数据模板
const downloadTemplate = function () {
  if (form.event_id !== '')
    window.open(
      `/api/lab/v1/experiment/member/event-download?event_id=${form.event_id}&experiment_id=${route.query.experiment_id}`
    )
}

// 上传
const fetchFileUpload = () => {
  if (fileData[0]) {
    const params = Object.assign(form, fileData[0])
    importEvent(params).then(() => {
      ElMessage.success('导入数据成功')
      emit('update')
      emit('update:modelValue', false)
    })
  }
  // return new Promise(() => {
  //   importEvent({ event_id: form.event_id, file: option.file }).then(() => {
  //     ElMessage.success('导入数据成功')
  //     emit('update')
  //     emit('update:modelValue', false)
  //   })
  // })
}

const fileData = $ref<any>([])
</script>

<template>
  <el-dialog
    class="connect-form"
    title="导入用户事件数据"
    :close-on-click-modal="false"
    width="500px"
    @closed="$emit('update:modelValue', false)">
    <el-form ref="formRef" :model="form" :rules="rules" label-suffix="：" label-width="122px">
      <el-form-item label="请选择事件" prop="event_id">
        <el-select v-model="form.event_id" style="width: 100%">
          <el-option v-for="item in eventList" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
        <span v-if="connectionName">事件所属链接：{{ connectionName }}</span>
      </el-form-item>
    </el-form>
    <div class="btn-box">
      <el-button style="margin-right: 20px" type="primary" @click="downloadTemplate">下载事件数据模板</el-button>
      <AppUpload v-model="fileData" :limit="1">
        <el-button type="primary">上传事件数据</el-button>
      </AppUpload>
      <!-- <el-upload
        class="upload-demo"
        action="#"
        multiple
        ref="upload"
        :auto-upload="true"
        :limit="1"
        :http-request="fetchFileUpload"
      >
        <el-button type="primary">上传事件数据</el-button>
      </el-upload> -->
    </div>
    <div class="btn-box">
      <el-button type="primary" style="margin-top: 30px" @click="fetchFileUpload">导入</el-button>
    </div>
  </el-dialog>
</template>
<style lang="scss">
.btn-box {
  display: flex;
  text-align: center;
  margin-bottom: 20px;
  justify-content: center;
  .uploader {
    flex: none !important;
  }
  .el-upload-list {
    width: 90%;
    position: absolute;
    left: 0;
  }
}
</style>
