<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' }">服务超市</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_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="items.children && openChildren[index].state == true && openChildren[index].index == indexs ? 'classification_line_items_li_act classification_line_items_li':'classification_line_items_li'"
                  v-for="(items, indexs) in item.children"
                  :key="'cds' + indexs"
                >
                  <div class="classification_span" @click="clickItem(index, indexs, items)">
                    <span
                      :class="activeOptions[index] == items.id ? 'classification_act':''"
                    >{{ items.name }}</span>
                    <!-- if item have children, we will use an arrow to prompt -->
                    <i
                      v-if="items.children && openChildren[index].state == true && openChildren[index].index == indexs"
                      class="el-icon-caret-top"
                    ></i>
                    <i
                      v-else-if="items.children && openChildren[index].state == false && openChildren[index].index == indexs"
                      class="el-icon-caret-bottom"
                    ></i>
                    <i v-else-if="items.children" 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)">
                    <span
                      :class="activeOptions[index] == itemChildren.id ? 'classification_act':''"
                    >{{ itemChildren.name }}</span>
                  </div>
                </li>
              </ul>
            </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="item.state == false ? 'button_filter':'button_filter_act'"
          @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/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: [null, null, null, null],
    buttonFilter: [
      {
        name: "综合排序",
        state: false
      },
      {
        name: "最新更新",
        state: false
      },
      {
        name: "最高人气",
        state: false
      },
      {
        name: "最好好评",
        state: false
      }
    ],
    lists: [
      {
        id: 0,
        title: "水路货物周转量情况水路货物周转量情况",
        state: 0,
        resourceSummary:
          "提供水路货物周转量排名和同比增长的专题数据服务提供水路货物周转量排名和同比增长的专题数据服务提供水路货物周转量排名和同比增长的专题数据服务",
        provider: "提供机构提供机构提供机构",
        dataField: "经济建设",
        serviceType: "数据服务 专题数据服务 企业专题数据服务",
        updateTime: "2020-03-12 18:31:12",
        numberOfMonth: "2698755",
        rate: 3,
        mapService: 1,
        version: 2.888,
        onlineTime: "2019-04-11 12:50:30",
        num: 66666
      },
      {
        id: 1,
        title: "水路货物周转量情况",
        state: 2,
        resourceSummary:
          "提供水路货物周转量排名和同比增长的专题数据服务提供水路货物周转量排名和同比增长的专题数据服务提供水路货物周转量排名和同比增长的专题数据服务",
        provider: "提供机构提供机构提供机构",
        dataField: "经济建设",
        serviceType: "数据服务 专题数据服务 企业专题数据服务",
        updateTime: "2020-03-12 18:31:12",
        numberOfMonth: "2698745",
        rate: 3.4,
        version: 2.888,
        onlineTime: "2019-04-11 12:50:30",
        num: 66666
      },
      {
        id: 2,
        title: "水路货物周转量情况",
        state: 1,
        resourceSummary:
          "提供水路货物周转量排名和同比增长的专题数据服务提供水路货物周转量排名和同比增长的专题数据服务提供水路货物周转量排名和同比增长的专题数据服务",
        provider: "提供机构提供机构提供机构",
        dataField: "经济建设",
        serviceType: "数据服务 专题数据服务 企业专题数据服务",
        updateTime: "2020-03-12 18:31:12",
        numberOfMonth: "2698455",
        rate: 2.5,
        version: 2.888,
        onlineTime: "2019-04-11 12:50:30",
        num: 66666
      },
      {
        id: 3,
        title: "水路货物周转量情况",
        state: 0,
        resourceSummary:
          "提供水路货物周转量排名和同比增长的专题数据服务提供水路货物周转量排名和同比增长的专题数据服务提供水路货物周转量排名和同比增长的专题数据服务",
        provider: "提供机构提供机构提供机构",
        dataField: "经济建设",
        serviceType: "数据服务 专题数据服务 企业专题数据服务",
        updateTime: "2020-03-12 18:31:12",
        numberOfMonth: "267455",
        rate: 3.7,
        version: 2.888,
        onlineTime: "2019-04-11 12:50:30",
        num: 66666
      }
    ],
    filterLists: [
      {
        id: 1283,
        name: "数据服务类型",
        children: [
          {
            id: 1233,
            name: "诶哦尬舞",
            children: [
              { id: 18273, name: "那我空间服务" },
              {
                id: 12378343,
                name: "诶哦尬舞"
              },
              {
                id: 123533,
                name: "诶哦尬舞"
              }
            ]
          },
          {
            id: 121833,
            name: "诶哦尬舞"
          },
          {
            id: 1234573,
            name: "诶哦尬舞"
          },
          {
            id: 134534233,
            name: "诶哦尬舞"
          },
          {
            id: 1234533,
            name: "诶哦尬舞"
          },
          {
            id: 123533,
            name: "诶哦尬舞",
            children: [
              { id: 1824573, name: "那我空间服务" },
              {
                id: 123378343,
                name: "诶哦尬舞"
              },
              {
                id: 1235333,
                name: "诶哦尬舞"
              }
            ]
          },
          {
            id: 12112833,
            name: "诶哦尬舞"
          },
          {
            id: 12341573,
            name: "诶哦尬舞"
          },
          {
            id: 1345434233,
            name: "诶哦尬舞"
          },
          {
            id: 12345533,
            name: "诶哦尬舞"
          }
        ]
      },
      {
        id: 128133,
        name: "数据服务类型",
        children: [
          {
            id: 123313,
            name: "诶哦尬舞",
            children: [
              { id: 1821373, name: "那我个社工师空间服务" },
              {
                id: 123728343,
                name: "诶哦甲方推荐尬舞"
              },
              {
                id: 12312533,
                name: "诶哦库空调尬舞"
              }
            ]
          },
          {
            id: 121123833,
            name: "诶哦尬舞"
          },
          {
            id: 1231234573,
            name: "诶哦达瓦大尬舞"
          },
          {
            id: 13453334233,
            name: "诶哦达瓦大尬舞"
          },
          {
            id: 1234123533,
            name: "诶哦尬舞"
          },
          {
            id: 123512333,
            name: "诶哦尬舞",
            children: [
              { id: 1824123573, name: "那我空间服务" },
              {
                id: 1233738343,
                name: "诶哦尬舞"
              },
              {
                id: 123125333,
                name: "诶哦尬舞"
              }
            ]
          },
          {
            id: 1211312833,
            name: "诶哦挖到尬舞"
          },
          {
            id: 12341231573,
            name: "诶哦尬舞"
          },
          {
            id: 13454314233,
            name: "诶哦色粉尬舞"
          },
          {
            id: 123452533,
            name: "诶环境日哦尬舞"
          }
        ]
      }
    ],
    dataServiceType: "",
    dataField: "",
    dataSourceOrganization: "",
    page: 1,
    limit: 10
  }),
  mounted() {
    this.getShopList();
    this.getShopFilter();
  },
  methods: {
    getShopList() {
      //   dataServiceType: "",
      // dataField: "",
      // dataSourceOrganization: ""
      let url = `${this.urlList}`;
      this.$http
        .get(url)
        .then(response => {
          if (response.data.message == "success") {
            this.list = response.data.data;
          } else {
            console.log(response.data.message);
          }
        })
        .catch(function(response) {
          this.error = true;
        });
    },
    getShopFilter() {
      setTimeout(() => {
        if (this.urlFilter) {
          this.judgeHeight();
        }
      }, 0);
      //   let url = `${this.urlFilter}`;
      //   this.$http
      //     .get(url)
      //     .then(response => {
      //       if (response.data.message == "success") {
      //         this.filterList = response.data.data;
      //       } else {
      //         console.log(response.data.message);
      //       }
      //     })
      //     .catch(function(response) {
      //       this.error = true;
      //     });
    },
    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) {
      this.activeOptions[index] = items.id;
      if (items.children) {
        if (this.openChildren[index].index == indexs) {
          this.$set(this.openChildren, index, {
            index: indexs,
            state: !this.openChildren[index].state,
            act: items.children
          });
        } else {
          this.$set(this.openChildren, index, {
            index: indexs,
            state: true,
            act: items.children
          });
        }
      } else {
        this.$set(this.openChildren, index, {
          index: null,
          state: false,
          act: null
        });
      }
      this.getFilterValue(items.id, index);
    },
    clickButtonFilter(index) {
      this.buttonFilter[index].state = !this.buttonFilter[index].state;
      this.getShopList();
    },
    clickChildren(id, index) {
      this.$set(this.activeOptions, index, id);
      this.getFilterValue(id, index);
    },
    getFilterValue(id, index) {
      switch (index) {
        case 0:
          this.dataServiceType = id;
          break;
        case 1:
          this.dataField = id;
          break;
        case 2:
          this.dataSourceOrganization = id;
          break;
        default:
          break;
      }
      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();
    }
  }
};
</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%;
  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% - 100px);
}
.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>