<!--
 * @Author: Badguy
 * @Date: 2022-05-25 14:09:35
 * @LastEditTime: 2022-06-22 16:52:19
 * @LastEditors: your name
 * @Description: 表头下拉筛选
 * have a nice day!
-->
<template>
  <div class="table-header-cell">
    <template v-if="!filterable || filterStyle === 'arrow'">
      <span>{{ label }}</span>
    </template>
    <template v-if="filterable">
      <el-popover class="table-header-cell-popover" placement="bottom" trigger="click" @show="expand = true" @hide="expand = false">
        <span v-if="filterStyle === 'underline'" slot="reference" :class="['btn-filter', { 'btn-filter-active': active }]">{{ label }}</span>
        <i v-if="filterStyle === 'arrow'" slot="reference" :class="['filter-arrow', 'el-icon-arrow-down', { 'arrow-active': active, 'arrow-expand': expand }]" />
        <el-form>
          <el-form-item :label="label">
            <el-select v-model="selections" size="small" placeholder="筛选" multiple filterable default-first-option collapse-tags clearable @change="newVal => { $emit('update:filter-values', newVal) }">
              <el-option v-for="(option, optionIndex) in filterOptions" :key="option.value + optionIndex" :value="option.value" :label="option.text" />
            </el-select>
          </el-form-item>
        </el-form>
      </el-popover>
    </template>
    <template v-if="sortable">
      <span class="caret-wrapper" @click="sortChange">
        <i class="sort-caret ascending" />
        <i class="sort-caret descending" />
      </span>
    </template>
  </div>
</template>

<script>
export default {
  name: 'TableHeaderCell',
  props: {
    label: {
      type: String,
      default: ''
    },
    filterStyle: {
      type: String,
      default: 'underline'
    },
    filterOptions: {
      type: Array
    },
    filterValues: {
      type: Array
    },
    sortable: {
      type: [Boolean, Number],
    },
    sortRule: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      selections: [],
      expand: false
    }
  },
  computed: {
    active () {
      return this.filterValues?.length
    },
    filterable () {
      return !!this.filterOptions
    }
  },
  watch: {
    filterValues: {
      handler (val) {
        this.selections = val
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    sortChange () {
      const sortRule = this.sortRule === '' ? 'ascending' : this.sortRule === 'ascending' ? 'descending' : ''
      this.$emit('update:sort-rule', sortRule)
    }
  }
}
</script>

<style lang="scss" scoped>
.filter-arrow {
  cursor: pointer;
  transition: 0.3s transform;
  &.arrow-expand {
    transform: rotate(-180deg);
  }
  &.arrow-active {
    color: #2d7cff;
    font-weight: bold;
  }
}
.btn-filter {
  cursor: pointer;
  position: relative;
  &:hover {
    color: #2d7cff;
  }
  &::after {
    content: "";
    display: block;
    width: calc(100% + 4px);
    position: absolute;
    bottom: -4px;
    left: -2px;
    border-bottom: 1px solid #101116;
  }
  &.btn-filter-active,
  &:hover {
    &::after {
      border-bottom: 2px solid #2d7cff;
    }
  }
}
.el-select-dropdown__item.hover {
  background: #d2d6df;
}
</style>
