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

<script>
export default {
  props: {},
  data() {
    return {
      
    };
  },
  computed: {
    // getActive() {
    //   return this.$store.state.serviceShopMenu;
    // },
  },
  watch: {
    // getActive(newVal) {
    //   this.getActiveMenu(newVal);
    // },
  },
  props: {
    menuList: {
      type: Array,
      default: []
    },
    currentId: {
      type: [Number,String],
      default: null
    }
  },
  mounted() {
    // this.getShopMenu();
    // this.$store.commit("serviceShopMenuAct", this.$route.path);
    // this.actives = this.$store.state.serviceShopMenu;
  },
  methods: {
    active(val) {
      this.$store.commit("serviceShopMenuAct", val.id);
      // this.$router.push(val);
      if (val.id == 'cloud') {
        // this.$router.push(val.url)
      }else {
        // this.$router.push(`/shop/data_service_list/${val.id}`)
      }
      this.$emit("changeActive",val)
    },
    // getActiveMenu(val) {
    //   this.actives = val;
    //   console.log(this.actives)
    // },
    getShopMenu() {
      this.$api.workbench.getServiceTypeList().then(response => {
        if (response.data.success == 1) {
          let arr = response.data.data;
          this.menuList = arr;
          this.actives = arr[0].id
          this.menuList.push(...this.otherlist)
        } else {
          console.log(response.data.errMsg);
        }
      });
    },
  },
};
</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>
