<template>
  <el-dialog v-model="dialogVisible" :close-on-click-modal="false" :title="parameter.title" :destroy-on-close="true" width="600" top="8vh" draggable>
    <div style="text-align: center" v-if="parameter.type === 'import'">
      <h3>数据导入中...</h3>
      <div class="info-text">关闭弹窗后可在[<el-link type="primary" @click="link">头像-我的导入导出-导入信息</el-link>] 中查看导入记录。</div>
    </div>
    <div style="text-align: center" v-else>
      <h3>文件导出中...</h3>
      <div class="info-text">关闭弹窗后可在[<el-link type="primary" @click="link">头像-我的导入导出-导出信息</el-link>] 下载查看。</div>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleCancel">关闭</el-button>
      </span>
    </template>
  </el-dialog>
  <IEDrawer ref="drawerRef" />
</template>

<script setup lang="ts" name="TaskDialog">
import IEDrawer from '@/views/import-export/index.vue'

export interface DialogProps {
  title: string // 标题
  type: 'import' | 'export' // 导入导出类型
}
// dialog状态
const dialogVisible = ref(false)
// 父组件传过来的参数
let parameter = ref<DialogProps>({
  title: '导入信息',
  type: 'import'
})

// 取消按钮，重置表单，关闭弹框
const handleCancel = () => {
  dialogVisible.value = false
}
const drawerRef = ref<InstanceType<typeof IEDrawer> | null>(null)
const link = () => {
  drawerRef.value?.acceptParams()
  dialogVisible.value = false
}
// 接收父组件参数
const openImportDialog = () => {
  dialogVisible.value = true
}
const openExportDialog = () => {
  dialogVisible.value = true
  parameter.value = {
    title: '导出信息',
    type: 'export'
  }
}

defineExpose({
  openImportDialog,
  openExportDialog,
  handleCancel
})
</script>
<style setup lang="scss">
.info-text {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
