<template>
  <div class="service_shop_menu">
    <ul class="service_shop_menu_list">
      <li v-for="(item, index) in menuList" :key="index" @click="active(item.visit_url)">
        <img
          v-if="item.visit_url == actives"
          :src="item.active != '' ? require('@/assets/imgs/' + item.active + '.png') : ''"
          class="menu_img"
        />
        <img v-else :src="require('@/assets/imgs/' + item.default + '.png')" class="menu_img" />
        <span
          :class="item.visit_url == actives ? 'menu_item_active':'menu_item'"
        >{{ item.menu_name }}</span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {},
  data() {
    return {
      actives: "",
      menuList: [],
    };
  },
  computed: {
    getActive() {
      return this.$store.state.serviceShopMenu;
    },
  },
  watch: {
    getActive(newVal) {
      this.getActiveMenu(newVal);
    },
  },
  mounted() {
    this.getShopMenu();
    this.$store.commit("serviceShopMenuAct", this.$route.path);
    this.actives = this.$store.state.serviceShopMenu;
  },
  methods: {
    active(val) {
      this.$store.commit("serviceShopMenuAct", val);
      this.$router.push(val);
    },
    getActiveMenu(val) {
      this.actives = val;
    },
    getShopMenu() {
      this.$api.general.getNowMenu({ teamName: "APAAS3" }).then((response) => {
        if (response.data.success == 1) {
          let arr = response.data.data[0].Child;
          let shopArr = [];
          let asd = arr.find(item => {
            return item.visit_url == "/services_shop"
          })
          shopArr = asd.Child;
          if (shopArr && shopArr.length != 0) {
            Array.from(shopArr).forEach((item) => {
            let uri = item.visit_url.substring(6);
            if (uri.indexOf("/") != -1) {
              uri = uri.substring(0, uri.indexOf("/"));
            }
            switch (uri) {
              case "data_service_list":
                item.active = "shop_tool_ic_sjfw_sel";
                item.default = "shop_tool_ic_sjfw";
                break;
              case "space_time_service_list":
                item.active = "shop_tool_ic_skfw_sel";
                item.default = "shop_tool_ic_skfw";
                break;
              case "video_service_list":
                item.active = "shop_tool_ic_spfw_sel";
                item.default = "shop_tool_ic_spfw";
                break;
              case "perception_service_list":
                item.active = "shop_tool_ic_ganzhifw_sel";
                item.default = "shop_tool_ic_ganzhifw";
                break;
              case "comprehensive_app_list":
                item.active = "shop_tool_ic_zhyyfw_sel";
                item.default = "shop_tool_ic_zhyyfw";
                break;
              case "cloud":
                item.active = "shop_tool_ic_yzyfw_sel";
                item.default = "shop_tool_ic_yzyfw";
                break;
              case "app_store_list":
                item.active = "shop_ic_yysd_sel";
                item.default = "shop_ic_yysd";
                break;
              case "products_list":
                item.active = "shop_nav_iv_chanpinzy_pre";
                item.default = "shop_nav_iv_chanpinzy";
                break;
              default:
                item.active = "1";
                item.default = "1";
                break;
            }
          });
          }
          this.menuList = shopArr;
        }
      });
    },
  },
};
</script>

<style scoped>
.service_shop_menu {
  background-color: #0d1847;
  position: fixed;
  top: 76px;
  left: calc(50% - 600px);
  width: 176px;
  padding: 8px;
	background-color: #ffffff;
	box-shadow: 0px 3px 6px 0px 
		rgba(15, 19, 65, 0.04);
	border-radius: 8px;
}
.service_shop_menu_list > li {
  box-sizing: border-box;
  height: 40px;
  padding: 8px 0 0 22px;
  margin-bottom: 16px;
  font-size: 15px;
  line-height: 24px;
  cursor: pointer;
}
.service_shop_menu_list > li:nth-last-child(1) {
  margin-bottom: 0;
}
.service_shop_menu_list > li:hover,
.service_shop_menu_list > li.current {
  background-color: rgba(242, 246, 253, 0.4);
  color: #515fe7;
}
.menu_img {
  /* width: 24px; */
  margin-right: 6px;
}
.menu_item {
  position: relative;
  font-weight: bold;
  font-size: 15px;
  color: #96a0c5;
  top: -6px;
}
.menu_item_active {
  position: relative;
  font-weight: bold;
  font-size: 15px;
  color: #515fe7;
  top: -6px;
}
</style>
