<template>
  <div class="vxe-tmpl-filter-combination">
    <div class="vxe-tmpl-filter--menus">
      <ul v-if="menus.includes('sort')" class="vxe-tmpl-filter--menu-group">
        <li class="vxe-tmpl-filter--menu-item" :class="{'is-disabled': !hasSortable, 'is-active': column && column.order === 'asc'}" @click="sortColumn('asc')" @mouseenter="mouseenterEvent($event, 'ascSort')" @mouseleave="mouseleaveEvent($event)">
          <i class="fa fa-sort-alpha-asc vxe-tmpl-filter--menu-left-icon"></i>
          <span class="vxe-tmpl-filter--menu-item-label">{{ getI18n('vxe.renderer.combination.menus.sortAsc') }}</span>
        </li>
        <li class="vxe-tmpl-filter--menu-item" :class="{'is-disabled': !hasSortable, 'is-active': column && column.order === 'desc'}" @click="sortColumn('desc')" @mouseenter="mouseenterEvent($event, 'descSort')" @mouseleave="mouseleaveEvent($event)">
          <i class="fa fa-sort-alpha-desc vxe-tmpl-filter--menu-left-icon"></i>
          <span class="vxe-tmpl-filter--menu-item-label">{{ getI18n('vxe.renderer.combination.menus.sortDesc') }}</span>
        </li>
      </ul>
      <ul class="vxe-tmpl-filter--menu-group">
        <li class="vxe-tmpl-filter--menu-item" :class="{'is-active': column && column.fixed, 'is-hover': hoverMenu === 'fixed'}" @mouseenter="mouseenterEvent($event, 'fixed')" @mouseleave="mouseleaveEvent($event)">
          <i class="fa fa-exchange vxe-tmpl-filter--menu-left-icon"></i>
          <span class="vxe-tmpl-filter--menu-item-label">{{ getI18n(column.parentId ? 'vxe.renderer.combination.menus.fixedGroup' : 'vxe.renderer.combination.menus.fixedColumn') }}</span>
          <i class="vxe-icon--caret-right vxe-tmpl-filter--menu-right-icon"></i>
          <div class="vxe-tmpl-filter--child-menu-group" :class="[`pos-${childMenuPos}`]">
            <ul class="vxe-tmpl-filter--child-menu-list">
              <li class="vxe-tmpl-filter--child-menu-item" :class="{'is-disabled': !column || !column.fixed}" @click="fixedColumn('')">
                <span class="vxe-tmpl-filter--menu-item-label">{{ getI18n('vxe.renderer.combination.menus.cancelFixed') }}</span>
              </li>
              <li class="vxe-tmpl-filter--child-menu-item" :class="{'is-active': column && column.fixed === 'left'}" @click="fixedColumn('left')">
                <i class="vxe-icon--check vxe-tmpl-filter--child-menu-left-icon"></i>
                <span class="vxe-tmpl-filter--menu-item-label">{{ getI18n('vxe.renderer.combination.menus.fixedLeft') }}</span>
              </li>
              <li class="vxe-tmpl-filter--child-menu-item" :class="{'is-active': column && column.fixed === 'right'}" @click="fixedColumn('right')">
                <i class="vxe-icon--check vxe-tmpl-filter--child-menu-left-icon"></i>
                <span class="vxe-tmpl-filter--menu-item-label">{{ getI18n('vxe.renderer.combination.menus.fixedRight') }}</span>
              </li>
            </ul>
          </div>
        </li>
      </ul>
      <ul v-if="menus.includes('filter')" class="vxe-tmpl-filter--menu-group">
        <li class="vxe-tmpl-filter--menu-item" :class="{'is-disabled': !hasFilter}" @click="resetFilterEvent" @mouseenter="mouseenterEvent($event, 'reset')" @mouseleave="mouseleaveEvent($event)">
          <span class="vxe-tmpl-filter--menu-item-label">{{ getI18n('vxe.renderer.combination.menus.clearFilter') }}</span>
        </li>
        <li class="vxe-tmpl-filter--menu-item" :class="{'is-active': option.data.sMenu, 'is-hover': hoverMenu === 'filter'}" @mouseenter="mouseenterEvent($event, 'filter')" @mouseleave="mouseleaveEvent($event)">
          <i class="vxe-icon--funnel vxe-tmpl-filter--menu-left-icon"></i>
          <span class="vxe-tmpl-filter--menu-item-label">{{ getI18n(isNumType ? 'vxe.renderer.combination.menus.numberOption' : 'vxe.renderer.combination.menus.textOption') }}</span>
          <i class="vxe-icon--caret-right vxe-tmpl-filter--menu-right-icon"></i>
          <div class="vxe-tmpl-filter--child-menu-group" :class="[`pos-${childMenuPos}`]">
            <ul class="vxe-tmpl-filter--child-menu-list" v-for="(cList, gIndex) in caseGroups" :key="gIndex">
              <li class="vxe-tmpl-filter--child-menu-item" v-for="(cItem, cIndex) in cList" :key="`${gIndex}_${cIndex}`" :class="{'is-active': option.data.sMenu === cItem.value}" @click="openCombinerEvent(cItem)">
                <i class="vxe-icon--check vxe-tmpl-filter--child-menu-left-icon"></i>
                <span class="vxe-tmpl-filter--child-menu-label">{{ cItem.label }}</span>
              </li>
            </ul>
          </div>
        </li>
      </ul>
    </div>
    <div class="combination-search">
      <div class="combination-search-header">
        <vxe-input v-model="option.data.sVal" v-bind="inputProps" @change="searchEvent"></vxe-input>
      </div>
      <div class="combination-search-body">
        <template v-if="valList.length">
          <div class="combination-search-list-header">
            <div class="combination-search-item">
              <vxe-checkbox class="combination-search-checkbox" v-model="isAll" :indeterminate="isIndeterminate" @change="changeAllEvent" :content="getI18n('vxe.table.allTitle')"></vxe-checkbox>
            </div>
          </div>
          <vxe-list class="combination-search-list-body" :data="valList" :scroll-y="{gt: 20}" auto-resize>
            <template #default="{ items }">
              <div class="combination-search-item" v-for="item in items" :key="item.key">
                <vxe-checkbox class="combination-search-checkbox" v-model="item.checked" @change="changeItemEvent" :content="item.label"></vxe-checkbox>
              </div>
            </template>
          </vxe-list>
        </template>
        <template v-else>
          <div class="combination-search-body-empty">{{ getI18n('vxe.renderer.combination.notData') }}</div>
        </template>
      </div>
    </div>
    <div class="combination-footer">
      <vxe-button status="primary" @click="confirmFilterEvent" :disabled="!isVaildChecked">{{ getI18n('vxe.table.confirmFilter') }}</vxe-button>
      <vxe-button @click="resetFilterEvent">{{ getI18n('vxe.table.resetFilter') }}</vxe-button>
    </div>
  </div>
