<template>
  <AppCard :title="isEn ? 'Updates' : '最新动态'" class="news-card">
    <template #header-aside><nuxt-link :to="baseUrl">查看更多+</nuxt-link></template>
    <div class="content-box" v-if="Object.keys(listData.first).length">
      <div class="news-left">
        <AppLink :data="listData.first" :to="`${baseUrl}/${listData.first.id}`">
          <img :src="listData.first.web_img_uri" />
          <div class="mantle-box">
            <div class="tit">{{ listData.first.title }}</div>
            <div class="con-txt">{{ listData.first.abstract }}</div>
          </div>
        </AppLink>
      </div>
      <ul class="news-right">
        <li v-for="(item, index) in listData.list" :key="index">
          <AppLink :data="item" :to="`${baseUrl}/${item.id}`">
            <div class="time">{{ formatDate(item.start_time) }}</div>
            <div class="news-r-title">{{ item.title }}</div>
            <div class="del">{{ item.abstract }}</div>
          </AppLink>
        </li>
      </ul>
    </div>
  </AppCard>
</template>

<script setup>
import httpRequest from '@/utils/httpRequest'

const props = defineProps({
  baseUrl: { type: String, default: '/about/news' },
  params: Object,
})

const { locale } = useI18n()
const config = useRuntimeConfig()

const data = ref([])
const isEn = computed(() => locale.value === 'en-US')

const listData = computed(() => {
  const [first = {}, ...list] = data.value
  return { first, list: list || [] }
})

const formatDate = (value) => {
  const date = new Date(value * 1000)
  return date.getFullYear() + '/' + (date.getMonth() + 1) + '/' + date.getDate()
}

// 获取数据
onMounted(async () => {
  const params = props.params || {
    project_id: config.public.projectId,
    type_tag: 'article_news_hot',
    page: 1,
    limit: 4,
  }
  try {
    const res = await httpRequest.get('/api/cms/api/v1/articles', {
      params,
      headers: { 'Content-Type': 'application/json' },
    })
    data.value = res.data.data || []
  } catch (error) {
    console.error('Failed to fetch news:', error)
    data.value = []
  }
})
</script>

<style lang="scss" scoped>
.is-pc {
  .news-card {
    max-width: 1300px;
    margin: 0 auto;
    padding: 60px 0;
    .content-box {
      display: flex;
      justify-content: space-between;
      .news-left {
        width: 780px;
        height: 500px;
        position: relative;
        img {
          width: 100%;
          height: 100%;
          display: block;
        }
        .mantle-box {
          position: absolute;
          bottom: 0;
          left: 0;
          right: 0;
          background: rgba(0, 0, 0, 0.2);
          padding: 30px 37px;
          .tit {
            font-size: 24px;
            font-weight: bold;
            line-height: 100%;
            color: #ffffff;
            width: 696px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .con-txt {
            width: 461px;
            font-size: 14px;
            line-height: 24px;
            color: #ffffff;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
            margin-top: 10px;
          }
        }
      }
      .news-right {
        li {
          width: 366px;
          border-bottom: 1px solid #e3e3e3;
          padding-bottom: 19px;
          margin-bottom: 30px;
          cursor: pointer;
          .time {
            font-size: 16px;
            font-weight: normal;
            line-height: 100%;
            color: #8e1e22;
          }
          .news-r-title {
            font-size: 22px;
            font-weight: bold;
            line-height: 30px;
            color: #333333;
            margin-top: 15px;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
          }
          .del {
            width: 350px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: 14px;
            line-height: 100%;
            color: #999999;
            margin-top: 15px;
          }
        }
      }
    }
  }
}
.is-h5 {
  .news-card {
    .content-box {
      // height: 2.18rem;
      position: relative;
      img {
        width: 100%;
        height: 100%;
        display: block;
      }
      .news-left {
        position: relative;
      }
      .mantle-box {
        width: 100%;
        position: absolute;
        bottom: 0;
        left: 0;
        background: rgba(8, 8, 8, 0.45);
        padding-bottom: 0.14rem;
        .con-txt {
          font-size: 0.12rem;
          font-weight: bold;
          line-height: 0.17rem;
          color: #ffffff;
          padding: 0.14rem 0.32rem 0 0.19rem;
          overflow: hidden;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
        }
      }
    }
    .news-right {
      li {
        margin-top: 0.1rem;
        padding: 0.13rem 0.14rem 0.11rem 0.12rem;
        background: #fff;
        .time {
          font-size: 0.1rem;
          line-height: 100%;
          color: #ab0a3d;
        }
        .news-r-title {
          font-size: 0.14rem;
          color: #333333;
          margin-top: 0.1rem;
          line-height: 0.21rem;
          overflow: hidden;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
        }
        .del {
          font-size: 0.11rem;
          line-height: 0.2rem;
          color: #666666;
          overflow: hidden;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
        }
      }
    }
  }
}
</style>
