<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 }" @click="handleChangeNav(item.id)">{{
          item.name
        }}</li>
      </template>
    </ul>
  </div>
</template>

<script lang="ts" setup>
  import { defineProps, defineEmits, createVNode } from 'vue';
  import { Modal } from 'ant-design-vue';
  import { ExclamationCircleOutlined } from '@ant-design/icons-vue';

  const props = defineProps(['navList', 'navActiveKey']);
  const emits = defineEmits(['handleChangeNavId', 'update:navActiveKey']);

  const handleChangeNav = (id) => {
    if (props.navActiveKey === id) return;
    Modal.confirm({
      title: '提示',
      icon: createVNode(ExclamationCircleOutlined),
      content: '你确定切换产品线吗?切换产品线会清空购物车！',
      onOk() {
        emits('update:navActiveKey', id);
      },
      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>
