<template>
  <ul
    class="ces_filter_container"
    v-if="filterList && filterData && filterToggle"
    v-show="show"
  >
    <li v-for="(item, index) in filterList" :key="'f_l_' + index">
      <div class="ces_filter_name">
        <span v-text="item.name + '：'"></span>
      </div>
      <ul
        class="ces_filter_data"
        :ref="'filterList_' + index"
        :style="{
          height: filterToggle[item.prop] ? '' : '42px',
        }"
      >
        <li v-for="(v, i) in item.data" :key="'f_l_d_' + index + '_' + i">
          <a
            class="text_clip"
            :class="{ current: isCurrentFilter(item.prop, v) }"
            @click.prevent="selectFilter(item.prop, v)"
          >
            <span v-text="v.name"></span>
          </a>
        </li>

        <div
          class="toggle_bar"
          @click="filterToggleAction(item.prop)"
          v-if="showToggleBar[index]"
        >
          <span>{{ filterToggle[item.prop] ? "收起" : "展开" }}</span>
          <i
            :class="
              filterToggle[item.prop]
                ? 'el-icon-caret-top'
                : 'el-icon-caret-bottom'
            "
          ></i>
        </div>
      </ul>
    </li>
  </ul>
</template>

<script>
export default {
  props: {
    filterList: {
      type: Array,
      default: [],
    },
    show: {
      type: Boolean,
      default: false,
    },
  },
  data: () => ({
    filterData: null, // 筛选条件
    filterToggle: null, // 控制筛选条件的展开和收起
    showToggleBar: [], // 判定筛选列表是否有需要添加控制展开的按钮
  }),
  watch: {
    filterList: {
      handler(val) {
        this.initFilterData();
      },
      deep: true,
    },
    show(value) {
      if (value) {
        this.resizePage();
      }
    },
  },
  methods: {
    initFilterData() {
      if (this.filterList && this.filterList.length) {
        this.filterData = {};
        this.filterToggle = {};
        this.filterList.forEach((item) => {
          this.$set(this.filterData, item.prop, []);
          this.$set(this.filterToggle, item.prop, false);
        });

        this.resizePage(); // 数据更新也要刷新列表
      }
    },
    resizePage() {
      if (this.show) {
        this.$nextTick(() => {
          this.showToggleBar = [];
          this.filterList.forEach((item, index) => {
            let filterList = this.$refs["filterList_" + index][0];
            let width = filterList.getBoundingClientRect().width - 100;
            let totalWidth = 0;

            filterList.querySelectorAll("li").forEach((v, i) => {
              totalWidth += v.getBoundingClientRect().width;
            });

            this.showToggleBar.push(totalWidth > width);
          });
        });
      }
    },
    filterToggleAction(prop) {
      this.$set(this.filterToggle, prop, !this.filterToggle[prop]);
    },
    isCurrentFilter(prop, filter) {
      return (
        this.filterData &&
        this.filterData[prop] &&
        this.filterData[prop].indexOf(filter) > -1
      );
    },
    selectFilter(prop, filter) {
      if (this.isCurrentFilter(prop, filter)) {
        this.filterData[prop].splice(this.filterData[prop].indexOf(filter), 1);
      } else {
        this.filterData[prop].push(filter);
      }

      this.$emit("filter-change", this.filterData);
    },
  },
  mounted() {
    this.initFilterData();

    window.addEventListener("resize", this.resizePage);
  },
  destroyed() {
    window.removeEventListener("resize", this.resizePage);
  },
};
</script>

<style scoped>
.ces_filter_container {
  padding: 14px 19px;
  border: 1px solid #e3e5ef;
  border-radius: 6px;
  margin-top: 10px;
}
.ces_filter_container > li {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  padding-top: 12px;
}
.ces_filter_name {
  width: 100px;
  height: 30px;
  flex-shrink: 0;
  text-align: right;
  font-size: 14px;
  line-height: 30px;
  font-weight: bold;
  color: #1a2236;
}
.ces_filter_data {
  width: calc(100% - 120px);
  min-height: 42px;
  padding-right: 100px;
  box-sizing: border-box;
  margin-left: 20px;
  flex-grow: 1;
  position: relative;
  overflow: hidden;
  font-size: 0;
}
.ces_filter_data > li {
  display: inline-block;
  vertical-align: middle;
  padding-right: 20px;
}
.ces_filter_container > li:not(:last-child) > .ces_filter_data {
  border-bottom: 1px solid #e9ecf3;
}
.ces_filter_data > .toggle_bar {
  height: 30px;
  position: absolute;
  top: 0;
  right: 0;
  font-size: 14px;
  line-height: 30px;
  color: #0f2683;
  cursor: pointer;
}
.ces_filter_data > li {
  margin-bottom: 10px;
}
.ces_filter_data > li > a {
  display: block;
  height: 30px;
  padding: 0 15px;
  box-sizing: border-box;
  border-radius: 12px;
  text-align: center;
  cursor: pointer;
  font-size: 14px;
  line-height: 30px;
  color: #58617a;
}
.ces_filter_data > li > a.current {
  background-color: #515fe7;
  color: #f4f7fc;
}
</style>
