<template>
    <HcCard>
        <template #header>
            <div class="w-64">
                <el-input v-model="searchForm.name" size="large" placeholder="请输入菜单名称搜索" clearable/>
            </div>
            <div class="ml-3">
                <el-button type="primary" @click="searchClick" size="large">
                    <HcIcon name="search-2"/>
                    <span>搜索</span>
                </el-button>
            </div>
        </template>
        <template #extra>
            <el-button type="primary" @click="addClick" size="large">
                <HcIcon name="add"/>
                <span>新增</span>
            </el-button>
            <el-button type="danger" @click="cancelClick" size="large" :disabled="tableCheckedKeys.length <= 0">
                <HcIcon name="delete-bin-2"/>
                <span>删除</span>
            </el-button>
        </template>
        <HcTable :column="tableColumn" :datas="tableData" isCheck @selection-change="tableSelectionChange">
            <template #name="{row}">{{ row['name'] }}</template>
            <template #text="{row}">{{ row['text'] }}</template>
            <template #color="{row}">{{ row['color'] }}</template>
            <template #action="{row, index}">
                <el-button size="small" type="primary" @click="eidtModal">编辑</el-button>
                <el-button size="small" type="primary" @click="eidtModal">新增子项</el-button>
            </template>
        </HcTable>
        <template #action>
            <HcPages :pages="searchForm" @change="pageChange"></HcPages>
        </template>

        <!--菜单新增编辑-->
        <HcDialog bgColor="#ffffff" isToBody :show="addModal" :title="modalTitle + '菜单'" @close="addModalClose" widths="70rem">
            <el-form ref="formRef" :model="formModel" :rules="formRules" label-position="left" label-width="auto" size="large">
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="菜单名称:" prop="name">
                            <el-input v-model="formModel.name"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="路由地址:" prop="location">
                            <el-input v-model="formModel.idNumber" placeholder=""/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="上级菜单:">
                            <el-select v-model="formModel.top" class="block" placeholder="请选择" size="large">
                                <el-option v-for="item in topMenuoptions" :key="item.value" :label="item.label" :value="item.value"/>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="菜单编号:">
                            <el-input v-model="formModel.deptId" placeholder=""/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="菜单图标:">
                            <el-input v-model="formModel.deptId" placeholder=""/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="排序:">
                            <el-input v-model="formModel.deptId" placeholder=""/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="菜单类型:" prop="type">
                            <el-radio-group v-model="formModel.type">
                                <el-radio :label="3">菜单</el-radio>
                                <el-radio :label="6">按钮</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button size="large" @click="addModal = false">
                        <HcIcon name="close"/>
                        <span>取消</span>
                    </el-button>
                    <el-button :loading="sureSignUserLoading" hc-btn type="primary" @click="sureSignUserClick">
                        <HcIcon name="check"/>
                        <span>确定创建</span>
                    </el-button>
                </div>
            </template>
        </HcDialog>
    </HcCard>
</template>

<script setup>
import {ref, watch} from "vue";

const searchForm = ref({
    name: '',
    current: 1, size: 20, total: 0
})
//分页被点击
const pageChange = ({current, size}) => {
    searchForm.value.current = current
    searchForm.value.size = size
}
const searchClick = () => {

}
const tableColumn = [
    {key: 'name', name: '菜单名称'},
    {key: 'name', name: '路由地址'},
    {key: 'name', name: '菜单编号'},
    {key: 'text', name: '菜单图标'},
    {key: 'text', name: '菜单类型'},
    {key: 'text', name: '是否显示按钮'},
    {key: 'text', name: '排序'},
    {key: 'text', name: '上级菜单'},
    {key: 'action', name: '操作', width: 160}

]
const tableData = ref([
    {name: '名称1', text: '文本1', color: 'red'},
    {name: '名称2', text: '文本2', color: 'blue'},
    {name: '名称3', text: '文本3', color: '无'}
])
const tableCheckedKeys = ref([]);
const tableSelectionChange = (rows) => {
    tableCheckedKeys.value = rows
    if (tableCheckedKeys.value.length > 1) {
        window.$message.warning('只能选择一条数据')
    }
}
const modalTitle = ref('新增')
const addModal = ref(false)
//弹窗关闭
const addModalClose = () => {
    console.log('弹窗关闭')
    addModal.value = false
}
const addClick = () => {
    addModal.value = true
    modalTitle.value = '新增'
}
const cancelClick = () => {
    window?.$messageBox?.alert('您确定要删除该菜单信息吗? 一旦注销数据将彻底清除，请谨慎操作？', '删除提醒', {
        showCancelButton: true,
        confirmButtonText: '确认注销',
        cancelButtonText: '取消',
        type: 'warning',
        callback: (action) => {
            if (action === 'confirm') {
                console.log(11111);
            }
        }
    })
}
const sureSignUserLoading = ref(false)
const sureSignUserClick = () => {

}
const eidtModal = () => {
    modalTitle.value = '编辑'
    addModal.value = true
}
const formRef = ref(null)
const formModel = ref({})
const formRules = {
    name: {
        required: true,
        trigger: 'blur',
        message: "请输入菜单名称"
    },
    location: {
        required: true,
        trigger: 'blur',
        message: "请输入路由地址"
    },
    type: {
        required: true,
        trigger: 'blur',
        message: "请选择类型"
    }
}
const topMenuoptions = ref([])
</script>

<style lang="scss" scoped>

</style>
