<script setup lang="ts">
import { useRouter } from 'vue-router'
import { ref } from 'vue'
import { getDick, getNews, type NewsData, type NewsResponseData } from '@/api/home'
import { queryFieldMethod } from '@/utils/queryFieldMethod'
import { formatTime } from '@/utils/formatTime'
import { getFileExtension } from '@/utils/getFileExtension'
import NewDynamics from '@/components/NewDynamics.vue'

const router = useRouter();
const dickMapAll = ref<Map<string,string>>(new Map());

const toNewsDetail = (id:number|undefined)=>{
  if(!id){
    return
  }
  router.push({
    path:'/newsDetail',
    query:{
      id
    }
  })
}
const BASE_URL = import.meta.env.VITE_APP_BASE_URL
const bigNewsData = ref<NewsData[]>();
const inDynamicsData = ref<NewsData[]>([]);
const outDynamicsData = ref<NewsData[]>([]);
const currentCityDynamicsData = ref<NewsData[]>([]);
const parkDynamicsData = ref<NewsData[]>([]);
const creditDynamicsList = ref<NewsData[]>([]);
const init = async ()=>{
  const {data} = await getDick()
  dickMapAll.value = data.reduce((acc: Map<string, string>, cur: { dictLabel: string, dictValue: string }) => {
    const key = cur.dictLabel;
    acc.set(key, cur.dictValue);
    return acc;
  }, new Map())
  const res:NewsResponseData = await getNews(queryFieldMethod('special_column','big_news'))
  if(res.code === 200){
    bigNewsData.value = res.data;
    console.log(bigNewsData.value)
  }
  const res1 = await getNews(queryFieldMethod('special_column','provincialDynamics'))
  if(res1.code === 200){
    inDynamicsData.value = res1.data.slice(0,3);
  }
  const res2 = await getNews(queryFieldMethod('special_column','outsideProvincialDynamics'))
  if(res2.code === 200){
    outDynamicsData.value = res2.data.slice(0,3);
  }
  const res3 = await getNews(queryFieldMethod('special_column','currentCityDynamics'));
  if(res3.code === 200){
    currentCityDynamicsData.value = res3.data.slice(0,3);
  }
  const res4 = await getNews(queryFieldMethod('special_column','parkDynamics'));
  if(res4.code === 200){
    parkDynamicsData.value = res4.data.slice(0,3);
  }
  const res5 = await getNews(queryFieldMethod('special_column','credit_dynamics'));
  if (res5.code == 200){
    creditDynamicsList.value = res5.data;
  }
}
const knowMore = (dickMapKey:string|undefined,dickMapValue:string|undefined)=>{
  router.push({
    path:'/creditDynamicsDetail',
    query:{
      dickMapKey,
      dickMapValue
    }
  });
}
const computeImgUrl = (files:FileType[])=>{
  return BASE_URL + files.filter(item=>{
    return getFileExtension(item.fileUrl) == 'png'||getFileExtension(item.fileUrl) == 'jpg'
  })?.[0]?.fileUrl
}
init()
</script>

