<template>
  <div class="searchPage">
    <div class="headerBox">
      <header class="header">
        <div class="logo" @click="goHome">
          <img class="logonImg" src="@/assets/logo/login.jpg" alt="" />
          <img class="logonText" src="@/assets/logo/title_ls.png" alt="" />
        </div>
        <div class="searchBox">
          <el-input
            clearable
            size="large"
            placeholder="请输入搜索词"
            v-model="searchData.title"
            @keyup.enter="searchFun"
          />
          <el-button size="large" type="primary" @click="searchFun"
            >搜索</el-button
          >
          <el-button
            link
            size="large"
            type="primary"
            v-if="moreSearch"
            @click="moreSearch = !moreSearch"
            >高级检索</el-button
          >
        </div>
      </header>
      <!-- 高级搜索 -->
      <el-collapse-transition>
        <div class="moreSearch" v-show="moreSearch">
          <el-form ref="ruleFormRef" label-width="180" :model="searchData">
            <el-form-item label="搜索以下关键词">
              <el-input clearable v-model="searchData.key" />
            </el-form-item>
            <el-form-item label="搜索位置">
              <el-radio-group v-model="searchData.position">
                <el-radio label="1">标题</el-radio>
                <el-radio label="2">正文</el-radio>
                <el-radio label="3">标题或正文</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="不包含以下关键词">
              <el-input clearable v-model="searchData.excludeKey" />
            </el-form-item>
            <el-form-item label="时间范围">
              <el-radio-group v-model="searchData.date">
                <el-radio label="all">全部时间</el-radio>
                <el-radio label="date">最近一天</el-radio>
                <el-radio label="weeks">最近一周</el-radio>
                <el-radio label="month">最近一月</el-radio>
                <el-radio label="year">最近一年</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="排序方式">
              <el-radio-group v-model="searchData.sort">
                <el-radio label="1">时间排序</el-radio>
                <el-radio label="2">智能排序</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-form>
          <div class="btnBox">
            <el-button size="small" type="primary">搜索</el-button>
          </div>
        </div>
      </el-collapse-transition>
      <div class="navBox">
        <div class="navList">
          <span>全部</span>
        </div>
      </div>
    </div>
    <div class="resultBox">
      <div class="conent">
        <div class="totalBox">
          为您找到<span class="red">{{ searchData.title }}</span
          >关结果约<span class="red">{{ searchData.total }}</span
          >个。
        </div>
        <div
          class="result"
          v-for="item in articeList"
          :key="item.create_time"
          @click="columnEvent(item)"
        >
          <a class="title">{{ item.title }}</a>
          <p>{{ item.nr }}</p>
          <div class="info">
            <!-- <span class="url"
              >http://fgw.qinghai.gov.cn/zfxxgk/jjzn/bmgljg/qhslsj/znjj/202211/t20221117_83102.html</span
            > -->
            <span class="date">{{ item.create_time }}</span>
          </div>
        </div>
        <div class="sortBox" v-if="moreSearch">
          <span
            data-key="relevancy"
            :class="{ active: checkSortKey == 'relevancy' }"
            @click="sortCheck"
            >按相关度排序</span
          >
          <span
            data-key="date"
            :class="{ active: checkSortKey == 'date' }"
            @click="sortCheck"
            >按时间排序</span
          >
        </div>
      </div>
      <div class="history" v-if="moreSearch">
        <span class="title">历史记录</span>
        <ul>
          <li>粮食</li>
          <li>收购价</li>
          <li>小麦</li>
        </ul>
      </div>
    </div>
    <div class="paginationBox">
      <el-pagination
        :total="searchData.total"
        :page-size="searchData.size"
        @size-change="handleSizeChange"
        :page-sizes="[100, 200, 300, 400]"
        :currentPage="searchData.current"
        @current-change="handleCurrentChange"
        layout="total, sizes, prev, pager, next, jumper"
      />
    </div>
  </div>
</template>
<script setup>
import { ref, reactive, onMounted } from "vue";
import "@/style/search/index.less";
import api from "@/api/homeApi.js";
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const route = useRoute();
const ruleFormRef = ref();
const articeList = ref([]);
const checkSortKey = ref("relevancy");
const moreSearch = ref(false); // 显示高级搜索
const searchData = reactive({
  total: 0,
  title: "",
  size: 10,
  current: 1,
  isValid: 1,
});

onMounted(() => {
  urlSearch();
});

// 从地址栏跳转过来的查询
function urlSearch() {
  const value = route.query.value;
  if (value) {
    searchData.title = value;
    searchFun();
  }
}

function searchFun() {
  let fromData = new FormData();
  fromData.append("size", searchData.size);
  fromData.append("isValid", searchData.isValid);
  fromData.append("current", searchData.current);
  fromData.append("title", searchData.title);
  api.fullTextSearch(fromData).then((res) => {
    if (res.code == 200) {
      searchData.size = res.data.size;
      searchData.total = res.data.total;
      articeList.value = res.data.records;
      searchData.current = res.data.current;
    }
  });
}

function goHome() {
  router.push({ path: "/home" });
}

function columnEvent(data) {
  //定义一个路径
  let href = router.resolve({
    path: "/articleDetails",
    query: { type: data.type, id: data.id },
  }).href;
  //打开新的页面 到 href 这个页面
  window.open(href, "_blank");
}

// 排序
function sortCheck(el) {
  checkSortKey.value = el.target.getAttribute("data-key");
}

// 切换页数
function handleCurrentChange(val) {
  searchData.current = val;
  searchFun();
}
// 改变条数
function handleSizeChange(val) {
  searchData.size = val;
  searchFun();
}
</script>
