<template>
  <div class="pr-8">
    <d-card shadow="never" class="mt-10 bg-white">
      <template #title>
        <div class="flex items-center">
          <icon-time class="w-5 mr-2"></icon-time>
          时间日期
        </div>
      </template>
      <template #content>
        <div class="w-full text-center text-[#ec66ab] font-500 text-4xl font-[yj]">{{ t }}</div>
        <div class="mt-3 text-right">{{ d }}</div>
      </template>
    </d-card>

    <d-card shadow="never" class="mt-10 bg-white">
      <template #title>
        <div class="flex items-center">
          <icon-date class="w-5 mr-2"></icon-date>
          农历节气
        </div>
      </template>
      <template #content>
        <div class="w-full text-center text-[#ec66ab] font-500">{{ jq.yearTips }}年 {{ jq.lunarCalendar }}</div>
        <div class="w-full flex justify-center">
          <img class="mt-2 w-[90%] rounded" :src="jqImg" alt=""></img>
        </div>
        <div class="mt-2 text-center">{{ jq.solarTerms }}</div>
      </template>
    </d-card>

    <d-card shadow="never" class="mt-10 bg-white">
      <template #title>
        <div class="flex items-center">
          <icon-news class="w-5 mr-2"></icon-news>
          百度新闻
        </div>
      </template>
      <template #content>
        <div class="py-1" v-for="i in bdNews" :key="i.id">
          <a class="devui-link flex justify-between" :href="i.url" target="_blank">
            <span>{{ i.index }}. {{ i.title }}
              <icon-hot v-show="i.index < 4" class="w-4 text-[#ec66ab] inline-block"></icon-hot>
            </span>
            <span class="text-primary">{{ i.hot }}</span>
          </a>
        </div>
        <div class="mt-2 justify-between flex items-center">

          <div class="w-2/5 h-px bg-[#ec66ab]"></div>
          <a class="devui-link text-[#ec66ab] flex items-center" href="https://www.baidu.com/s?ie=utf-8&wd=百度新闻"
            target="_blank">
            更多
            <icon-right class="ml-1 w-4 text-primary inline-block"></icon-right>
          </a>
          <div class="w-2/5 h-px bg-[#ec66ab]"></div>
        </div>
      </template>
    </d-card>
  </div>
</template>

<script setup lang="ts">
//mark import
import { formatTime } from '@/util/index';

//mark data
const t = ref<any>('')
const d = ref<any>('')
let timer: any = null
const jq = ref<any>("")
const jqImg = ref<any>("")
const bdNews = ref<any>([])
//mark method
function getTime() {
  const date = new Date();
  t.value = formatTime(date, 'hh:mm:ss')
  d.value = formatTime(date, 'YYYY 年 MM 月 DD 日')
}

async function getJq() {
  const res = await $http.mix.getJq({
    date: formatTime(new Date(), "YYYYMMDD")
  })
  console.log('>>> --> getJq --> res:', res.data)
  jq.value = res.data
  const j = res.data.solarTerms.slice(0, 2)
  jqImg.value = 'https://www.hxyouzi.com/img/jq/' + j + '.png'
}

async function getBdhot() {
  const res = await $http.mix.getBdhot()
  console.log('>>> --> getBdhot --> res:', res.data)
  // 取前5条
  bdNews.value = res.data.slice(0, 5)
}

//mark 周期、内置函数等
onMounted(() => {
  getJq()
  getBdhot()

  timer = setInterval(() => {
    getTime()
  }, 1000)
})
onUnmounted(() => {
  clearInterval(timer)
})


</script>

<style scoped lang="less">
@font-face {
  font-family: 'yj';
  src: url('@/assets/font/LCDML.woff2');
}

</style>