<template>
    <div>
        <ListPage :column="listPageData.tableColumn" :tableApi="listPageData.tableApi" :isSelect="listPageData.isSelect"
            :scopeBtns="listPageData.scopeBtns" :searchBtns="listPageData.searchBtns" ref="userTableRef" />
        <DialogForm ref="dialogFormRef" :title="title" :column="dialogData.column" @submit="submitForm" />
    </div>
</template>

<script setup>
import { ref } from 'vue';
import ListPage from '@/views/components/ListPage/index.vue';
import { listUser } from "@/api/staff/user";

import DialogForm from '@/views/components/DialogForm/index.vue';

const userTableRef = ref();
const listPageData = reactive({
    tableColumn: [
        {
            label: '姓名',
            prop: 'name',
            type: 'input',
            isSearch: true
        },
        {
            label: '时间',
            prop: 'date',
            type: 'date',
            isSearch: true,
            keys: ['start', 'end']
        },
        {
            label: '性别',
            prop: 'sex',
            type: 'select',
            dictionary: 'sys_user_sex',
            isSearch: true
        },
    ],
    searchBtns: [
        {
            label: '新增',
            func: () => {
                console.log('新增')
                openDialog();
            },
            key: 'add',
            hasPermi: ['system:role:query'],
            icon: 'Plus',
            type: 'primary'
        },
        {
            label: '批量删除',
            func: () => {
                const ids = userTableRef.value.ids;
                console.log('批量删除', ids)
                handleDelete(ids);
            },
            key: 'deletes',
            hasPermi: ['system:role:query'],
            type: 'danger'
        },
    ],
    tableApi: listUser,//接口地址
    isSelect: true,//是否勾选
    scopeBtns: [
        {
            label: '编辑',
            type: 'primary',
            hasPermi: ['system:role:edit'],
            key: 'edit',
            func: (row) => {
                console.log(row)
                openDialog(row)
            }
        },
        {
            label: '删除',
            type: 'danger',
            hasPermi: ['price:edit'],
            key: 'edit',
            func: (row) => {
                console.log(row)
                handleDelete([row.id])
            }
        }
    ]
})
const dialogFormRef = ref(null);
const dialogData = reactive({
    title: '',
    column:[
        {
            label: '姓名',
            prop: 'name',
            type: 'input',
            rules: [
                { required: true, message: '请输入姓名', trigger: 'blur' }
            ]
        },
        {
            label: '时间',
            prop: 'date',
            type: 'date',
            keys: ['start', 'end'],
            rules: [
                { required: true, message: '请选择时间', trigger: 'blur' }
            ]
        },
        {
            label: '性别',
            prop: 'sex',
            type: 'select',
            dictionary: 'sys_user_sex',
            rules: [
                { required: true, message: '请选择性别', trigger: 'blur' }
            ]
        },
    ]
})
const { title } = toRefs(dialogData);
const openDialog = (row) => {
    console.log('row', row);
    try {
        if (row) {
            //修改
            title.value = '价格修改'
            form.value = row;
        } else {
            //新增
            title.value = '价格新增'
        }

    } catch (error) {
        console.log('error', error);
    } finally {
        console.log('dialogFormRef.value',dialogFormRef.value);
        
        dialogFormRef.value.handleDialog(true);
    }
}
const handleDelete = (ids) => {
    proxy.$modal.confirm('是否确认删除角色编号为"' + ids + '"的数据项?').then(function () {
        return true
    }).then(() => {
        userTableRef.value.resetForm();
        proxy.$modal.msgSuccess("删除成功");
    }).catch(() => { });
}


const submitForm = (parmas) => {

    console.log('submit',parmas);
    
}


</script>

<style lang='scss' scoped></style>
