<template>
  <div class="search-result clear">


    <div class="nav-search">
      <div class="search-header">
        <div class="bread-crumbs">
          <router-link to="/research" class="link">Research ></router-link>
          <span >{{ store.state.searchVal }}</span>
        </div>
        <div>
          <img class="close" @click="router.go(-1)" style="cursor:pointer;" src="/images/search_close.svg" alt="The image cannot be displayed properly">
        </div>
      </div>
      <div class="search-input">
        <img class="ipt-search" src="/images/search.svg" alt="The image cannot be displayed properly"
             @click="toSearch(search, 'search')">
        <input class="search-ipt" ref="maskSearch1" maxlength="100" type="text" placeholder="Search" v-model="search"
          @click="showMask" @input="onInput" @keydown.enter="toSearch(search, 'search')" />
        <img class="close" @click="handleClose" style="cursor:pointer;" src="/images/search_close.svg" alt="The image cannot be displayed properly">
      </div>
    </div>

    <!-- 结果数量 -->
    <div class="result-mun">
      {{ total ? `${total} search results` : `There are no results for the search term "${search}"` }}
    </div>

    <!-- 搜索结果 -->
    <div class="result-contnet container">
      <template v-for="(item) in tipList" :key="item.id">
        <ResearchComVue :data="item" :type="'searchResult'" :isMid="isMid" :isSma="isSma" />
      </template>
    </div>

    <!-- 分页 -->
    <div class="container pagination" v-show="tipList.length">
      <PaginationComVue :page="page" @changePage="changePage" :total="total" :per="per" />
    </div>

  </div>
<!--  <div class="mask" v-show="isMask">
    <div class="mask-content">
      <div class="search-mask">
        <div class="search-input">
          <input class="search-ipt" ref="maskSearch2" maxlength="100" type="text" placeholder="Search" v-model="search"
            autofocus @input="onInput" @focus="showMask"
            @keydown.enter="toSearch(search, 'search')" />
          <img class="ipt-search" src="/images/search.svg" alt="The image cannot be displayed properly"
            @click="toSearch(search, 'search')">
        </div>
        <div class="tip-msg" @click="isInput = false">
          <ul v-show="tipList.length">
            <li class="search-result tip-active" v-for="msg in tipList" :key="msg" @click="toSearch(msg, 'result')">
              <span v-html="msg.title"></span>
            </li>
          </ul>
          <div class="no-result" v-show="isInput && !tipList.length && search">
            {{ noResult }}
          </div>
        </div>
      </div>
    </div>
  </div> -->
</template>

<script setup>
import ResearchComVue from '../components/ResearchCom.vue';
import PaginationComVue from '../components/PaginationCom.vue';
import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
import { useStore } from 'vuex';
// import { searchResult } from '../assets/datas/searchResultData';
import { isTrue } from '../utils/tools'
import {searchTitleApi} from "../api/research.js";


const router = useRouter()
const searchResult = ref([])
const emit = defineEmits(['backTop'])
// vuex store
const store = useStore();

// 是否为中等屏幕 或 小屏幕
const isMid = ref(false);
const isSma = ref(false);

// 是否展示遮罩层
const isMask = ref(false);

// 遮罩层输入框
// const maskSearch1 = ref(null);
const maskSearch2 = ref(null);

// 判断是否在输入
const isInput = ref(false);

// 提示信息列表
const tipList = ref([])

const noResult = ref('')

// 数据总数 Total databases count
let total = ref(0);
// 页码 page number
let page = ref(1);
// 每页显示数量  displays the number per page
let per = ref(10);

// 搜索结果列表
const resultList = ref([])
const search = ref(store.state.searchVal);

