<script setup lang="ts">
import { message, type SelectProps } from "ant-design-vue";
import { ref, watch, onMounted, h } from "vue";
import { routeToSearch } from "@/router";
import * as searchHistoryService from "@/services/searchHistory.service"
import * as searchService from "@/services/search.service"
import { LoadingOutlined } from '@ant-design/icons-vue';
import SearchResultItem from "./components/SearchResultItem.vue";

const keyword = ref("");

const field = ref("TP");
const placeholder = ref("请输入文献主题")

const hotWords = ref(['建筑工程','工程设计','BIM',])
const recommendWords = ref(['建筑工程', '施工技术', 'BIM', '工程造价', '质量控制'])
const spinning = ref(true);
const searchResult: any = ref([])

const onSearch = () => {
  const kwd = keyword.value.trim();
  if (kwd.length == 0) {
    message.warning("请输入查询关键词");
    return;
  }
  routeToSearch({ type: 'simple', kw: kwd, field: field.value });
}

const fieldOptions = ref<SelectProps['options']>([
  { value: 'TP', label: '主题' },
  { value: 'TI', label: '标题' },
  { value: 'AU', label: '作者' },
  { value: 'KW', label: '关键词' },
  { value: 'AB', label: '摘要' },
  { value: 'UN', label: '机构' },
]);

watch(field, (newValue) => {
  if (newValue == 'TI') {
    placeholder.value = "请输入文献标题"
  } else if (newValue == 'AU') {
    placeholder.value = "请输入文献作者"
  } else if (newValue == 'KW') {
    placeholder.value = "请输入文献关键词"
  } else if (newValue == 'AB') {
    placeholder.value = "请输入文献摘要"
  } else if (newValue == 'UN') {
    placeholder.value = "请输入文献机构"
  } else {
    placeholder.value = "请输入文献主题"
  }
});

onMounted(() => {
  getHoyKeyword(5);
  recommendsearch();
})

function getHoyKeyword(size: number){
  searchHistoryService.getHoyKeyword(size).then((resp) => {
    const words: any = resp;
    for (let item of words) {
        var expression = item.expression;
        var _expression = expression.match(/\((.+)\)/g);
        var $1 = RegExp.$1
        var index = hotWords.value.indexOf($1);

        if (hotWords.value.length == 5) {
            break;
        }

        if (index == -1) {
          if ($1.length > 1) {
            hotWords.value.push($1)
          }
        }
    }
  })
}

function recommendsearch() {
  spinning.value = true;
  let request = {
    from: 0,
    size: 2,
    sort: {PY: "desc"},
    query: ''
  }

  for (let item of recommendWords.value) {
    request.query = 'TP=('+item+')' ;
    searchService.search(request).then((resp) => {
      for (let doc of resp.docs) {
        searchResult.value.push(doc)
      }
    })
  }
  spinning.value = false;
}

function search(kwd: string){
  routeToSearch({ type: 'simple', kw: kwd, field: 'TP' });
}

</script>

<template>
  <div class="search-wrap">
    <h1>智能搜索</h1>
    <a-divider></a-divider>
    <a-row type="flex">
      <a-col>
        <a-select
          ref="select"
          v-model:value="field"
          style="width: 120px"
          :options="fieldOptions"
          size="large"
        ></a-select>
      </a-col>
      <a-col flex="1">
        <a-input-search
          v-model:value="keyword"
          :placeholder="placeholder"
          enter-button
          size="large"
          @search="onSearch"
        />
      </a-col>
    </a-row>
    <a-row class="search-hotword">
      热门关键词：
      <span v-for="(item, index) in hotWords" @click="search(item)" :key="index">
          {{item}}
      </span>
    </a-row>
    <a-row type="flex" class="search-result">
        <a-spin :spinning="spinning" :indicator="h(LoadingOutlined, { style: { fontSize: '24px', }, spin: true, })">
        最新文献推荐
         <div v-for="(doc, index) in searchResult" :key="index" v-if="searchResult" class="search-result-content">
          <SearchResultItem :data="doc"/>
        </div>
        </a-spin>
    </a-row>
  </div>
</template>

<style scoped lang="scss">
.search-wrap {
  width: 80%;
  margin: 0 auto;
  margin-top: 20px;

  h1 {
    font-size: 2rem;
    text-align: center;
  }

  .search-hotword {
    margin-top: 30px;
    span {
      cursor: pointer;
      margin-left: 20px;
      &:hover {
        text-decoration: underline;
      }
    }
  }

  .search-result{
    margin-top: 30px;
  }
  .search-result-content {
     > div {
      border: 1px gray solid;
      margin-bottom: 8px;
    }
  }
}
</style>
