<template>
  <span class="head-title">
    {{ item.title }}
    <el-popover
      v-if="!['choseFile', 'slot'].includes(item.inputMode)"
      :visible="popoverVisible"
      trigger="click"
      :width="item.width || 200"
    >
      <template #default>
        <div ref="headSearchRef" class="head-search">
          <div class="search-item">
            <FormItem :item="item" :form="searchForm" @enter="searchFun" @clear="resetFun">
              <template v-for="name in Object.keys($slots)" :key="name" #[name]="scope">
                <slot :name="name" v-bind="scope" />
              </template>
            </FormItem>
            <div>
              <el-radio-group v-model="seq">
                <el-radio value="ASC‌">
                  <span class="icon-item down">
                    正序
                    <el-icon class="icon" :size="14">
                      <SortDown />
                    </el-icon>
                  </span>
                </el-radio>
                <el-radio value="DESC">
                  <span class="icon-item up">
                    倒序
                    <el-icon class="icon" :size="14">
                      <SortDown />
                    </el-icon>
                  </span>
                </el-radio>
              </el-radio-group>
            </div>
          </div>
          <div class="btns">
            <el-button class="btn" size="small" @click="resetFun">重置</el-button>
            <el-button class="btn" type="primary" size="small" @click="searchFun">确定</el-button>
          </div>
        </div>
      </template>
      <template v-if="item.inputMode !== 'slot'" #reference>
        <el-icon
          class="head-icon"
          :class="{ active: data[item.searchKey || item.key] }"
          :size="16"
          @click="openFun"
        >
          <Finished v-if="data[item.searchKey || item.key]" />
          <Filter v-else />
        </el-icon>
      </template>
    </el-popover>
  </span>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
import FormItem from './formItem.vue';
import { useClickOutside } from '@/utils/clickOutside';
import { Filter, Finished, SortDown } from '@element-plus/icons-vue';

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

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

watch(
  () => props.data,
  (val: any) => {
    searchForm.value = val;
    seq.value = 'ASC‌';
  }
);

const emit = defineEmits(['search']);
const headSearchRef = ref();
const searchForm = ref<any>(props.data);
const seq = ref('ASC‌'); // ASC‌正序 DESC倒序
const { popoverVisible } = useClickOutside(headSearchRef);

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

const searchFun = () => {
  popoverVisible.value = false;
  emit('search', {
    filterType: seq.value,
    filterKey: props.item.searchKey || props.item.key,
  });
};

const resetFun = () => {
  searchForm.value[props.item.searchKey || props.item.key] = '';
  searchFun();
};
</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;
    flex-wrap: wrap;
    .icon-item {
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      &::before {
        content: '';
        position: absolute;
        top: 2px;
        right: 10px;
        font-size: 7px;
      }
      &::after {
        content: '';
        position: absolute;
        bottom: 1px;
        right: 10px;
        font-size: 7px;
      }
      &.down {
        &::before {
          content: 'A';
        }
        &::after {
          content: 'Z';
        }
      }
      &.up {
        &::before {
          content: 'Z';
        }
        &::after {
          content: 'A';
        }
      }
      .icon {
        margin-left: 2px;
        transform: rotateY(180deg);
      }
    }
  }
  .btns {
    padding-top: 5px;
    display: flex;
    justify-content: flex-end;
    .btn {
      margin-left: 5px;
    }
  }
}
</style>
