<template>
  <div class="shop_list_cont">
    <el-container>
      <el-aside width="176px">
        <service-shop-menu @changeActive="changeActive" :menuList="menuList" :currentId="currentId"></service-shop-menu>
      </el-aside>
      <el-main class="main_init">
        <!-- <service-list
          :filterNames="filterNames"
          :name="name"
          :url="url"
          :urlFilter="urlFilter"
        ></service-list> -->
        <service-list
          :filterNames="filterNames"
          :name="name"
          :urlFilter="urlFilter"
          v-show="showFlag"
        ></service-list>
        <shop-cloud v-show="!showFlag" name="云资源服务"></shop-cloud>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import ServiceShopMenu from "@/components/service-list/service_shop_menu_new";
import ServiceList from "@/components/service-list/service_list_new";
import BlockRadius from "@/components/general/block-radius";
import ShopCloud from "@/components/shop-cloud/shop-cloud-new";
export default {
  components: {
    ServiceShopMenu,
    ServiceList,
    BlockRadius,
    ShopCloud
  },
  data: () => ({
    urlFilter: "",
    url: "",
    name: "",
    filterNames: [],
    currentId: null,
    menuList: [],
    otherlist: [
      {
        id: 'app',
        name: "应用商店",
      },
      {
        id: "cloud",
        name: "云资源服务",
      }
    ],
    showFlag: true
  }),
  mounted() {
    // this.getVal(this.$route.query);
    this.getShopMenu()
    
  },
  methods: {
    getVal(val) {
      console.log(val,'========')
      if (val.indexOf('app') > -1) {
        let obj = {
          id: 'app',
          name: "应用商店",
        }
        this.changeActive(obj)
      }else if (val.indexOf('cloud') > -1) {
        let obj = {
          id: "cloud",
          name: "云资源服务",
        }
        this.changeActive(obj)
      }else {
        this.changeActive(this.menuList[0])
      }
      
    },
    getShopMenu() {
      let obj = {}
      this.$api.workbench.getServiceTypeList().then(response => {
        if (response.data.success == 1) {
          let arr = response.data.data;
          obj = arr[0] || {}
          this.menuList = arr;
          this.menuList.push(...this.otherlist)
          if (this.$route.params.id) {
            this.currentId = this.$route.params.id
            if (this.$route.params.id == 'app') {
              this.showFlag = true
              this.name = '应用商店'
              this.urlFilter = this.$route.params.id.toString()
              this.filterNames = ["应用类型", "应用领域", "应用来源机构"];
            }else if(this.$route.params.id == 'cloud') {
              this.showFlag = false
            }
          }else {
            this.currentId = obj.id
            this.name = obj.name
            this.urlFilter = obj.id.toString()
            if (obj.id != 'app' && obj.id != 'cloud') {
              this.filterNames = ["服务类型", "业务领域", "服务来源组织"]
            }else {
              if (obj.id == 'app') {
                this.filterNames = ["应用类型", "应用领域", "应用来源机构"];
              }
            }
          }
        } else {
          console.log(response.data.errMsg);
        }
      });
    },
    changeActive(item) {
      this.currentId = item.id
      if (item.id !='cloud') {
        if (item.id != 'app') {
          this.$router.push('/shop/data_service_list')
        }
        this.showFlag = true
        this.name = item.name
        this.urlFilter = item.id.toString()
        if (item.id != 'app') {
          this.filterNames = ["服务类型", "业务领域", "服务来源组织"]
        }else {
          this.filterNames = ["应用类型", "应用领域", "应用来源机构"];
        }
      }else {
        this.showFlag = false
      }
      console.log(this.showFlag)
    }
  },
  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;
    .default_title {
      color: #264dd9;
      font-size: 44px;
      font-weight: bold;
      margin-bottom: 30px;
    }
    .default_msg {
      color: #58617a;
      font-size: 24px;
      line-height: 44px;
    }
  }
}
</style>
<style scoped>
.default_img {
  background: url("~@/assets/imgs/img_default_quesheng.png") no-repeat center
    center;
}
.shop_list_cont {
  width: 1200px;
  margin: 0 auto;
  position: relative;
}
.main_init {
  padding: 16px 0 16px 16px;
}
</style>