<template>
  <transition name="el-zoom-in-top">
    <div
      class="el-table-filter"
      v-if="multiple"
      v-clickoutside="handleOutsideClick"
      v-show="showPopper"
    >
      <div class="el-table-filter__content">
        <el-scrollbar wrap-class="el-table-filter__wrap">
          <el-checkbox-group
            class="el-table-filter__checkbox-group"
            v-model="filteredValue"
          >
            <el-checkbox
              v-for="filter in filters"
              :key="filter.value"
              :label="filter.value"
              >{{ filter.text }}</el-checkbox
            >
          </el-checkbox-group>
        </el-scrollbar>
      </div>
      <div class="el-table-filter__bottom">
        <button
          @click="handleConfirm"
          :class="{ 'is-disabled': filteredValue.length === 0 }"
          :disabled="filteredValue.length === 0"
        >
          {{ t('el.table.confirmFilter') }}
        </button>
        <button @click="handleReset">{{ t('el.table.resetFilter') }}</button>
      </div>
    </div>
    <div
      class="el-table-filter"
      v-else
      v-clickoutside="handleOutsideClick"
      v-show="showPopper"
    >
      <ul class="el-table-filter__list">
        <li
          class="el-table-filter__list-item"
          :class="{
            'is-active': filterValue === undefined || filterValue === null
          }"
          @click="handleSelect(null)"
        >
          {{ t('el.table.clearFilter') }}
        </li>
        <li
          class="el-table-filter__list-item"
          v-for="filter in filters"
          :label="filter.value"
          :key="filter.value"
          :class="{ 'is-active': isActive(filter) }"
          @click="handleSelect(filter.value)"
        >
          {{ filter.text }}
        </li>
      </ul>
    </div>
  </transition>
</template>

<script>
import Popper from '../../../src/utils/vue-popper'
import { PopupManager } from '../../../src/utils/popup'
import Locale from '../../../src/mixins/locale'
import Clickoutside from '../../../src/directives/clickoutside'
import Dropdown from './dropdown'
import ElCheckbox from '../../../packages/checkbox'
import ElCheckboxGroup from '../../../packages/checkbox-group'
import ElScrollbar from '../../../packages/scrollbar'

export default {
  name: 'ElTableFilterPanel',
  mixins: [Popper, Locale],
  directives: {
    Clickoutside
  },
  components: {
    ElCheckbox,
    ElCheckboxGroup,
    ElScrollbar
  },
  props: {
    placement: {
      type: String,
      default: 'bottom-end'
    }
  },
  methods: {
    isActive(filter) {
      return filter.value === this.filterValue
    },
    handleOutsideClick() {
      setTimeout(() => {
        this.showPopper = false
      }, 16)
    },
    handleConfirm() {
      this.confirmFilter(this.filteredValue)
      this.handleOutsideClick()
    },
    handleReset() {
      this.filteredValue = []
      this.confirmFilter(this.filteredValue)
      this.handleOutsideClick()
    },
    handleSelect(filterValue) {
      this.filterValue = filterValue
      if (typeof filterValue !== 'undefined' && filterValue !== null) {
        this.confirmFilter(this.filteredValue)
      } else {
        this.confirmFilter([])
      }
      this.handleOutsideClick()
    },
    confirmFilter(filteredValue) {
      this.table.store.commit('filterChange', {
        column: this.column,
        values: filteredValue
      })
      this.table.store.updateAllSelected()
    }
  },
  data() {
    return {
      table: null,
      cell: null,
      column: null
    }
  },
  computed: {
    filters() {
      return this.column && this.column.filters
    },
    filterValue: {
      get() {
        return (this.column.filteredValue || [])[0]
      },
      set(value) {
        if (this.filteredValue) {
          if (typeof value !== 'undefined' && value !== null) {
            this.filteredValue.splice(0, 1, value)
          } else {
            this.filteredValue.splice(0, 1)
          }
        }
      }
    },
    filteredValue: {
      get() {
        if (this.column) {
          return this.column.filteredValue || []
        }
        return []
      },
      set(value) {
        if (this.column) {
          this.column.filteredValue = value
        }
      }
    },
    multiple() {
      if (this.column) {
        return this.column.filterMultiple
      }
      return true
    }
  },
  mounted() {
    this.popperElm = this.$el
    this.referenceElm = this.cell
    this.table.bodyWrapper.addEventListener('scroll', () => {
      this.updatePopper()
    })
    this.$watch('showPopper', (value) => {
      if (this.column) this.column.filterOpened = value
      if (value) {
        Dropdown.open(this)
      } else {
        Dropdown.close(this)
      }
    })
  },
  watch: {
    showPopper(val) {
      if (
        val === true &&
        parseInt(this.popperJS._popper.style.zIndex, 10) < PopupManager.zIndex
      ) {
        this.popperJS._popper.style.zIndex = PopupManager.nextZIndex()
      }
    }
  }
}
</script>
