<template>
  <!-- 
    name: page type
    url: detail page url
    urlList: get list data from this url
    urlFilter: get filter data from this url
    author: dixin
    This component only for service shop list, so the explanation only look by me
  -->
  <div>
    <div class="head_flex">
      <el-breadcrumb separator="/" class="bread_crumb1 bread_left">
        <el-breadcrumb-item :to="{ path: '/shop' }">{{ $t('lang.serviceShop') }}</el-breadcrumb-item>
        <el-breadcrumb-item>{{ name }}</el-breadcrumb-item>
      </el-breadcrumb>
      <div v-if="urlList" class="input_right">
        <el-input
          v-model="search"
          prefix-icon="el-icon-search"
          placeholder="请输入关键字搜索服务"
          @input="searchVal"
        ></el-input>
      </div>
    </div>
    <block-radius v-if="urlList">
      <!-- filter -->
      <div v-if="urlFilter" class="classification">
        <div v-for="(item, index) in filterLists" :key="'cd' + index" class="classification_line">
          <div class="classification_line_if" v-if="item.childDomains">
            <div class="classification_line_title">{{ item.name }}：</div>
            <div
              :class="index == filterLists.length - 1 ? 'classification_line_items':'classification_line_items classification_line_items_border'"
            >
              <div
                :class="openList[index] == 'up' ? 'classification_line_hid':'classification_line_show'"
              >
                <ul :id="item.id" class="classification_line_items_ul">
                  <li class="classification_line_items_li" :key="'cda' + index">
                    <div class="classification_span">
                      <span
                        @click="clickAll(index)"
                        :class="activeOptions[index].length == 0 ? 'classification_act':''"
                      >全部</span>
                    </div>
                  </li>
                  <li
                    v-for="(items, indexs) in item.childDomains"
                    :class="items.childDomains && openChildren[index].state == true && openChildren[index].index == items.id ? 'classification_line_items_li_act classification_line_items_li':'classification_line_items_li'"
                    :key="'cds' + indexs"
                  >
                    <div class="classification_span">
                      <span
                        @click="clickItem(index, indexs, items)"
                        :class="activeOptions[index].indexOf(items.id) != -1 ? 'classification_act':''"
                      >{{ items.name }}</span>
                      <!-- if item have children, we will use an arrow to prompt -->
                      <i
                        v-if="items.childDomains && openChildren[index].state == true && openChildren[index].index == items.id"
                        @click="clickItemChild(index, indexs, items)"
                        class="el-icon-caret-top"
                      ></i>
                      <i
                        v-else-if="items.childDomains && openChildren[index].state == false && openChildren[index].index == items.id"
                        @click="clickItemChild(index, indexs, items)"
                        class="el-icon-caret-bottom"
                      ></i>
                      <i
                        v-else-if="items.childDomains"
                        @click="clickItemChild(index, indexs, items)"
                        class="el-icon-caret-bottom"
                      ></i>
                    </div>
                  </li>
                </ul>
                <!-- if the word over the width, we will supply a button for show all word -->
                <div
                  v-if="item.showOpen"
                  class="classification_line_items_open"
                  @click="clickOpen(index)"
                >
                  <span v-if="openList[index] == 'down'">收起</span>
                  <span v-if="openList[index] == 'up'">展开</span>
                  <i v-if="openList[index] == 'down'" class="el-icon-caret-top"></i>
                  <i v-if="openList[index] == 'up'" class="el-icon-caret-bottom"></i>
                </div>
              </div>
              <!-- filter children -->
              <div v-if="openChildren[index].state">
                <ul class="classification_children_ul">
                  <li
                    class="classification_children_li"
                    v-for="itemChildren in openChildren[index].act"
                    :key="itemChildren.id"
                  >
                    <div
                      class="classification_span"
                      @click="clickChildren(itemChildren.id, index, openChildren[index].index)"
                    >
                      <span
                        :class="activeChildOptions[index].indexOf(itemChildren.id) != -1 ? 'classification_act':''"
                      >{{ itemChildren.name }}</span>
                    </div>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="gray_line"></div>
      <!-- filter button -->
      <div class="btn_group">
        <el-button
          v-for="(item, index) in buttonFilter"
          :key="item.name"
          size="small"
          :class="index == activeBtn ? 'button_filter_act':'button_filter'"
          @click="clickButtonFilter(index)"
        >{{ item.name }}</el-button>
      </div>
      <!-- the list -->
      <commodity-list
        :datas="lists"
        :url="url"
        :name="name"
        :paginationShow="true"
        :pageSizeShow="true"
        @refresh="getNewList"
      ></commodity-list>
    </block-radius>
  </div>