// 从搜索栏进入到搜索详情
onMounted(() => {

  // 窗口大小改变时触发
  function changeSize() {
    const pageSize = window.innerWidth;
    if (pageSize >= 1440) {
      isSma.value = false;
      isMid.value = false;
    } else if (pageSize > 430 && pageSize < 1440) {
      isSma.value = false;
      isMid.value = true;
    } else if (pageSize <= 430) {
      isSma.value = true;
      isMid.value = false;
    }
  }
  changeSize()
  window.onresize = changeSize

  // onSearch(search.value)
  getSearchTitle()
  window.addEventListener('keydown', (e)=> {
    if (e.keyCode === 27) {
      isMask.value = false;
    }
  })
})

// 展示遮罩层
const showMask = () => {
  // isMask.value = true
  // isTrue(isMask.value).then(() => {
  //   maskSearch2.value.focus();
  // })
}

// 修改页码
const changePage = (data) => {
  page.value = data
  tipList.value = tipList.value.slice((page.value - 1) * per.value, page.value * per.value);
  // onSearch(search.value)
  getSearchTitle()
}

// 搜索获取数据
const onSearch = (reg) => {
  isMask.value = false;
  resultList.value = []
  const resultReg = new RegExp(reg, 'gi');
  if (search.value) {
    searchTitleApi({
      keyword: search.value,
      page: 1,
      limit: 100000,
    }).then(res=>{
      if (res.data) {
        searchResult.value = res.data.research.data;
        searchResult.value.forEach((item) => {
          const result = resultReg.exec(item.title);
          if (result) {
            resultList.value.push({ ...item, title: item.title && item.title.replace(resultReg, `<span style="background-color: rgba(255, 109, 0, 0.2);">${result[0]}</span>`) })
          }
        })
        // total.value = res.data.length
        // resultList.value = resultList.value.slice((page.value - 1) * per.value, page.value * per.value);
        emit('backTop');
      }
    })


  }
}

// 输入时触发
const onInput = () => {
  isInput.value = true;
  // store.commit('changeSearchVal', search.value)
  // 发虚拟请求
  // issue a request

  // 正则表达式匹配搜索字符
  // The regular expression matches the search character
  // const searchReg = new RegExp(search.value, 'gi');
  // 清空搜索结果重新进行
  // Clear the search results and start again
  // if (search.value) {
  //   tipList.value = [];
  //   page.value = 1;
  //   per.value = 10
  //   getSearchTitle()
  // }
}

// 搜索结果
const toSearch = (msg, type) => {
  if (msg) {
    switch (type) {
      case 'search':
        store.commit('changeSearchVal', search.value);
        break;
      case 'result':
        search.value = msg.t
        store.commit('changeSearchVal', msg.t);
        break;
      default:
        break;
    }
    // isInput.value = false

    onSearch(search.value)
  } else {
    alert('Please enter the content')
  }
}


const handleClose= ()=>{
  search.value = ''
}



const getSearchTitle = ()=>{
  const searchReg = new RegExp(search.value, 'gi');
  searchTitleApi({
    keyword: search.value,
    page: 1,
    limit: 100000,
  }).then(res=>{
    total.value = 0
    res.data.research.data.forEach(item=>{
      const result = searchReg.exec(item.title);
      console.log(result)
      if (result) {
        const resultMsg = result['input'].replace(searchReg, `<span style="color:#ff6d00">${result[0]}</span>`)
        tipList.value.push({...item, t: item.title, title: resultMsg,  });
      }
    })
    total.value = tipList.value.length

    tipList.value = tipList.value.slice((page.value - 1) * per.value, page.value * per.value);
    if (!tipList.value.length) {
      noResult.value = `There are no results for the search term "${search.value}"`;
    }
  })
}


</script>

<style lang="scss" scoped>
::v-deep .van-search {
  padding: 0;

  .van-field__clear {
    margin-right: 5Px;
  }
}

