<template>
  <el-popover
    v-if="innerValue !== false || filterData.length"
    :visible-arrow="false"
    width="auto"
    trigger="hover"
    placement="bottom"
    popper-class="p-0"
    class="icon-filter"
    :style="{
      color: innerValue && innerValue.length ? '#1890ff' : '',
      display: innerValue && innerValue.length ? 'inline-block' : '',
    }"
  >
    <template>
      <el-checkbox-group
        v-model="selectData"
        class="pt-3 px-3"
        @change="onCheck"
        style="max-height: 300px; overflow-y: auto"
      >
        <el-checkbox
          v-for="item in filterData"
          :key="item.value"
          :label="item.value"
          class="mr-0 mb-3"
          style="display: block"
        >
          {{ item.text }}
        </el-checkbox>
      </el-checkbox-group>
      <el-divider class="m-0"></el-divider>
      <div
        class="p-3"
        style="min-width: 175px; display: flex; justify-content: space-between"
      >
        <el-checkbox
          v-model="checkAll"
          :indeterminate="indeterminate"
          @change="onCheckAll"
        >
          全选
        </el-checkbox>
        <div>
          <el-button type="text" class="p-0" @click="onReset">重置</el-button>
          <el-button type="text" class="p-0" @click="onFilter">筛选</el-button>
        </div>
      </div>
    </template>
    <i
      slot="reference"
      class="el-icon-search pl-1"
      style="cursor: pointer; font-weight: 600; transition: 500ms"
      @click="onOpen"
    ></i>
  </el-popover>
</template>

<script>
export default {
  name: "IconFilter",
  components: {},
  data() {
    return {
      disabled: false,
      selectData: [],
    };
  },
  props: {
    value: {
      type: [Array, Boolean],
      require: true,
    },
    filters: {
      type: Array,
      require: true,
    },
  },
  computed: {
    innerValue: {
      get() {
        return this.$props.value;
      },
      set(value) {
        this.$emit("input", value);
      },
    },
    filterData: {
      get() {
        return this.$props.filters;
      },
      set() {},
    },
    indeterminate: {
      get() {
        const count = this.filterData.length;
        const selectCount = this.selectData.length;
        return selectCount > 0 && selectCount < count;
      },
      set() {},
    },
    checkAll: {
      get() {
        const count = this.filterData.length;
        const selectCount = this.selectData.length;
        return count === selectCount;
      },
      set() {},
    },
  },
  watch: {},
  methods: {
    // 打开
    onOpen() {
      this.disabled = !this.disabled;
    },
    // 选中
    onCheck() {
      // const count = this.filterData.length;
      // const selectCount = this.selectData.length;
      // this.checkAll = count === selectCount;
    },
    // 全选
    onCheckAll(value) {
      this.selectData = value ? this.filterData.map((item) => item.value) : [];
    },
    // 重置
    onReset() {
      this.selectData = [];
      this.innerValue = this.selectData;
    },
    // 筛选
    onFilter() {
      this.innerValue = this.selectData;
    },
  },
  created() {},
  mounted() {},
  destroyed() {},
};
</script>
<style scoped></style>
