<script setup lang="ts">
import useStore from '@/stores';
import { PropType } from 'vue';
import { ILeftMenuNavlist } from '@/model/nav-datatype';
import { useRouter, useRoute } from 'vue-router';

const $router = useRouter();
const $route = useRoute();
const props = defineProps({
  softwareName: {
    type: String,
    default: '',
    required: false,
  },
  smsName: {
    type: String,
    default: '',
    required: false,
  },
  openLeftNav: {
    type: Boolean,
    required: false,
    default: true,
  },
  pageTitle: {
    type: String,
    required: true,
    default: '',
  },
  currentRoute: {
    type: String,
    required: true,
    default: '',
  },
  navList: {
    type: Array as PropType<ILeftMenuNavlist[]>,
    required: true,
    default: () => [],
  },
});
const emit = defineEmits(['changeNav', 'changeLeftNavState']);
const productLabel = useStore().state.loct.sn;

// 监听路由变化事件（主要处理顶部的二级导航点击时，左侧菜单无法正确选中对应的左侧菜单）
resetLeftMenuType($route.fullPath);
$router.afterEach((to, from) => {
  resetLeftMenuType(to.fullPath);
});

// 修改左侧菜单的选中项方法
function resetLeftMenuType(curRoute: string) {
  props.navList.forEach(item => {
    item.type = 'default';
    if (curRoute.indexOf(item.router) > -1) {
      item.type = 'primary';
    }
  });
}

// 点击导航
function changeNav(item: any) {
  emit('changeNav', item);
  $router.push(item.router);
}

// 修改展开状态
function changeOpenState() {
  emit('changeLeftNavState');
}
</script>

<template>
  <div class="left-nav-box">
    <!-- 标题区域 -->
    <div :class="[openLeftNav ? 'title-box' : 'close-state']">
      <div v-show="openLeftNav" class="title">
        {{ $t(pageTitle, {softwareName: productLabel}) }}
      </div>

      <img
        v-show="!openLeftNav"
        class="img"
        src="@/assets/common/image/open.svg"
        :title="$t('SERVICE_WBS_CRE_SHOW_MORE')"
        @click="changeOpenState"
      />

      <img
        v-show="openLeftNav"
        class="img"
        src="@/assets/common/image/close.svg"
        :title="$t('SERVICE_WBS_CRE_HIDE_MORE')"
        @click="changeOpenState"
      />
    </div>

    <!-- 导航区域 -->
    <div v-show="openLeftNav" class="nav-content">
      <template v-for="item in navList" :key="item.id">
        <el-button 
          v-if="!item.hide" 
          :id="item.id" 
          v-addTooltip.elButton="{ tooltipClass: 'left-nav-tooltip' }" 
          :type="item.type" 
          @click="changeNav(item)"
        >
          {{ $t(item.label, { smsName: smsName, softwareName: softwareName }) }}
        </el-button>
      </template>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.left-nav-box {
  .title-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
  }

  .title {
    font-size: 14px;
    color: var(--o-text-color-secondary);
    line-height: 22px;
    font-weight: bolder;
  }

  .img {
    cursor: pointer;
  }

  .close-state {
    height: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .nav-content {
    display: flex;
    flex-direction: column;
    align-items: center;

    .el-button {
      margin-bottom: 8px;
      margin-left: 0;
      width: 100%;
      justify-content: flex-start;
      border: none;
      line-height: 18px;
      border-radius: var(--o-border-radius);
      :deep(span) {
        min-width: 0;
        font-size: 14px;
      }
    }

    .el-button--primary {
      :deep(span) {
        font-weight: 900;
      }
    }

    .el-button:last-child {
      margin-bottom: 0;
    }

    .el-button--default:not(.el-button--primary) {
      background-color: var(--o-bg-color-base);
    }
  }
}
</style>
