<script setup lang="ts">
import { useRouter } from 'vue-router'
import { get1, get2, get3, get4, getDick, getNews, type NewsData, type NewsResponseData } from '@/api/home'
import { provide, ref } from 'vue'
import { getFileExtension } from '@/utils/getFileExtension'
import { queryFieldMethod } from '@/utils/queryFieldMethod'
import { formatTime } from '../../utils/formatTime'
import CompanyDetailSmallBox from '@/components/CompanyDetailSmallBox.vue'
import Link1 from '@/components/Link1.vue'
import Link2 from '@/components/Link2.vue'

let router = useRouter()

const toDetail = (id:number|undefined)=>{
  if(!id){
    return
  }
  router.push({
    path:'/newsDetail',
    query:{
      id
    }
  })
}
const toLink1 = ()=>{
  window.open("https://www.hhjrfw.com/")
}
const toLink2 = ()=>{
  window.open("https://credit.fgw.hunan.gov.cn/xyd/provincialIndex")
}
// const financialData = ref<NewsData[]>([])
// const financingLoans = ref<NewsData[]>([])
const creditDynamics = ref<NewsData[]>([])
const dickMapAll = ref<Map<string,string>>(new Map());
const data1 = ref();
const data2 = ref();
const data3 = ref();
const data4 = ref();
const companyDetailIsShow = ref(false);
const init =async ()=>{
  const {data} = await getDick()
  const dickMap = data.reduce((acc:Map<string,string>, cur:{dictLabel:string,dictValue:string}) => {
    const key = cur.dictLabel;
    acc.set(key, cur.dictValue);
    return acc;
  },new Map())
  dickMapAll.value = dickMap
  // console.log(dickMap)
  //获取政府项目资金需求 数据
  // const res1 = await getNews(queryFieldMethod('special_column',dickMap.get('政府项目资金需求')))
  // if(res1.code == 200){
  //   financialData.value = res1.data.slice(0,5);
  // }
  //获取园区企业融资贷款 数据
  // const res2 = await getNews(queryFieldMethod('special_column',dickMap.get('园区企业融资贷款')))
  // if(res2.code == 200){
  //   financingLoans.value = res2.data.slice(0,5);
  // }
  //获取通知公告数据
  const res3 = await getNews(queryFieldMethod('special_column',dickMap.get('通知公告')))
  if(res3.code == 200){
    creditDynamics.value = res3.data;
  }
  //获取行政许可 数据
  const res4 = await get1({pageNum:1,pageSize:6})
  data1.value = res4.records.slice(0,6);
  //获取行政处罚 数据
  const res5 = await get2({pageNum:1,pageSize:6})
  data2.value = res5.records.slice(0,6);
  //获取守信红名单 数据
  const res6 = await get3({pageNum:1,pageSize:6})
  data3.value = res6.records.slice(0,6);
  //获取失信黑名单 数据
  const res7 = await get4({pageNum:1,pageSize:6})
  data4.value = res7.records.slice(0,6);
}
const toCompanyList = (n:number)=>{
  router.push({
    path:'/companyList',
    query:{
      n
    }
  })
}
const dialogName = ref('')
const showConpanyDetail = (item:any,method:Function,name:string)=>{
  toCompanyDetailItem.value = item;
  toCompanyDetailItemMethod.value = method;
  dialogName.value = name
  companyDetailIsShow.value = true
}
const toCompanyDetailItem = ref();
const toCompanyDetailItemMethod = ref();
const closeDialog = ()=>{
  toCompanyDetailItem.value = null;
}

provide('isShow',companyDetailIsShow)
provide('name',dialogName)
const complaint = ()=>{
  router.push('/complaint')
}
const leaveMessage = ()=>{
  router.push('/message')
}
const toOrtherLink = ()=>{
  window.open('https://www.creditchina.gov.cn/xyxf/lczy/')
}

init()
</script>

<template>
    <div class="homeContainer relative">
