<template>
    <div class="code-edit">
        <el-card class="!border-none" shadow="never">
            <el-page-header content="编辑数据表" @back="$router.back()" />
        </el-card>
        <el-card class="mt-4 !border-none" shadow="never">
            <el-form
                ref="formRef"
                class="ls-form"
                :model="formData"
                label-width="100px"
                :rules="rules"
            >
                <el-tabs v-model="activeName">
                    <el-tab-pane label="基础信息" name="base">
                        <el-form-item label="表名称" prop="base.tableName">
                            <div class="w-80">
                                <el-input
                                    v-model="formData.base.tableName"
                                    placeholder="请输入表名称"
                                    clearable
                                />
                            </div>
                        </el-form-item>
                        <el-form-item label="表描述" prop="base.tableComment">
                            <div class="w-80">
                                <el-input
                                    v-model="formData.base.tableComment"
                                    placeholder="请输入表描述"
                                    clearable
                                />
                            </div>
                        </el-form-item>
                        <el-form-item label="实体类名称" prop="base.entityName">
                            <div class="w-80">
                                <el-input
                                    v-model="formData.base.entityName"
                                    placeholder="请输入实体类名称"
                                    clearable
                                />
                            </div>
                        </el-form-item>

                        <el-form-item label="作者" prop="base.authorName">
                            <div class="w-80">
                                <el-input
                                    v-model="formData.base.authorName"
                                    placeholder="请输入作者"
                                    clearable
                                />
                            </div>
                        </el-form-item>
                        <el-form-item label="备注">
                            <div class="w-80">
                                <el-input
                                    v-model="formData.base.remarks"
                                    class="w-full"
                                    type="textarea"
                                    :autosize="{ minRows: 4, maxRows: 4 }"
                                    maxlength="200"
                                    show-word-limit
                                    clearable
                                />
                            </div>
                        </el-form-item>
                    </el-tab-pane>
                    <el-tab-pane label="字段管理" name="column">
                        <el-table :data="formData.column">
                            <el-table-column label="字段列名" prop="columnName" min-width="120" />
                            <el-table-column label="字段描述" prop="columnComment" min-width="120">
                                <template v-slot="{ row }">
                                    <el-input v-model="row.columnComment"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column label="sql类型" prop="columnType" min-width="100" />
                            <el-table-column label="go类型" min-width="140">
                                <template v-slot="{ row }">
                                    <el-select v-model="row.goType">
                                        <el-option label="int" value="int" />
                                        <el-option label="int64" value="int64" />
                                        <el-option label="string" value="string" />
                                        <el-option label="float64" value="float64" />
                                        <el-option label="rune" value="rune" />
                                        <el-option label="bool" value="bool" />
                                        <el-option label="NullTime" value="core.NullTime" />
                                    </el-select>
                                </template>
                            </el-table-column>
                            <!-- <el-table-column label="go属性" min-width="100">
                                <template v-slot="{ row }">
                                    <el-input v-model="row.goField" />
                                </template>
                            </el-table-column> -->
                            <el-table-column label="必填" width="80">
                                <template v-slot="{ row }">
                                    <el-checkbox
                                        v-model="row.isRequired"
                                        :true-label="1"
                                        :false-label="0"
                                    />
                                </template>
                            </el-table-column>
                            <el-table-column label="插入" width="80">
                                <template v-slot="{ row }">
                                    <el-checkbox
                                        v-model="row.isInsert"
                                        :true-label="1"
                                        :false-label="0"
                                    />
                                </template>
                            </el-table-column>
                            <el-table-column label="编辑" width="80">
                                <template v-slot="{ row }">
                                    <el-checkbox
                                        v-model="row.isEdit"
                                        :true-label="1"
                                        :false-label="0"
                                    />
                                </template>
                            </el-table-column>
                            <el-table-column label="列表" width="80">
                                <template v-slot="{ row }">
                                    <el-checkbox
                                        v-model="row.isList"
                                        :true-label="1"
                                        :false-label="0"
                                    />
                                </template>
                            </el-table-column>
                            <el-table-column label="查询" width="80">
                                <template v-slot="{ row }">
                                    <el-checkbox
                                        v-model="row.isQuery"
                                        :true-label="1"
                                        :false-label="0"
                                    />
                                </template>
                            </el-table-column>
                            <el-table-column label="查询方式" min-width="140">
                                <template v-slot="{ row }">
                                    <el-select v-model="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="140">
                                <template v-slot="{ row }">
                                    <el-select v-model="row.htmlType">
                                        <el-option label="文本框" value="input" />
                                        <el-option label="数字框" value="number" />
                                        <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="editor" />
                                    </el-select>
                                </template>
                            </el-table-column>
                            <el-table-column label="字典类型" min-width="140">
                                <template v-slot="{ row }">
                                    <el-select
                                        v-model="row.dictType"
                                        clearable
                                        v-if="
                                            (row.htmlType == 'select' ||
                                                row.htmlType == 'radio' ||
                                                row.htmlType == 'checkbox') &&
                                            !row.listAllApi
                                        "
                                        placeholder="字典类型"
                                        @change="row.listAllApi = null"
                                    >
                                        <el-option
                                            v-for="(item, index) in optionsData.dictType"
                                            :key="index"
                                            :label="item.dictName"
                                            :value="item.dictType"
                                            :disabled="!item.dictStatus"
                                        />
                                    </el-select>
                                </template>
                            </el-table-column>

                            <el-table-column label="数据来源（字典类型优先）" min-width="280">
                                <template v-slot="{ row }">
                                    <el-select
                                        v-model="row.listAllApi"
                                        clearable
                                        filterable
                                        v-if="
                                            (row.htmlType == 'select' ||
                                                row.htmlType == 'radio' ||
                                                row.htmlType == 'checkbox') &&
                                            !row.dictType
                                        "
                                        placeholder="字典类型"
                                        @change="row.dictType = null"
                                    >
                                        <el-option
                                            v-for="(item, index) in optionsData.ApiList"
                                            :key="index"
                                            :label="item"
                                            :value="item"
                                        />
                                    </el-select>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-tab-pane>
                    <el-tab-pane label="生成配置" name="config">
                        <el-form-item label="模板类型" prop="gen.genTpl" required>
                            <el-radio-group v-model="formData.gen.genTpl">
                                <el-radio :value="GenTpl.CRUD">单表（增删改查）</el-radio>
                                <el-radio :value="GenTpl.TREE">树表（增删改查）</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="模块名" prop="gen.moduleName">
                            <div class="w-80">
                                <el-input
                                    v-model="formData.gen.moduleName"
                                    placeholder="请输入模块名"
                                    clearable
                                />
                                <div class="form-tips">生成文件所在模块名</div>
                            </div>
                        </el-form-item>
                        <el-form-item label="功能名称" prop="gen.functionName">
                            <div class="w-80">
                                <el-input
                                    v-model="formData.gen.functionName"
                                    placeholder="请输入功能名称"
                                    clearable
                                />
                            </div>
                        </el-form-item>

                        <template v-if="formData.gen.genTpl == GenTpl.TREE">
                            <el-form-item label="树主键字段" prop="gen.treePrimary">
                                <el-select
                                    class="w-80"
                                    v-model="formData.gen.treePrimary"
                                    clearable
                                >
                                    <el-option
                                        v-for="item in formData.column"
                                        :key="item.id"
                                        :value="item.columnName"
                                        :label="`${item.columnName}：${item.columnComment}`"
                                    />
                                </el-select>
                            </el-form-item>
                            <el-form-item label="树父级字段" prop="gen.treeParent">
                                <el-select class="w-80" v-model="formData.gen.treeParent" clearable>
                                    <el-option
                                        v-for="item in formData.column"
                                        :key="item.id"
                                        :value="item.columnName"
                                        :label="`${item.columnName}：${item.columnComment}`"
                                    />
                                </el-select>
                            </el-form-item>
                            <el-form-item label="树名称字段" prop="gen.treeName">
                                <el-select class="w-80" v-model="formData.gen.treeName" clearable>
                                    <el-option
                                        v-for="item in formData.column"
                                        :key="item.id"
                                        :value="item.columnName"
                                        :label="`${item.columnName}：${item.columnComment}`"
                                    />
                                </el-select>
                            </el-form-item>
                        </template>
                    </el-tab-pane>
                </el-tabs>
            </el-form>
        </el-card>
        <footer-btns>
            <el-button type="primary" @click="handleSave">保存</el-button>
        </footer-btns>
    </div>
