<script setup>
import { useRoute, useRouter } from "vue-router";
import { ref, onMounted, onUnmounted } from "vue";
import mitt from "@/utils/mitt.js";
import { useOrderStore } from "@/store/order.js";
import { merchantOrderCountApi } from "@/api/store.js";
import { ElMessage } from "element-plus";

const router = useRouter();
const route = useRoute();

const orderStore = useOrderStore();
// setInterval(()=>{
//   setOrderCount(+orderStore.orderCount + 1)
// }, 2000)

const setOrderCount = (e = 1) => {
    orderStore.setOrderCount(e)
    list.value.forEach(item => {
        if (item.name == "order") item.count = e;
    })
};

let isPlaying = false;
const newOrder = (e) => {
    //   merchantOrderCountApi().then((res) => {
    //     setOrderCount(res?.data?.order_count || 0);
    //   });
    try {
        setOrderCount(0);
        ElMessage.success('您有新的订单');
        if (isPlaying) return; //正在播放时有新订单直接跳过播放
        // 创建音频对象
        var audio = new Audio("/public/order.mp3");
        // 播放音频
        audio.play();
        isPlaying = true;
        console.log('播放中');
        // 添加ended事件监听器来检测播放结束
        audio.addEventListener('ended', function () {
            isPlaying = false;
        });
    } catch (error) {
        console.error(error);
        isPlaying = false;
        ElMessage.error('播放失败');
    }
};

// setTimeout(() => {
//     newOrder({
//         msg: "您有一笔新的订单",
//     });
// }, 3000);

const navTo = (name) => {
    router.push({ name });
};
const list = ref([
    { name: "saleHome", title: "收银", ico: "Sell", count: 0 },
    { name: "saleOrder", title: "收银订单", ico: "DataLine", count: 0 },
    {
        name: "order",
        title: "线上订单",
        ico: "DataAnalysis",
        count: 0,
    },
    {
        name: "convert",
        title: "订单核销",
        ico: "FullScreen",
        count: 0,
    },
    {
        name: "putStorage",
        title: "入库登记",
        ico: "Van",
        count: 0,
    },
    {
        name: "user",
        title: "用户",
        ico: "User",
        count: 0,
    },
    // { name: "purchaseOrder", title: "采购订单", ico: "Van", count: 0 },
    // { name: "orderCount", title: "订单统计", ico: "DocumentRemove", count: 0 },
    // { name: "wallet", title: "余额提现", ico: "Wallet", count: 0 },
    // { name: "test", title: "打印", ico: "Tickets", count: 0 },
]);
const aup = () => {
    let index = list.value.findIndex((item) => item.name == route.name);
    if (index == 0) index = list.value.length;
    if (index > 0) navTo(list.value[index - 1].name);
};
const adown = () => {
    let index = list.value.findIndex((item) => item.name == route.name);
    if (index == list.value.length - 1) index = -1;
    if (index < list.value.length - 1) navTo(list.value[index + 1].name);
};
onMounted(() => {
    mitt.on("up", aup);
    mitt.on("down", adown);
    mitt.on("new_order", newOrder);
    mitt.on("set-order-count-zero", () => {
        setOrderCount(0);
    });
    //   merchantOrderCountApi().then((res) => {
    //     setOrderCount(res?.data?.order_count || 0);
    //   });
    setOrderCount(0)
});

onUnmounted(() => {
    mitt.off("aup", aup);
    mitt.off("adown", adown);
    mitt.off("new_order", newOrder);
    mitt.on("set-order-count-zero");
});
</script>

<template>
    <div class="my-card">
        <div v-for="item in list" :key="item.name" class="list-item" :class="{ active: route.name == item.name }"
            @click="navTo(item.name)">
            <el-icon size="2rem">
                <component :is="item.ico" />
            </el-icon>
            <div>{{ item.title }}</div>
            <div v-if="item.count" class="badge">{{ item.count }}</div>
        </div>
    </div>
</template>

<style scoped lang="scss">
.my-card {
    width: 100%;
    height: calc(100vh - 100px);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 1.5rem;
    overflow: auto;

    .list-item {
        width: 4.5rem;
        height: 4.5rem;
        border-radius: 0.7rem;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-bottom: 1.2rem;
        position: relative;

        &.active {
            background-color: #1890ff;
            transition: 300ms;
        }

        .badge {
            position: absolute;
            top: -0.5rem;
            right: -0.5rem;
            background-color: #ff4a00;
            font-size: 0.7rem;
            padding: 0.2rem 0.5rem;
            border-radius: 2rem;
        }
    }
}

/* 修改滚动条的样式 */
::-webkit-scrollbar {
    display: none;
    /* 隐藏滚动条 */
}

/* 设置滚动条的轨道样式 */
::-webkit-scrollbar-track {
    background-color: #f1f1f1;
    /* 设置轨道的背景色 */
    margin: 1.25rem 0;
}

/* 设置滚动条的滑块样式 */
::-webkit-scrollbar-thumb {
    background-color: #ccc;
    /* 设置滑块的背景色 */
    border-radius: 0.315rem;
    /* 设置滑块的圆角 */
}

/* 设置滚动条鼠标悬停时的滑块样式 */
::-webkit-scrollbar-thumb:hover {
    background-color: #999;
    /* 设置鼠标悬停时滑块的背景色 */
}
</style>
