<template>
    <div>
        <pro-form ref="formRef" :model="formData" :rules="formRules" label-width="120px">
            <pro-form-grid>
                <pro-input :formItemProps="{ label: '层级编号', prop: 'levelKey' }" v-model:value="formData.levelKey"
                    placeholder="请输入层级编号" :allowClear="true">
                </pro-input>
                <pro-select :formItemProps="{ label: '启用标志', prop: 'useYn' }" v-model:value="formData.useYn"
                    placeholder="请选择启用标志" :allowClear="true" tableName="com_usertype_info" colName="use_yn">
                </pro-select>

                <pro-form-item>
                    <pro-button id="queryBtn" @click="search" :icon="h(SearchOutlined)">查询</pro-button>
                    <pro-button id="resetBtn" @click="reset" :icon="h(RedoOutlined)">重置</pro-button>
                    <!-- 问题3： 根本就没有这个组件 -->
                    <Expand id="expandBtn" downText="收起" upText="展开">
                    </Expand>
                </pro-form-item>
            </pro-form-grid>
        </pro-form>

        <pro-table ref="tableRef" :columns="columns" :queryRule="queryRule" :rowSelection="false">
            <template v-slot:header="">
                <OpenModelButton :modal="DepartLevelInfo" beforeShow="DepartLevel/loadDialogDataData" text="新增"
                    :icon="h(PlusOutlined)" type="primary" @addData="getList">
                </OpenModelButton>
            </template>
        </pro-table>
    </div>
</template>
<script setup lang="jsx">
import { ref, watch, h, computed } from 'vue';
import { SearchOutlined, RedoOutlined, PlusOutlined, EditOutlined } from "@ant-design/icons-vue";
import { useStore } from 'vuex';
import DepartLevelInfo from './DepartLevelInfo.vue';
const emit = defineEmits(['close:modal'])
const store = useStore();
// 表单组件的引用
const formRef = ref();
// 表格组件的引用
const tableRef = ref();
// 表单数据
const formData = ref({
    // 表单字段的初始值
    levelKey: "",
    useYn: ""
});
function getList () {
    console.log("wyq----getList 触发成功 ");
}
// 表单验证规则
const formRules = ref({
    // 添加验证规则
    levelKey: [
        { required: false, trigger: 'blur' },
        // 其他校验规则
    ],
    useYn: [
        { required: false, trigger: 'change' },
        // 其他校验规则
    ]
});
// 定义了一个计算属性 departLevelData，它的值来自 Vuex 状态管理中的 departLevel.departLevelData
// 通过使用 computed，当 store.state.departLevel.departLevelDefData 发生变化时，departLevelDefData 会自动更新。
const departLevelDefData = computed(() => store.state.DepartLevel.departLevelDefData);


// 监听是否保存数据成功的标志位
watch(() => store.state.DepartLevel.saveFlag, async (newVal, oldVal) => {
    if (newVal != oldVal) {
        search();
    }
});

const enabledOptions = [
    { label: '启用', value: 'Y' },
    { label: '未启用', value: 'N' }
];

function search () {
    // 查询
    // 问题1：为什么要在这里调用 validate 方法？,校验是怎么处理调用的对不对
    formRef.value.validate().then(values => {
        //表单校验成功
        // 这一步会触发 queryRule 函数，使用更新后的查询参数重新请求数据并刷新表格。
        tableRef.value.reload();
    });
}

function reset () {
    // 调用原生组件的重置表单方法
    formRef.value.getOrignRef().resetFields();
}

// 该函数是一个异步函数，用于根据传入的 payload 和 params 请求和返回表格数据。
// payload参数‌是一个对象，用于在组件之间传递数据。Payload参数包含要传递给组件的数据，这些数据可以是任何类型，包括字符串、数字、布尔值、对象和数组等‌
async function queryRule (payload, params) {
    // 问题2: params是个啥,而且是一个
    // queryParam 变量用于存储查询参数，如果存在 queryParams（可能是通过 Vue 的响应式引用取得的），则将其值赋予 queryParam。
    let queryParams = {
        page: payload.pageIndex,
        rows: payload.pageSize,
        ...params,
        key: formData.value.levelKey,
        use_yn: formData.value.useYn
    };

    // 向后台请求表格数据
    // 通过调用 Vuex 中的 dispatch 方法发送一个名为 DepartLevel/queryDepartLevelDefData 的 action。
    await store.dispatch('DepartLevel/queryDepartLevelDefData', {
        values: {
            ...queryParams
        }
    });
    // 由于 store.state.DepartLevel.departLevelDefData 是一个响应式引用，
    // 因此当 store.state.DepartLevel.departLevelDefData 发生变化时，departLevelDefData 也会自动更新。
    const resp = departLevelDefData.value;
    return {
        current: payload.pageIndex,
        pageSize: payload.pageSize,
        total: resp.total,
        data: resp.records
    };
}



var showUseYn = (text, record) => {
    let value = false;
    if (record.use_yn == 'Y') {
        value = true;
    }
    return <a-button type="primary" size="small" onClick={() => changeUseYn(value, record)}>
        {value ? "启用" : "未启用"}
    </a-button>
};

async function changeUseYn (value, record) {
    console.log("wyq ------------changeUseYn", value, record);
    // 调用后台接口修改数据
    // 调用 Vuex 中的 dispatch 方法发送一个名为 DepartLevel/changeUseYn 的 action。
    // 这个地方必须等待更新启用标志的操作完成，才能重新查询表格数据。所以设置为同步处理
    await store.dispatch('DepartLevel/changeUseYn', {
        values: {
            no: record.no,
            use_yn: record.use_yn
        }
    });
    // 回调下查询方法
    search();
}

// 列定义
const columns = [
    {
        prop: "ActionColumn", label: "操作", width: 150, render: (scope) => {
            return <div>
                <OpenModelButton id="651rew123" modal={DepartLevelInfo} beforeShow="DepartLevel/loadDialogDataData"
                    text="修改" icon={h(EditOutlined)} type="primary" payload={scope.record}>
                </OpenModelButton>
            </div>
        },
        align: "center",
    },
    { prop: 'key', title: '层级编号', width: 150 },
    { prop: 'name', title: '层级名称', width: 150 },
    { prop: 'use', title: '用途', width: 150 },
    {
        prop: 'use_yn', title: '启用标志', width: 150,
        render: scop => showUseYn(scop.record.use_yn, scop.record)
    }
];
</script>
