<template>
  <popup
    v-model="showDialog"
    class="max-w-[1200px] h-[80%] min-h-[400px]"
    body-class="flex-1 min-h-0"
    title="导入数据表"
    :width="isMobile ? '96%' : '80%'"
  >
    <div class="flex flex-col h-full" v-loading="isLoading">
      <el-form ref="queryFormRef" :model="queryParams" inline>
        <el-form-item class="w-[280px]" label="表名/描述">
          <el-input v-model="queryParams.name" placeholder="请输入表名或描述" clearable @keyup.enter="handleQuery" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleQuery">搜索</el-button>
          <el-button @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
      <div class="flex-1 min-h-0">
        <el-table :data="tableData" border height="100%" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55" align="center" fixed="left" />
          <el-table-column prop="name" label="表名称" align="center" min-width="150" show-overflow-tooltip />
          <el-table-column prop="comment" label="表描述" align="center" min-width="150" show-overflow-tooltip />
          <el-table-column prop="engine" label="Engine" align="center" min-width="100" />
          <el-table-column prop="rows" label="行数" align="center" min-width="100" />
          <el-table-column prop="create_time" label="创建时间" align="center" min-width="170" />
        </el-table>
      </div>
      <div class="flex mt-4 justify-end">
        <Pagination v-model="queryParams" :total="total" @change="getLists" />
      </div>
    </div>
    <template #footer>
      <div class="flex justify-end">
        <el-button @click="showDialog = false">取消</el-button>
        <el-button type="primary" :loading="isLoading" :disabled="!multipleSelection.length" @click="handleImport">
          确认导入
        </el-button>
      </div>
    </template>
  </popup>
</template>

<script setup lang="ts">
import type { FormInstance } from 'element-plus'
import { generatorLists, generatorImport } from '@/api/tool/generator'
import { useConfigStore } from '@/stores/modules/config'

// 定义组件事件
const emit = defineEmits<{
  (event: 'success'): void
}>()

// 组件参数
const showDialog = ref(false)
const queryFormRef = shallowRef<FormInstance>()
const queryParams = reactive({
  page: 1,
  limit: 10,
  name: '',
  type: 'db'
})
const total = ref(0)
const isLoading = ref(false)
const tableData = ref([])
const multipleSelection = ref<any[]>([])
const configStore = useConfigStore()
const isMobile = computed(() => configStore.windowSizeLevel === 1)

// 打开弹窗
const open = () => {
  showDialog.value = true
  handleQuery()
}
// 获取列表
const getLists = async () => {
  isLoading.value = true
  generatorLists(queryParams)
    .then((res) => {
      tableData.value = res.data || []
      total.value = res.total || 0
      isLoading.value = false
    })
    .catch(() => {
      isLoading.value = false
    })
}
// 搜索
const handleQuery = async () => {
  queryParams.page = 1
  getLists()
}
// 重置
const resetQuery = () => {
  queryFormRef.value?.resetFields()
  handleQuery()
}
// 多选框选中数据
const handleSelectionChange = (selection: any[]) => {
  multipleSelection.value = selection
}
// 确认导入
const handleImport = async () => {
  if (!multipleSelection.value.length) return
  const tables = multipleSelection.value.map((item) => item.name)
  isLoading.value = true
  try {
    await generatorImport({ tables })
    ElMessage.success('导入成功')
    showDialog.value = false
    emit('success')
  } finally {
    isLoading.value = false
  }
}

defineExpose({ open })
</script>