<template>
  <div class="creditDynamicsContainer">
    <div class="w-912px ml-auto mr-auto pt-20px mb-20px text-14px">
      你所在的位置：<span class="cursor-pointer"  @click="$router.push('/home')" >首页</span> > <span class="color-#006eff">信用动态</span>
    </div>
    <div class="w-912px ml-auto mr-auto mt-20px pb-54px ">
      <el-carousel :interval="5000" arrow="always">
        <el-carousel-item v-for="(item,index) in bigNewsData" :key="index">
          <div class="flex">
            <div class="w-562px h-288px">
              <img class="w-100% h-100%" :src="computeImgUrl(item.files)">
            </div>
            <div class="w-350px h-288px p-22px bg-white bg-opacity-90">
              <div class="w-302px h-44px mb-12px bold text-22px line-height-22px line-clamp-2">{{item.title}}</div>
              <div class="w-302px h-156px mb-17px line-clamp-6 line-height-23px overflow-hidden text-13px">{{item.content}}</div>
              <div class="flex justify-between">
                <div class="text-left text-#858585 text-13px" >{{formatTime(item.date)}}</div>
                <div class="color-006eff cursor-pointer" @click="toNewsDetail(item.id)">了解更多 ></div>
              </div>
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="w-912px ml-auto mr-auto flex">
      <div class="w-603px flex flex-wrap">
        <div class="w-294px bg-white rounded-10px mr-15px mb-15px p-10px">
          <div class="w-117px border-solid border-#003aac border-b-3px h-32px relative">
            <img src="/src/assets/img/小图标1.png" />
            <span class="text-#003aac text-16px font-bold ">省内动态</span>
            <span class="absolute right--150px top-10px text-#006eff text-14px cursor-pointer" @click="knowMore(dickMapAll.get('省内动态'),'省内动态')">查看更多> </span>
          </div>
          <div class="mt-25px mb-20px line-clamp-1">聚焦省内</div>
          <div class="w-266px mr-auto ml-auto h-138px m-9px pb-20px">
            <img class="w-100% h-100%" src="/src/assets/img/首页背景.png" />
          </div>
          <div v-for="(item,index) in inDynamicsData" :key="index" @click="toNewsDetail(item.id)" class="cursor-pointer">
            <div class="w-100% h-1px bg-#e9e9e9"></div>
            <div class="w-266px line-clamp-1 text-13px mt-20px">{{item.title}}</div>
            <div class="text-left text-#858585 text-13px mt-9px mb-13px" >{{item.createBy}}|{{formatTime(item.date)}}</div>
          </div>
        </div>
        <div class="w-294px bg-white rounded-10px mb-15px p-10px">
          <div class="w-117px border-solid border-#003aac border-b-3px h-32px relative">
            <img src="/src/assets/img/小图标2.png" />
            <span class="text-#003aac text-16px font-bold ">省外动态</span>
            <span class="absolute right--150px top-10px text-#006eff text-14px cursor-pointer" @click="knowMore(dickMapAll.get('省外动态'),'省外动态')">查看更多> </span>
          </div>
          <div class="mt-25px mb-20px line-clamp-1">聚焦省外动态</div>
          <div class="w-266px mr-auto ml-auto h-138px m-9px pb-20px">
            <img class="w-100% h-100%" src="/src/assets/img/首页背景.png" />
          </div>
          <div v-for="(item,index) in outDynamicsData" :key="index" @click="toNewsDetail(item.id)" class="cursor-pointer">
            <div class="w-100% h-1px bg-#e9e9e9"></div>
            <div class="w-266px line-clamp-1 text-13px mt-20px">{{item.title}}</div>
            <div class="text-left text-#858585 text-13px mt-9px mb-13px" >{{item.createBy}}|{{formatTime(item.date)}}</div>
          </div>
        </div>
        <div class="w-294px bg-white rounded-10px mr-15px mb-15px p-10px">
          <div class="w-117px border-solid border-#003aac border-b-3px h-32px relative">
            <img src="/src/assets/img/小图标3.png" />
            <span class="text-#003aac text-16px font-bold ">本市动态</span>
            <span class="absolute right--150px top-10px text-#006eff text-14px cursor-pointer" @click="knowMore(dickMapAll.get('本市动态'),'本市动态')">查看更多> </span>
          </div>
          <div class="mt-25px mb-20px line-clamp-1">聚焦本市动态</div>
          <div class="w-266px mr-auto ml-auto h-138px m-9px pb-20px">
            <img class="w-100% h-100%" src="/src/assets/img/首页背景.png" />
          </div>
          <div v-for="(item,index) in currentCityDynamicsData" :key="index" @click="toNewsDetail(item.id)" class="cursor-pointer">
            <div class="w-100% h-1px bg-#e9e9e9"></div>
            <div class="w-266px line-clamp-1 text-13px mt-20px">{{item.title}}</div>
            <div class="text-left text-#858585 text-13px mt-9px mb-13px" >{{item.createBy}}|{{formatTime(item.date)}}</div>
          </div>
        </div>
        <div class="w-294px bg-white rounded-10px mb-15px p-10px">
          <div class="w-117px border-solid border-#003aac border-b-3px h-32px relative">
            <img src="/src/assets/img/小图标4.png" />
            <span class="text-#003aac text-16px font-bold ">园区动态</span>
            <span class="absolute right--150px top-10px text-#006eff text-14px cursor-pointer" @click="knowMore(dickMapAll.get('园区动态'),'园区动态')">查看更多> </span>
          </div>
          <div class="mt-25px mb-20px line-clamp-1">聚焦园区动态</div>
          <div class="w-266px mr-auto ml-auto h-138px m-9px pb-20px">
            <img class="w-100% h-100%" src="/src/assets/img/首页背景.png" />
          </div>
          <div v-for="(item,index) in parkDynamicsData" :key="index" @click="toNewsDetail(item.id)" class="cursor-pointer">
            <div class="w-100% h-1px bg-#e9e9e9"></div>
            <div class="w-266px line-clamp-1 text-13px mt-20px">{{item.title}}</div>
            <div class="text-left text-#858585 text-13px mt-9px mb-13px" >{{item.createBy}}|{{formatTime(item.date)}}</div>
          </div>
        </div>
      </div>
      <div class="w-294px bg-white bg-opacity-90 ml-15px rounded-10px">
        <NewDynamics />
      </div>
    </div>
  </div>
</template>

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