</template>

<script>
import XEUtils from 'xe-utils'
import VXETable from 'vxe-table'

/**
 * 通配符有3个，分别为?（问号）、*（星号）、~（波形符）
 * ?（问号）可代表任意单个字符；
 * *（星号）可代表任意数量的字符；
 * ~（波形符）后面可跟着 ?、* 、~ 分别用来查找 ?、*、 ~
 * 例如：'~?' 可查找到 '?'
 * 例如：'~*' 可查找到 '*'
 * 例如：'~~' 可查找到 '~'
 *
 * 参数：
 * filters=[{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }]
 *
 * 说明：
 * checks：勾选的单元格值列表
 * sVal: 搜索的值
 * sMenu: 选中的菜单
 * fType1: 第一个条件类型
 * fVal1: 第一个条件的值
 * fMode: 组合方式（与、或）
 * fType2: 第二个条件类型
 * fVal2: 第二个条件的值
 *
 * 参数：
 * filter-render={ name: 'FilterCombination', cellType: 'string', props: {} }
 *
 * 说明：
 * cellType: 单元格的类型（string字符串、number数值）
 * props：对应 vxe-input 配置项
 */
export default {
  name: 'VxeTmplFilterCombination',
  props: {
    menus: { type: Array, default: () => [] },
    renderParams: Object,
    renderOpts: Object
  },
  data () {
    const { getI18n } = this
    // 运算规则列表
    const allCaseList = [
      { value: 'equal', label: getI18n('vxe.renderer.cases.equal') },
      { value: 'unequal', label: getI18n('vxe.renderer.cases.unequal') },
      { value: 'gt', label: getI18n('vxe.renderer.cases.gt') },
      { value: 'ge', label: getI18n('vxe.renderer.cases.ge') },
      { value: 'lt', label: getI18n('vxe.renderer.cases.lt') },
      { value: 'le', label: getI18n('vxe.renderer.cases.le') },
      { value: 'begin', label: getI18n('vxe.renderer.cases.begin') },
      { value: 'notbegin', label: getI18n('vxe.renderer.cases.notbegin') },
      { value: 'endin', label: getI18n('vxe.renderer.cases.endin') },
      { value: 'notendin', label: getI18n('vxe.renderer.cases.notendin') },
      { value: 'include', label: getI18n('vxe.renderer.cases.include') },
      { value: 'exclude', label: getI18n('vxe.renderer.cases.exclude') }
    ]
    const allCaseMaps = {}
    allCaseList.forEach(item => {
      allCaseMaps[item.value] = item
    })
    return {
      //筛选数据
      oldDataList:null,
      hoverMenu: null,
      childMenuPos: 'right',
      size: 'mini',
      column: null,
      option: null,
      isAll: false,
      isIndeterminate: false,
      hasFilter: false,
      colValList: [],
      valList: [],
      textCaseGroups: [
        [allCaseMaps.equal, allCaseMaps.unequal],
        [allCaseMaps.begin, allCaseMaps.endin],
        [allCaseMaps.include, allCaseMaps.exclude],
        [
          { value: 'custom', label: getI18n('vxe.renderer.cases.custom') }
        ]
      ],
      numCaseGroups: [
        [allCaseMaps.equal, allCaseMaps.unequal],
        [
          allCaseMaps.gt,
          allCaseMaps.ge,
          allCaseMaps.lt,
          allCaseMaps.le,
          { value: 'between', label: getI18n('vxe.renderer.cases.between') }
        ],
        [
          { value: 'custom', label: getI18n('vxe.renderer.cases.custom') }
        ]
      ],
      allCaseList,
      combiner: {
        type1: '',
        val1: '',
        mode: '',
        type2: '',
        val2: ''
      }
    }
  },
  computed: {
    hasSortable () {
      const { renderParams } = this
      const { column } = renderParams
      return column.sortable
    },
    isNumType () {
      return this.renderOpts.cellType === 'number'
    },
    inputProps () {
      const { isNumType, getI18n } = this
      return Object.assign({
        type: isNumType ? 'number' : 'text',
        clearable: true,
        placeholder: getI18n('vxe.renderer.search'),
        suffixIcon: isNumType ? null : 'vxe-icon--search'
      }, this.renderOpts.props)
    },
    isVaildChecked () {
      const { valList, colValList } = this
      return valList.length && colValList.some(item => item.checked)
    },
    caseGroups () {
      return this.isNumType ? this.numCaseGroups : this.textCaseGroups
    }
  },
  watch: {
    renderParams () {
      // 当点击不同列时刷新数据

      this.load()
    },
    colValList () {
      this.handleSearch()
    }
  },
  created () {
    this.load()
    this.handleSearch()
  },
  methods: {
    load () {
      const { renderParams, getI18n } = this
      const { $table, column } = renderParams
      const { fullData,visibleData } = $table.getTableData()
      const option = column.filters[0]
      const { checks } = option.data
      const colValMaps = {}
      const colValList = []

      let data=fullData;

      const _filters=this.getAllFilters($table)

      let columnIndex=0;
      if(option.data.index>1||!option.data.index){
        for (const item of _filters) {
          if (item.columnName===column.field){
            columnIndex=item.index
            break;
          }
          data=data.filter((data)=>item.checks.indexOf(data[item.columnName])>-1)
        }
      }

      //const { vals } = option.data
      const vals=Object.keys(XEUtils.groupBy(visibleData, column.field)).map((val) => {
        return val
      })

      // 根据显示的数据，生成可搜索的列表
      data.forEach((item, index) => {
        const value = XEUtils.toString(XEUtils.get(item, column.property))
        if (!colValMaps[value]) {
          const vItem = {
            key: index,
            checked: option.checked?vals.includes(value):true,
            value,
            label: $table.getCellLabel(item, column) || getI18n('vxe.renderer.combination.empty')
          }
          if (value === '') {
            colValList.unshift(vItem)
          } else {
            colValList.push(vItem)
          }
          colValMaps[value] = item
        }
      })
      // 将相关的信息记录
      this.column = column
      this.option = option
      this.colValList = colValList
      this.valList = colValList

      this.valList = colValList.sort(function(a, b) {
        // 先按照 value.length() 排序升序


        if (a.value < b.value) {
          return -1;
        }
        else if (a.value > b.value) {
          return 1;
        }
        else {
          return 0;
        }
        // if (a.value.length < b.value.length) {
        //   return -1;
        // }
        // else if (a.value.length > b.value.length) {
        //   return 1;
        // }
        // else {
        //   // 如果 value.length() 相等，则按照 value 排序升序
        //
        // }
      });
      console.log(1)
      this.hasFilter = $table.isFilter(column.property)
    },
    getI18n (key, args) {
      const { $vxe } = this
      return $vxe.t(key, args)
    },
    handleSearch () {
      const { option, colValList } = this
      this.valList = option.data.sVal ? colValList.filter(item => item.value.toLowerCase().indexOf(XEUtils.toString(option.data.sVal).toLowerCase()) > -1) : colValList
      this.updateCheckStatus()
    },
    // 创建一个去抖函数，当用户搜索时，至少 500 毫秒才搜索，避免实时搜索卡顿
    searchEvent: XEUtils.debounce(function () {
      this.handleSearch()
    }, 500, { leading: false, trailing: true }),
    changeAllEvent () {
      const { isAll } = this
      this.valList.forEach(item => {
        item.checked = isAll
      })
      this.isIndeterminate = false
    },
    updateCheckStatus () {
      const { valList } = this
      const isAll = valList.every(item => item.checked)
      this.isAll = isAll
      this.isIndeterminate = !isAll && valList.some(item => item.checked)
    },
    changeItemEvent () {
      this.updateCheckStatus()
    },
    confirmFilterEvent (evnt) {
      const { renderParams, option, valList } = this
      const { data } = option
      const { $panel,$table,column } = renderParams
      const filters=$table.getCheckedFilters()
      const _filters=[]
      filters.forEach((filter)=>{
        filter.datas.forEach((item)=>{
          _filters.push(item)
        })
      })
      data.f1 = ''
      data.f2 = ''
      data.fType1 = ''
      data.fType2 = ''
      data.sMenu = ''
      data.checks = valList.filter(item => item.checked).map(item => item.value)
      data.columnName=column.field
      data.valList=valList

      if (!data.index){
        data.index=this.getMaxIndex($table)+1
      }else{
        const { fullData,visibleData } = $table.getTableData()
        let _data=fullData;
        for (let i=0;i<data.index;i++){
          const item=_filters[i];
          _data=_data.filter((data)=>item.checks.indexOf(data[item.columnName])>-1)
        }
        //除最后一次筛选列以外的增加算法
        if (data.index!==this.getMaxIndex($table)){
          for (let j=data.index;j<_filters.length;j++){
            const item=_filters[j];
            const _column=$table.getColumnByField(item.columnName)
            const option = _column.filters[0]
            _data.forEach(d=>{
              if (option.data.checks.indexOf(d[item.columnName])===-1){
                if (option.data.valList.indexOf(d[item.columnName])===-1){
                  option.data.checks.push(d[item.columnName])
                }
              }
            })
            $table.setFilter(item.columnName,[option]);
          }
        }

      }

      // 调佣筛选面板的 changeOption 方法，用于改变当前选项
      $panel.changeOption(evnt, true, option)
      // 最后触发确认筛选按钮
      $panel.confirmFilter(evnt)
    },

    getAllFilters($table){
      const filters=$table.getCheckedFilters()
      const _filters=[]
      filters.forEach((filter)=>{
        filter.datas.forEach((item)=>{
          _filters.push(item)
        })
      })
      return _filters;
    },
    getMaxIndex($table){
      const _filters=this.getAllFilters($table)
      return XEUtils.max(_filters,(item)=>item.index)?.index||0
    },
    resetFilterEvent (evnt) {
      const { renderParams } = this
      const { $panel } = renderParams
      // 触发筛选面板的重置事件，会自动将每个选项的值清空
      $panel.resetFilter(evnt)
    },
    openCombinerEvent (cItem) {
      const { size, renderParams, option, allCaseList, valList, combiner, getI18n } = this
      const { $table, $panel, column } = renderParams
      const { data } = option
      const caseType = cItem.value === 'custom' ? (data.sMenu || cItem.value) : cItem.value
      // 处理默运算规则认值，当打开弹出框时，设置/校验默认值
      if (caseType !== data.sMenu) {
        data.fVal1 = ''
        data.fMode = 'and'
        data.fVal2 = ''
        data.fType2 = ''
      }
      switch (caseType) {
        case 'between':
          data.fType1 = 'ge'
          data.fType2 = 'le'
          break
        case 'custom':
          if (!data.fType1) {
            data.fType1 = 'equal'
          }
          break
        default:
          data.fType1 = caseType
      }
      combiner.type1 = data.fType1
      combiner.val1 = data.fVal1
      combiner.mode = data.fMode
      combiner.type2 = data.fType2
      combiner.val2 = data.fVal2
      // 当弹出打开时，将筛选面板手动关闭
      $table.closeFilter()
      // 动态创建一个模态窗口
      VXETable.modal.open({
        title: getI18n('vxe.renderer.combination.popup.title'),
        width: 580,
        events: {
          show ({ $modal }) {
            const inputElem = $modal.$el.querySelector('.combination-popup-filter-input .vxe-input--inner')
            // 当窗口显示时，将输入框自动聚焦
            if (inputElem) {
              inputElem.focus()
            }
          }
        },
        slots: {
          default ({ $modal }) {
            return [
              <div class="vxe-tmpl-filter-combination-popup">
                <div class="combination-popup-title">{ getI18n('vxe.renderer.combination.popup.currColumnTitle') }<span><span>{ column.title }</span></span></div>
                <div class="combination-popup-filter">
                  <vxe-select class="combination-popup-filter-select" v-model={ combiner.type1 } size={ size } options={ allCaseList } transfer clearable></vxe-select>
                  <vxe-input class="combination-popup-filter-input" v-model={ combiner.val1 } size={ size } clearable></vxe-input>
                </div>
                <div class="combination-popup-concat">
                  <vxe-radio-group v-model={ combiner.mode } size={ size }>
                    <vxe-radio label="and" content={ getI18n('vxe.renderer.combination.popup.and') }></vxe-radio>
                    <vxe-radio label="or" content={ getI18n('vxe.renderer.combination.popup.or') }></vxe-radio>
                  </vxe-radio-group>
                </div>
                <div class="combination-popup-filter">
                  <vxe-select class="combination-popup-filter-select" v-model={ combiner.type2 } size={ size } options={ allCaseList } transfer clearable></vxe-select>
                  <vxe-input class="combination-popup-filter-input" v-model={ combiner.val2 } size={ size } clearable></vxe-input>
                </div>
                <div class="combination-popup-describe">
                  <span domPropsInnerHTML={ getI18n('vxe.renderer.combination.popup.describeHtml') }></span>
                </div>
                <div class="combination-popup-footer">
                  <vxe-button status="primary" onClick={
                    (evnt) => {
                      valList.forEach(item => {
                        item.checked = false
                      })

                      // 设置参数
                      data.fType1 = combiner.type1
                      data.fVal1 = combiner.val1
                      data.fMode = combiner.mode
                      data.fType2 = combiner.type2
                      data.fVal2 = combiner.val2
                      data.sMenu = cItem.value
                      data.checks = []

                      // 面板已被关闭，需手动设置
                      option._checked = true
                      option.checked = true

                      // 调用关闭窗口方法
                      $modal.close()

                      // 手动触发筛选面板确认事件
                      $panel.confirmFilter(evnt)
                    }
                  }>{ getI18n('vxe.button.confirm') }</vxe-button>
                  <vxe-button onClick={
                    () => {
                      // 调用关闭窗口方法
                      $modal.close()
                    }
                  }>{ getI18n('vxe.button.cancel') }</vxe-button>
                </div>
              </div>
            ]
          }
        }
      })
    },
    sortColumn (order) {
      const { hasSortable, renderParams } = this
      const { $table, column } = renderParams
      if (hasSortable) {
        // 关闭筛选面板
        $table.closeFilter()
        // 手动调用表格排序方法
        $table.sort(column.property, column.order === order ? null : order)
      }
    },
    fixedColumn (fixed) {
      const { renderParams } = this
      const { $table, column } = renderParams
      let targetColumn = column
      if (column.parentId) {
        do {
          targetColumn = $table.getColumnById(column.parentId)
        } while (targetColumn.parentId)
      }
      if (fixed ? targetColumn.fixed !== fixed : targetColumn.fixed) {
        // 同时支持分组表头，如果是分组表头，将所有子列同时设置固定列
        XEUtils.eachTree([targetColumn], item => {
          item.fixed = fixed
        })
        // 固定列发生改动，必须调用方法刷新列
        $table.refreshColumn()
        // 最后关闭筛选面板
        $table.closeFilter()
      }
    },
    mouseenterEvent (evnt, menuType) {
      this.childMenuPos = 'right'
      this.hoverMenu = menuType
      const menuElem = evnt.currentTarget
      if (menuElem.className.indexOf('is-disabled') === -1) {
        const childMenuElem = menuElem.querySelector('.vxe-tmpl-filter--child-menu-group')
        clearTimeout(this.menuleaveTime)
        menuElem.setAttribute('_active', 1)
        if (childMenuElem) {
          this.$nextTick(() => {
            const visibleWidth = document.documentElement.clientWidth || document.body.clientWidth
            const bounding = childMenuElem.getBoundingClientRect()
            if (bounding.left + childMenuElem.clientWidth + 20 > visibleWidth) {
              this.childMenuPos = 'left'
            }
          })
        }
      } else {
        this.hoverMenu = null
        menuElem.removeAttribute('_active')
      }
    },
    mouseleaveEvent (evnt) {
      const menuElem = evnt.currentTarget
      const childMenuElem = menuElem.querySelector('.vxe-tmpl-filter--child-menu-group')
      menuElem.removeAttribute('_active')
      if (childMenuElem) {
        this.menuleaveTime = setTimeout(() => {
          if (!menuElem.hasAttribute('_active')) {
            this.hoverMenu = null
          }
        }, 250)
      } else {
        this.hoverMenu = null
      }
    }
  }
}
</script>

