<template>
  <!-- 
    name: page type
    url: detail page 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.service_shop")
        }}</el-breadcrumb-item>
        <el-breadcrumb-item>{{ name }}</el-breadcrumb-item>
      </el-breadcrumb>
      <div class="input_right">
        <el-input
          v-model="search"
          prefix-icon="el-icon-search"
          placeholder="请输入关键字搜索服务"
          @input="searchVal"
        ></el-input>
      </div>
    </div>
    <block-radius>
      <!-- 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 && item.childDomains.length != 0"
          >
            <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"
        v-if="
          filterLists[0].childDomains.length != 0 ||
            filterLists[1].childDomains.length != 0 ||
            filterLists[2].childDomains.length != 0
        "
      ></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 v-if="urlFilter == 'app'" class="btn_right_check">
          <el-checkbox v-model="couldTwice" @change="changeTwice"
            >支持二次开发</el-checkbox
          >
        </div>
      </div>
      <!-- the list -->
      <commodity-list
        :datas="lists && lists.length != 0 ? lists : []"
        :total="total"
        :url="url"
        :urlFilter="urlFilter"
        :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/general/block-radius";
export default {
  components: {
    "commodity-list": CommodityList,
    BlockRadius,
  },
  props: {
    urlFilter: {
      type: String,
      default: "",
    },
    url: { type: String, default: "" },
    name: { type: String, default: "" },
    filterNames: {
      type: Array,
      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: [],
    total: 0,
    filterLists: [
      {
        id: 110,
        name: "",
        prop: "",
        childDomains: [],
      },
      {
        id: 10,
        name: "",
        prop: "serviceTypeInfo",
        childDomains: [],
      },
      {
        id: 11,
        name: "",
        prop: "serviceDomain",
        childDomains: [],
      },
      {
        id: 100,
        name: "",
        prop: "organizations",
        childDomains: [],
      },
    ],
    page: 1,
    limit: 10,
    couldTwice: false,
    refresh_app_1: false,
    refresh_app_2: false,
    refresh_app_3: false,
    time_app: null,
    times: null,
  }),
  mounted() {
    window.addEventListener("resize", this.judgeHeight);
  },
  destroyed() {
    window.removeEventListener("resize", this.judgeHeight);
  },
  watch: {
    urlFilter: {
      handler(val) {
        if (val) {
          this.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 },
          ];
          this.activeOptions = [[], [], [], []];
          this.activeChildOptions = [[], [], [], []];
          if (val == "app") {
            this.$set(this.filterLists, 0, {
              id: 110,
              name: "部署来源",
              prop: "",
              childDomains: [
                {
                  id: 2,
                  name: "平台应用",
                  prop: "",
                  childDomains: null,
                },
                {
                  id: 1,
                  name: "开发者应用",
                  prop: "",
                  childDomains: null,
                },
              ],
            });
          } else {
            this.$set(this.filterLists, 0, {
              id: 110,
              name: "",
              prop: "",
              childDomains: [],
            });
          }
          this.getShopFilter();
        }
      },
    },
    filterNames: {
      handler(val) {
        for (let i = 0; i < val.length; i++) {
          this.filterLists[i + 1].name = val[i];
        }
        console.log(this.filterLists);
      },
    },
  },
  methods: {
    getShopList() {
      if (this.urlFilter == "app") {
        let query = {
          online_state: this.activeOptions[0].join(","),
          appTypes: this.activeOptions[1].join(","),
          businessArea: this.activeOptions[2].join(","),
          orgSource: this.activeOptions[3].join(","),
          developable: Number(this.couldTwice),
          order:
            this.activeBtn == 0
              ? "search_count"
              : this.activeBtn == 1
              ? "create_date"
              : this.activeBtn == 2
              ? "apply_times"
              : "evaluation",
          page: this.page,
          limit: this.limit,
          search: this.search,
        };
        this.$api.serviceShop.getAppList(query).then((response) => {
          if (response.data.success == "1") {
            this.lists = response.data.data;
            this.total = response.data.total;
          } else {
            console.log(response.data.errMsg);
          }
        });
      } else {
        let query = {
          serviceName: this.search,
          serviceType1: this.urlFilter,
          serviceType2s: this.activeOptions[1].join(","),
          serviceType3s: this.activeChildOptions[1].join(","),
          dataDomains: this.activeOptions[2].join(","),
          organizeIds: this.activeOptions[3].join(","),
          orderBy: this.activeBtn,
          Page: this.page,
          Size: this.limit,
        };
        this.$api.serviceShop.getServiceShopList(query).then((response) => {
          if (response.data.success == "1") {
            this.lists = response.data.data;
            this.total = response.data.total;
          } else {
            console.log(response.data.errMsg);
          }
        });
      }
    },
    getShopFilter() {
      if (this.urlFilter == "app") {
        this.getAppArea();
        this.getAppType();
        this.getAppOrg();
        this.getShopList();
        this.time_app = setInterval(() => {
          if (this.refresh_app_1 && this.refresh_app_2 && this.refresh_app_3) {
            this.judgeHeight();
            clearInterval(this.time_app);
          }
        }, 50);
      } else {
        let query = {
          type: this.urlFilter,
        };
        this.$api.serviceShop.getServiceShopFilter(query).then((response) => {
          if (response.data.success == 1) {
            let data = response.data.data;
            this.filterLists[1].childDomains = data.serviceTypeInfo
              ? data.serviceTypeInfo
              : [];
            this.filterLists[2].childDomains = data.serviceDomain
              ? data.serviceDomain
              : [];
            this.filterLists[3].childDomains = data.organizations
              ? data.organizations
              : [];
            setTimeout(() => {
              this.judgeHeight();
            }, 0);
          } else {
            console.log(response.data.errMsg);
          }
        });
        this.getShopList();
      }
    },
    judgeHeight() {
      this.$nextTick(() => {
        let list = this.filterLists;
        for (let i = 0; i < list.length; i++) {
          if (list[i].childDomains.length != 0) {
            let offHeight = Math.ceil(document.getElementById(list[i].id).offsetHeight);
            if (offHeight > 60) {
              list[i].showOpen = true;
              this.openList[i] = "up";
            } else {
              list[i].showOpen = false;
            }
          }
        }
        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);
      }
      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) {
      this.$set(this.activeOptions, item, []);
      this.$set(this.activeChildOptions, item, []);
      this.getShopList();
    },
    changeTwice() {
      this.getShopList();
    },
    getAppArea() {
      this.$api.serviceShop.getAppArea().then((response) => {
        if (response.data.success == 1) {
          this.filterLists[2].childDomains = response.data.data;
          this.refresh_app_2 = true;
        } else {
          console.log(response.data.errMsg);
        }
      });
    },
    getAppType() {
      this.$api.serviceShop.getAppType().then((response) => {
        if (response.data.success == 1) {
          this.filterLists[1].childDomains = response.data.data;
          this.refresh_app_1 = true;
        } else {
          console.log(response.data.errMsg);
        }
      });
    },
    getAppOrg() {
      this.$api.serviceShop.getAppOrg().then((response) => {
        if (response.data.success == 1) {
          this.filterLists[3].childDomains = response.data.data;
          this.refresh_app_3 = true;
        } else {
          console.log(response.data.errMsg);
        }
      });
    },
  },
};
</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_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);
  font-size: 0;
}
.classification_line_items_li {
  display: inline-block;
  padding: 15px 20px;
  font-size: 14px;
}
.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;
  position: relative;
}
.btn_right_check {
  position: absolute;
  right: 20px;
  top: 10px;
}
</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;
}
.btn_right_check .el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color: #626de9;
  border-color: #626de9;
}
.btn_right_check .el-checkbox__input.is-checked + .el-checkbox__label {
  color: #626de9;
}
.btn_right_check .el-checkbox__input.is-focus .el-checkbox__inner {
  border-color: #626de9;
}
</style>
