<template>
  <div class="ecommerce-left-menu-warp">
    <div class="left-menu">
      <view v-for="(n, index) in leftMenu" :key="index" class="left-menu-item" :class="currentIndex == index ? 'active' : ''" @click="toLink(index)">
        <div class="item-img">
          <img :src="getAssetsFile('images/ecommerce/' + n.icon)?.href ?? ''" />
        </div>
        <span class="item-title">{{ n.title }}</span>
      </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: 'menu2.png', path: '/sub-operation-service/ecommerce-agricultural' },
  { name: 'supplier', title: '农产品交易', icon: 'menu1.png', path: '/sub-operation-service/ecommerce-supplier' },
  // { name: 'purchaser', title: '采购商服务', icon: 'menu3.png', path: '/sub-operation-service/ecommerce-purchaser' },
  // { name: 'land', title: '土地交易', icon: 'menu4.png', path: '/sub-operation-service/ecommerce-land' },
]);

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 }
);

const toLink = (index) => {
  currentIndex.value = index;
  let path = index != undefined ? leftMenu[index].path : null;
  if (path) {
    router.push(path);
  }
};
</script>
<style lang="scss" scoped>
.ecommerce-left-menu-warp {
  width: 100%;
  height: 100%;
  .left-menu {
    .left-menu-item {
      display: inline-flex;
      justify-content: flex-start;
      padding: 16px 0;
      width: 100%;
      cursor: pointer;
      &.active {
        color: $color-main;
      }
      .item-img,
      .item-title {
        vertical-align: middle;
      }
      .item-img {
        display: inline-block;
        width: 32px;
        height: 32px;
      }
      .item-title {
        display: -webkit-inline-box;
        padding-left: 8px;
        font-size: 20px;
        font-weight: 400;
      }
    }
  }
}
</style>
