<template>
  <div class="type_contain">
    <div class="type_header">
      <div class="openbox" @click="openflag_func">
        <span>{{ openflag ? "收起" : "筛选" }}</span>
        <i v-if="!openflag" class="el-icon-caret-bottom"></i>
        <i v-if="openflag" class="el-icon-caret-top"></i>
      </div>
      <el-input
        class="search"
        placeholder="请输入内容"
        prefix-icon="el-icon-search"
        @input="post_value()"
        v-model="input2"
      >
      </el-input>
    </div>
    <div class="type_select" v-show="openflag">
      <div class="line_data" style="overflow:hidden;">
        <div class="select_name">{{ top_data.name }}：</div>
        <div
          ref="select_arr_box_top"
          class="select_arr_box"
          :style="
            show_selected_top ? {} : { height: '52px', overflow: 'hidden' }
          "
        >
          <div ref="select_item_top" style="overflow:hidden;">
            <div
              class="select_item"
              v-for="(it, idx) in top_data.arr"
              :key="idx + 7000"
              :style="
                it.id === selected_top
                  ? { color: '#515fe7', fontWeight: 600 }
                  : {}
              "
              @click="set_top(it.id)"
            >
              {{ it.name }}
            </div>
          </div>
          <div
            v-show="show_open_top"
            class="select_item_open"
            @click="set_open_top"
          >
            <span>{{ show_selected_top ? "收起" : "展开" }}</span>
            <i v-if="!show_selected_top" class="el-icon-caret-bottom"></i>
            <i v-if="show_selected_top" class="el-icon-caret-top"></i>
          </div>
        </div>
      </div>

      <div
        v-for="(item, index) in filter_list"
        :key="index + 5000"
        class="line_data"
        style="overflow:hidden;"
      >
        <div class="select_name">{{ item.name }}：</div>
        <div
          :ref="'select_arr_box' + index"
          class="select_arr_box"
          :style="
            show_selected[index] ? {} : { height: '52px', overflow: 'hidden' }
          "
        >
          <div :ref="'select_item' + index" style="overflow:hidden;">
            <div
              class="select_item"
              v-for="(it, idx) in item.arr"
              :key="idx + 6000"
              :style="
                selected_arr[index].indexOf(it.id) !== -1
                  ? { color: '#515fe7', fontWeight: 600 }
                  : {}
              "
              @click="set_select(index, it.id)"
            >
              {{ it.name }}
            </div>
          </div>
          <div
            v-show="show_open[index]"
            class="select_item_open"
            @click="set_open(index)"
          >
            <span>{{ show_selected[index] ? "收起" : "展开" }}</span>
            <i v-if="!show_selected[index]" class="el-icon-caret-bottom"></i>
            <i v-if="show_selected[index]" class="el-icon-caret-top"></i>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    top_data: {
      type: Object,
      default: () => null,
    },
    data: {
      type: Array,
      default: () => [],
    },
  },
  components: {},
  data() {
    return {
      input2: "",
      openflag: false,
      selected_arr: [],
      show_selected: [],
      show_open: [],
      filter_list: [],
      selected_top: "",
      show_selected_top: false,
      show_open_top: false,
    };
  },
  watch: {
    data: {
      handler() {
        this.init();
      },
      deep: true,
    },
  },
  computed: {},
  created() {
    if (this.top_data) {
      this.selected_top = this.top_data.arr[0].id;
    }

    this.init(true);
  },
  mounted() {
    window.addEventListener("resize", this.pageResize);
  },
  destroyed() {
    window.removeEventListener("resize", this.pageResize);
  },
  methods: {
    init() {
      this.selected_arr = [];
      this.show_selected = [];
      this.show_open = [];
      this.filter_list = [];

      this.data.forEach((item, index) => {
        let arr = [
          {
            id: "",
            name: "全部",
          },
          ...item.arr,
        ];

        this.selected_arr.push([arr[0].id]);
        this.show_selected.push(false);
        this.show_open.push(false);
        this.filter_list.push({
          name: item.name,
          arr: arr,
          key: item.key,
        });
      });
    },
    openflag_func() {
      this.openflag = !this.openflag;
      setTimeout(() => {
        this.pageResize();
      }, 100);
      this.$emit("open_select", this.openflag);
    },
    pageResize() {
      this.$nextTick(() => {
        if (
          this.$refs.select_item_top &&
          this.$refs.select_item_top.clientHeight >
            this.$refs.select_arr_box_top.clientHeight + 2
        ) {
          this.show_open_top = true;
        } else {
          this.show_open_top = false;
        }

        this.data.forEach((item, index) => {
          if (
            this.$refs["select_item" + index] &&
            this.$refs["select_item" + index][0].clientHeight >
              this.$refs["select_arr_box" + index][0].clientHeight + 2
          ) {
            this.$set(this.show_open, index, true);
          } else {
            this.$set(this.show_open, index, false);
          }
        });
      });
    },
    set_select(index, id) {
      if (this.selected_arr[index].indexOf(id) == -1) {
        this.selected_arr[index].push(id);
      } else {
        this.selected_arr[index].splice(
          this.selected_arr[index].indexOf(id),
          1
        );
      }
      this.post_value();
    },
    set_open(index) {
      this.$set(this.show_selected, index, !this.show_selected[index]);
    },
    set_open_top(index) {
      this.show_selected_top = !this.show_selected_top;
    },
    set_top(id) {
      this.selected_top = id;
      this.$emit("topselect", this.selected_top);
    },
    post_value() {
      var temp = {
        word: this.input2,
      };
      this.data.forEach((e, idx) => {
        temp[e.key] = this.selected_arr[idx];
      });
      this.$emit("getselect", temp);
    },
  },
};
</script>

<style>
.type_header .el-input__inner {
  width: 240px;
  background-color: #f7f8f9;
}
.type_header .el-input {
  width: 240px;
}
</style>
<style scoped>
.type_contain {
  width: 100%;
  padding: 20px;
  border-bottom: 1px solid #e9ecf3;
}
.type_header {
  width: 100%;
  overflow: hidden;
}
.openbox {
  width: 105px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  background-color: #f7f8f9;
  border-radius: 8px;
  border: solid 1px #e3e5ef;
  float: left;
  color: #58617a;
  font-size: 14px;
  cursor: pointer;
}
.search {
  float: right;
}
.select_name {
  width: 100px;
  text-align: right;
  font-size: 14px;
  color: #8890a7;
  height: 52px;
  line-height: 52px;
  float: left;
}
.select_arr_box {
  width: calc(100% - 100px);
  float: left;
  border-bottom: 1px solid #e9ecf3;
  overflow: hidden;
  padding-left: 20px;
  padding-right: 50px;
  position: relative;
}
.type_select {
  margin-top: 20px;
}
.type_select .line_data:nth-last-of-type(1) .select_arr_box {
  border-bottom: 0;
}
.select_item,
.select_item_open {
  height: 52px;
  line-height: 52px;
  margin-right: 40px;
  float: left;
  color: #58617a;
  cursor: pointer;
}
.select_arr_box .select_item_open {
  position: absolute;
  right: 0;
  margin-right: 10px;
  top: 0;
}
</style>
