<template>
  <div class="mai-ocr-wrap flex justify-center">
    <div class="mai-ocr-item flex cursor-pointer" @click="goTranslate(4)">智能OCR</div>
    <div class="mai-ocr-item flex cursor-pointer" @click="goTranslate(2)">识别</div>
  </div>
  <div :class="classList.news">
    <CommonTitle title="热门资讯"/>
    <el-skeleton :key="1" :loading="hotInformLoading" animated
                 style="margin-bottom: 80px;height: 520px">
      <template #template>
        <div class="flex justify-between">
          <el-skeleton-item style="width: 785px;height:520px" variant="image"></el-skeleton-item>
          <div style="width: 48%" class="flex-col flex justify-between">
            <el-skeleton-item variant="text" style="height:100px"></el-skeleton-item>
            <el-skeleton-item variant="text" style="height:100px"></el-skeleton-item>
            <el-skeleton-item variant="text" style="height:100px"></el-skeleton-item>
            <el-skeleton-item variant="text" style="height:100px"></el-skeleton-item>
          </div>
        </div>
      </template>
      <template #default>
        <div class="home-news flex">
          <div class="media-img">
            <img
              style="object-fit: cover"
              :src="newsHilight.image" alt=""
            />
          </div>
          <div class="newsList">
            <div
              class="news-item flex items-center justify-between"
              v-for="item in newsList"
              :key="item.id"
              @mouseenter="changeCurrentData(item)"
            >
              <div class="flex items-center c-item">
                <div class="date">
                  <span class="month">{{ dayjs(item.updatetime * 1000).format('MM/DD') }}</span>
                  <span class="year">{{ dayjs(item.updatetime * 1000).format('YYYY') }}</span>
                </div>
                <el-divider class="divider" direction="vertical"/>

                <nuxt-link class="new-title text-ellipsis" :to="`/inform/${item.id}`">{{ item.title }}
                </nuxt-link>
              </div>
              <nuxt-link :to="`/inform/${item.id}`">
                <img class="open-new-btn" src="~/assets/images/home/go.png" alt=""/>
              </nuxt-link>
            </div>
          </div>
        </div>
      </template>
    </el-skeleton>
    <MoreBtn url="/inform"/>
  </div>
  <div :class="classList.inform">
    <CommonTitle title="TBT/SPS通报"/>
    <el-skeleton :loading="hotTbtLoading" animated :count="2">
      <template #template>
        <div class="flex el-skeleton justify-between flex-wrap w-full mb-4">
          <el-skeleton-item variant="text" style="height:220px; width: 32%"></el-skeleton-item>
          <el-skeleton-item variant="text" style="height:220px; width: 32%"></el-skeleton-item>
          <el-skeleton-item variant="text" style="height:220px; width: 32%"></el-skeleton-item>
        </div>
      </template>
      <template #default>
        <div class="home-inform flex flex-wrap">
          <div class="inform-item flex flex-col" v-for="item in informList" :key="item.id">
            <h3>{{ item.notification_title }}</h3>
            <p>{{ item.product }}</p>
            <span>{{ item.notification_time_text }}</span>
          </div>
        </div>
      </template>
    </el-skeleton>
    <MoreBtn url="/tptsps"/>
  </div>
  <div :class="classList.rule">
    <CommonTitle title="法律法规"/>
    <el-skeleton :loading="hotRuleLoading" style="width:100%" animated :count="3">
      <template #template>
        <div class="flex el-skeleton justify-between flex-wrap w-full mb-4">
          <el-skeleton-item variant="text" style="height:100px; width: 49.5%"></el-skeleton-item>
          <el-skeleton-item variant="text" style="height:100px; width: 49.5%"></el-skeleton-item>
        </div>
      </template>
      <template #default>
        <div class="home-rule mb-11 flex flex-wrap justify-between">
          <div class="rule-item" v-for="item in ruleList" :key="item.id">
            <nuxt-link :to="`/rules/${item.id}`">
              <div class="w-full h-full  flex items-center">
                <div class="date">
                  <span class="month">{{ item.month }}</span>
                  <span class="year">{{ item.year }}</span>
                </div>
                <div class="title">{{ item.title }}</div>
              </div>
            </nuxt-link>
          </div>
        </div>
      </template>
    </el-skeleton>
    <MoreBtn url="/rules"/>
  </div>
  <div :class="classList.case">
    <CommonTitle title="案例展示"/>
    <el-skeleton :loading="hostCaseLoading" class="flex justify-between" animated
                 style="width: 100%" :count="3">
      <template #template>
        <div class="w-1/3 mx-2 flex flex-col">
          <el-skeleton-item variant="image"
                            style="width: 100%; height: 447px; margin-bottom: 20px"></el-skeleton-item>
          <el-skeleton-item variant="text"
                            style="height: 30px; margin-bottom: 20px"></el-skeleton-item>
          <el-skeleton-item variant="button"></el-skeleton-item>
        </div>
      </template>
      <template #default>
        <div class="home-case flex flex-wrap">
          <div class="case-item flex flex-col" v-for="item in caseList" :key="item.id">
            <el-image class="img" :fit="'cover'" :src="item.image" alt=""/>
            <p class="text-ellipsis w-full overflow-hidden"
               style="white-space:nowrap;height: 30px; line-height: 30px">{{ item.title }}</p>
            <button class="more">
              <nuxt-link :to="`/case/${item.id}`">立即查看</nuxt-link>
            </button>
          </div>
        </div>
      </template>
    </el-skeleton>
    <MoreBtn url="/case"/>
  </div>
