<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="name">
                <a-input v-model:value="formData.name" placeholder="请输入" />
            </a-form-item>
            <a-form-item label="数据库" name="dbCode">
                <a-select v-model:value="formData.dbCode" placeholder="请选择" :options="sqlOptions"
                :field-names="{ label: 'text', value: 'id',options :'childNodes' }">
                </a-select>
            </a-form-item>
            <a-form-item label="数据表" name="table">
                <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="formData.columns">
                </a-select>
            </a-form-item>
            <a-form-item label="比较字段" name="cfield">
                <a-select v-model:value="formData.cfield" placeholder="请选择" :options="formData.columns">
                </a-select>
            </a-form-item>
            <a-form-item label="比较类型" name="compareType">
                <a-select v-model:value="formData.compareType" placeholder="请选择" :options="data.options">
                </a-select>
            </a-form-item>
            <a-form-item label="数据值" name="value">
                <a-input v-model:value="formData.value" placeholder="请输入" />
            </a-form-item>
        </a-form>
        <a-modal width="60%"  wrap-class-name="full-modal" v-model:open="data.tableOpen" title="选择数据表" @ok="tableHandleOk">
            <SelectTable ref="tableRef" :dbCode = 'formData.dbCode'></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'
    import { getLoadDataBaseLinkTree } from '@/api/demo/system';

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

    const data = reactive({
        rules: {
            dbCode: [
                { required: true, message: '请选择数据库' }
            ],
            table: [
                { required: true, message: '请选择数据表' }
            ],
            rfield: [
                { required: true, message: '请选择关联字段' }
            ],
            cfield: [
                { required: true, message: '请选择比较字段' }
            ],
            compareType: [
                { required: true, message: '请选择比较类型' }
            ],
            value: [
                { required: true, message: '请填写值' }
            ],
            name: [
                { required: true, message: '请填写条件名称' }
            ]
        },
        options: [
            { value: '1', label: '等于' },
            { value: '2', label: '不等于' },
            { value: '3', label: '大于' },
            { value: '4', label: '大于等于' },
            { value: '5', label: '小于' },
            { value: '6', label: '小于等于' },
            { value: '7', label: '包含' },
            { value: '8', label: '不包含' },
            { value: '9', label: '包含于' },
            { value: '10', label: '不包含于' }
        ],
        tableOpen: false
    })
    let formData = ref({
        dbCode: '',
        table: '',
        columns: [],
        rfield: '',
        cfield: '',
        compareType: '',
        value: '',
        name: ''
    })
    async function getSQL(){
        const data = await getLoadDataBaseLinkTree()
        data.forEach(element => {
            if(element.childNodes == null){
                element.childNodes = []
            }
        });
        sqlOptions.value = data
    }
    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: formData.value.dbCode,
            tableNames: table
        }
        console.log(querys)
        const data = await getTableForms(querys)
        console.log(data);
    }
    function setForm(data){
        formData.value = data
    }
    // 校验表单
    function validateForm() {
        formRef.value
            .validate()
            .then(async (values) => {
                return true
            })
            .catch(async (error) => {
                return false
            });
    }
    function getForm() {
        return formData.value;
    }

    defineExpose({
        validateForm,
        getForm,
        setForm
    })
    onMounted(() => {
        getSQL()
    });
</script>
<style scoped>
    .l-from-body {
        padding: 10px 30px;
    }
</style>
<style lang="less">
    .full-modal {
        .ant-modal {
            max-width: 100%;
        }

        .ant-modal-content {
            height: calc(80vh);
        }

        .ant-modal-body {
            height: 80%;
        }
    }
</style>