<template>
    <div class="hc-menu-simple-box" :class="ui">
        <template v-for="item in datas" :key="item[menuProps.key]">
            <div class="item-box" :class="item[menuProps.key] === keysValue ? 'active' : ''" @click="MenuClick(item)" @contextmenu.prevent.stop="menuLabelContextMenu($event,item)">
                <div class="icon-box" v-if="item[menuProps.icon]">
                    <HcIcon :name="item[menuProps.icon]" fill/>
                </div>
                <div class="label-box truncate">{{item[menuProps.label]}}</div>
                <el-badge :value="item[menuProps.badge]" v-if="item[menuProps.badge] > 0"/>
                <!--操作菜单-->
                <div class="menu-icon" :class="item.showMenuIcon?'show':''" v-if="menusData.length > 0 && !item.isNoContextMenu">
                    <div class="menu-popover-icon" @click.prevent.stop="menuLabelContextMenu($event,item)">
                        <HcIcon name="apps" ui="text-2xl"/>
                    </div>
                </div>
                <!--操作菜单 END-->
            </div>
        </template>
        <!--右键菜单-->
        <HcContextMenu ref="contextMenuRef" :datas="menusData" @item-click="handleMenuSelect" v-if="menusData.length > 0" @closed="handleMenuClosed"/>
    </div>
</template>

<script setup>
import {nextTick, ref, watch} from "vue";
import {getObjValue, getObjNullValue} from "vue-utils-plus"
const props = defineProps({
    ui: {
        type: String,
        default: ''
    },
    datas: {
        type: Array,
        default: () => ([])
    },
    keys: {
        type: [String,Number],
        default: ''
    },
    menus: {
        type: Array,
        default: () => ([])
    },
    props: {
        type: Object,
        default: () => ({})
    },
})

//初始变量
const keysValue = ref(props.keys)
const menusData = ref(props.menus)
const menuItemData = ref({})
const menuProps = ref({})

//监听
watch(() => [
    props.keys,
    props.menus,
    props.props,
], ([keys, menus, prop]) => {
    menusData.value = menus
    keysValue.value = keys
    setMenuProps(prop)
})

nextTick(() => {
    setMenuProps(props.props)
})


//设置属性
const setMenuProps = (prop) => {
    const obj = getObjValue(prop)
    menuProps.value = {
        key: obj.key ?? 'key',
        icon: obj.icon ?? 'icon',
        label: obj.label ?? 'label',
        badge: obj.badge ?? 'badge'
    }
}

//事件
const emit = defineEmits(['change', 'menuTap'])
const MenuClick = (item) => {
    const keys = menuProps.value
    if (item[keys.key] !== keysValue.value) {
        emit('change', item)
    }
}

//鼠标右键事件
const contextMenuRef = ref(null)
const menuLabelContextMenu = (e,item) => {
    const rows = menusData.value || [];
    if (rows.length > 0 && !item.isNoContextMenu) {
        e.preventDefault();
        menuItemData.value = item;
        item.showMenuIcon = true
        //展开菜单
        contextMenuRef.value?.showMenu(e)
    } else {
        menuItemData.value = false;
        item.showMenuIcon = false
    }
}

//鼠标右键菜单被点击
const handleMenuSelect = ({key}) => {
    const item = getObjValue(menuItemData.value);
    emit('menuTap', {key, item})
}

//菜单关闭
const handleMenuClosed = () => {
    const item = menuItemData.value;
    if (getObjNullValue(item)) {
        menuItemData.value.showMenuIcon = false
    }
}
</script>

<style lang="scss" scoped>
.hc-menu-simple-box {
    position: relative;
    padding: 20px;
    .item-box {
        position: relative;
        display: flex;
        align-items: center;
        background: #f1f5f8;
        border-radius: 6px;
        padding: 8px 14px;
        margin-bottom: 10px;
        transition: 0.2s;
        .icon-box {
            position: relative;
            width: 22px;
            height: 22px;
            border-radius: 5px;
            background-color: var(--el-color-primary-light-8);
            color: var(--el-color-primary-light-5);
            font-size: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 14px;
            transition: 0.2s;
        }
        .label-box {
            position: relative;
            color: #838791;
            font-size: 14px;
            transition: 0.2s;
            flex: 1;
        }
        .menu-icon {
            position: relative;
            pointer-events: none;
            transition: opacity 0.2s;
            background: rgba(255, 255, 255, 0.25);
            border-radius: 2px;
            opacity: 0;
            .menu-popover-icon {
                display: flex;
                align-items: center;
                justify-content: center;
                color: #878787;
            }
            &.show {
                opacity: 1;
                pointer-events: all;
                cursor: context-menu;
            }
        }
        &:not(.active) {
            cursor: pointer;
        }
        &:hover {
            .icon-box {
                color: #ffffff;
                background-color: var(--el-color-primary);
            }
            .label-box {
                color: #1a1a1a;
                font-weight: 500;
            }
            .menu-icon {
                opacity: 1;
                pointer-events: all;
                cursor: context-menu;
            }
        }
        &.active {
            box-shadow: var(--hc-shadow);
            .icon-box {
                color: #ffffff;
                background-color: var(--el-color-primary);
            }
            .label-box {
                color: #1a1a1a;
                font-weight: 500;
            }
        }
    }
}
</style>

<style lang="scss" scoped>
.hc-menu-simple-box .item-box .el-badge {
    position: absolute;
    display: flex;
    right: 12px;
}
</style>
