<template>
  <div class="service_shop_menu">
    <ul class="service_shop_menu_list">
      <li v-for="(item, index) in menuList" :key="index" @click="active(item.router)">
        <img
          v-if="item.router == actives"
          :src="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.router == actives ? 'menu_item_active':'menu_item'">{{ item.label }}</span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {},
  data() {
    return {
      actives: "",
      menuList: [
        {
          id: 0,
          label: "数据服务",
          router: "/shop/service/5",
          active: "tool_ic_shujufw_sel",
          default: "tool_ic_shujufw"
        },
        {
          id: 1,
          label: "时空服务",
          router: "/shop/service/6",
          active: "tool_ic_shikongfw_sel",
          default: "tool_ic_shikongfw"
        },
        {
          id: 2,
          label: "视频服务",
          router: "/shop/service/7",
          active: "tool_ic_shipinfw_sel",
          default: "tool_ic_shipinfw"
        },
        {
          id: 3,
          label: "感知服务",
          router: "/shop/service/10",
          active: "tool_ic_ganzhifw_sel",
          default: "tool_ic_ganzhifw"
        },
        {
          id: 4,
          label: "综合服务",
          router: "/shop/service/11",
          active: "tool_ic_zongheyyfw_sel",
          default: "tool_ic_zongheyyfw"
        },
        {
          id: 5,
          label: "云资源服务",
          router: "/shop/cloud",
          active: "tool_ic_yunziyuanfw_sel",
          default: "tool_ic_yunziyuanfw"
        },
        {
          id: 6,
          label: "应用商店",
          router: "/shop/service/12",
          active: "tool_ic_yingyongsd_sel",
          default: "tool_ic_yingyongsd"
        }
      ]
    };
  },
  computed: {
    getActive() {
      return this.$store.state.serviceShopMenu;
    }
  },
  watch: {
    getActive(newVal) {
      this.getActiveMenu(newVal);
    }
  },
  mounted() {
    this.$store.commit("serviceShopMenuAct", this.$route.path);
    this.actives = this.$store.state.serviceShopMenu;
  },
  methods: {
    active(val) {
      this.$store.commit("serviceShopMenuAct", val);
    },
    getActiveMenu(val) {
      this.actives = val;
      this.$router.push(val);
    }
  }
};
</script>

<style scoped>
.service_shop_menu {
  background-color: #0d1847;
  position: fixed;
  top: 84px;
  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: 16px;
  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>
