<!--
 * @name    表头过滤组件
 * @authors pen (you@example.org)
 * @date    2022-09-27
 * @version 1.0.0
 *
 -->
 <template>
  <div class="filter_box">
    <div class="filter_head">
      <span>{{ column.label }}</span>
      <el-popover
        placement="bottom"
        width="220"
        popper-class="filter_pop"
        trigger="manual"
        v-model="isShowFilter"
      >
        <div>
          <div class="search">
            <el-input
              class="search_input"
              size="mini"
              placeholder="搜索内容"
              prefix-icon="el-icon-search"
              v-model="searchVal"
              clearable
            >
            </el-input>
          </div>
          <div class="list">
            <div v-show="!handleFilterArr().length" class="empty_text">
              无匹配
            </div>
            <div
              v-show="handleFilterArr().length"
              class="item"
              v-for="item in handleFilterArr()"
            >
              <el-checkbox
                :checked="item.isSelect"
                v-model="item.isSelect"
                :label="item.label"
                :key="item.value"
                >{{ item.label }}</el-checkbox
              >
            </div>
          </div>
          <div class="footer">
            <el-button @click="onClear" type="text">清除</el-button>
            <button-view @button-click="buttonClick" :buttons="filterButtons" />
          </div>
        </div>
        <div @click.stop="isShowFilter = !isShowFilter" slot="reference">
          <svg
            :style="{
              color:
                isShowFilter || filterList.filter(p => p.isSelect).length
                  ? '#fc5610'
                  : '#bfbfbf'
            }"
            class="iconpark-icon"
          >
            <use href="#table-filter"></use>
          </svg>
        </div>
      </el-popover>
    </div>
  </div>
</template>
<script>
import buttonView from '../buttons'
export default {
  name: 'table-head-filter-view',
  components: {
    buttonView
  },
  props: {
    column: Object,
    headFilterArray: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      filterButtons: [
        {
          text: '取消',
          id: 'cancel'
        },
        {
          type: 'primary',
          text: '确定',
          id: 'comfirm'
        }
      ],
      isShowFilter: false,
      searchVal: '',
      filterList: []
    }
  },
  // watch: {
  //   headFilterArray(arr) {
  //     this.filterList = arr || []
  //   }
  // },
  mounted() {
    this.filterList = this.headFilterArray
    this.cyclicGetData()
  },
  methods: {
    // 更新数据
    updateData() {
      this.filterList = this.headFilterArray
    },
    // 组件渲染时 拿不到值 设置个定时器去拿值
    cyclicGetData() {
      let timer = null
      let oldDate = Date.now()
      if (!this.headFilterArray.length) {
        timer = setInterval(() => {
          let newDate = Date.now()
          this.filterList = this.headFilterArray
          console.log('oldDate', oldDate, 'newDate', newDate, newDate - oldDate)
          if (this.headFilterArray.length || newDate - oldDate >= 10 * 1000) {
            clearInterval(timer)
            timer = null
          }
        }, 500)
      }
    },
    // 清除全部选中状态
    onClear() {
      this.filterList.forEach(item => {
        item.isSelect = false
      })
    },
    // 按钮事件
    buttonClick({ id }) {
      switch (id) {
        case 'cancel':
          this.onCancel()
          break
        case 'comfirm':
          this.onCancel()
          this.$emit(
            'on-filter-comfirm',
            this.filterList.filter(p => p.isSelect),
            this.column
          )
          break
        default:
          break
      }
    },
    // 取消按钮事件
    onCancel() {
      this.isShowFilter = false
      this.searchVal = ''
    },
    // 根据输入框的值过滤数据
    handleFilterArr() {
      return this.filterList.filter(
        p =>
          !this.searchVal ||
          (p['label'] &&
            p['label'].toLowerCase().includes(this.searchVal.toLowerCase()))
      )
    }
  }
}
</script>
<style lang="less">
.filter_pop {
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 8px;
}
.filter_box {
  display: inline-block;
}
.filter_head {
  display: flex;
  align-items: center;
  svg {
    width: 12px;
    height: 12px;
    margin-left: 8px;
  }
}
</style>
<style lang="less" scoped>
.filter_box {
  /deep/ .el-popover__reference {
    display: flex;
    align-items: center;
  }
}
.search {
  padding: 0 12px;
}
.search_input {
  /deep/ .el-input__inner {
    border-radius: 0;
    border: none;
    border-bottom: 1px solid #eee;
  }
}
.list {
  // padding: 0 12px;
  min-height: 100px;
  max-height: 256px;
  display: flex;
  flex-direction: column;
  padding: 8px 0;
  overflow-y: auto;
  .item {
    padding: 0 12px;
    // line-height: 30px;
    /deep/ .el-checkbox {
      display: flex;
      align-items: center;
      margin: 6px 0;
    }
    /deep/ .el-checkbox__label {
      width: 172px;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
  .item:hover {
    background: #f5f5f5;
  }
  .empty_text {
    text-align: center;
    line-height: 100px;
    color: #c0c4cc;
    font-size: 12px;
  }
}
.list::-webkit-scrollbar {
  width: 4px;
  height: 0px;
}

.footer {
  padding: 8px 12px 0 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid #eee;
}
</style>