<style lang="scss">
.vxe-tmpl-filter--menu-group {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
  user-select: none;
  &:after {
    content: "";
    position: absolute;
    width: 210px;
    right: 0;
    bottom: 0;
    border-bottom: 1px solid #E2E4E7;
  }
}
.vxe-tmpl-filter--menu-item {
  position: relative;
  padding: 4px 20px 4px 30px;
  &:not(.is-disabled) {
    cursor: pointer;
    &:hover {
      background-color: #C5C5C5;
    }
  }
  &.is-disabled {
    cursor: default;
    color: #B1B1B1;
  }
  &.is-hover {
    background-color: #C5C5C5;
    .vxe-tmpl-filter--child-menu-group {
      display: block;
    }
  }
  &.is-active {
    & > .vxe-tmpl-filter--menu-left-icon {
      color: #1890ff;
    }
  }
}
.vxe-tmpl-filter--menu-item-label,
.vxe-tmpl-filter--child-menu-label {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vxe-tmpl-filter--child-menu-group {
  display: none;
  position: absolute;
  top: 0;
  width: 150px;
  background-color: #fff;
  border: 1px solid #DADCE0;
  box-shadow: 3px 3px 4px -2px rgba(0, 0, 0, 0.6);
  &.pos-left {
    left: -150px;
  }
  &.pos-right {
    right: -150px;
  }
}
.vxe-tmpl-filter--child-menu-list {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
  &:after {
    content: "";
    position: absolute;
    width: 90px;
    right: 0;
    bottom: 0;
    border-bottom: 1px solid #E2E4E7;
  }
}
.vxe-tmpl-filter--child-menu-item {
  position: relative;
  padding: 4px 20px 4px 30px;
  &:not(.is-disabled) {
    &:hover {
      background-color: #C5C5C5;
    }
  }
  &.is-disabled {
    cursor: default;
    color: #B1B1B1;
  }
  &.is-active {
    .vxe-tmpl-filter--child-menu-left-icon {
      display: block;
    }
  }
}
.vxe-tmpl-filter--child-menu-left-icon {
  display: none;
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
}
.vxe-tmpl-filter--menu-left-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
}
.vxe-tmpl-filter--menu-right-icon {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
}
.vxe-tmpl-filter-combination {
  width: 240px;
  user-select: none;
  .combination-search {
    padding: 0 10px 0 30px;
  }
  .combination-search-header {
    position: relative;
    padding: 5px 0;
  }
  .combination-search-body {
    border: 1px solid #E2E4E7;
    border-radius: 4px;
  }
  .combination-search-list-header {
    background-color: #f8f8f9;
    border-bottom: 1px solid #E2E4E7;
  }
  .combination-search-list-body {
    .vxe-list--virtual-wrapper {
      height: 120px;
    }
  }
  .combination-search-item {
    height: 24px;
    line-height: 20px;
    padding: 0 10px;
  }
  .combination-search-checkbox {
    .vxe-checkbox--label {
      max-width: 140px;
    }
  }
  .combination-search-body-empty {
    text-align: center;
    line-height: 145px;
  }
  .combination-footer {
    text-align: right;
    padding: 10px 10px 10px 0;
  }
}
.vxe-tmpl-filter-combination-popup {
  .combination-popup-title {
    padding: 0 5px 5px 0;
    & > span {
      position: relative;
      display: block;
      padding-left: 15px;
      padding: 0 0 0 15px;
      font-size: 12px;
      line-height: 22px;
      height: 22px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      & > span {
        background-color: #fff;
        padding-right: 5px;
      }
      &:after {
        content: "";
        position: absolute;
        width: 100%;
        left: 30px;
        top: 50%;
        border-bottom: 1px solid #E2E4E7;
        z-index: -1;
      }
    }
  }
  .combination-popup-filter {
    padding-left: 30px;
  }
  .combination-popup-filter-select {
    width: 120px;
  }
  .combination-popup-filter-input {
    margin-left: 15px;
    width: 380px;
  }
  .combination-popup-describe {
    font-size: 12px;
    padding: 20px 0 10px 0;
  }
  .combination-popup-concat {
    padding: 0 5px 5px 40px;
  }
  .combination-popup-footer {
    text-align: right;
  }
}
</style>

