// 内置组件 FilterContent.vue
<template>
  <div class="my-filter-content">
    <el-form>
      <div class="my-fc-search">
        <div class="my-fc-search-top">
          <el-input v-model="option.data.sVal" :placeholder="$t2('搜索', 'components.table.search')" @input="searchEvent">
            <i slot="suffix" class="el-input__icon el-icon-search"></i>
          </el-input>
        </div>
        <div class="my-fc-search-content">
          <template v-if="valList.length">
            <ul class="my-fc-search-list">
              <li class="my-fc-search-item all">
                <el-checkbox v-model="isAll" @change="changeAllEvent">{{$t2('全选', 'components.table.checkAll')}}</el-checkbox>
              </li>
              <li class="my-fc-search-item" v-for="(item, sIndex) in valList" :key="sIndex">
                <el-checkbox v-model="item.checked" @change="checkItem">{{ item.value }} (<span
                  class="nums">{{ item.filterCount + ' / ' + item.count }}</span>)
                </el-checkbox>
              </li>
            </ul>
          </template>
          <template v-else>
            <div class="my-fc-search-empty">{{$t2('无匹配项', 'components.table.noData')}}</div>
          </template>
        </div>
      </div>
      <div class="my-fc-footer">
        <el-button type="text" @click="confirmFilterEvent" class="item">{{$t2('筛选', 'components.table.screen')}}</el-button>
        <el-button style="margin-left: 0" type="text" @click="resetFilterEvent" class="item">{{$t2('重置', 'components.table.reset')}}</el-button>
      </div>
    </el-form>
  </div>
</template>

<script>
import {contentMixin} from './mixin.js';

export default {
  mixins: [contentMixin]
};
</script>
