<template>
  <div class="home-news">
    <AppCard :title="$t('menu.notice')" titleAlign="center">
      <template #title>
        <nuxt-link to="/about/news">{{ $t('menu.notice') }}</nuxt-link>
      </template>
      <template #header-aside>
        <nuxt-link to="/about/news">{{ $t('viewMore') }}</nuxt-link>
      </template>
      <div class="news-content">
        <div class="left-content">
          <div class="list">
            <ClientOnly>
              <Swiper ref="mySwiper" v-bind="swiperOption" class="swiper-no-swiping">
                <SwiperSlide v-for="(item, index) in activityList" :key="index">
                  <div class="li">
                    <div class="time-block">
                      <div class="m-time">{{ formatMD(item.abstract) }}</div>
                      <div class="t-time">{{ formatYY(item.abstract) }}</div>
                    </div>
                    <div class="txt">{{ item.title }}</div>
                  </div>
                </SwiperSlide>
              </Swiper>
            </ClientOnly>
          </div>
        </div>
        <div class="right-content">
          <ul>
            <template v-for="(item, index) in listData" :key="index">
              <li>
                <AppLink :data="item" :to="`/about/news/${item.id}`">
                  <div class="time-block">
                    <div class="m-time">
                      {{ formatMD(item.start_time * 1000) }}
                    </div>
                    <div class="t-time">
                      {{ formatYY(item.start_time * 1000) }}
                    </div>
                  </div>
                  <div class="content_con">
                    <div class="text">{{ item.title }}</div>
                    <div class="desc">{{ item.abstract }}</div>
                  </div>
                </AppLink>
              </li>
            </template>
          </ul>
        </div>
      </div>
    </AppCard>
  </div>
</template>
<script setup>
import { Swiper, SwiperSlide } from 'swiper/vue'
import { Autoplay } from 'swiper/modules'
import httpRequest from '@/utils/httpRequest'

const config = useRuntimeConfig()
const projectId = config.public.projectId

const swiperOption = {
  modules: [Autoplay],
  observer: true,
  observeParents: true,
  speed: 300,
  autoplay: {
    delay: 3000,
    disableOnInteraction: false,
    pauseOnMouseEnter: true,
  },
  loop: true,
  direction: 'vertical',
  slidesPerView: 2,
  loopAdditionalSlides: 1,
  spaceBetween: 0,
}

const listData = ref([])
const activityList = ref([])

// 2021
const formatYY = (value) => {
  const date = new Date(value)
  return date.getFullYear()
}

// 2/14
const formatMD = (value) => {
  const date = new Date(value)
  return date.getMonth() + 1 + '/' + date.getDate()
}

const fetchNewsList = async () => {
  const params = { project_id: projectId, type_tag: 'article_news', page: 1, limit: 3 }
  const res = await httpRequest.get('/api/cms/api/v1/articles', { params })
  listData.value = res.data.data || []
}

const fetchActivityList = async () => {
  const params = { project_id: projectId, type_tag: 'www_activity' }
  const res = await httpRequest.get('/api/cms/api/v1/articles', { params })
  activityList.value = res.data.data || []
}

onMounted(() => {
  fetchNewsList()
  fetchActivityList()
})
</script>
<style lang="scss">
.home-news {
  max-width: 1200px;
  padding-bottom: 90px;
  margin: 0 auto;

  .news-content {
    margin-top: 15px;
    display: flex;

    .left-content {
      flex: 0 0 600px;
      height: 282px;
      background: #ffffff;
      box-shadow: 0px 0px 29px rgba(0, 0, 0, 0.03);

      .tit {
        font-size: 34px;
        font-weight: 500;
        line-height: 51px;
        color: #424242;
        padding-top: 29px;
        text-align: center;
      }

      .list {
        overflow: hidden;
        height: 100%;

        .swiper {
          height: 100%;
        }

        .swiper-slide-active {
          .li {
            border-bottom: 1px solid #999999;
          }
        }

        .li {
          padding: 0 30px;
          // width: 100%;
          height: 100%;
          display: flex;
          align-items: center;
          box-sizing: border-box;

          .time-block {
            flex: 0 0 70px;
            height: 70px;
            background: #aa1941;
            border-radius: 5px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;

            .m-time {
              font-size: 20px;
              font-weight: normal;
              color: #ffffff;
              text-align: center;
              opacity: 0.8;
            }

            .t-time {
              font-size: 16px;
              font-weight: normal;
              line-height: 15px;
              color: #ffffff;
              opacity: 0.8;
              text-align: center;
            }
          }

          .txt {
            margin-left: 33px;
            font-size: 16px;
            font-weight: 400;
            color: #424242;
            text-overflow: ellipsis;
            overflow: hidden;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1; //超出第几行，关键在这里
            line-clamp: 1; //超出第几行，关键在这里
          }
        }
      }
    }

    .right-content {
      margin-left: 45px;
      flex: 1;

      ul {
        li + li {
          margin-top: 35px;
        }

        li {
          a {
            display: flex;
            align-items: center;
          }

          &:hover {
            .content_con {
              .text {
                color: #aa1941;
              }

              .desc {
                color: #aa1941;
              }
            }

            .time-block {
              background: #aa1941;

              .m-time {
                color: #ffffff;
                opacity: 1;
              }

              .t-time {
                color: #ffffff;
                opacity: 1;
              }
            }
          }

          .time-block {
            width: 70px;
            height: 70px;
            background: rgba(255, 255, 255, 0.39);
            box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.08);
            border-radius: 5px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;

            .m-time {
              font-size: 20px;
              font-weight: normal;
              color: #777777;
              opacity: 0.8;
            }

            .t-time {
              font-size: 16px;
              font-weight: normal;
              line-height: 15px;
              color: #777777;
              opacity: 0.8;
            }
          }

          .content_con {
            flex: 1;
            margin-left: 15px;

            .text {
              text-align: left;
              font-size: 16px;
              font-weight: 500;
              color: #333333;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 1;
              overflow: hidden;
              // margin-bottom: 11px;
            }

            .desc {
              text-align: left;

              font-size: 14px;
              font-weight: 400;
              line-height: 22px;
              color: #666666;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 1;
              overflow: hidden;
            }
          }
        }
      }
    }
  }
}
</style>