</template>

<script>
import CommodityList from "@/components/service-list/commodity-list.vue";
import BlockRadius from "@/components/block-radius";
export default {
  components: {
    "commodity-list": CommodityList,
    BlockRadius
  },
  props: {
    urlList: {
      type: String,
      default: ""
    },
    urlFilter: {
      type: String,
      default: ""
    },
    url: { type: String, default: "" },
    name: { type: String, default: "" }
  },
  data: () => ({
    search: "",
    openList: [0, 0, 0, 0],
    openChildren: [
      { index: null, state: false, act: null },
      { index: null, state: false, act: null },
      { index: null, state: false, act: null },
      { index: null, state: false, act: null }
    ],
    activeOptions: [[], [], [], []],
    activeChildOptions: [[], [], [], []],
    buttonFilter: [
      {
        name: "综合排序"
      },
      {
        name: "最新更新"
      },
      {
        name: "最高人气"
      },
      {
        name: "最好好评"
      }
    ],
    activeBtn: 0,
    lists: [],
    filterLists: [
      {
        id: 10,
        name: "数据服务类型",
        prop: "serviceTypeInfo",
        childDomains: []
      },
      {
        id: 11,
        name: "数据领域",
        prop: "serviceDomain",
        childDomains: []
      },
      {
        id: 100,
        name: "数据来源机构",
        prop: "organizations",
        childDomains: []
      }
    ],
    page: 1,
    limit: 10
  }),
  mounted() {
    this.getShopList();
    this.getShopFilter();
  },
  methods: {
    getShopList() {
      let query = {
        serviceName: this.search,
        serviceType1: this.urlFilter,
        serviceType2s: this.activeOptions[0].join(","),
        serviceType3s: this.activeChildOptions[0].join(","),
        dataDomains: this.activeOptions[1].join(","),
        organizeIds: this.activeOptions[2].join(","),
        orderBy: this.activeBtn,
        Page: this.page,
        Size: this.limit
      };
      this.$api.serviceShop.getServiceShopList(query).then(response => {
        if (response.data.message == "success") {
          this.lists = response.data.data;
        } else {
          console.log(response.data.message);
        }
      });
    },
    getShopFilter() {
      let query = {
        type: this.urlFilter
      };
      this.$api.serviceShop.getServiceShopFilter(query).then(response => {
        if (response.data.success == 1) {
          let data = response.data.data;
          this.filterLists[0].childDomains = data.serviceTypeInfo
            ? data.serviceTypeInfo
            : [];
          this.filterLists[1].childDomains = data.serviceDomain
            ? data.serviceDomain
            : [];
          this.filterLists[2].childDomains = data.organizations
            ? data.organizations
            : [];
          setTimeout(() => {
            this.judgeHeight();
          }, 0);
        } else {
          console.log(response.data.errMsg);
        }
      });
    },
    judgeHeight() {
      let list = this.filterLists;
      for (let i = 0; i < list.length; i++) {
        let offHeight = document.getElementById(list[i].id).offsetHeight;
        if (offHeight > 60) {
          list[i].showOpen = true;
          this.openList[i] = "up";
        } else {
          list[i].showOpen = false;
        }
      }
      this.$set((this.filterLists = list));
    },
    clickOpen(index) {
      let list = this.openList;
      if (list[index] == "up") {
        this.$set(this.openList, index, "down");
      } else if (list[index] == "down") {
        this.$set(this.openList, index, "up");
      }
      //   这里不能像上面那样整体更新，因为啥我也不知道，我太菜
    },
    clickItem(index, indexs, items) {
      let i = this.activeOptions[index].indexOf(items.id);
      if (i == -1) {
        this.activeOptions[index].push(items.id);
      } else {
        this.activeOptions[index].splice(i, 1);
        if (items.childDomains) {
          items.childDomains.forEach(e => {
            let i = this.activeChildOptions[index].indexOf(e.id);
            if (i != -1) {
              this.activeChildOptions[index].splice(i, 1);
            }
          });
        }
      }
      this.getFilterValue();
    },
    clickItemChild(index, indexs, items) {
      if (items.childDomains) {
        if (this.openChildren[index].index == items.id) {
          this.$set(this.openChildren, index, {
            index: indexs,
            state: !this.openChildren[index].state,
            act: items.childDomains
          });
        } else {
          this.$set(this.openChildren, index, {
            index: items.id,
            state: true,
            act: items.childDomains
          });
        }
      } else {
        this.$set(this.openChildren, index, {
          index: null,
          state: false,
          act: null
        });
      }
    },
    clickButtonFilter(index) {
      this.activeBtn = index;
      this.getShopList();
    },
    clickChildren(id, index, fatherId) {
      let i = this.activeChildOptions[index].indexOf(id);
      let j = this.activeOptions[index].indexOf(fatherId);
      if (i == -1) {
        this.activeChildOptions[index].push(id);
        if (j == -1) {
          this.activeOptions[index].push(fatherId);
        }
      } else {
        this.activeChildOptions[index].splice(i, 1);
      }
      console.log(this.activeChildOptions, i, fatherId);
      this.getFilterValue();
    },
    getFilterValue() {
      this.getShopList();
    },
    // search debonce 500ms
    searchVal() {
      if (this.times !== null) clearTimeout(this.times);
      this.times = setTimeout(() => {
        this.getShopList();
      }, 500);
    },
    getNewList(val) {
      this.page = val.page;
      this.limit = val.rowsPerPage;
      this.getShopList();
    },
    clickAll(item) {
      console.log(item);
      this.activeOptions[item] = [];
      this.activeChildOptions[item] = [];
    }
  }
};
</script>
<style scoped>
.head_flex {
  display: flex;
  justify-content: space-between;
}
.bread_left {
  width: 300px;
}
.input_right {
  width: 360px;
}
.gray_line {
  width: 100%;
  margin: 20px auto;
  height: 1px;
  background-color: #e9ecf3;
}
.classification {
}
.classification_line {
  width: 100%;
}
.classification_line_if {
  width: 100%;
  display: flex;
  align-items: flex-start;
}
.classification_line_title {
  display: inline-block;
  width: 130px;
  padding: 15px 0;
  text-align: right;
  color: #8890a7;
}
.classification_line_items {
  width: calc(100% - 130px);
}
.classification_line_items_border {
  border-bottom: 1px #e9ecf3 solid;
}
.classification_line_hid {
  height: 50px;
  width: 100%;
  overflow: hidden;
  display: inline-flex;
  align-items: flex-start;
}
.classification_line_show {
  width: 100%;
  display: inline-flex;
  align-items: flex-start;
}
.classification_line_items_ul {
  display: inline-block;
  width: calc(100% - 50px);
}
.classification_line_items_li {
  display: inline-block;
  padding: 15px 20px;
}
.classification_line_items_li_act {
  background-color: #fbfbfb;
  border-left: 1px #e9ecf3 solid;
  border-right: 1px #e9ecf3 solid;
}
.classification_span {
  color: #58617a;
  display: inline-block;
  cursor: pointer;
}
.classification_act {
  font-weight: 700;
  color: #515fe7;
}
.classification_line_items_open {
  display: inline-block;
  width: 60px;
  padding: 15px 0;
  cursor: pointer;
}
.classification_children_ul {
  display: inline-block;
  width: 100%;
  background-color: #fbfbfb;
  border-top: 1px #e9ecf3 solid;
}
.classification_children_li {
  display: inline-block;
  padding: 15px 20px;
  color: #58617a;
}
.button_filter {
  background-color: #e6eefe;
  color: #626de9;
  font-size: 10px;
}
.button_filter_act {
  background-color: #515fe7;
  color: #f8f9fd;
}
.btn_group {
  margin-bottom: 15px;
}
</style>
<style>
.input_right .el-input__inner {
  border-radius: 20px;
}
.input_right .el-input--prefix .el-input__inner {
  padding-left: 40px;
}
.input_right .el-input__prefix,
.el-input__suffix {
  left: 10px;
}
.input_right .el-input--prefix .el-input__inner {
  outline: none;
}
.input_right .el-input__inner:focus-within {
  border: 1px solid #626de9;
}
</style>