<template>
  <div>
    <div class="myexcel-filter">
      <div class="me-list">
        <ul class="me-group" v-show="sortShow">
          <li class="me-menu" @click="sortAscEvent">
            <i class="s-iconfont-sort-asc me-menu-left-icon"></i>
            <span>从小到大</span>
          </li>
          <li class="me-menu" @click="sortDescEvent">
            <i class="s-iconfont-sort-desc me-menu-left-icon"></i>
            <span>从大到小</span>
          </li>
        </ul>
        <ul class="me-group" v-show="!column.formatter">
          <li class="me-menu condition">
            <div class="condition-type">
              <s-select class="squareBorder" size="small" v-model="option.data.type">
                <s-option v-for="type in types" :key="type.value" :value="type.value" :label="type.label"></s-option>
              </s-select>
            </div>
            <div class="condition-value">
              <s-input class="squareBorder" v-show="['notNull', 'null'].indexOf(option.data.type) === -1" size="small"
                       v-model="option.data.value" placeholder="值" clearable></s-input>
            </div>
          </li>
        </ul>
      </div>
      <div class="me-search">
        <div class="header">
          <s-input class="squareBorder" v-model="option.data.sVal" ref="listSearch" placeholder="关键字搜索" size="medium"
                   clearable/>
        </div>
        <div class="multiOption">
          <span @click="checkedAllEvent"><i class="s-iconfont-checked-all"></i>全选</span>
          <span @click="checkedRevertEvent"><i class="s-iconfont-checked-revert"></i>反选</span>
          <span @click="checkedClearEvent"><i class="s-iconfont-checked-clear"></i>清空</span>
        </div>
        <ul v-if="transList.length" class="body">
          <li class="check-item" v-for="(item, sIndex) in transList" :key="sIndex">
            <s-checkbox-group v-model="checkedList">
              <s-checkbox style="width: 100%" :label="item">{{item}}</s-checkbox>
            </s-checkbox-group>
          </li>
        </ul>
        <div v-else class="body">
          <div class="me-search-empty">无匹配项</div>
        </div>
      </div>
      <div class="me-footer">
        <s-button status="primary" @click="confirmFilterEvent">确认</s-button>
        <s-button @click="resetFilterEvent">重置</s-button>
      </div>
    </div>
  </div>
</template>

<script>
import { UtilTools, DomTools } from '../../../tools'

export default {
  name: 'FilterDefault',
  props: {
    params: Object
  },
  watch: {
    params () {
      this.init()
    },
    checkedList (val) {
      const vals = []
      for (let i = 0; i < val.length; i++) {
        vals.push(...this.itemMap[val[i]])
      }
      this.option.data.vals = vals.filter(function (element, index, self) {
        return self.indexOf(element) === index
      })
    }
  },
  data () {
    return {
      column: null,
      option: null,
      types: [
        { value: 'contain', label: '包含' },
        { value: 'notContain', label: '不包含' },
        { value: 'eq', label: '等于' },
        { value: 'ne', label: '不等于' },
        { value: 'gt', label: '大于' },
        { value: 'ge', label: '大于等于' },
        { value: 'lt', label: '小于' },
        { value: 'le', label: '小于等于' },
        { value: 'start', label: '以...开头' },
        { value: 'end', label: '以...结尾' },
        { value: 'null', label: '为空' },
        { value: 'notNull', label: '不为空' }
      ],
      allData: [],
      checkedList: []
    }
  },
  computed: {
    sortShow () {
      return this.column.formatter ? false : typeof this.column.remoteSort === 'undefined' && typeof this.column.sortable === 'undefined' ? this.params.$table.sortOpts.on : (this.column.remoteSort || this.column.sortable)
    },
    transList () {
      const { option, allData } = this
      return allData
        .map(item => this.formatterItem(item))
        .filter(function (element, index, self) {
          return String(element).indexOf(option.data.sVal) > -1 && self.indexOf(element) === index
        }).sort()
    },
    itemMap () {
      const result = {}
      for (let i = 0; i < this.transList.length; i++) {
        result[this.transList[i]] = this.allData.filter(item => this.transList[i] === this.formatterItem(item))
      }
      return result
    }
  },
  created () {
    this.init()
  },
  mounted () {
    this.$refs.listSearch.focus()
  },
  methods: {
    init () {
      const { $table, column } = this.params
      this.allData = $table.filterColumnData[column.property] || []
      // filters 可以配置多个，实际只用一个就可以满足需求了
      const option = column.filters[0]
      this.column = column
      this.option = option
      this.checkedList = option.data.vals.map(item => this.formatterItem(item)).filter(function (element, index, self) {
        return self.indexOf(element) === index
      })
      if (this.$refs.listSearch) {
        this.$refs.listSearch.focus()
      }
    },
    sortAscEvent (evnt) {
      const { $table, column } = this.params
      $table.triggerSortEvent(evnt, column, 'asc')
      $table.closeFilter()
    },
    sortDescEvent (evnt) {
      const { $table, column } = this.params
      $table.triggerSortEvent(evnt, column, 'desc')
      $table.closeFilter()
    },
    checkedAllEvent () {
      this.checkedList = this.transList
    },
    checkedRevertEvent () {
      this.checkedList = this.transList.filter(item => this.checkedList.indexOf(item) === -1)
    },
    checkedClearEvent () {
      this.checkedList = []
    },
    confirmFilterEvent () {
      const { params, option, checkedList } = this
      const { data } = option
      const { $panel } = params
      // 同步下拉列表的翻译
      if (checkedList.length > 0) {
        const vals = []
        for (let i = 0; i < checkedList.length; i++) {
          vals.push(...this.itemMap[checkedList[i]])
        }
        data.vals = vals.filter(function (element, index, self) {
          return self.indexOf(element) === index
        })
      }
      if (data.value === '' && data.vals.length === 0 && ['notNull', 'null'].indexOf(data.type) === -1) {
        option.checked = false
      } else {
        option.checked = true
      }

      $panel.confirmFilter()
    },
    resetFilterEvent () {
      const { $panel, column } = this.params
      column.filters[0].data.type = 'contain'
      column.filters[0].data.value = ''
      column.filters[0].data.sVal = ''
      column.filters[0].data.vals = []
      $panel.resetFilter()
    },
    formatterItem (item) {
      const row = {}
      row[this.column.property] = item
      const showContent = UtilTools.getCellLabel(row, this.column, Object.assign({ row }, this.params))
      return this.column.type === 'html' ? DomTools.parseDomStr(showContent) : showContent
    }
  }
}
</script>

