<template>
  <!-- 创建表 -->
  <el-dialog
    title="创建表"
    v-model="visible"
    width="800px"
    top="5vh"
    append-to-body
  >
    <span>创建表语句(支持多个建表语句)：</span>
    <el-input
      type="textarea"
      :rows="10"
      placeholder="请输入文本"
      v-model="content"
    />
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="handleCreateTable">确 定</el-button>
        <el-button @click="visible = false">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { createTable } from "@/apis/gen/gen"

// 定义props和emits
interface Emits {
  (e: 'ok'): void
}

const emit = defineEmits<Emits>()

// 响应式数据
const visible = ref(false)
const content = ref('')

// 方法
const show = () => {
  visible.value = true
}

/** 创建按钮操作 */
const handleCreateTable = async () => {
  if (content.value === "") {
    ElMessage.error("请输入建表语句")
    return
  }

  try {
    const res = await createTable({ sql: content.value })
    ElMessage.success(res.msg)
    if (res.code === 200) {
      visible.value = false
      emit('ok')
    }
  } catch (error) {
    console.error('创建表失败:', error)
  }
}

// 暴露方法给父组件
defineExpose({
  show
})
</script>
