<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 = [];
          arr.forEach((item) => {
            if (item.visit_url == "/services_shop") {
              shopArr = item.Child;
            }
          });
          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 = "tool_ic_shujufw_sel";
                item.default = "tool_ic_shujufw";
                break;
              case "space_time_service_list":
                item.active = "tool_ic_shikongfw_sel";
                item.default = "tool_ic_shikongfw";
                break;
              case "video_service_list":
                item.active = "tool_ic_shipinfw_sel";
                item.default = "tool_ic_shipinfw";
                break;
              case "perception_service_list":
                item.active = "tool_ic_ganzhifw_sel";
                item.default = "tool_ic_ganzhifw";
                break;
              case "comprehensive_app_list":
                item.active = "tool_ic_zongheyyfw_sel";
                item.default = "tool_ic_zongheyyfw";
                break;
              case "cloud":
                item.active = "tool_ic_yunziyuanfw_sel";
                item.default = "tool_ic_yunziyuanfw";
                break;
              case "app_store_list":
                item.active = "tool_ic_yingyongsd_sel";
                item.default = "tool_ic_yingyongsd";
                break;
              default:
                item.active = "1";
                item.default = "1";
                break;
            }
          });
          this.menuList = shopArr;
        }
      });
    },
  },
};
</script>

<style scoped>
.service_shop_menu {
  background-color: #0d1847;
  position: fixed;
  top: 58px;
  left: 0;
  width: 180px;
  height: 100%;
  padding-top: 30px;
}
.service_shop_menu_list > li {
  padding: 16px 10px 8px 22px;
  border-left: 5px solid #0d1847;
  font-size: 15px;
  line-height: 24px;
  cursor: pointer;
}
.service_shop_menu_list > li:hover,
.service_shop_menu_list > li.current {
  border-left: 5px solid #e56600;
  background-color: #182665;
  color: #e6ebfe;
}
.menu_img {
  width: 25px;
  margin-right: 6px;
}
.menu_item {
  position: relative;
  color: #6573ae;
  top: -6px;
}
.menu_item_active {
  position: relative;
  color: #e6ebfe;
  top: -6px;
}
</style>
