<template>
    <div class="l-from-body">
        <a-form ref="formRef" :rules="data.rules" :model="formData" labelAlign="left" :label-col="labelCol"
            :wrapper-col="wrapperCol">
            <!-- <a-form-item label="数据库" name="dbCode">
                <a-select v-model:value="formData.dbCode" placeholder="请选择" :options="data.options">
                    <el-option-group v-for="group in lr_dblinkTree" :key="group.id" :label="group.label">
                        <el-option v-for="item in group.children" :key="item.id" :label="item.label" :value="item.id">
                        </el-option>
                    </el-option-group>
                </a-select>
            </a-form-item> -->
            <a-form-item label="数据表" name="table">
                <!-- <a-select v-model:value="formData.table" placeholder="请选择" :options="formData.columns">
                </a-select> -->
                <a-space>
                    <a-input v-model:value="formData.table" placeholder="请输入" readonly />
                    <a-button @click="handleTableClick">选择</a-button>
                </a-space>
            </a-form-item>
            <a-form-item label="关联流程字段" name="rfield">
                <a-select v-model:value="formData.rfield" placeholder="请选择" :options="data.columns">
                </a-select>
            </a-form-item>
            <a-form-item label="审核人字段" name="auditorField">
                <a-select v-model:value="formData.auditorField" placeholder="请选择" :options="data.columns">
                </a-select>
            </a-form-item>
        </a-form>
        <a-modal width="60%" height="80%" v-model:open="data.tableOpen" title="选择数据表" @ok="tableHandleOk">
            <SelectTable ref="tableRef"></SelectTable>
        </a-modal>
    </div>
</template>
<script lang="ts" setup>
    import { reactive, ref, onMounted } from 'vue'
    import SelectTable from '@/components/SelectTable/index.vue'
    import { getTableForms } from '@/api/sys/flowPenal'

    const labelCol = { span: 5 };
    const wrapperCol = { span: 17 };
    const formRef = ref < any > ()
    const tableRef = ref < any > ()

    const data = reactive({
        rules: {
            dbCode: [
                { required: true, message: '请选择数据库' }
            ],
            table: [
                { required: true, message: '请选择数据表' }
            ],
            rfield: [
                { required: true, message: '请选择关联字段' }
            ],
            auditorField: [
                { required: true, message: '请选择审核人字段' }
            ]
        },
        columns:[],
        tableOpen: false
    })
    let formData = ref({
        dbCode: '',
        table: '',
        rfield: '',
        auditorField: '',
        type: '6'
    })
    function handleTableClick() {
        data.tableOpen = true
    }
    function tableHandleOk() {
        console.log(tableRef.value.getRow())
        const obj = tableRef.value.getRow()
        formData.value.table = obj[0].name
        handleTableChange(obj[0].name)
        data.tableOpen = false
    }
    // 选择数据表，把获取表头
    async function handleTableChange(table) {
        var querys = {
            dbCode: 'lrsystemdb',
            tableNames: table
        }
        console.log(querys)
        const data = await getTableForms(querys)
        console.log(data);
    }
    // 校验表单
    function validateForm() {
        formRef.value
            .validate()
            .then(async (values) => {
                return true
            })
            .catch(async (error) => {
                return false
            });
    }
    function setForm(data) {
        this.formData = this.$deepClone(data);
    }
    function getForm() {
        return formData.value;
    }

    defineExpose({
        validateForm,
        getForm
    })
</script>
<style scoped>
    .l-from-body {
        padding: 10px 30px;
    }
</style>