<template>
  <el-card>
    <el-tabs v-model="activeName">
      <el-tab-pane label="基本信息" name="basic">
        <basic-info-form ref="basicInfoRef" :info="info" />
      </el-tab-pane>
      <el-tab-pane label="字段信息" name="columnInfo">
        <el-table
          ref="dragTableRef"
          :data="columns"
          row-key="columnId"
          :max-height="tableHeight"
        >
          <el-table-column
            label="序号"
            type="index"
            min-width="5%"
            class-name="allowDrag"
          />
          <el-table-column
            label="字段列名"
            prop="columnName"
            min-width="10%"
            :show-overflow-tooltip="true"
          />
          <el-table-column label="字段描述" min-width="10%">
            <template #default="scope">
              <el-input v-model="scope.row.columnComment"></el-input>
            </template>
          </el-table-column>
          <el-table-column
            label="物理类型"
            prop="columnType"
            min-width="10%"
            :show-overflow-tooltip="true"
          />
          <el-table-column label="Java类型" min-width="11%">
            <template #default="scope">
              <el-select v-model="scope.row.javaType">
                <el-option label="Long" value="Long" />
                <el-option label="String" value="String" />
                <el-option label="Integer" value="Integer" />
                <el-option label="Double" value="Double" />
                <el-option label="BigDecimal" value="BigDecimal" />
                <el-option label="Date" value="Date" />
                <el-option label="Boolean" value="Boolean" />
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="java属性" min-width="10%">
            <template #default="scope">
              <el-input v-model="scope.row.javaField"></el-input>
            </template>
          </el-table-column>

          <el-table-column label="插入" min-width="5%">
            <template #default="scope">
              <el-checkbox
                true-label="1"
                false-label="0"
                v-model="scope.row.isInsert"
              />
            </template>
          </el-table-column>
          <el-table-column label="编辑" min-width="5%">
            <template #default="scope">
              <el-checkbox
                true-label="1"
                false-label="0"
                v-model="scope.row.isEdit"
              />
            </template>
          </el-table-column>
          <el-table-column label="列表" min-width="5%">
            <template #default="scope">
              <el-checkbox
                true-label="1"
                false-label="0"
                v-model="scope.row.isList"
              />
            </template>
          </el-table-column>
          <el-table-column label="查询" min-width="5%">
            <template #default="scope">
              <el-checkbox
                true-label="1"
                false-label="0"
                v-model="scope.row.isQuery"
              />
            </template>
          </el-table-column>
          <el-table-column label="查询方式" min-width="10%">
            <template #default="scope">
              <el-select v-model="scope.row.queryType">
                <el-option label="=" value="EQ" />
                <el-option label="!=" value="NE" />
                <el-option label=">" value="GT" />
                <el-option label=">=" value="GTE" />
                <el-option label="<" value="LT" />
                <el-option label="<=" value="LTE" />
                <el-option label="LIKE" value="LIKE" />
                <el-option label="BETWEEN" value="BETWEEN" />
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="必填" min-width="5%">
            <template #default="scope">
              <el-checkbox
                true-label="1"
                false-label="0"
                v-model="scope.row.isRequired"
              />
            </template>
          </el-table-column>
          <el-table-column label="显示类型" min-width="12%">
            <template #default="scope">
              <el-select v-model="scope.row.htmlType">
                <el-option label="文本框" value="input" />
                <el-option label="文本域" value="textarea" />
                <el-option label="下拉框" value="select" />
                <el-option label="单选框" value="radio" />
                <el-option label="复选框" value="checkbox" />
                <el-option label="日期控件" value="datetime" />
                <el-option label="图片上传" value="imageUpload" />
                <el-option label="文件上传" value="fileUpload" />
                <el-option label="富文本控件" value="editor" />
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="字典类型" min-width="12%">
            <template #default="scope">
              <el-select
                v-model="scope.row.dictType"
                clearable
                filterable
                placeholder="请选择"
              >
                <el-option
                  v-for="dict in dictOptions"
                  :key="dict.dictType"
                  :label="dict.dictName"
                  :value="dict.dictType"
                >
                  <span style="float: left">{{ dict.dictName }}</span>
                  <span style="float: right; color: #8492a6; font-size: 13px">
                    {{ dict.dictType }}
                  </span>
                </el-option>
              </el-select>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="生成信息" name="genInfo">
        <gen-info-form
          ref="genInfoRef"
          :info="info"
          :tables="tables"
          :menus="menus"
        />
      </el-tab-pane>
    </el-tabs>
    <el-form label-width="100px">
      <el-form-item
        style="text-align: center;margin-left:-100px;margin-top:10px;"
      >
        <el-button type="primary" @click="submitForm()">提交</el-button>
        <el-button @click="close()">返回</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script setup lang="ts">
import { ref, onMounted, nextTick } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import Sortable from 'sortablejs'

import { getGenTable, updateGenTable } from "@/apis/gen/gen"
// import { optionselect as getDictOptionselect } from "@/api/system/dict/type"
// import { listMenu as getMenuTreeselect } from "@/api/system/menu"
import basicInfoForm from "./basicInfoForm.vue"
import genInfoForm from "./genInfoForm.vue"

// 定义类型
interface DictOption {
  dictType: string
  dictName: string
}