.nav-search,
.search-mask {
  max-width: 1000px;
  margin: 12px auto;
  padding: 0 24px;
  position: relative;

  @media screen and (min-width: 1440Px) and (max-width: 100vw) {
    padding: 24px 48px !important;
    padding-top: 0 !important;
  }

  .search-input {
    width: 100%;
    height: 48px;
    line-height: 48px;
    background: #F9F9F9;
    border-radius: 50px;
    padding: 0 20px;
    position: relative;

    .search-ipt {
      width: 90%;
      font-size: 16px;
      margin: 0 auto;
      background-color: transparent;
      border: none;
      outline: none;
      position: absolute;
      left: 60px;
    }

    .search-ipt::placeholder {
      font-family: 'Raleway';
      font-style: normal;
      font-weight: 400;
      font-size: 16px;
      line-height: 24px;
      color: #B6BFC7;
    }

    .ipt-search {
      width: 18px;
      height: 18px;
      position: absolute;
      left: 20px;
      top: 50%;
      transform: translateY(-50%);
    }
    .close  {
      width: 14px;
      position: absolute;
      right: 20px;
      top:50%;
      transform: translateY(-50%);
    }
  }

  .tip-msg {
    display: block !important;
    position: absolute;
    left: 0;
    background-color: #f5f5f5;
    width: 100%;
    margin: 0 auto;
    height: 420px;
    padding: 24px 26px;
    overflow-y: scroll;
    z-index: 99;

    @media screen and (max-width: 431Px) and (min-width: 0Px) {
      padding: 24px 24px !important;
    }

    @media screen and (min-width: 1440Px) and (max-width: 100vw) {
      padding: 24px 40px !important
    }

    .search-result {
      width: 100%;
      height: 56px;
      font-family: 'Libre Bodoni';
      font-style: normal;
      font-weight: 400;
      font-size: 16px;
      line-height: 56px;
      color: #000000;
      padding: 0 16px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    .no-result {
      font-family: 'Libre Bodoni';
      font-style: normal;
      font-weight: 400;
      font-size: 16px;
      color: #000000;
      padding: 0 16px;
    }

    .search-result:hover {
      color: #FF6D00;
      background: rgba(255, 109, 0, 0.1);
    }
  }

  .tip-msg::-webkit-scrollbar {
    display: none;
    /* Chrome Safari */
  }
}

.nav-search {
  .search-header {
    display: flex;
    justify-content: space-between;
    .close {
      width: 14px;
    }
  }
  .bread-crumbs {
    margin-bottom: 30px;
    font-size: 18px;
    .link {
      color: rgba(0,0,0,.5)
    }
    span {
      margin-left: 5px;
    }
  }
  .search-ipt {
    width: 100%;
    margin: 0 auto !important;
  }
}

.search-result {
  max-width: 1000px;
  margin: 0 auto;
  padding-bottom: 24px;
  position: relative;

  .result-mun {

    font-family: 'Raleway';
    font-style: normal;
    font-weight: 900;
    font-size: 14Px;
    line-height: 21px;

    color: rgba(0, 0, 0, 0.75);
    padding: 12px 36px 12px;

    @media screen and (min-width:1440Px) and (max-width: 100vw) {
      padding: 20px 52px 0px !important;
    }

    @media screen and (min-width: 0Px) and (max-width: 431Px) {
      padding: 12px 24px 0px;
    }
  }

  .result-contnet {
    min-height: 100vh;
  }

  .pagination {
    float: right;
    margin: 20px 0px 20px;

    @media screen and (min-width:1440Px) and (max-width: 100vw) {
      padding-top: 0 !important;
      margin: 0px 0px 36px !important;
    }

    @media screen and (min-width:0Px) and (max-width: 431Px) {
      padding-top: 0px !important;
      margin: 0 0 20px !important;
    }
  }
}

.mask {
  width: 100%;
  height: calc(100% - 80px);
  background-color: #00000080;
  position: fixed;
  top: 80px;
  left: 0;
  z-index: 98;

  .mask-content {
    width: 100%;
    background-color: #f5f5f5;
    padding: 0;
    margin: 0;
    padding-top: 36px;
    min-height: 530px;
  }

  .search-mask {
    margin: 0 auto;
  }
}
</style>
