<template>
  <div class="page-wrap">
    <div class="page-inner">
      <div class="news-header background-as-card">
        <div class="header-icon-box flex-display-center">
          <span class="header-icon-text">新闻资讯</span>
        </div>
        <div class="header-info">
          <h1 class="text-title-1-bold header-title">{{ newsDetail.title }}</h1>
          <p class="text-tip-1 text-primary-65-clor header-sub">{{ newsDetail.subTitle }}</p>
          <div class="flex-display header-tags">
            <AreaTag
              v-for="(tag, index) in newsDetail.tags"
              :key="index"
              :tagName="tag"
              :tagClass="index === 0 ? 'tag3' : 'tag1'"
            />
          </div>
        </div>
      </div>

      <div class="flex-display content-row">
        <div class="left-col">
          <AnalysisBox title="打压动态" :showAllBtn="false">
            <div class="news-list-wrap">
              <div class="news-scroll-area">
                <div
                  v-for="item in newsList"
                  :key="item.id"
                  class="news-item flex-display mouse-hover"
                  @click="handleNewsClick(item)"
                >
                  <div class="item-thumb flex-display-center">
                    <span class="item-thumb-text">新闻资讯</span>
                  </div>
                  <div class="item-body">
                    <p class="text-tip-1-bold text-primary-80-clor item-title">{{ item.title }}</p>
                    <p class="text-tip-2 text-primary-65-clor item-content">{{ item.content }}</p>
                  </div>
                  <div class="item-meta flex-display">
                    <span class="text-tip-2 text-primary-50-clor">{{ item.date }}</span>
                    <span class="text-tip-2 text-primary-50-clor meta-sep">·</span>
                    <span class="text-tip-2 text-primary-50-clor">{{ item.source }}</span>
                  </div>
                </div>
              </div>

              <div class="pagination-row flex-display">
                <span class="text-tip-2 text-primary-65-clor">共{{ pagination.total }}项动态</span>
                <div class="flex-display pagination-btns">
                  <button class="page-btn" :disabled="pagination.page === 1" @click="changePage(pagination.page - 1)">&lt;</button>
                  <button class="page-btn" :class="{ active: pagination.page === 1 }" @click="changePage(1)">1</button>
                  <span v-if="pagination.page > 3" class="page-ellipsis text-primary-50-clor">...</span>
                  <button
                    v-for="p in visiblePages"
                    :key="p"
                    class="page-btn"
                    :class="{ active: p === pagination.page }"
                    @click="changePage(p)"
                  >{{ p }}</button>
                  <span v-if="pagination.page < pagination.totalPages - 2" class="page-ellipsis text-primary-50-clor">...</span>
                  <button class="page-btn" :class="{ active: pagination.page === pagination.totalPages }" @click="changePage(pagination.totalPages)">{{ pagination.totalPages }}</button>
                  <button class="page-btn" :disabled="pagination.page === pagination.totalPages" @click="changePage(pagination.page + 1)">&gt;</button>
                </div>
              </div>
            </div>
          </AnalysisBox>
        </div>

        <div class="right-col">
          <AnalysisBox title="联盟简介" :showAllBtn="false">
            <div class="intro-wrap">
              <div class="intro-row flex-display">
                <span class="text-tip-2-bold text-primary-80-clor intro-label">时间：</span>
                <span class="text-tip-2 text-primary-65-clor">{{ newsDetail.time }}</span>
              </div>
              <div class="intro-row">
                <span class="text-tip-2-bold text-primary-80-clor intro-label">背景：</span>
                <p class="text-tip-2 text-primary-65-clor intro-bg-text">{{ newsDetail.background }}</p>
              </div>
              <div class="intro-row intro-row--last">
                <span class="text-tip-2-bold text-primary-80-clor intro-label">相关国家：</span>
                <div class="country-grid">
                  <div
                    v-for="(country, index) in newsDetail.countries"
                    :key="index"
                    class="country-item flex-display"
                  >
                    <span class="country-dot" :style="{ background: countryColors[index % countryColors.length] }"></span>
                    <span class="text-tip-2 text-primary-80-clor">{{ country.name }}</span>
                  </div>
                </div>
              </div>
            </div>
          </AnalysisBox>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import AnalysisBox from '@/components/base/boxBackground/analysisBox.vue'
import AreaTag from '@/components/base/AreaTag/index.vue'
import { getNewsDetail, getNewsList } from './mock/newsDetail'

const route = useRoute()
const router = useRouter()

const countryColors = ['#4A7BF7', '#CE4F51', '#E8BD0B', '#218139', '#FF954D']

