<template>
  <n-scrollbar class="box">
    <div class="top w-[80%] ml-[10%] mt-6 mb-4 bg-[#fafbfc]">
      <div class="left p-6">
        <div class="time text-pp-500">
          {{ time }}
        </div>
        <div class="date text-right mb-2">
          {{ date }}
        </div>
        <div class="holi text-center" v-if="holi.isHoliday">
          今天就是 <span class="text-pp-300 text-lg">{{ holi.data.hname }}</span> 啦
        </div>
        <div class="holi text-center" v-else>
          还有 <span class="text-[#409eff] text-lg">{{ holi.subdate }}</span> 天就是 <span class="text-pp-300 text-lg">{{
            holi.data.hname }}</span> 了
        </div>
      </div>
      <div class="right h-[150px]">
        <img height="150" :src="isw ? onwork : offwork" alt="">
      </div>
    </div>

    <div class="mid w-[80%] ml-[10%] mt-4 mb-4 bg-[#fafbfc]">
      <div class="lunar">
        <div class="lunarDate p-1 text-[22px] text-center">
          {{ jq.data.yearTips }}年 {{ jq.data.lunarCalendar }}
        </div>
        <div class=" p-1 pl-6">
          <n-popover trigger="hover" animated :delay="1000" width="trigger">
            <template #trigger>
              <div class="suit">
                宜： <span class="text-pp-300">{{ jq.data.suit }}</span>
              </div>
            </template>
            {{ jq.data.suit }}
          </n-popover>
        </div>
        <div class="suit p-1 pl-6">
          <n-popover trigger="hover" animated :delay="1000" width="trigger">
            <template #trigger>
              <div class="suit">
                忌： <span class="text-pp-300">{{ jq.data.avoid }}</span>
              </div>
            </template>
            {{ jq.data.avoid }}
          </n-popover>
        </div>
      </div>
      <div class="img">
        <img :src="jqImg" alt="">
      </div>
    </div>

    <div class="lianxi w-[80%] ml-[10%] mt-4 mb-4 bg-[#fafbfc] p-2">
      <div class="t">
        <n-divider title-placement="center">
          <div class="flex items-center font-bold text-xl">
            百度热搜
          </div>
        </n-divider>
      </div>
      <!-- <template v-if="isBaidu"> -->
      <div class="list">
        <div class=" hover:text-orange-500" @click="gotonews(item.url)" v-for="(item, index) in baidu" :key="index"
          v-show="index < 10">
          <div v-if="index < 3" class="flex my-2 justify-between">
            <div class="hot flex items-center">
              <n-icon size="16" class=" orange mr-2">
                <hot />
              </n-icon>
              <div>{{ item.keyword }}</div>
            </div>
            <div class="text-pp-500">{{ item.hotValue }}</div>
          </div>

          <div v-if="index > 2 && isBaidu" class="flex my-2 justify-between">
            <div>{{ item.keyword }}</div>
            <div class="text-pp-500">{{ item.hotValue }}</div>
          </div>
        </div>
        <n-divider v-if="!isBaidu">
          <div class="flex items-center" @click="isBaidu = !isBaidu">
            更多<n-icon size="20" class="tiao mx-2">
              <more />
            </n-icon>
          </div>
        </n-divider>
        <n-divider v-else>
          <div class="flex items-center" @click="isBaidu = !isBaidu">
            收起
          </div>
        </n-divider>
      </div>
      <!-- </template> -->
    </div>
  </n-scrollbar>
</template>

<script setup>
//mark import
import offwork from '@/assets/offwork.webp';
import onwork from '@/assets/onwork.webp';
import hot from "@/icon/hot.svg";
import more from "@/icon/more.svg";
import { formatTime } from '@/util/index.js';
import ww from 'chinese-workday';
import { onMounted, ref } from 'vue';


//mark data
const jqs = ['立春', '雨水', '惊蛰', '春分', '清明', '谷雨', '立夏', '小满', '芒种', '夏至', '小暑', '大暑', '立秋', '处暑', '白露', '秋分', '寒露', '霜降', '立冬', '小雪', '大雪', '冬至', '小寒', '大寒']
const time = ref(formatTime(new Date(), 'hh:mm:ss'))
const date = ref(formatTime(new Date(), 'YYYY 年 MM 月 DD 日'))
const date1 = ref(formatTime(new Date(), 'YYYY-MM-DD'))
const isw = ref(true)
isw.value = ww.isWorkday(date1)

const holi = await $http.wea.getTodayHoliday()
console.log("*************", holi);




const jqImg = ref('#')
const jq = await $http.wea.getJq()
const j = jq.data.solarTerms.slice(0, 2)
const jNum = jqs.indexOf(j) + 1
jqImg.value = 'https://www.hxyouzi.com/img/jieqi/' + jNum + '.jpg'
const isBaidu = ref(false);
const baidu = ref({})

// const holi = await $http.wea.getNextHoliday()
// console.log(555555555555,holi);




//mark lifeCycle
onMounted(async () => {
  baidu.value = (await $http.news.listBaiduNews()).data
  console.log("新闻", baidu.value);

})
//mark watch

//mark computed

//mark method
setInterval(() => {
  time.value = formatTime(new Date(), 'hh:mm:ss')
  //同步秒钟

  date.value = formatTime(new Date(), 'YYYY 年 MM 月 DD 日')

}, 1000)
const gotonews = (url) => {
  window.open(url, "_blank")
}



</script>

<style scoped lang="less">
:deep(.n-scrollbar) {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  // height: 100%;
  // background-color: #f1f2f3;
}

.lianxi {
  box-shadow: @ps;
  border-radius: 4px;

  .row {
    display: flex;
    align-items: center;
    padding: 10px;
    margin-bottom: 10px;
  }

  .cont:hover {
    color: @blue;
    text-decoration: underline;
    cursor: pointer;
  }
}

.top {
  box-shadow: @ps;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 4px;

  .left {
    width: 60%;
  }

  .time {
    font-family: yejing;
    font-size: 28px;
    text-align: center;
    letter-spacing: 1.5px;
  }

  img {
    height: 150px !important;
  }
}

.mid {
  box-shadow: @ps;
  border-radius: 6px;

  img {
    width: 100%;
    border-bottom-right-radius: 6px;
    border-bottom-left-radius: 6px;
  }
}

.suit {
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-all;
  white-space: nowrap;
}

@font-face {
  font-family: 'yejing';
  src: url('@/assets/font/LCDML.woff2');
}

:deep(.n-divider) {
  margin: 0px;
}

@keyframes bounce {

  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }

  40% {
    transform: translateY(-3px);
  }

  60% {
    transform: translateY(-1px);
  }
}

.tiao {
  animation: bounce 1s infinite;
  /* 播放名为bounce的动画，循环无限次，每次动画时长1秒 */
}
</style>