interface Column {
  columnId: number
  columnName: string
  columnComment: string
  columnType: string
  javaType: string
  javaField: string
  isInsert: string
  isEdit: string
  isList: string
  isQuery: string
  queryType: string
  isRequired: string
  htmlType: string
  dictType: string
  sort?: number
}

interface TableInfo {
  [key: string]: any
}

interface Menu {
  menuId: number
  [key: string]: any
}

// 响应式数据
const activeName = ref('columnInfo')
const tableHeight = ref(`${document.documentElement.scrollHeight - 245}px`)
const tables = ref<TableInfo[]>([])
const columns = ref<Column[]>([])
const dictOptions = ref<DictOption[]>([])
const menus = ref<Menu[]>([])
const info = ref<TableInfo>({})

// 模板引用
const basicInfoRef = ref<InstanceType<typeof basicInfoForm> | null>(null)
const genInfoRef = ref<InstanceType<typeof genInfoForm> | null>(null)
const dragTableRef = ref()

// 路由
const route = useRoute()
const router = useRouter()

// 方法
const handleTree = (data: any[], idKey: string) => {
  // 这里需要实现树形数据处理逻辑，根据原项目中的实现
  // 这里仅作示例，您需要根据实际实现调整
  return data
}

const submitForm = async () => {
  if (!basicInfoRef.value || !genInfoRef.value) {
    ElMessage.error('表单组件未正确加载')
    return
  }

  try {
    const basicForm = basicInfoRef.value.getFormRef()
    const genForm = genInfoRef.value.getFormRef()

    console.log('基础表单引用:', basicForm)
    console.log('生成信息表单引用:', genForm)

    if (!basicForm || !genForm) {
      ElMessage.error('表单引用获取失败')
      return
    }

    // 分别验证表单
    let basicValid = false
    let genValid = false

    try {
      basicValid = await basicForm.validate()
      console.log('基础表单验证通过')
    } catch (basicError) {
      console.error('基础表单验证失败:', basicError)
      ElMessage.error('基本信息表单验证失败，请检查必填项')
      activeName.value = 'basic'
      return
    }

    try {
      genValid = await genForm.validate()
      console.log('生成信息表单验证通过')
    } catch (genError) {
      console.error('生成信息表单验证失败:', genError)
      ElMessage.error('生成信息表单验证失败，请检查必填项')
      activeName.value = 'genInfo'
      return
    }

    if (basicValid && genValid) {
      // 详细检查所有必填字段
      console.log('提交前的完整 info 数据:', JSON.stringify(info.value, null, 2))

      const requiredFields = [
        'packageName', 'tableName', 'functionName', 'functionAuthor',
        'businessName', 'moduleName', 'className', 'tableComment'
      ]

      // 检查每个字段的具体值
      requiredFields.forEach(field => {
        console.log(`${field}:`, info.value[field], '类型:', typeof info.value[field])
      })

      const missingFields = requiredFields.filter(field => !info.value[field])
      if (missingFields.length > 0) {
        ElMessage.error(`以下字段不能为空: ${missingFields.join(', ')}`)
        activeName.value = 'basic'
        return
      }


      const genTable = {
        ...info.value,
        columns: columns.value,
        params: {
          treeCode: info.value.treeCode || '',
          treeName: info.value.treeName || '',
          treeParentCode: info.value.treeParentCode || '',
          parentMenuId: info.value.parentMenuId || ''
        }
      }

      console.log('提交的完整数据:', genTable)

      const res = await updateGenTable(genTable)
      if (res.code === 200) {
        ElMessage.success(res.msg)
        close()
      } else {
        ElMessage.error(res.msg || '提交失败')
      }
    }
  } catch (error) {
    console.error('提交过程中发生错误:', error)
    ElMessage.error("提交失败，请检查表单数据")
  }
}


const close = () => {

  const obj = {
    path: "/gen-index",
    query: {
      t: Date.now(),
      pageNum: route.query.pageNum
    }
  }

  // 根据您的路由和标签页管理实现调整
  // 这里假设您有类似的功能来关闭页面
  router.push(obj)
}

// 初始化拖拽
const initSortable = () => {
  nextTick(() => {
    if (!dragTableRef.value) return

    const el = dragTableRef.value.$el.querySelectorAll(".el-table__body-wrapper > table > tbody")[0]
    if (!el) return

    Sortable.create(el, {
      handle: ".allowDrag",
      onEnd: (evt) => {
        const { oldIndex, newIndex } = evt
        if (oldIndex === undefined || newIndex === undefined) return

        const targetRow = columns.value.splice(oldIndex, 1)[0]
        columns.value.splice(newIndex, 0, targetRow)

        // 更新排序
        columns.value.forEach((column, index) => {
          column.sort = index + 1
        })
      }
    })
  })
}

// 生命周期
onMounted(async () => {
  const tableId = route.params?.tableId as string
  if (tableId) {
    try {
      // 获取表详细信息
      const res = await getGenTable(tableId)
      columns.value = res.data.rows
      info.value = res.data.info
      tables.value = res.data.tables

      // 查询字典下拉列表
      // const dictRes = await getDictOptionselect()
      // dictOptions.value = dictRes.data

      // 查询菜单下拉列表
      // const menuRes = await getMenuTreeselect()
      // menus.value = handleTree(menuRes.data, "menuId")

      // 初始化拖拽
      initSortable()
    } catch (error) {
      console.error('初始化数据失败:', error)
    }
  }
})
</script>