const newsId = computed(() => route.query.id || '1')

const newsDetail = ref({
  title: '',
  subTitle: '',
  tags: [],
  time: '',
  background: '',
  countries: []
})

const newsList = ref([])

const pagination = ref({
  page: 5,
  pageSize: 10,
  total: 153,
  totalPages: 16
})

const visiblePages = computed(() => {
  const pages = []
  const current = pagination.value.page
  const total = pagination.value.totalPages
  let start = Math.max(2, current - 1)
  let end = Math.min(total - 1, current + 1)
  if (current <= 3) end = Math.min(4, total - 1)
  if (current >= total - 2) start = Math.max(total - 3, 2)
  for (let i = start; i <= end; i++) {
    if (i > 1 && i < total) pages.push(i)
  }
  return pages
})

const loadNewsDetail = () => {
  newsDetail.value = getNewsDetail(newsId.value)
}

const loadNewsList = (page = 1) => {
  const data = getNewsList(page, pagination.value.pageSize)
  newsList.value = data.list
  pagination.value.page = data.page
  pagination.value.total = data.total
  pagination.value.totalPages = data.totalPages
}

const changePage = (page) => {
  if (page < 1 || page > pagination.value.totalPages) return
  loadNewsList(page)
}

const handleNewsClick = (item) => {
  router.push({ path: '/news/detail', query: { id: item.id } })
}

onMounted(() => {
  loadNewsDetail()
  loadNewsList(pagination.value.page)
})
</script>

<style lang="scss" scoped>
.page-wrap {
  width: 100%;
  min-height: 100vh;
  background: #f7f8f9;
  display: flex;
  justify-content: center;
  padding: 20px 0;
}

.page-inner {
  width: 1600px;
}

.news-header {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px 24px;
  margin-bottom: 16px;
}

.header-icon-box {
  width: 100px;
  height: 76px;
  border-radius: 8px;
  background: linear-gradient(135deg, #4a7bf7 0%, #6b8cff 100%);
  flex-shrink: 0;
  flex-direction: column;
}

.header-icon-text {
  color: #fff;
  font-size: 14px;
  font-weight: 600;
}

.header-title {
  margin: 0 0 6px 0;
}

.header-sub {
  margin: 0 0 10px 0;
}

.header-tags {
  gap: 8px;
}

.content-row {
  gap: 16px;
  align-items: flex-start;
}

.left-col {
  width: 1064px;
  height: 1284px;
  flex-shrink: 0;
}

.right-col {
  width: 522px;
  height: auto;
  flex-shrink: 0;
}

.news-list-wrap {
  display: flex;
  flex-direction: column;
  height: calc(100% - 48px);
  padding: 0 20px;
}

.news-scroll-area {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.news-item {
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid #eaecee;
  align-items: flex-start;
  cursor: pointer;
  transition: background 0.15s;

  &:last-child {
    border-bottom: none;
  }
}

.item-thumb {
  width: 100px;
  height: 70px;
  border-radius: 6px;
  background: linear-gradient(135deg, #4a7bf7 0%, #6b8cff 100%);
  flex-shrink: 0;
}

.item-thumb-text {
  color: #fff;
  font-size: 12px;
}

.item-body {
  flex: 1;
  min-width: 0;
}

.item-title {
  margin: 0 0 6px 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.item-content {
  margin: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.item-meta {
  flex-shrink: 0;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.meta-sep {
  margin: 0 2px;
}

.pagination-row {
  justify-content: space-between;
  align-items: center;
  padding: 14px 0;
  border-top: 1px solid #eaecee;
  flex-shrink: 0;
}

.pagination-btns {
  gap: 4px;
  align-items: center;
}

.page-ellipsis {
  padding: 0 4px;
  font-size: 14px;
}

.page-btn {
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  border: 1px solid #e6e7e8;
  background: #fff;
  border-radius: 4px;
  font-size: 14px;
  color: #3b414b;
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;

  &:hover:not(:disabled) {
    border-color: #055fc2;
    color: #055fc2;
  }

  &.active {
    background: #055fc2;
    border-color: #055fc2;
    color: #fff;
  }

  &:disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }
}

.intro-wrap {
  padding: 16px 20px;
}

.intro-row {
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid #eaecee;

  &.intro-row--last {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
  }
}

.intro-label {
  white-space: nowrap;
  margin-right: 4px;
}

.intro-bg-text {
  margin: 8px 0 0 0;
  line-height: 1.7;
}

.country-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 16px;
  margin-top: 10px;
}

.country-item {
  align-items: center;
  gap: 8px;
}

.country-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}
</style>
