<template>
  <span class="head-title">
    {{ column.title }}
    <el-popover
      v-if="filterHead[column.field]"
      :visible="popoverVisible"
      trigger="click"
      :width="200"
    >
      <template #default>
        <div ref="headSearchRef" class="head-search">
          <div class="search-item">
            <el-input
              v-if="filterHead[column.field].mode === 'input'"
              v-model="filterData[column.field]"
              placeholder="请输入"
              clearable
              @keyup.enter="filterFun(column)"
              @clear="filterResetFun(column)"
            />
            <el-select
              v-if="filterHead[column.field].mode === 'select'"
              v-model="filterData[column.field]"
              :options="getDictDataFun(filterHead[column.field].dictName)"
              placeholder="请选择"
              clearable
              @clear="filterResetFun(column)"
            />
          </div>
          <div class="btns">
            <el-button class="btn" size="small" @click="filterResetFun(column)"> 重置 </el-button>
            <el-button class="btn" type="primary" size="small" @click="filterFun(column)">
              确定
            </el-button>
          </div>
        </div>
      </template>
      <template #reference>
        <el-icon
          class="head-icon"
          :class="{ active: filterData[column.field] }"
          :size="16"
          @click="openFun"
        >
          <Finished v-if="filterData[column.field]" />
          <Filter v-else />
        </el-icon>
      </template>
    </el-popover>
  </span>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
import { Filter, Finished } from '@element-plus/icons-vue';
import { useClickOutside } from '@/utils/clickOutside';
import { nodeTypeList } from '@/utils/enum/node';
import { CommonStore } from '@/stores/common';
import filterHeadData from './filterHead';

const filterHead = ref<any>(filterHeadData);
const commonStore = CommonStore();
const emit = defineEmits(['update:data', 'search', 'reset']);
const headSearchRef = ref();
const { popoverVisible } = useClickOutside(headSearchRef);

interface Props {
  column: any;
  data: any;
}

const props = withDefaults(defineProps<Props>(), {
  column: {},
  data: {},
});

const filterData = ref<any>(props.data);

watch(
  () => filterData.value,
  (val: boolean) => {
    emit('update:data', val);
  },
  { deep: true }
);

const openFun = () => {
  setTimeout(() => {
    popoverVisible.value = true;
  }, 0);
};

const filterFun = (column: any) => {
  popoverVisible.value = false;
  emit('search', column);
};

const filterResetFun = (column: any) => {
  popoverVisible.value = false;
  emit('reset', column);
};

const getDictDataFun = (name: string) => {
  if (name === 'POOL_CATEGORY_TYPE') {
    return [...nodeTypeList, ...commonStore.getDictData(name).A];
  }
  return commonStore.getDictData(name).A;
};
</script>

<style lang="scss" scoped>
.head-title {
  position: relative;
  padding-right: 20px;
  .head-icon {
    position: absolute;
    top: 50%;
    right: 0;
    margin-top: -8px;
    cursor: pointer;
    &.active {
      color: var(--el-color-primary);
    }
  }
}
.head-search {
  width: 100%;
  .search-item {
    display: flex;
  }
  .btns {
    padding-top: 5px;
    display: flex;
    justify-content: flex-end;
    .btn {
      margin-left: 5px;
    }
  }
}
</style>
