<template>
  <div>
    <div class="head_flex">
      <el-breadcrumb separator="/" class="bread_crumb bread_left">
        <el-breadcrumb-item :to="{ path: '/fwcs' }">服务超市</el-breadcrumb-item>
        <el-breadcrumb-item>数据服务</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>
      <div 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>
                    <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>
              <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>
            <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>
      <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>
      <commodity-list :datas="lists" url="urlssss" :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: ""
    }
  },
  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
      },
      {
        id: 1,
        title: "水路货物周转量情况",
        state: 2,
        resourceSummary:
          "提供水路货物周转量排名和同比增长的专题数据服务提供水路货物周转量排名和同比增长的专题数据服务提供水路货物周转量排名和同比增长的专题数据服务",
        provider: "提供机构提供机构提供机构",
        dataField: "经济建设",
        serviceType: "数据服务 专题数据服务 企业专题数据服务",
        updateTime: "2020-03-12 18:31:12",
        numberOfMonth: "2698745",
        rate: 3.4
      },
      {
        id: 2,
        title: "水路货物周转量情况",
        state: 1,
        resourceSummary:
          "提供水路货物周转量排名和同比增长的专题数据服务提供水路货物周转量排名和同比增长的专题数据服务提供水路货物周转量排名和同比增长的专题数据服务",
        provider: "提供机构提供机构提供机构",
        dataField: "经济建设",
        serviceType: "数据服务 专题数据服务 企业专题数据服务",
        updateTime: "2020-03-12 18:31:12",
        numberOfMonth: "2698455",
        rate: 2.5
      },
      {
        id: 3,
        title: "水路货物周转量情况",
        state: 0,
        resourceSummary:
          "提供水路货物周转量排名和同比增长的专题数据服务提供水路货物周转量排名和同比增长的专题数据服务提供水路货物周转量排名和同比增长的专题数据服务",
        provider: "提供机构提供机构提供机构",
        dataField: "经济建设",
        serviceType: "数据服务 专题数据服务 企业专题数据服务",
        updateTime: "2020-03-12 18:31:12",
        numberOfMonth: "267455",
        rate: 3.7
      }
    ],
    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.getFwcsList();
    this.getFwcsFilter();
    this.setTout();
  },
  methods: {
    getFwcsList() {
      //   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;
        });
    },
    getFwcsFilter() {
      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;
        });
    },
    setTout() {
      setTimeout(() => {
        this.judgeHeight();
      }, 500);
    },
    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");
      }
      //   这里不能像上面那样整体更新，因为啥我也不知道，我太菜
      console.log(index);
    },
    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.getFwcsList();
    },
    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.getFwcsList();
    },
    // search debonce 500ms
    searchVal() {
      if (this.times !== null) clearTimeout(this.times);
      this.times = setTimeout(() => {
        this.getFwcsList();
      }, 500);
    },
    getNewList(val) {
        this.page = val.page;
        this.limit = val.rowsPerPage;
        this.getFwcsList();
    }
  }
};
</script>
<style scoped>
.head_flex {
  display: flex;
  justify-content: space-between;
}
.bread_left {
  width: 300px;
}
.input_right {
  width: 300px;
}
.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;
}
.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;
}
.button_filter_act {
  background-color: #515fe7;
  color: #f8f9fd;
}
</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;
}
</style>