<template>
    <div :class="['service-popup-list']">
        <div class="search-area">
            <div class="search-area-top">
                <el-input
                    placeholder="请输入菜单名称"
                    v-model.trim="searchVal"
                    :clearable="true"
                    size="large"
                >
                    <template #suffix>
                        <el-icon class="el-input__icon suffix-icon"><Search /></el-icon>
                    </template>
                </el-input>
                <el-icon class="popup-close-icon" @click="closePopup"><Close /></el-icon>
            </div>
        </div>
        <div
            v-masonry
            class="menu-area"
            column-width=".menu-item"
            gutter="32"
            transition-duration="0.2s"
        >
            <div
                v-masonry-tile
                class="menu-box"
                v-for="(item, index) in filterMenuArr"
                :key="index"
            >
                <span class="menu-box-title" v-html="brightenKeyword(item.name, searchVal)"></span>
                <div class="menu-box-content">
                    <div
                        :title="_item.name"
                        :class="[
                            'menu-item',
                            routerPath === _item.routerPath ? 'menu-item-active' : ''
                        ]"
                        v-for="_item in item.children"
                        :key="_item.id"
                        @click="menuItemClick(_item)"
                    >
                        <span
                            class="menu-name"
                            v-html="brightenKeyword(_item.name, searchVal)"
                        ></span>
                        <i
                            :class="[
                                'collect-icon',
                                swiftMenusData.some((i) => i.alias === _item.alias)
                                    ? 'collect'
                                    : 'un-collect'
                            ]"
                            :title="`${swiftMenusData.some((i) => i.alias === _item.alias) ? '取消' : ''}收藏`"
                            @click.stop="collect(_item)"
                        />
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import lodash from 'lodash'
import { defineEmits, ref, defineProps, watch, computed } from 'vue'
import { useMenuStore } from '@/stores/menu'
import { useRoute, useRouter } from 'vue-router'

const props = defineProps<{
    isShowPopupList: boolean
    swiftMenusData: MenuItem[]
}>()

const searchVal = ref('')

const route = useRoute()
const router = useRouter()
const menuStore = useMenuStore()
const routerPath = computed(() => route.path)
const currentMenuGroup = computed(() => menuStore.getCurrentMenuGroup)

const filterMenuArr = computed(() => {
    const currentMenuArr = currentMenuGroup.value.children
    if (searchVal.value) {
        return lodash.cloneDeep(currentMenuArr).filter((item: MenuItem) => {
            if (item.name.includes(searchVal.value.trim())) {
                return true
            } else {
                item.children = item.children.filter((i: MenuItem) => {
                    return i.name.includes(searchVal.value.trim())
                })
                return item.children.length
            }
        })
    } else {
        return currentMenuArr
    }
})

watch(
    () => props.isShowPopupList,
    (val) => {
        if (val && !directorySearch.value) {
            searchVal.value = ''
        }
        directorySearch.value = false
    }
)

const directorySearch = ref(false)

const searchMenuDirctory = (menu: MenuItem) => {
    searchVal.value = menu.name
    directorySearch.value = true
}

defineExpose({
    searchMenuDirctory
})

const brightenKeyword = (val: string, keyword: string) => {
    const escapedKeyword = keyword.replace(/[.*+?^${}()|[\]\\]/g, '\\$&').trim()
    if (!escapedKeyword) return val

    // 使用正则表达式构造一个动态的查找模式，这里不再需要判断 keyword 包含 val 的情况
    const regex = new RegExp(escapedKeyword, 'gi')

    // 直接高亮所有匹配的keyword
    return val.replace(regex, (match) => `<span style="color: #f56c6c">${match}</span>`)
}

// 菜单点击
const menuItemClick = (item: MenuItem) => {
    router.push(item.routerPath)
    closePopup()
}
// 收藏功能
const collect = (item: MenuItem) => {
    emit('change-collect', item)
}

// 关闭弹窗
const closePopup = () => {
    searchVal.value = ''
    emit('close-popup')
}

const emit = defineEmits(['close-popup', 'change-collect'])

interface MenuItem {
    id: string | number
    alias: string
    name: string
    routerPath: string
    menuIcon?: string
    [key: string]: any
    // add other fields as needed
}
</script>

