<!--  -->
<template>
    <div class="hc-layout-box menu-page">
        <hc-card :scrollbar="false" action-size="lg">
            <template #header>
                <el-button color="#20C98B" type="primary" @click="addMenu">
                    <hc-icon name="add" class="text-white" />
                    <span class="text-white">新增</span>
                </el-button>
            
                <el-button color="#FF6C6C" :disabled="tableCheckedKeys.length === 0" @click="rowDelClick">
                    <hc-icon name="delete-bin-2" class="text-white" />
                    <span class="text-white">删除</span>
                </el-button>
            </template>
            <template #extra>
                <el-input v-model="searchForm.queryValue" placeholder="请输入菜单名称搜索" clearable />
                <el-button color=" #4b4b4b" type="primary" class="ml-2">
                    <hc-icon name="search" class="text-white" />
                    <span class="text-white">搜索</span>
                </el-button>
            </template>
            <hc-table
                ui="no-border" has-children="hasChildren1" :is-index="true"   
                :column="tableColumn" :datas="tableData"
                :index-style="{ fixed: true, width: 60 }" is-check border :check-style="{ fixed: true, width: 29 }"
                class="menu-page-table"
                @selection-change="tableSelectionChange"
            >
                <template #name="{ row }">
                    <i v-if="row.source" :class="[`ri-${row?.source}`]" class="hc-icon-i table-menu-icon" />
                    <span>{{ row.name }}</span>
                </template>
                <template #category="{ row }">
                    <span v-if="row.category === 1">菜单</span>
                    <span v-if="row.category === 2">按钮</span>
                </template>
                <template #action="{ row }">
                    <el-link type="success" @click="eidtMenu(row)">   <hc-icon name="edit" />编辑</el-link>
                    <el-link type="success" @click="addChildren(row)">   <hc-icon name="edit" />新增子项</el-link>
                    <el-link type="success" @click="copyChildren(row)">  <hc-icon name="file-copy" />复制</el-link>
                </template>
            </hc-table>
            <template #action>
                <HcPages :pages="searchForm" @change="pageChange" />
            </template>
        </hc-card>
    </div>
    <!-- 菜单新增编辑 -->
    <hc-dialog
        v-model="menuDataModal" bg-color="#ffffff" is-to-body widths="60rem"
        :title="isCopy ? '复制菜单数据' : formModel.id ? '编辑菜单' : '修改菜单'" @save="menuDataModalSave" @close="menuDataModalClose"
    >
        <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" placeholder="六字以内的名称" />
                    </el-form-item>
                    <el-form-item label="路由地址:" prop="path">
                        <el-input v-model="formModel.path" placeholder="url上显示的地址" />
                    </el-form-item>
                    <el-form-item label="菜单编号:" prop="code">
                        <el-input v-model="formModel.code" placeholder="路由中的跳转name" />
                    </el-form-item>
                    <el-form-item label="菜单备注:">
                        <el-input v-model="formModel.remark" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="上级菜单:">
                        <el-cascader v-model="formModel.parentId" :options="tableData" :props="topMenuoptions" clearable />
                    </el-form-item>
                    <el-form-item label="菜单图标:">
                        <el-input v-model="formModel.source" placeholder="图标库为 ">
                            <template #append>
                                <a href="https://remixicon.cn/" target="_blank">图标库</a>
                            </template>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="菜单排序:">
                        <el-input-number v-model="formModel.sort" :min="1" :max="10" controls-position="right" />
                    </el-form-item>
                    <el-form-item label="菜单类型:">
                        <el-radio-group v-model="formModel.category">
                            <el-radio :value="1">
                                菜单
                            </el-radio>
                            <el-radio :value="2" class="ml-6">
                                按钮
                            </el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
    </hc-dialog>
</template>
   
   <script setup>
   import { ref, watch } from 'vue'
   import { HcDelMsg } from 'hc-vue3-ui'
   import config from '~src/config/index'
   const tableColumn = [
   { key: 'name', name: '菜单名称', minWidth: 260 },
    { key: 'code', name: '菜单编号', width: 240 },
    { key: 'path', name: '路由地址', minWidth: 220 },
    { key: 'category', name: '菜单类型', width: 90, align: 'center' },
    { key: 'sort', name: '排序', width: 80, align: 'center' },
    { key: 'remark', name: '备注', minWidth: 200 },
    { key: 'action', name: '操作', width: 180, fixed:'right', align: 'center' },
   ]
   const tableData = ref([
       { name: 'admin', code: 'xxx', key3: '超级管理员' },
       { key1: '13028304756', key2: 'aaa', key3: '角色' },
   ])




const tableCheckedKeys = ref([])
 //多选事件
const tableSelectionChange = (rows) => {
    tableCheckedKeys.value = rows
}
//搜索表单
const searchForm = ref({
    queryValue: null, current: 1, size: 20, total: 0,
})
const getTableData = ()=>{
    
}
//分页被点击
const pageChange = ({ current, size }) => {
    searchForm.value.current = current
    searchForm.value.size = size
    getTableData()
}
//菜单数据弹窗
const isCopy = ref(false)
const menuDataModal = ref(false)
const formRef = ref(null)
const formModel = ref({ category: 1 })
const formRules = {
    name: { required: true, trigger: 'blur', message: '请输入菜单名称' },
    path: { required: true, trigger: 'blur', message: '请输入路由地址' },
    code: { required: true, trigger: 'blur', message: '请输入菜单编号' },
}
const topMenuoptions = {
    checkStrictly: true,
    emitPath: false,
    value: 'id',
    label: 'name',
}
//编辑菜单
const eidtMenu = (row) => {
    formModel.value = {
        ...row,
        children: null,
    }
    isCopy.value = false
    menuDataModal.value = true
}
//新增菜单
const addMenu = () => {
    formModel.value = {
        sysId: config.sysId,
        isOpen: 1,
        isLayout: 1,
        category: 1,
        parentId: 0,
        sort: 1,
    }
    isCopy.value = false
    menuDataModal.value = true
}
const copyChildren = (row) => {
    formModel.value = {
        ...row,
        children: null,
        id: '',
    }
    isCopy.value = true
    menuDataModal.value = true
}
const rowDelClick = ()=>{
    HcDelMsg( async ( resolve) => {
            // await removeContractTreeNode()
            resolve() //关闭弹窗的回调
    })
}
//新增子级菜单
const addChildren = (row) => {
    formModel.value = {
        sysId: config.sysId,
        isOpen: 1,
        isLayout: 1,
        category: 1,
        parentId: row.id,
        sort: 1,
    }
    isCopy.value = false
    menuDataModal.value = true
}
const menuDataModalSave = ()=>{

}
const menuDataModalClose = ()=>{

}
</script>

 <style lang='scss' scoped>
.hc-layout-box{
    position: relative;
    height: 100%;
    width: 100%;
}
</style>

<style>
.menu-page-table .el-table[hc].new {
    --el-table-header-bg-color: #101010;
    --el-table-header-text-color: #fff;
    --el-table-text-color: #101010;
    thead.is-group th.el-table__cell {
        background: var(--el-table-header-bg-color);
    }
    thead .el-table-fixed-column--left.el-table__cell,
    thead .el-table-fixed-column--right.el-table__cell {
        background: var(--el-table-header-bg-color) !important;
    }
    tbody .el-table-fixed-column--left.el-table__cell,
    tbody .el-table-fixed-column--right.el-table__cell {
        background: var(--el-table-tr-bg-color) !important;
    }
    .el-table__body tr.current-row>td.el-table__cell {
        background-color: var(--el-table-current-row-bg-color) !important;
    }
}
</style>