<script setup lang="ts">
import type { FormInstance } from 'element-plus'
import { ElMessage } from 'element-plus'
import { getMemberConnectionsList, getMemberGroups, importMember } from '../api'
import type { ConnectionsProp } 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({
  connection_id: '',
  groups_id: ''
})

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

// 链接列表
let connectionList = $ref<ConnectionsProp[]>()
// 群组列表
let groupList = $ref<{ name: string; id: string }[]>()
onMounted(() => {
  getMemberConnectionsList().then(res => {
    connectionList = res.data
  })
  getMemberGroups().then(res => {
    groupList = res.data
  })
})

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

// 上传
const fetchFileUpload = () => {
  if (fileData[0]) {
    const params = Object.assign(form, fileData[0])
    importMember(params).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="142px">
      <el-form-item label="请选择所属链接" prop="connection_id">
        <el-select v-model="form.connection_id" style="width: 100%">
          <el-option v-for="item in connectionList" :key="item.id" :label="item.type_name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="请选择静态群组">
        <el-select v-model="form.groups_id" style="width: 100%">
          <el-option v-for="item in groupList" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div class="btn-box">
      <el-button type="primary" style="margin-right: 20px" @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 {
  position: relative;
  text-align: center;
  margin-bottom: 20px;
  display: flex;
  justify-content: center;
  .uploader {
    flex: none !important;
  }
  .el-upload-list {
    width: 90%;
    position: absolute;
    left: 0;
  }
}
</style>