</template>

<script lang="ts" setup>
import { useRoute, useRouter } from 'vue-router'
import { ref, reactive, shallowRef } from 'vue'

import { generateEdit, tableDetail } from '@/api/tools/code'
import { dictTypeAll } from '@/api/setting/dict'
import type { FormInstance } from 'element-plus'
import feedback from '@/utils/feedback'
import { menuLists } from '@/api/perms/menu'
import { getApiList } from '@/api/setting/website'
import { useDictOptions } from '@/hooks/useDictOptions'
import useMultipleTabs from '@/hooks/useMultipleTabs'
enum GenTpl {
    CRUD = 'crud',
    TREE = 'tree'
}
defineOptions({
    name: 'tableEdit'
})
const route = useRoute()
const router = useRouter()
const { removeTab } = useMultipleTabs()
const activeName = ref('column')
const formData = reactive({
    base: {
        id: '',
        tableName: '',
        tableComment: '',
        entityName: '',
        authorName: '',
        remarks: ''
    },
    column: [] as any[],
    gen: {
        functionName: '',

        genTpl: '',
        moduleName: '',
        subTableFk: '',
        subTableName: '',
        treeParent: '',
        treePrimary: '',
        treeName: ''
    }
})

const formRef = shallowRef<FormInstance>()
const rules = reactive({
    ['base.tableName']: [{ required: true, message: '请输入表名称', trigger: 'blur' }],
    ['base.tableComment']: [{ required: true, message: '请输入表描述', trigger: 'blur' }],
    ['base.entityName']: [{ required: true, message: '请输入实体类名称', trigger: 'blur' }],
    // ['base.authorName']: [{ required: true, message: '请输入作者', trigger: 'blur' }],
    ['gen.moduleName']: [{ required: true, message: '请输入模块名', trigger: 'blur' }],
    ['gen.functionName']: [{ required: true, message: '请输入功能名称', trigger: 'blur' }],
    ['gen.treePrimary']: [{ required: true, message: '请选择树主键字段', trigger: 'blur' }],
    ['gen.treeParent']: [{ required: true, message: '请选择树父级字段', trigger: 'blur' }],
    ['gen.treeName']: [{ required: true, message: '请选择树名称字段', trigger: 'blur' }]
})

const getDetails = async () => {
    const data = await tableDetail({
        id: route.query.id
    })
    Object.keys(formData).forEach((key) => {
        //@ts-ignore
        formData[key] = data[key]
    })
}

const { optionsData } = useDictOptions<{
    dictType: any[]
    menu: any[]
    ApiList: string[]
}>({
    dictType: {
        api: dictTypeAll
    },
    menu: {
        api: menuLists,
        transformData(data: any) {
            const menu = { id: 0, name: '顶级', children: [] }
            menu.children = data
            return menu
        }
    },
    ApiList: {
        api: getApiList,
        transformData(data: any) {
            return data.filter((item: any) => {
                return item.endsWith('listAll')
            })
        }
    }
})

const handleSave = async () => {
    try {
        await formRef.value?.validate()
        const { base, column, gen } = formData
        await generateEdit({ ...base, ...gen, columns: column })
        feedback.msgSuccess('操作成功')
        removeTab()
        router.back()
    } catch (error: any) {
        for (const err in error) {
            const isInRules = Object.keys(rules).includes(err)
            isInRules && feedback.msgError(error[err][0]?.message)
        }
    }
}

getDetails()
</script>