</template>
<script setup lang="ts">
import {InformationDto} from "~~/api/types";
import dayjs from 'dayjs';

definePageMeta({
  name: '首页',
  headerHost: false,
  homeBanner:true,
  order: 1,
})
useHead({
  title:'首页'
})
const hotInformLoading = ref(true)
const hotTbtLoading = ref(true)
const hotRuleLoading = ref(true)
const hostCaseLoading = ref(true)
const {prefixCls: prefixNews} = useDesign('news-wrap');
const {prefixCls: prefixInform} = useDesign('inform-wrap');
const {prefixCls: prefixRule} = useDesign('rule-wrap');
const {prefixCls: prefixCase} = useDesign('case-wrap');
const {getToken, setLoginVisible} = useUserInfo()
const classList = reactive({
  news: [`${prefixNews} mai-section`],
  inform: [`${prefixInform} mai-section`],
  rule: [`${prefixRule} mai-section`],
  case: [`${prefixCase} mai-section`],
});

const newsList = ref();
const informList = ref();
const ruleList = ref();
const caseList = ref();
const newsHilight = ref<InformationDto>({
  id: '',
  title: '',
})
const router = useRouter();

async function getData() {
  const {homeApi} = useApi()
  hotInformLoading.value = true;
  hotTbtLoading.value = true;
  hotRuleLoading.value = true;
  hostCaseLoading.value = true;
  const {data: hotInformation} = await homeApi.getHotNewsInfo(1, 4)
  const {data: hotTechnical} = await homeApi.getHotTechnical(1, 6)
  const {data: hotCase} = await homeApi.getHotCase(1, 3)
  const {data: hotTs} = await homeApi.getHotTs(1, 6)
  newsList.value = hotInformation?.data;
  informList.value = hotTs?.data
  ruleList.value = hotTechnical?.data
  caseList.value = hotCase?.data
  if (newsList.value.length) {
    changeCurrentData(newsList.value[0])
  }
  hotInformLoading.value = false;
  hotTbtLoading.value = false;
  hotRuleLoading.value = false;
  hostCaseLoading.value = false;

  console.log('hotInformation>>>>', hotInformation)
}

function changeCurrentData(data: InformationDto) {
  console.log('data.image>>>>', data.image)
  newsHilight.value = Object.assign({}, data);
  newsHilight.value.image = import.meta.env.VITE_GLOB_ORIGIN + newsHilight.value.image
}
function goTranslate(type: number){
  if (!getToken) {
    setLoginVisible(true, {
      path:'/translate',
      query: {
        type: type
      }
    })
  }else {
    setLoginVisible(false, false)
    router.push({
      path:'/translate',
      query: {
        type: type
      }
    })
  }
}
getData()

</script>

<style lang="scss" scoped>
@import '~~/assets/style/home.scss';
</style>
