<template>
  <div>
    <el-container>
      <el-aside width="180px">
        <service-shop-menu></service-shop-menu>
      </el-aside>
      <el-main>
        <service-list :name="name" :url="url" :urlList="urlList" :urlFilter="urlFilter"></service-list>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import ServiceShopMenu from "@/components/service_shop_menu";
import ServiceList from "@/components/service_list";
export default {
  components: {
    ServiceShopMenu,
    ServiceList
  },
  data: () => ({
    urlFilter: "",
    url: "",
    urlList: "2222",
    name: ""
  }),
  mounted() {
    this.getVal(this.$route.path);
  },
  methods: {
    getVal(val) {
      switch (val) {
        case "/shop/data_service_list":
          this.name = "数据服务";
          this.urlFilter = "5";
          break;
        case "/shop/space_time_service_list":
          this.name = "时空服务";
          this.urlFilter = "6";
          break;
        case "/shop/video_service_list":
          this.name = "视频服务";
          this.urlFilter = "7";
          break;
        case "/shop/perception_service_list":
          this.name = "感知服务";
          this.urlFilter = "10";
          break;
        case "/shop/comprehensive_app_list":
          this.name = "综合服务";
          this.urlFilter = "";
          break;
        case "/shop/app_store_list":
          this.name = "应用商店";
          this.urlFilter = "";
          break;
        default:
          this.name = "";
          this.urlFilter = "";
          break;
      }
    }
  },
  watch: {
    "$route.path": {
      handler(val) {
        this.getVal(val);
      }
    }
  }
};
</script>
<style scoped>
</style>