<template>
    <div>
        <pro-form ref="formRef" :model="formData" :rules="formRules" label-width="120px">
            <pro-form-grid>
                <pro-input :ref="(el) => formRefs.levelId = el" :formItemProps="{ label: '层级编号', prop: 'levelId' }"
                    v-model:value="formData.levelId" placeholder="请输入层级编号" :allowClear="true">
                </pro-input>

                <pro-select :ref="(el) => formRefs.enabledFlag = el"
                    :formItemProps="{ label: '启用标志', prop: 'enabledFlag' }" v-model:value="formData.enabledFlag"
                    placeholder="请选择启用标志" :allowClear="true" :options="enabledOptions">
                </pro-select>

                <pro-form-item>
                    <pro-button id="queryBtn" @click="query" :icon="h(SearchOutlined)">查询</pro-button>
                    <pro-button id="resetBtn" @click="reset" :icon="h(RedoOutlined)">重置</pro-button>
                    <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="departLevelInsertView" afterShow="CurrencyManager/clickInsertOrModifyBtn"
                    text="新增" :icon="h(PlusOutlined)" type="primary">
                </OpenModelButton>
            </template>
        </pro-table>
    </div>
</template>
<script setup lang="jsx">
import { ref, reactive, h, computed } from 'vue';
import { SearchOutlined, RedoOutlined, PlusOutlined, EditOutlined } from "@ant-design/icons-vue";
import { useStore } from 'vuex';
import departLevelInfo from './departLevelInfo.vue';
const store = useStore();
const formData = ref({
    levelId: "",
    enabledFlag: null
});
const formRules = ref({
    // 添加验证规则
});
const formRefs = reactive({
    levelId: "",
    enabledFlag: ""
});

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



function query () {
    // 查询
}
function reset () {
    // 重置
}
function expand () {
    // 展开/收起
}

function departLevelInsertView () {
    // 弹出新增弹窗
}



const queryParams = ref({});

// 定义了一个计算属性 departLevelData，它的值来自 Vuex 状态管理中的 departLevel.departLevelData
// 通过使用 computed，当 store.state.departLevel.departLevelData 发生变化时，departLevelData 会自动更新。这种反应式的特性使得数据在 UI 中保持同步。
const departLevelData = computed(() => store.state.departLevel.departLevelData);

// 该函数是一个异步函数，用于根据传入的 payload 和 params 请求和返回表格数据。
// payload参数‌是一个对象，用于在组件之间传递数据。Payload参数包含要传递给组件的数据，这些数据可以是任何类型，包括字符串、数字、布尔值、对象和数组等‌
async function queryRule (payload, params) {
    // queryParam 变量用于存储查询参数，如果存在 queryParams（可能是通过 Vue 的响应式引用取得的），则将其值赋予 queryParam。
    let queryParam = {};
    if (queryParams) {
        queryParam = queryParams.value;
    }
    // 向后台请求表格数据
    // 通过调用 Vuex 中的 dispatch 方法发送一个名为 CurrencyManager/queryCurrency 的 action。
    await store.dispatch('departLevel/queryDepartLevel', {
        values: {
            page: payload.pageIndex,
            rows: payload.pageSize,
            ...params,
            ...queryParam
        }
    });
    const resp = departLevelData.value;
    return {
        current: payload.pageIndex,
        pageSize: payload.pageSize,
        total: resp.total,
        data: resp.records
    };

}

// 列定义
const columns = [
    {
        prop: "ActionColumn", label: "操作", width: 150, render: (scope) => {
            return <div>
                <OpenModelButton id="651rew123" modal={departLevelInfo} afterShow="departLevel/clickInsertOrModifyBtn" 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 }
];
</script>