<style lang="scss" scoped>
$font-color: var(--theme-text-primary);
$icon-color: var(--theme-text-primary);
$icon-color-hover: $system-hover-active-text;

.service-popup-list {
    width: 100%;
    height: 100%;
    padding: 30px 40px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    row-gap: 32px;
    background-color: var(--theme-system-module-1);

    .search-area {
        width: 100%;

        .search-area-top {
            width: 100%;
            display: flex;
            align-items: center;
            column-gap: 200px;
            user-select: none;
            padding-left: 8px;
            box-sizing: border-box;

            :deep(.el-input) {
                .el-input__inner {
                    font-size: 14px;

                    &::placeholder {
                        font-size: 14px;
                    }
                }

                .el-input__icon {
                    font-size: 18px;

                    &:hover {
                        color: $icon-color-hover !important;
                    }
                }
            }

            .popup-close-icon {
                color: var(--theme-text-inverse);
                font-size: 30px !important;
                cursor: pointer;

                &:hover {
                    color: $icon-color-hover !important;
                }
            }
        }
    }

    .menu-area {
        width: 100%;
        padding-right: 20px;
        box-sizing: border-box;
        flex: 1;
        overflow-x: hidden;
        overflow-y: auto;

        &::-webkit-scrollbar {
            /*滚动条整体样式*/
            width: 6px !important; /*高宽分别对应横竖滚动条的尺寸*/
            height: 1px;
            border-radius: 6px !important;
        }

        .menu-box {
            // width: calc((100% - 96px) / 4 - 5px);
            width: calc((100% - 140px) / 4 - 5px);
            box-sizing: border-box;
            padding: 0 0 40px 0;
            display: flex;
            flex-direction: column;
            row-gap: 16px;

            .menu-box-title {
                margin: 0 8px;
                font-size: 16px;
                font-weight: 700;
                color: var(--theme-menu-title);
                font-family:
                    Microsoft YaHei,
                    serif;
                box-sizing: border-box;
                user-select: none;

                :deep(span) {
                    font-size: 16px;
                }
            }

            .menu-box-content {
                width: 100%;
                display: flex;
                flex-direction: column;
                row-gap: 5px;
                box-sizing: border-box;

                .menu-item {
                    width: 100%;
                    height: 34px;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    cursor: pointer;
                    transition:
                        background-size 0.2s,
                        background-color 0.2s,
                        border-radius 0.2s;
                    padding: 0 0 0 8px;
                    box-sizing: border-box;
                    user-select: none;
                    background: linear-gradient(to right, $icon-color-hover, $icon-color-hover)
                        no-repeat calc(100% - 3px) bottom;
                    background-size: 0 1px;

                    &.menu-item-active {
                        background-color: var(--theme-box-color-3);
                        border-radius: 2px;
                        background-size: 0 0 !important;

                        .menu-name {
                            color: $icon-color-hover;
                        }
                    }

                    &:hover {
                        background-position: 3px bottom;
                        background-size: calc(100% - 6px) 1px;

                        .menu-name {
                            color: $icon-color-hover;
                        }

                        .collect-icon {
                            opacity: 1;
                        }
                    }

                    .menu-name {
                        font-size: 14px;
                        font-family:
                            Microsoft YaHei,
                            serif;
                        font-weight: 400;
                        color: $font-color;
                        transition: all 0.2s;

                        :deep(span) {
                            font-size: 14px;
                        }
                    }

                    .collect-icon {
                        width: 34px;
                        height: 34px;
                        opacity: 0;
                        background: url('@/assets/img/layout/collect1.png') no-repeat 50% 50%;
                        transition: all 0.1s;

                        &.collect {
                            background: url('@/assets/img/layout/collect1.png') no-repeat 50% 50%;
                            background-size: 45% 45%;
                            opacity: 1;
                        }

                        &.un-collect {
                            background: url('@/assets/img/layout/cancel-favorite-icon1.png')
                                no-repeat 50% 50%;
                            background-size: 45% 45%;
                        }
                    }
                }
            }
        }
    }
}
</style>
