<template>
  <div class="main-box">
    <div class="card">
      <SearchBar
        v-model:show-result="showResult"
        @search="searchAction"
        @reset="(params: any) => searchAction(params, false)"
        @result-filter="resultFilterAcion"
      />
      <SearchResult v-if="showResult" class="content mt30" ref="resultRef" :search-params="searchParams" />
    </div>
  </div>
</template>
<script setup lang="ts" name="Retrieval">
import { ref } from "vue";
import { usePageKeepALive } from "@/hooks";
import { Retrieval } from "@/api/interface/index";
import SearchBar from "./components/SeachBar.vue";
import SearchResult from "./components/SearchResult.vue";
const resultRef = ref<typeof SearchResult>();
const showResult = ref(false);
const searchParams = ref({} as Retrieval.ReqRetrievalParams);
const DETAIL_PAGE_ROUTE = "RetrievalDetail";
// 页面缓存
usePageKeepALive([DETAIL_PAGE_ROUTE]);

// 搜索
function searchAction(params: Retrieval.ReqRetrievalParams, show: boolean = true) {
  searchParams.value = params;
  showResult.value = show;
}
// 结果内检索
function resultFilterAcion(params: Retrieval.CommonSearchParams) {
  const list = searchParams.value.generalSearchReqList || [];
  searchParams.value = {
    ...searchParams.value,
    generalSearchReqList: list.concat([params])
  };
}
</script>
<style lang="scss" scoped>
.card {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background-image: url("@/assets/images/retrieval_bg.png");

  // background-size: 100% 100%;
  background-position: left bottom;
  background-origin: content-box;
  background-size: cover;
}
.content {
  flex: 1;
  height: 0;
  background: #ffffff;
}
</style>
