<script setup lang="ts">
import { useRoute, useRouter } from 'vue-router'
import { onBeforeUnmount, watch } from 'vue'
import {
  getSearchDataResult,
  type NewsDataResult,
  type SearchDataList,
  type SearchDataResult
} from '@/views/search/type'
import {ref} from 'vue'
import { useSearchStore } from '@/stores/searchStore'
import SmallSearch from '@/components/SmallSearch.vue'
import NewDynamics from '@/components/NewDynamics.vue'
const searchStore = useSearchStore();

const router = useRouter()
const route = useRoute()
const lock = ref(false);
const searchResult = ref<any>();
const pageNum = ref(1);
const pageSize = ref(10);
const total = ref(0);
const chartData = ref<any>();
const searchData = async ()=>{
  // console.log(lock.value)
  if (lock.value) {
    console.log('搜索操作已经在进行中，忽略重复触发');
    return;
  }
  try {
    lock.value = true;
    const res = await getSearchDataResult(pageNum.value,pageSize.value,route.query.searchModule as string,route.query.value as string);
    if(res && route.query.searchModule != '2'){
      total.value = res.total;
      searchResult.value = res.records;
    }
    if(res && route.query.searchModule == '2'){
      total.value = res.total;
      chartData.value = res.records;
    }

  } catch (e) {
    console.error('获取搜索数据时发生错误:', e);
  } finally {
    lock.value = false;
  }
}
let timer = setInterval(()=>{
  lock.value = false;
},1000)
onBeforeUnmount(()=>{
  clearInterval(timer)
})
const setSearchModule = ()=>{
  // searchStore.searchModule = route.query.searchModule;
  searchData()
}
const setSearchValue = ()=>{
  // searchStore.value = route.query.value;
  searchData()
}
const init = ()=>{
  searchData()
}
const handleChange = ()=>{
  searchData()
}
const toNewsDetail = (id:number|undefined)=>{
  if(!id){
    return
  }
  router.push({
    path:'/newsDetail',
    query:{
      id
    }
  })
}
const toCompanyDetail = (id:number|undefined)=>{
  router.push({
    path:'/companyDetail',
    query:{
      id
    }
  })
}
const knowMore = (dickMapKey:string|undefined,dickMapValue:string|undefined)=>{
  router.push({
    path:'/creditDynamicsDetail',
    query:{
      dickMapKey,
      dickMapValue
    }
  });
}

init()
watch(()=>route.query.searchModule,setSearchModule,{immediate:true})
watch(()=>route.query.value,setSearchValue,{immediate:true})
</script>

<template>
  <div class="aboutContainer">
    <div class="w-912px ml-auto mr-auto pt-20px mb-20px text-14px">
      你所在的位置：<span class="cursor-pointer">首页</span> > <span class="color-#006eff">搜索</span>
    </div>
    <div class="w-912px ml-auto mr-auto pt-20px mb-20px text-14px">
      <div><span v-if="route.query.value">你当前搜索的关键词是：</span> <span class="color-#ff9900">{{route.query.value}}</span>一共有：<span class="color-#ff9900">{{total}}</span>条数据</div>
    </div>
<!--    <div class="w-912px ml-auto mr-auto pt-20px mb-20px text-14px">-->
<!--      <div class="relative">-->
<!--        排序： <span class="color-#006eff">时间</span>-->
<!--        <div class="absolute left-55px top-10px">-->
<!--          <svg xmlns="http://www.w3.org/2000/svg" width="6" height="6" viewBox="0 0 24 24">-->
<!--            <polygon points="12,0 24,24 0,24" fill="#006eff"/>-->
<!--          </svg>-->
<!--        </div>-->
<!--      </div>-->
<!--    </div>-->
    <div class="flex justify-between w-912px mr-a ml-a">
      <div class="w-603px pl-24px pr-24px pt-30px text-black bg-white">
        <div  v-if="route.query.searchModule != '2'">
          <div v-for="(item,index) in searchResult" :key="index" @click="toCompanyDetail(item.id)" class="cursor-pointer">
            <div class="text-16px">{{item.enterpriseName}}</div>
            <div class="text-13px h-30px line-height-30px text-#464646 line-clamp-1 mt-8px">
              统一社会信用代码:{{item.unifiedSocialCreditCode}}
            </div>
            <!--          <div class="flex justify-between">-->
            <!--            <div class="flex mt-15px">-->
            <!--              <div class="text-13px rounded-5 p-3px border-solid border-1px border-#ff9900 color-#ff9900 ">文本服务-->
            <!--              </div>-->
            <!--              <div class="text-13px rounded-5 p-3px ">文本服务</div>-->
            <!--              <div class="text-13px rounded-5 p-3px ">文本服务</div>-->
            <!--              <div class="text-13px rounded-5 p-3px ">文本服务</div>-->
            <!--            </div>-->
            <!--            <div class="mt-15px text-#858585 text-13px">-->
            <!--              <div class="text-13px">文本|9999/99/99</div>-->
            <!--            </div>-->
            <!--          </div>-->
            <div class="h-1px bg-#e9e9e9 mt-10px mb-24px"></div>
          </div>
        </div>
        <div  v-if="route.query.searchModule == '2'">
          <div v-for="(item,index) in chartData" :key="index" class="cursor-pointer" @click="toNewsDetail(item.id)">
            <div class="text-16px">{{item.title}}</div>
            <div class="text-13px h-30px line-height-30px text-#464646 line-clamp-1 mt-8px">
              {{item.content}}
            </div>
            <div class="h-1px bg-#e9e9e9 mt-10px mb-24px"></div>
          </div>
        </div>
        <div class="ml-120px mt-20px">
          <div class="example-pagination-block">
            <el-pagination
              layout="prev, pager, next, total"
              v-model:pageSize = pageSize
              v-model:currentPage = pageNum
              :total="total"
              @change = handleChange
            />
          </div>
        </div>
      </div>
      <div class="w-294px">
        <SmallSearch />
        <div class="bg-white">
          <div class="w-117px border-solid border-#003aac border-b-3px h-32px">
            <img src="/src/assets/img/小图标1.png" />
            <span class="text-#003aac text-16px font-bold ">通知公告</span>
          </div>
          <div class="mt-20px ml-10px flex flex-wrap w-100%">
            <div class="m-10px text-12px color-#030303 w-118px h-52px line-height-52px bg-#cce2ff text-center cursor-pointer" @click="knowMore('provincialDynamics','省内动态')">省内公告</div>
            <div class="m-10px text-12px color-#030303 w-118px h-52px line-height-52px bg-#ecf4ff text-center cursor-pointer" @click="knowMore('outsideProvincialDynamics','省外动态')">省外公告</div>
            <div class="m-10px text-12px color-#030303 w-118px h-52px line-height-52px bg-#cce2ff text-center cursor-pointer" @click="knowMore('currentCityDynamics','本市动态')">本市公告</div>
            <div class="m-10px text-12px color-#030303 w-118px h-52px line-height-52px bg-#ecf4ff text-center cursor-pointer" @click="knowMore('parkDynamics','园区动态')">园区公告</div>
          </div>
        </div>
        <NewDynamics />
      </div>
    </div>
  </div>
</template>

<style scoped>
.aboutContainer {
  background-color: #ecf0f9;
}
</style>
