import GlobalConfig from '../../../v-table/src/conf';
import VTable from '../../../v-table';
import UtilTools from '../../../tools/utils';
import XEUtils from 'xe-utils';
import { getSlotVNs } from '../../../tools/vn';

export default {
  name: 'ElTablePlusFilter',
  props: {
    filterStore: Object
  },
  computed: {
    hasCheckOption() {
      const { filterStore } = this;
      return filterStore && filterStore.options.some((option) => option.checked);
    }
  },
  render(h) {
    const { $parent: $tablePlus, filterStore } = this;
    const { args, column } = filterStore;
    const filterRender = column ? column.filterRender : null;
    const compConf = filterRender
      ? VTable.renderer.get(filterRender.name)
      : null;
    const filterClassName = compConf ? compConf.filterClassName : '';
    return h(
      'div',
      {
        class: [
          'el-table-plus--filter-wrapper',
          'filter--prevent-default',
          compConf && compConf.className ? compConf.className : '',
          UtilTools.getClass(
            filterClassName,
            Object.assign({ $panel: this, $table: $tablePlus }, args)
          ),
          {
            'is--animat': $tablePlus.animat,
            'is--multiple': filterStore.multiple,
            'is--active': filterStore.visible
          }
        ],
        style: filterStore.style
      },
      filterStore.visible
        ? this.renderOptions(h, filterRender, compConf).concat(
          this.renderFooter(h)
        )
        : []
    );
  },
  methods: {
    renderOptions(h, filterRender, compConf) {
      const { $parent: $tablePlus, filterStore } = this;
      const { args, column, multiple, maxHeight } = filterStore;
      const { slots } = column;
      if (slots && slots.filter) {
        return [
          h(
            'div',
            {
              class: 'table-plus--filter-template'
            },
            $tablePlus.callSlot(
              slots.filter,
              Object.assign({ $panel: this, context: this }, args),
              h
            )
          )
        ];
      } else if (compConf && compConf.renderFilter) {
        return [
          h(
            'div',
            {
              class: 'table-plus--filter-template'
            },
            getSlotVNs(
              compConf.renderFilter.call(
                $tablePlus,
                h,
                filterRender,
                Object.assign({ $panel: this, context: this }, args)
              )
            )
          )
        ];
      }
      const isAllChecked = multiple
        ? filterStore.isAllSelected
        : !filterStore.options.some((item) => item._checked);
      const isAllIndeterminate = multiple && filterStore.isIndeterminate;
      return [
        h(
          'ul',
          {
            class: 'table-plus--filter-header'
          },
          [
            h(
              'li',
              {
                class: [
                  'table-plus--filter-option',
                  {
                    'is--checked': isAllChecked,
                    'is--indeterminate': isAllIndeterminate
                  }
                ],
                attrs: {
                  title: multiple
                    ? '全选/取消'
                    : '全部'
                },
                on: {
                  click: (evnt) => {
                    this.changeAllOption(evnt, !filterStore.isAllSelected);
                  }
                }
              },
              (multiple
                ? [
                  h('span', {
                    class: [
                      'table-plus-checkbox--icon',
                      isAllIndeterminate
                        ? GlobalConfig.icon.TABLE_CHECKBOX_INDETERMINATE
                        : isAllChecked
                          ? GlobalConfig.icon.TABLE_CHECKBOX_CHECKED
                          : GlobalConfig.icon.TABLE_CHECKBOX_UNCHECKED
                    ]
                  })
                ]
                : []
              ).concat([
                h(
                  'span',
                  {
                    class: 'table-plus-checkbox--label'
                  },
                  '全部'
                )
              ])
            )
          ]
        ),
        h(
          'ul',
          {
            class: 'table-plus--filter-body',
            style: maxHeight
              ? {
                maxHeight: `${maxHeight}px`
              }
              : {}
          },
          filterStore.options.map((item) => {
            const isChecked = item._checked;
            const isIndeterminate = false;
            return h(
              'li',
              {
                class: [
                  'table-plus--filter-option',
                  {
                    'is--checked': isChecked
                  }
                ],
                attrs: {
                  title: item.label
                },
                on: {
                  click: (evnt) => {
                    this.changeOption(evnt, !item._checked, item);
                  }
                }
              },
              (multiple
                ? [
                  h('span', {
                    class: [
                      'table-plus-checkbox--icon',
                      isIndeterminate
                        ? GlobalConfig.icon.TABLE_CHECKBOX_INDETERMINATE
                        : isChecked
                          ? GlobalConfig.icon.TABLE_CHECKBOX_CHECKED
                          : GlobalConfig.icon.TABLE_CHECKBOX_UNCHECKED
                    ]
                  })
                ]
                : []
              ).concat([
                h(
                  'span',
                  {
                    class: 'table-plus-checkbox--label'
                  },
                  UtilTools.formatText(item.label, 1)
                )
              ])
            );
          })
        )
      ];
    },
    renderFooter(h) {
      const { hasCheckOption, filterStore } = this;
      const { column, multiple } = filterStore;
      const filterRender = column.filterRender;
      const compConf = filterRender
        ? VTable.renderer.get(filterRender.name)
        : null;
      const isDisabled =
        !hasCheckOption &&
        !filterStore.isAllSelected &&
        !filterStore.isIndeterminate;
      return multiple &&
        (!compConf ||
          (XEUtils.isBoolean(compConf.showFilterFooter)
            ? compConf.showFilterFooter !== false
            : compConf.isFooter !== false))
        ? [
          h(
            'div',
            {
              class: 'table-plus--filter-footer'
            },
            [
              h(
                'button',
                {
                  class: {
                    'is--disabled': isDisabled
                  },
                  attrs: {
                    disabled: isDisabled
                  },
                  on: {
                    click: this.confirmFilter
                  }
                },
                '筛选'
              ),
              h(
                'button',
                {
                  on: {
                    click: this.resetFilter
                  }
                },
                '重置'
              )
            ]
          )
        ]
        : [];
    },
    // 全部筛选事件
    filterCheckAllEvent(evnt, value) {
      const filterStore = this.filterStore;
      filterStore.options.forEach((option) => {
        option._checked = value;
        option.checked = value;
      });
      filterStore.isAllSelected = value;
      filterStore.isIndeterminate = false;
    },

    /** ***********************
     * Publish methods
     *************************/
    // （单选）筛选发生改变
    changeRadioOption(evnt, checked, item) {
      const { $parent: $tablePlus, filterStore } = this;
      filterStore.options.forEach((option) => {
        option._checked = false;
      });
      item._checked = checked;
      $tablePlus.checkFilterOptions();
      this.confirmFilter(evnt);
    },
    // （多选）筛选发生改变
    changeMultipleOption(evnt, checked, item) {
      const { $parent: $tablePlus } = this;
      item._checked = checked;
      $tablePlus.checkFilterOptions();
    },
    changeAllOption(evnt, checked) {
      if (this.filterStore.multiple) {
        this.filterCheckAllEvent(evnt, checked);
      } else {
        this.resetFilter(evnt);
      }
    },
    // 筛选发生改变
    changeOption(evnt, checked, item) {
      if (this.filterStore.multiple) {
        this.changeMultipleOption(evnt, checked, item);
      } else {
        this.changeRadioOption(evnt, checked, item);
      }
    },
    // 确认筛选
    confirmFilter(evnt) {
      const { $parent: $tablePlus, filterStore } = this;
      filterStore.options.forEach((option) => {
        option.checked = option._checked;
      });
      $tablePlus.confirmFilterEvent(evnt);
    },
    // 重置筛选
    resetFilter(evnt) {
      const { $parent: $tablePlus } = this;
      $tablePlus.resetFilterEvent(evnt);
    }
    /** ***********************
     * Publish methods
     *************************/
  }
};