<style lang="scss" scoped>
  .s-table--filter-wrapper.myexcel-filter-render .s-table--filter-template {
    overflow: initial;
    max-height: initial;
    padding: 0;
  }

  .myexcel-filter {
    user-select: none;

    .me-menu-left-icon {
      position: absolute;
      left: 10px;
      top: 6px;
    }

    .me-menu-right-icon {
      position: absolute;
      right: 10px;
      top: 6px;
    }

    .me-list .me-group {
      position: relative;
      margin: 0;
      padding: 0;
      list-style: none;

      &:after {
        content: "";
        position: absolute;
        width: 100%;
        right: 0;
        bottom: 0;
        border-bottom: 1px solid #E2E4E7;
      }

      .me-menu {
        position: relative;
        padding: 4px 20px 4px 30px;
        cursor: pointer;

        &:hover {
          background-color: #C5C5C5;
        }

        &.condition {
          padding: 4px 0 4px 0;
          height: 40px;
          display: flex;

          &:hover {
            background-color: white;
          }

          .condition-type {
            width: 100px
          }

          .condition-value {
            flex: 1;
            padding-left: 5px;
            width: 100px;
          }
        }
      }
    }

    .squareBorder > > > {
      .s-input--inner {
        border-radius: 0;
      }
    }

    .me-search {
      padding: 5px 0;
      color: #666;

      .header {
        position: relative;
        height: 30px;
      }

      .multiOption {
        line-height: 30px;
        padding: 5px 5px 0;
        border-left: 1px solid #E2E4E7;
        border-right: 1px solid #E2E4E7;

        > span {
          cursor: pointer;
          padding: 0 5px;
        }
      }

      .body {
        margin: 0;
        padding: 2px 10px;
        overflow: auto;
        height: 140px;
        border: 1px solid #E2E4E7;
        border-top: none;

        .me-search-empty {
          text-align: center;
          padding-top: 20px;
        }

        > li {
          line-height: 18px;
          background: none;
        }
      }
    }
  }

  .myexcel-filter .me-footer {
    text-align: right;
    padding: 10px 10px 10px 0;
  }

  .me-popup .me-popup-filter {
    padding-left: 30px;
  }

  .me-popup .me-popup-filter > .me-select {
    width: 120px;
  }

  .me-popup .me-popup-filter > .me-input {
    margin-left: 15px;
    width: 380px;
  }

  .me-popup .me-popup-describe {
    padding: 20px 0 10px 0;
  }

  .me-popup .me-popup-concat {
    padding-left: 50px;
  }

  .me-popup .me-popup-footer {
    text-align: right;
  }
</style>
