<template>
  <div class="en-search dark:!bg-[#060818]">
    <div style="width: 330px">
      <el-input v-if="true" size="small" class="dark:!bg-[#060818]" clearable :placeholder="placeholder" v-model="keyword" @keyup.enter="search">
        <template #append>
          <el-button @click="search">
            <el-icon style="vertical-align: middle">
              <Search />
            </el-icon>
            <span style="vertical-align: middle"> </span>
          </el-button>
        </template>
      </el-input>
    </div>
    <div v-if="advanced">
      <el-popover ref="popover" placement="bottom-start" trigger="click" :width="advancedWidth" v-model="popoverVisible">
        <slot name="advanced-content" @click.stop></slot>
        <div style="text-align: right; margin: 0">
          <el-popover placement="top" width="160"  v-model="visibleDelPopover">
            <p>确定要清空表单吗？</p>
            <div style="text-align: right; margin: 0">
              <el-button size="small" link @click="visibleDelPopover = false">取消</el-button>
              <el-button type="primary" size="small" @click="handleCleanForm">确定</el-button>
            </div>
            <template #reference>
              <el-button size="small" link class="clean-form">清空</el-button>
            </template>
          </el-popover>
          <el-button size="small" link @click="popoverVisible = false">取消</el-button>
          <el-button type="primary" size="small" @click="advancedSearch">确定</el-button>
        </div>
        <template #reference>
          <el-button size="small" style="margin-left: 10px">高级搜索</el-button>
        </template>
      </el-popover>
    </div>
  </div>
</template>

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

const props = defineProps<{
  inputSearch?: boolean;
  advanced?: boolean;
  advancedWidth?: number;
  placeholder?: string;
}>();

const keyword = ref('');
const popoverVisible = ref(false);
const visibleDelPopover = ref(false);
const clearFuncs = ref<Function[]>([]);
const clearFuncNames = ref(['clearValue', 'deleteSelected']);

const instance = getCurrentInstance();
const emit = instance?.emit as (event: string, ...args: any[]) => void;

const search = () => {
  popoverVisible.value = false;
  emit('search', keyword.value);
};

const advancedSearch = () => {
  visibleDelPopover.value = false;
  popoverVisible.value = false;
  emit('advancedSearch', keyword.value);
};

function getRootParent(instance: any): any {
  if (!instance || !instance.$parent) return instance;
  return getRootParent(instance.$parent);
}

const rootParent = getRootParent(instance?.proxy);

const handleCleanForm = (event: Event) => {
  const $parent = rootParent;
  const $form = $parent?.$refs['advancedForm'];
  const $forms = $parent?.$refs['advancedForms'];
  const objs = JSON.parse(JSON.stringify($parent?.advancedForm || {}));
  Object.keys(objs).forEach((key) => {
    $parent.advancedForm[key] = '';
  });
  if ($forms) {
    const objss = JSON.parse(JSON.stringify($parent?.advancedForms || {}));
    Object.keys(objss).forEach((key) => {
      $parent.advancedForms[key] = '';
    });
    findClearValue($forms);
  }

  findClearValue($form);
  clearFuncs.value.forEach((func) => {
    func(event);
  });
  clearFuncs.value = [];
  visibleDelPopover.value = false;
};

const findClearValue = (component: any) => {
  const $ch = component.$children;
  $ch &&
    $ch.length &&
    $ch.forEach((item: any) => {
      const funs = clearFuncNames.value.filter((name) => typeof item[name] === 'function');
      if (funs.length) {
        clearFuncs.value.push(item[funs[0]]);
      } else {
        findClearValue(item);
      }
    });
};
</script>

<style scoped>
.en-search {
  display: flex;
  justify-content: center;
  align-items: center;
}

.clean-form {
  color: #f56c6c;
  margin-right: 10px;
}
</style>