<template>
  <div class="select_service">
    <screen-type
      class="service_fliter"
      :top_data="serviceTypes"
      :data="filterList"
      :openflag="true"
      @topselect="changeType"
      @getselect="getFilters"
    ></screen-type>
    <div class="service_list apaas_scroll">
      <recommen-box
        v-for="(item, index) in serviceList"
        :data="item"
        :key="'sv_' + index"
        :flag="true"
        @change_value="changeValue"
        class="service_item"
      ></recommen-box>
    </div>
  </div>
</template>

<script>
import screenType from "@/components/recommen/screen-type";
import recommenBox from "@/components/recommen/recommen-box";

export default {
  components: {
    screenType,
    recommenBox,
  },
  data() {
    return {
      serviceTypes: {
        name: "服务分类",
        arr: [
          {
            id: 5,
            name: "数据服务",
          },
          {
            id: 6,
            name: "时空服务",
          },
          {
            id: 21,
            name: "综合应用服务",
          },
        ],
      },
      serviceType: 5, // 5：数据服务，6：时空服务，21：综合应用服务
      filterList: [],
      serviceList: [],
      selected: [],
    };
  },
  created() {
    this.getFilterList();
    this.getServiceList();
  },
  methods: {
    getFilterList() {
      let serviceType = this.serviceType;
      let serviceTypeInfo = {
        5: "数据服务类型",
        6: "时空服务类型",
        21: "服务类型",
      };
      let serviceDomain = {
        5: "服务领域",
        6: "服务领域",
        21: "服务领域",
      };
      let organizations = {
        5: "数据来源机构",
        6: "服务来源组织",
        21: "服务来源组织",
      };
      let filterSerise = {
        serviceTypeInfo: serviceTypeInfo[serviceType],
        serviceDomain: serviceDomain[serviceType],
        organizations: organizations[serviceType],
      };

      this.$http
        .get("/apaas/serviceapp/v3/servicemarket/profileInfo", {
          params: {
            serviceType,
          },
        })
        .then(({ data }) => {
          this.filterList = [];

          if (data.success == 1) {
            let filters = data.data;

            for (let key in filters) {
              if (filters[key].childDomains) {
                filters[key].flag = false;
              }

              this.filterList.push({
                name: filterSerise[key],
                arr: filters[key],
                key: key,
              });
            }
          }
        });
    },
    getServiceList(params = {}) {
      this.$http
        .get("/apaas/serviceapp/v3/servicemarket/list", {
          params: {
            serviceType1: this.serviceType,
            ...params,
          },
        })
        .then(({ data }) => {
          if (data.success == 1) {
            this.serviceList = data.data || [];
          }
        });
    },
    changeType(typeId) {
      this.serviceType = typeId;
      this.getFilterList();
      this.getServiceList();
    },
    getFilters(filters) {
      this.getServiceList({
        serviceName: filters.word,
        serviceType2s: filters.serviceTypeInfo.join(),
        dataDomains: filters.serviceDomain.join(),
        organizeIds: filters.organizations.join(),
      });
    },
    changeValue(item) {
      if (item.check) {
        this.selected.push(item.data);
      } else {
        let temp = "";
        this.selected.forEach((v, index) => {
          if (v.id == item.id) {
            temp = index;
          }
        });
        this.selected.splice(temp, 1);
      }

      this.$emit("change", this.selected);
    },
  },
};
</script>

<style scoped>
.select_service {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
}
.service_fliter {
  padding: 15px 0;
  border: none;
  position: relative;
}
.service_fliter::after {
  content: "";
  position: absolute;
  right: -20px;
  bottom: 0;
  left: -20px;
  border-bottom: 1px solid #e9ecf3;
}
.service_list {
  flex-grow: 1;
  margin-top: 19px;
  overflow-x: hidden;
  overflow-y: auto;
}
.service_item {
  width: calc((100% - 60px) / 4);
  float: left;
  margin-right: 20px;
  margin-bottom: 30px;
}
.service_item:nth-of-type(4n) {
  margin-right: 0px;
}
</style>
