<template>
  <div class="ecommerce-left-menu-warp">
    <div class="left-menu">
      <div>
        <img :src="getAssetsFile('images/logo.png')?.href" style="width: 90%; height: 80px" />
      </div>
      <view
        v-for="(n, index) in leftMenu"
        :key="index"
        class="left-menu-item"
        :class="currentIndex == index ? 'active' : ''"
        @click="toLink(n, index)"
      >
        <div class="item-img">
          <img :src="getAssetsFile('images/userCenter/' + n.icon)?.href ?? ''" />
        </div>
        <p class="item-title">{{ n.title }}</p>
      </view>
    </div>
  </div>
</template>
<script setup name="home">
import { ref, reactive, onMounted, watch } from 'vue';
import { isEmpty, getAssetsFile } from '@/utils';
import { useRoute, useRouter } from 'vue-router';
const route = useRoute();
const router = useRouter();

const props = defineProps({
  currentName: { type: String, default: 'agricultural' },
});

const leftMenu = reactive([
  { name: 'agricultural', title: '我的购物车', icon: 'menu1.png', path: '/sub-operation-service/userCenter' },
  { name: 'supplier', title: '我的订单', icon: 'menu2-1.png', path: '/sub-operation-service/userOrders' },
  // { name: 'purchaser', title: '我的土地', icon: 'menu3-1.png', path: '/sub-operation-service/userLands' },
  { name: 'mySource', title: '我的溯源', icon: 'menu4-1.png', path: '/sub-operation-service/mySource' },
  { name: 'myFinance', title: '我的金融', icon: 'menu5-1.png', path: '/sub-operation-service/myFinance' },
  { name: 'myBrand', title: '我的品牌', icon: 'menu6-1.png', path: '/sub-operation-service/myBrand' },
]);

let currentIndex = ref(0);

watch(
  () => props.currentName,
  () => {
    console.info('currentName', props.currentName);
    currentIndex.value = leftMenu.findIndex((m) => {
      return m.name == props.currentName;
    });
  },
  { deep: true, immediate: true }
);

//监听currentIndex变化
watch(
  () => currentIndex.value,
  () => {
    console.info('currentIndex', currentIndex.value);
    leftMenu.forEach((item, index) => {
      // 处理图标数据，如果没有有 -1 后缀，则添加
      if (!item.icon.includes('-1')) {
        // 仅处理不包含 -1 的项
        const [name, ext] = item.icon.split('.');
        item.icon = `${name}-1.${ext}`; // 添加 -1
      }
      if (index == currentIndex.value) {
        // // 如果是当前项，则去掉 -1 后缀
        item.icon = item.icon.replace('-1', '');
      }
    });
  },
  { deep: true, immediate: true }
);

const toLink = (n, index) => {
  // console.log('leftMenu', leftMenu);

  currentIndex.value = index;

  // leftMenu.forEach((item, i) => {
  //   // 处理图标数据，如果没有有 -1 后缀，则添加
  //   if (!item.icon.includes('-1')) {
  //     // 仅处理不包含 -1 的项
  //     const [name, ext] = item.icon.split('.');
  //     item.icon = `${name}-1.${ext}`; // 添加 -1
  //   }
  //   // 如果是当前项，则去掉 -1 后缀
  //   if (i == index) {
  //     item.icon = item.icon.replace('-1', '');
  //   }
  // });
  console.log('currentIndex.value', currentIndex.value);

  router.push(n.path);
};
</script>
<style lang="scss" scoped>
.ecommerce-left-menu-warp {
  width: 100%;
  height: 100%;
  .left-menu {
    .left-menu-item {
      width: 100%;
      display: inline-flex;
      justify-content: flex-start;
      padding: 16px 0 16px 16px;
      cursor: pointer;
      &.active {
        color: $color-main;
      }
      .item-img,
      .item-title {
        vertical-align: middle;
      }
      .item-img {
        display: inline-block;
        width: 40px;
        height: 40px;
        img {
          width: 100%;
          height: auto;
          display: block;
        }
      }
      .item-title {
        display: -webkit-inline-box;
        font-size: 20px;
        font-weight: 400;
        line-height: 40px;
        padding-left: 10px;
      }
    }
  }
}
</style>
