<template>
  <div class="nav">
    <ul>
      <li>产品线</li>
      <template v-for="(item, index) in navList">
        <li v-if="index !== 4">|</li>
        <li
          class="title"
          :class="{ active: navActiveKey === item.id || navId === item.id }"
          @click="handleChangeNav(item.id)"
          >{{ item.name }}</li
        >
      </template>
    </ul>
  </div>
</template>

<script lang="ts" setup>
  import { defineProps, createVNode } from 'vue';
  import { Modal } from 'ant-design-vue';
  import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
  import * as CartApi from '/@/api/order/cartApi';
  import { useGo } from '/@/hooks/web/usePage';
  import { useRoute } from 'vue-router';
  import { toNumber } from 'lodash';
  import { useShoppingStoreWithOut } from '/@/store/modules/store';

  const go = useGo();
  const props = defineProps(['navList', 'navActiveKey']);
  const shoppingStore = useShoppingStoreWithOut();

  const route = useRoute();
  const query = route.query;
  const navId = toNumber(query.nav); // 一级选择id

  const handleChangeNav = (id) => {
    if (props.navActiveKey === id || navId === id) return;
    Modal.confirm({
      title: '提示',
      icon: createVNode(ExclamationCircleOutlined),
      content: '你确定切换产品线吗?切换产品线会清空购物车！',
      onOk() {
        CartApi.removeAll().then(() => {
          go('/main/store/home' + `?id=${id}`);
        });

        shoppingStore.refresh();
      },
      onCancel() {},
    });
  };
</script>

<style lang="less" scoped>
  .nav {
    background: #f7f9fa;
    text-align: center;
    border-radius: 10px;

    ul {
      height: 50px;
      padding: 5px;
      li {
        font-size: 20px;
        height: 40px;
        line-height: 40px;
        display: inline-block;
        margin: 0 15px;
      }

      .active {
        color: #1890ff;
      }

      .title {
        cursor: pointer;
      }
    }
  }
</style>