<!--      <div class="fixed right-0px top-10vh w-200px h-500px bg-white flex flex-col">-->
<!--        <div class="w-100% h-50% bg-gray cursor-pointer" @click="leaveMessage">-->
<!--          留言-->
<!--        </div>-->
<!--        <div class="w-100% h-50% bg-red cursor-pointer" @click="complaint">-->
<!--          投诉信息-->
<!--        </div>-->
<!--      </div>-->
      <div class="w-100px h-25px"></div>
      <div class="w-1112px ml-a mr-a flex flex-wrap relative">
        <div class="absolute left--185px top-0px w-170px h-210px bg-white" >
          <div class="mt-20px text-blue text-20px font-bold text-center relative">
            <div class="w-20px h-20px absolute left-23px top-1px"><img class="w-100% h-100%" src="/static/img1.png" /></div>
            留言咨询
          </div>
          <div class="bg-blue h-2px w-80% mr-a ml-a"></div>
          <div class="p-10px pt-20px text-13px line-height-20px pb-50px">你可以通过本平台网站，向管委会和业务主管部门留言和咨询业务</div>
          <div class="bg-blue text-center text-white w-80% mr-a ml-a line-height-30px h-30px rounded-10px cursor-pointer hover:op-70" @click="leaveMessage">进入</div>
        </div>
        <div class="absolute right--185px top-0px w-170px h-210px bg-white" >
          <div class="mt-20px text-blue text-20px font-bold text-center relative">
            <div class="w-20px h-20px absolute left-8px top-0px"><img class="w-100% h-100%" src="/static/img2.png" /></div>
            &nbsp;&nbsp;失信违约投诉
          </div>
          <div class="bg-blue h-2px w-90% mr-a ml-a"></div>
          <div class="p-10px pt-20px text-13px line-height-20px pb-30px">你可以通过本平台的网站对失信违约行为予以投诉，您的个人信息将予以严格保密</div>
          <div class="bg-blue text-center text-white w-80% mr-a ml-a line-height-30px h-30px rounded-10px cursor-pointer hover:op-70" @click="complaint">进入</div>
        </div>
        <div class="absolute right--185px top-277px w-170px h-220px bg-white" >
          <div class="mt-20px text-#ff0000 text-20px font-bold text-center relative">
            <div class="w-20px h-20px absolute left-8px top-0px"><img class="w-100% h-100%" src="/static/img3.png" /></div>
            &nbsp;&nbsp;信用修复服务
          </div>
          <div class="bg-#ff0000 h-2px w-90% mr-a ml-a"></div>
          <div class="p-10px pt-20px text-13px line-height-20px pb-20px">您可以通过本平台的网站进入信用中国网站，请仔细阅读流程指引和修复指南，并严格按要求准备材料。</div>
          <div class="bg-blue text-center text-white w-80% mr-a ml-a line-height-30px h-30px rounded-10px cursor-pointer hover:op-70" @click="toOrtherLink">进入</div>
        </div>
        <div class="w-551px h-256px bg-white mb-20px mr-10px">
          <div class="h-4px bg-blue"></div>
          <div class=" flex justify-between">
            <div class="flex">
              <div class="w-30px h-30px"><img class="w-100% h-100%" src="/static/icon1.png" /></div>
              <div class="text-26px h-34px line-height-34px text-[#ff0000ff] font-550">守信红名单</div>
            </div>
            <div class="text-13px h-20px line-height-30px cursor-pointer" @click="toCompanyList(3)">查看更多 >></div>
          </div>
          <div class="h-2px bg-blue"></div>
          <div class="p-10px flex justify-between cursor-pointer" v-for="(item,index) in data3" :key="index" @click="showConpanyDetail(item,get3,'守信红名单')">
            <div>{{ item.subjectName }}</div>
            <div>{{item.statisticsTime.split('T')[0]}}</div>
          </div>
        </div>
        <div class="w-551px h-256px bg-white mb-20px">
          <div class="h-4px bg-blue"></div>
          <div class=" flex justify-between">
            <div class="flex">
              <div class="w-30px h-30px"><img class="w-100% h-100%" src="/static/icon3.png" /></div>
              <div class="text-26px h-34px line-height-34px text-[#ff0000ff] font-550">行政许可</div>
            </div>
            <div class="text-13px h-20px line-height-30px cursor-pointer" @click="toCompanyList(1)">查看更多 >></div>
          </div>
          <div class="h-2px bg-blue"></div>
          <div class="p-10px flex justify-between cursor-pointer" v-for="(item,index) in data1" :key="index" @click="showConpanyDetail(item,get1,'行政许可')">
            <div>{{item.administrativePartyName}}</div>
            <div>{{item.licenseDecisionDate.split("T")[0]}}</div>
          </div>
        </div>
        <div class="w-551px h-256px bg-white mb-20px mr-10px">
          <div class="h-4px bg-blue"></div>
          <div class=" flex justify-between">
            <div class="flex">
              <div class="w-30px h-30px"><img class="w-100% h-100%" src="/static/icon4.png" /></div>
              <div class="text-26px h-34px line-height-34px text-[#000000ff] font-550">行政处罚</div>
            </div>
            <div class="text-13px h-20px line-height-30px cursor-pointer" @click="toCompanyList(2)">查看更多 >></div>
          </div>
          <div class="h-2px bg-blue"></div>
          <div class="p-10px flex justify-between cursor-pointer" v-for="(item,index) in data2" :key="index" @click="showConpanyDetail(item,get2,'行政处罚')">
            <div>{{item.administrativePartyName}}</div>
            {{item.penaltyDecisionDate.split('T')[0]}}
          </div>
        </div>
        <div class="w-551px h-256px bg-white mb-20px">
          <div class="h-4px bg-blue"></div>
          <div class=" flex justify-between">
            <div class="flex">
              <div class="w-30px h-30px"><img class="w-100% h-100%" src="/static/icon2.png" /></div>
              <div class="text-26px h-34px line-height-34px text-[#000000ff] font-550">信用警示名单</div>
            </div>
            <div class="text-13px h-20px line-height-30px cursor-pointer" @click="toCompanyList(4)" v-if="data4 != 0">查看更多 >></div>
          </div>
          <div class="h-2px bg-blue"></div>
          <div>
            <div class="p-10px flex justify-between cursor-pointer" v-for="(item,index) in data4" :key="index" @click="showConpanyDetail(item,get4,'行政处罚')">
              <div>{{item.enterpriseName}}</div>
              {{item.filingTime.split('T')[0]}}
            </div>
          </div>
        </div>
      </div>
      <div style="background-image:url('static/bg1.jpg');" class="w-1112px h-100px mr-a ml-a text-white  bg-white mt-10px bg-cover text-50px blod text-center line-height-90px cursor-pointer mb-25px hover:scale-120 duration-200" @click="toLink2">
        湖南省企业融资综合信用服务平台
      </div>
      <div style="background-image:url('static/bg2.jpg');" class="w-1112px h-100px mr-a ml-a  text-white bg-white mt-10px bg-cover text-50px blod text-center line-height-90px cursor-pointer mb-25px hover:scale-120 duration-200" @click="toLink1">
        怀化市综合金融服务平台
      </div>
      <Link1></Link1>
      <Link2></Link2>
      <div class="w-1112px ml-auto mr-auto mt-20px mb-20px bg-white">
        <div class="w-1112px text-16px mt-12px mb-10px line-height-44px border-dashed border-#e5e5e5 border-b-5px">
          <div class="w-140px border-solid border-#00306e border-b-5px relative">
            <img class="w-21px h-21px m-3px " src="/src/assets/img/信用小图标.png" />
            <span class="color-#003aac text-16px">园区动态通告</span>
            <span class="absolute right--935px top-3px cursor-pointer text-#959595" @click="$router.push('/about')">查看更多 ></span>
          </div>
        </div>
        <div class="w-100% overflow-auto h-500px">
          <div v-for="(item,index) in creditDynamics" :key="index" @click="toDetail(item.id)" class="cursor-pointer">
            <div class="flex justify-between">
              <div class="mt-24px ml-24px color-black flex">
                <div class="text-16px mr-10px">{{item.title}}</div>
                <!--                <div class="text-13px rounded-5 p-3px border-solid border-1px border-#ff9900 color-#ff9900 ">文本服务</div>-->
              </div>
              <div class="color-#858585 text-13px pt-23px mr-24px">{{item.dataSource}}|{{formatTime(item.date)}}</div>
            </div>
            <div class="mt-13px w-1064px ml-auto mr-auto line-clamp-3 text-13px line-height-23px" v-html="item.content"></div>
            <div class="h-1px bg-#e9e9e9 mt-20px"></div>
          </div>
        </div>
      </div>
      <div class="h-20px "></div>
      <company-detail-small-box @closeDialog="closeDialog" :item="toCompanyDetailItem" :getItemDetailMethod="toCompanyDetailItemMethod" />
    </div>
</template>

<style scoped lang="scss">
.homeContainer{
  background-color: #ecf0f9;
}
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background-color: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.5);
  background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.4);
}

::-webkit-scrollbar-button {
  display: none;
}

</style>
