<template>
    <div>
        <pro-dialog :visible="$attrs.visible" @close="$emit('close:modal')" :title="title" width="70%" :closable="true"
            :destroyOnClose="true" :maskClosable="true">
            <template v-slot:footer="">
                <pro-button id="f3dd65a2-c52b-11ea-87c3-ff36a904ecf1" @click="$emit('close:modal')"
                    :icon="h(CloseOutlined)">关闭</pro-button>
                <pro-button id="f3dd65a4-c52b-11ea-87c3-ff36a904ecf2" @click="save"
                    :icon="h(SaveOutlined)">保存</pro-button>
            </template>

            <pro-form ref="formRef" :model="formData" :rules="formRules" label-width="120px">
                <pro-form-grid :header="{ title: '基本信息' }" colNum="4">
                    <pro-input v-show="false" :formItemProps="{ label: 'no', prop: 'no' }" v-model:value="formData.no"
                        placeholder="请输入" :allowClear="true">
                    </pro-input>

                    <pro-input :formItemProps="{ label: '层级编号', prop: 'key' }" v-model:value="formData.key"
                        placeholder="请输入" :allowClear="true">
                    </pro-input>

                </pro-form-grid>


                <pro-form-grid :header="{ title: '层级信息' }" colNum="3">
                    <div>
                        <pro-table ref="tableRef" :columns="columns" :dataSource="departLevelInfoData">
                            <template v-slot:header="">
                                <pro-button id=" 4b7facf0-94a4-11ee-9af3-e137392c498c" text="增加一行"
                                    :icon="h(PlusOutlined)" icon="plus" type="primary"
                                    @click="addRows">增加一行</pro-button>
                            </template>
                        </pro-table>
                    </div>
                </pro-form-grid>
            </pro-form>
        </pro-dialog>
    </div>
</template>

<script setup lang="jsx">
import { ref, onUnmounted, computed, h, reactive, onMounted } from 'vue';
import { useStore } from 'vuex';
import { CloseOutlined, SaveOutlined, DeleteOutlined, PlusOutlined } from "@ant-design/icons-vue";
import { Modal } from "ant-design-vue";
const store = useStore();
// 表单组件的引用
const formRef = ref();
const tableRef = ref();
// 表单验证规则
const formRules = ref({
    key: [
        { required: true, trigger: 'blur' },
        // 其他校验规则
    ],
    brf: [
        { required: true, trigger: 'blur' },
        // 其他校验规则
    ]
})
// 表单数据
const formData = computed(() => store.state.DepartLevel.dialogData);
const title = computed(() => store.state.DepartLevel.title);
const departLevelInfoData = computed(() => store.state.DepartLevel.departLevelInfoData);
const columns = ref([
    {
        prop: "ActionColumn",
        label: "操作",
        width: "120px",
        align: "center",
        render: (scope) => {
            return <div>
                <pro-button id="deleteId" onClick={() => deleteRows(scope)} icon={h(DeleteOutlined)}>删除</pro-button>
            </div>
        }
    },
    { prop: "key", label: "层级编号", align: "center", width: "120px", editing: true },
    { prop: "name", label: "层级名称", align: "center", width: "120px", editing: true },
    {
        prop: "brf", label: "层级功能描述", align: "center", width: "240px", editing: true,
        rules: [
            { required: true, message: '请输入层级功能描述', trigger: 'blur' }
        ]
    },
]);


onUnmounted(() => {
    store.dispatch("DepartLevel/cleanData");

});

function save () {
    //校验表单
    console.log("wyq-------save-------检验开始");
    console.log("wyq-------save-------检验开始", formRef.value.validate().values);

    formRef.value.validate().then(values => {
        for (const [key, value] of Object.entries(values)) {
            console.log(`表单字段 ${key}: ${value}`);
        }

        if (values) {
            console.log('数据校验成功，可以提交');
            // 执行保存操作
        } else {
            console.log('数据校验失败，请检查输入');
        }

        // 表单校验成功
        // 执行保存回调
        console.log("wyq-------save----检验通过", values);

        store.dispatch('DepartLevel/save', {
            values,
            closeMethod: () => { emit("close:modal") }
        });
        console.log("wyq-------save");

    }).catch(error => {
        if (error.errorFields) {
            error.errorFields.forEach(field => {
                console.log(`字段 ${field.name} 校验失败: ${field.errors.join(', ')}`);
            });
        } else {
            console.log('未知错误:', error);
        }
    });

    formRef.value.validate().then(values => {

        for (const [key, value] of Object.entries(values)) {
            console.log(`表单字段 ${key}: ${value}`);
        }

        if (values) {
            console.log('数据校验成功，可以提交');
            // 执行保存操作
        } else {
            console.log('数据校验失败，请检查输入');
        }

        //表单校验成功
        //执行保存回调
        console.log("wyq-------save----检验通过", values);

        store.dispatch('DepartLevel/save', {
            values,
            closeMethod: () => { emit("close:modal") }
        });
        console.log("wyq-------save");

    });
}

function addRows () {
    store.dispatch("DepartLevel/addRows", {});
}
function deleteRows (scope) {
    Modal.confirm({
        title: '删除确认',
        content: '确认删除选中的记录',
        cancelText: '取消',
        onOk () {
            store.dispatch('DepartLevel/deleteRows', { ...scope });
        }
    });
}
// 自定义指令用于聚焦
const vFocus = {
    mounted: (el) => {
        console.log('gzg  vFocus');
        el.focus();
        el.querySelector('input')?.focus();
        el.querySelector('a-input')?.focus();

    }
};
</script>
