<template>
  <el-popover
    :visible="visible"
    trigger="click"
    :width="400"
    placement="bottom-start"
    :show-arrow="false"
    popper-class="scroll-y"
    :popper-style="{ maxHeight: '500px' }"
    @update:visible="popoverChange"
    :hide-after="0"
  >
    <template #reference>
      <el-input
        :model-value="modelValue.keyWord"
        @focus="inputFocus"
        @blur="isFocus = false"
        placeholder="请输入条文内容"
        @input="inputChange"
      ></el-input>
    </template>
    <div>
      <el-space direction="vertical" alignment="flex-start" :spacer="spacer" style="width: 100%">
        <!-- 命名标签 -->
        <el-checkbox-group
          v-if="checkedListMap.tagList.length > 0"
          :model-value="modelValue.tagIdList"
          @update:model-value="updateModelValue({ tagIdList: $event })"
        >
          <el-checkbox v-for="item in checkedListMap.tagList" :label="item.id" :key="item.id">
            {{ item.name }}
          </el-checkbox>
        </el-checkbox-group>
        <!-- 标准词 -->
        <el-checkbox-group
          v-if="checkedListMap.standardWordList.length > 0"
          :model-value="modelValue.standardWordIdList"
          @update:model-value="updateModelValue({ standardWordIdList: $event })"
        >
          <el-checkbox v-for="item in checkedListMap.standardWordList" :label="item.id" :key="item.id">
            {{ item.name }}
          </el-checkbox>
        </el-checkbox-group>
        <!-- 同义词 -->
        <el-checkbox-group
          v-if="checkedListMap.synonymWordList.length > 0"
          :model-value="modelValue.synonymWordList"
          @update:model-value="updateModelValue({ synonymWordList: $event })"
        >
          <el-checkbox v-for="item in checkedListMap.synonymWordList" :label="item.id" :key="item.id">
            {{ item.name }}
          </el-checkbox>
        </el-checkbox-group>
      </el-space>
    </div>
  </el-popover>
</template>
<script setup lang="ts">
import { ref, defineProps, defineEmits, withDefaults, computed, h } from "vue";
import { debounce } from "@/utils";
import { Retrieval } from "@/api/interface";
import { getCheckedListByKeyword } from "@/api/modules/retrieval/index";

interface Props {
  modelValue: Retrieval.AdvancedContentParams;
}
const props = withDefaults(defineProps<Props>(), {
  modelValue: () => ({}) as Retrieval.AdvancedContentParams
});
const spacer = h("div", { style: "border: 1px solid var(--el-border-color);" });
const emit = defineEmits(["update:modelValue"]);
const visible = ref(false);
const isFocus = ref(false);
const checkedListMap = ref({
  tagList: [],
  standardWordList: [],
  synonymWordList: []
} as Retrieval.ResKeywordCheckedList);

const hasChecked = computed(() => {
  if (checkedListMap.value.tagList.length > 0) return true;
  if (checkedListMap.value.standardWordList.length > 0) return true;
  if (checkedListMap.value.synonymWordList.length > 0) return true;
  return false;
});

// 输入框内容改变
const inputChange = (val: string) => {
  visible.value = false;
  checkedListMap.value = {
    tagList: [],
    standardWordList: [],
    synonymWordList: []
  };
  updateModelValue({
    keyWord: val,
    tagIdList: [],
    standardWordIdList: [],
    synonymWordList: []
  });
  if (val) {
    loadCheckedListByKeyword(val);
  }
};

// 根据输入框内容加载弹出层内容
const loadCheckedListByKeyword = debounce(function (keyword: string) {
  getCheckedListByKeyword({ keyword }).then(res => {
    checkedListMap.value = res.data;
    visible.value = hasChecked.value;
  });
}, 500);

// 获取焦点如果已经有输入，再次触发弹窗
function inputFocus() {
  isFocus.value = true;
  if (!visible.value && hasChecked.value) {
    visible.value = true;
  }
}

// 如果失去焦点并且点击了弹出层区域外的地方，则隐藏弹出层
function popoverChange(val: boolean) {
  if (!val && !isFocus.value) {
    visible.value = false;
  }
}

function updateModelValue(val: any) {
  emit("update:modelValue", { ...props.modelValue, ...val });
}
</script>
