<template>
  <el-popover
    ref="popoverRef"
    placement="bottom"
    trigger="click"
    popper-class="editable-table-sort-filter"
    data-popper-name="editable-table-sort-filter"
    :data-prop="column.prop"
    @show="() => emit('popover-show')"
  >
    <template slot="reference">
      <slot name="custom">
        <!-- 筛选中，或排序中，高亮 -->
        <span
          :class="['editable-table__sort-reference', headActive && 'editable-table__sort-reference--active']"
        >
          {{ column.label }}
          <div :class="['editable-table__sort-icon', headActive && 'editable-table__sort-icon--active']" />
        </span>
      </slot>
    </template>
    <div class="editable-table-sort-filter">
      <div class="editable-table-sort-filter__column-title">
        {{ column.label }}
      </div>

      <div class="editable-table-sort-filter__item">
        <BizSortFilter
          v-if="column.isColumnSortable"
          :column="column"
          :temp-sort-prop="tempSortProp"
          :temp-sort-type="tempSortType"
          @update:sort="(type, prop) => emit('update:sort', type, prop)"
        />
      </div>

      <template v-if="column.filters">
        <div
          v-for="(filterItem, index) in column.filters"
          :key="index"
          class="editable-table-sort-filter__item editable-table__filter-group__filter"
        >
          <slot
            v-if="filterItem.type === 'slot'"
            :name="filterItem.slotName"
          />
          <component
            v-else
            :is="componentMap[filterItem.type]"
            :config="filterItem"
            :temp-filtered-value="tempFilteredValue"
            @update:tempFilteredValue="onUpdate"
          />
        </div>
      </template>

      <div
        v-if="column.summary"
        class="editable-table-sort-filter__item editable-table-sort-filter__filter"
      >
        <div class="editable-table-sort-filter__filter-title">
          统计
        </div>
        <el-checkbox-group
          class="editable-table-sort-filter__filter-checkbox-group"
          :value="tempSummaryList"
          @input="val => emit('update:tempSummaryList', val)"
        >
          <el-checkbox
            :label="column.prop"
            class="editable-table-sort-filter__filter-checkbox"
          >
            <slot
              name="summay-item"
              v-bind="column"
            >
              {{ column.label }}
            </slot>
          </el-checkbox>
        </el-checkbox-group>
      </div>

      <div class="editable-table-sort-filter__footer">
        <el-button
          class="editable-table-sort-filter__reset-btn"
          @click="() => emit('reset')"
        >
          重置
        </el-button>
        <el-button
          class="editable-table-sort-filter__confirm-btn"
          type="primary"
          @click="() => emit('confirm')"
        >
          确定
        </el-button>
      </div>
    </div>
  </el-popover>
</template>

<script setup lang="ts">
import { ref } from 'vue'

import BizCheckboxFilter from './BizCheckboxFilter.vue';
import BizColorRadioFilter from './BizColorRadioFilter.vue';
import BizDoubleDatePickerFilter from './BizDoubleDatePickerFilter.vue';
import BizInputFilter from './BizInputFilter.vue';
import BizMonthDayPicker from './BizMonthDayPicker.vue';
import BizSortFilter from './BizSortFilter.vue';
import BizRadioFilter from "./BizRadioFilter.vue";
import { FilterItem, IColumnConfig } from '../../types'

defineProps<{
  headActive: boolean
  column: IColumnConfig
  tempSummaryList: string[]
  tempSortType: 'ascending' | 'descending' | ''
  tempSortProp: string
  tempFilteredValue: Record<string, string | number | number[] | string[]>
}>()

const emit = defineEmits<{
  (e: 'update:tempFilteredValue', key: string, value: string): void
  (e: 'update:tempSummaryList', value: string[]): void
  (e: 'update:sort', type: 'ascending' | 'descending', prop: string): void
  (e: 'popover-show'): void
  (e: 'reset'): void
  (e: 'confirm'): void
}>()

// 把 filterItem.type 映射到组件
const componentMap: Record<Exclude<FilterItem['type'], 'slot'>, any> = {
  /** 输入框 */
  input: BizInputFilter,
  /** 日期范围 */
  doubleDatePicker: BizDoubleDatePickerFilter,
  /** 单选框 */
  radio: BizRadioFilter,
  /** 复选框 */
  checkbox: BizCheckboxFilter,
  /** 月日选择器 */
  monthDayPicker: BizMonthDayPicker,
  /** 颜色选择器 */
  colorRadio: BizColorRadioFilter,
}

const popoverRef = ref(null as any)

// 统一的事件派发
function onUpdate(key: string, val: any) {
  emit('update:tempFilteredValue', key, val)
}

defineExpose({
  close: () => {
    popoverRef.value?.doClose()
  }
})
</script>
