<template>
    <div>
        <pro-form ref="formRef_063dae58" :model="formData_063dae58" :rules="formRules_063dae58" label-width="120px">
            <pro-form-grid>
                <pro-input :ref="(el) => formRefs_063dae58.key = el" :formItemProps="{ label: '用户编号', prop: 'key' }"
                    v-model:value="formData_063dae58.key" placeholder="请输入" :allowClear="true"></pro-input>
                <pro-input :ref="(el) => formRefs_063dae58.name = el" :formItemProps="{ label: '用户名称', prop: 'name' }"
                    v-model:value="formData_063dae58.name" placeholder="请输入" :allowClear="true"></pro-input>
                <pro-form-item>
                    <pro-button id="b6c27da0-cbb5-11ea-859b-23420050655b" @click="queryHandler7f30badb"
                        :icon="h(SearchOutlined)">查询</pro-button>
                    <pro-button id="b79a8e20-cbb5-11ea-859b-23420050655b"
                        @click="formRef_063dae58.getOrignRef().resetFields()" :icon="h(RedoOutlined)">重置</pro-button>
                </pro-form-item>

            </pro-form-grid>
        </pro-form>
        <pro-table ref="tableRef_7868f210" :queryRule="queryRule_7868f210" :columns="columns_7868f210"
            :showTableHead="false"></pro-table>
    </div>
</template>
<script setup lang="jsx">
import { ref, onMounted, computed, h, useAttrs } from 'vue';
import settings from '@/settings';
import request from '@/utils/request';
import { useStore } from 'vuex';
import { SearchOutlined, RedoOutlined } from "@ant-design/icons-vue";
import { Modal } from "ant-design-vue";
import { query } from "@/api/onlineUser.js";
const store = useStore();
const attrs = useAttrs();
const formData_063dae58 = ref({
    key: "",
    name: ""
});
const formRules_063dae58 = ref({});
const formRef_063dae58 = ref(null);
const formRefs_063dae58 = ref({
    key: "",
    name: ""
});
const queryParams = ref({});
const systemPrefix = settings.systemPrefix;
const tableRef_7868f210 = ref(null);
const columns_7868f210 = ref([{
    prop: "ActionColumn",
    label: "是否下线",
    render: (scope) => {
        return <div>
            <pro-button id="11" onClick={confirmHandler_7c5d1281} icon={h()}>下线</pro-button>
        </div>
    }
}, {
    prop: "key",
    label: "用户编号",
    align: "center"
}, {
    prop: "name",
    label: "用户名称",
    align: "center"
}, {
    prop: "dep_no",
    label: "所属机构",
    align: "center"
}, {
    prop: "sts",
    label: " 用户状态",
    align: "center"
}]);
function queryHandler7f30badb () {
    //校验表单
    formRef_063dae58.value.getOrignRef().validate().then(values => {
        //表单校验成功
        queryParams.value = values;
        tableRef_.value.reload();
    });
}
function confirmHandler_7c5d1281 () {
    Modal.confirm({
        title: '是否确认下线',
        content: 'undefined',
        cancelText: '下线',
        onOk () {
            store.dispatch('onlineUser/changeOline');
        }
    });
}
const tableData = computed(() => store.state.onlineUser.tableData);
async function queryRule_7868f210 (payload, params) {
    //向后台请求表格数据
    await store.dispatch('onlineUser/query', {
        payload: {
            values: {
                ...params,
                ...queryParams.value
            }
        }
    });
    const resp = tableData;
    return {
        current: payload.pageIndex,
        pageSize: payload.pageSize,
        total: resp.total,
        data: resp.rows
    };
}
// const queryRule = async (params) => {
//     params.create_date = params.create_date ? moment(params.create_date?.$d ? params.create_date.$d : params.create_date).format("YYYYMMDD") : "";
//     const resp = await query(params)
//     // const search = {
//     //     page: 1,
//     //     pageSize: 10,
//     //     "sob": params.sob[0],
//     //     "sts": "1",
//     //     "stdd_no": "2"
//     // }
//     // await list(search)
//     return resp;
// }
</script>
