<template>
  <div>
    <el-container>
      <el-aside width="180px">
        <service-shop-menu></service-shop-menu>
      </el-aside>
      <el-main>
        <service-list
          v-show="urlFilter != '7' && urlFilter != '10'"
          :filterNames="filterNames"
          :name="name"
          :url="url"
          :urlFilter="urlFilter"
        ></service-list>
        <div v-show="urlFilter == '7' || urlFilter == '10'">
          <el-breadcrumb separator="/" class="bread_crumb1 bread_left">
            <el-breadcrumb-item :to="{ path: '/shop' }">
              {{
              $t("lang.service_shop")
              }}
            </el-breadcrumb-item>
            <el-breadcrumb-item>{{ name }}</el-breadcrumb-item>
          </el-breadcrumb>
          <BlockRadius class="default">
            <div class="default_img">
              <h1 class="default_title">开发中，敬请期待！</h1>
              <h3 class="default_msg">
                如需技术支持
                <br />请联系管理员
              </h3>
            </div>
          </BlockRadius>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import ServiceShopMenu from "@/components/service-list/service_shop_menu";
import ServiceList from "@/components/service-list/service_list";
import BlockRadius from "@/components/general/block-radius";
export default {
  components: {
    ServiceShopMenu,
    ServiceList,
    BlockRadius,
  },
  data: () => ({
    urlFilter: "",
    url: "",
    name: "",
    filterNames: [],
  }),
  mounted() {
    this.getVal(this.$route.path);
  },
  methods: {
    getVal(val) {
      let uri = val.substring(6);
      uri = uri.substring(0, uri.indexOf("/"));
      switch (uri) {
        case "data_service_list":
          this.name = "数据服务";
          this.urlFilter = "5";
          this.url = "/shop/sjfwDetail";
          this.filterNames = ["数据服务类型", "服务领域", "数据来源机构"];
          break;
        case "space_time_service_list":
          this.name = "时空服务";
          this.urlFilter = "6";
          this.url = "/shop/skfwDetail";
          this.filterNames = ["时空服务类型", "服务领域", "服务来源组织"];
          break;
        case "video_service_list":
          this.name = "视频服务";
          this.urlFilter = "7";
          this.url = "";
          this.filterNames = [];
          break;
        case "perception_service_list":
          this.name = "感知服务";
          this.urlFilter = "10";
          this.url = "";
          this.filterNames = [];
          break;
        case "comprehensive_app_list":
          this.name = "综合应用";
          this.urlFilter = "21";
          this.url = "/shop/zhfwDetail";
          this.filterNames = ["服务类型", "服务领域", "服务来源组织"];
          break;
        case "app_store_list":
          this.name = "应用商店";
          this.urlFilter = "app";
          this.url = "/shop/yysdDetail";
          this.filterNames = ["应用类型", "应用领域", "应用来源机构"];
          break;
        default:
          this.name = "";
          this.urlFilter = "";
          this.url = "";
          this.filterNames = [];
          break;
      }
    },
  },
  watch: {
    "$route.path": {
      handler(val) {
        this.getVal(val);
      },
    },
  },
};
</script>
<style lang="less" scoped>
.default {
  height: calc(100vh - 180px);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  .default_img {
    width: 1282px;
    height: 629px;
    background-image: url("~@/assets/imgs/img_default_jszc.png");
    .default_title {
      color: #264dd9;
      font-size: 44px;
      font-weight: bold;
      margin-bottom: 40px;
    }
    .default_msg {
      color: #58617a;
      font-size: 24px;
      line-height: 44px;
    }
  }
}
</style>