<script setup>
import { ref, watch, onMounted, onUnmounted, nextTick } from "vue";
import { merchantCategoryListApi } from "@/api/shop.js";
import { useUserStore } from '@/store/user.js'

const emit = defineEmits(["getStoreList"]);

const categoryList = ref([]);
const categoryList2 = ref([]);
const categoryList3 = ref([]);
const active = ref(-1);
const cactive = ref(-1);
const dactive = ref(-1);
const sactive = ref(-1);
const show = ref(false);

const userStore = useUserStore();

const getCategoryList = () => {
    merchantCategoryListApi({
        pid: 0,
        page_no: 1,
        page_size: 30,
        level: 1,
        store_id: userStore.userInfo.store_id
    }).then((res) => {
        categoryList.value = res.data.lists;
        active.value = -1;
    });
};
getCategoryList();

const getCategoryList2 = (pid) => {
    merchantCategoryListApi({
        pid: pid,
        page_no: 1,
        page_size: 30,
        level: 2,
        store_id: userStore.userInfo.store_id
    }).then((res) => {
        categoryList2.value = res.data.lists;
    });
};

const getCategoryList3 = (pid) => {
    merchantCategoryListApi({
        pid: pid,
        page_no: 1,
        page_size: 30,
        level: 3,
        store_id: userStore.userInfo.store_id
    }).then((res) => {
        categoryList3.value = res.data.lists;
    });
};


const changeActive = (index = -1, type = 1) => {
    sactive.value = index;
    show.value = true;
    let cate_id = '';
    let class_all = '';
    if (type == 1) {
        active.value = index;
        cactive.value = -1;
        dactive.value = -1;
        if (index!=-1) class_all = categoryList.value[index].id;
        getCategoryList2(class_all);
    }
    else if (type == 2) {
        cactive.value = index;
        dactive.value = -1;
        if (index!=-1) class_all = categoryList2.value[index].id;
        getCategoryList3(class_all);
    }
    emit("getStoreList", {
        cate_id: cate_id,
        class_all: class_all
    }, true);
};
</script>

<template>
    <div class="classify" @mouseout="show ? show = false : show = true">
        <div class="itemP" :class="{ 'itemP-active': -1 == active }" @click="changeActive(-1)">
            {{ '全部' }}
        </div>
        <el-popover placement="left" width="20rem" trigger="click" v-for="(item, index) in categoryList" :key="index"
            :visible="index == active && sactive == index">
            <template #reference>
                <div class="itemP" :class="{ 'itemP-active': index == active }" @click="changeActive(index)"
                    @mousemove="sactive = index">
                    {{ item.name }}
                </div>
            </template>
            <div class="active-card" @mouseout="sactive = -1" @mousemove="sactive = index">
                <div class="title">{{ item.name }}</div>
                <div class="list">
                    <div :class="{ 'list-active': indexc == cactive }" link type="primary"
                        v-for="(chil, indexc) in categoryList2" :key="chil.id" @click="changeActive(indexc, 2)">
                        {{ chil.name }}
                    </div>
                </div>
            </div>
        </el-popover>
    </div>
</template>

<style scoped lang="scss">
.classify {
    height: 100%;
    width: 8rem;
    background-color: #fff;
    border-radius: 1.2rem;
    font-size: 1rem;
    color: #333;
    overflow-y: scroll;

    .itemP {
        width: 4rem;
        margin: 1rem;
        padding: 0.5rem 1rem;
        text-align: center;
        border-radius: 3rem;
        cursor: pointer;
        white-space: nowrap;
        /* 防止文本换行 */
        overflow: hidden;
        text-overflow: ellipsis;
        /* 多余文本使用省略号显示 */
    }

    .itemP-active {
        background-color: #1890ff;
        color: #fff;
    }
}

.active-card {
    .title {
        font-size: 1.1rem;
        font-weight: bold;
        color: #333;
    }

    .list {
        display: flex;
        flex-wrap: wrap;

        div {
            margin-right: 1rem;
            margin-top: 0.5rem;
            cursor: pointer;
            color: #333;
        }

        .list-active {
            color: #1890ff;
        }
    }
}

/* 修改滚动条的样式 */
::-webkit-scrollbar {
    display: none;
}
</style>
