<template>
  <div class="newsBrief-page">
    <div v-if="showPage === 'home'">
      <div style="justify-content: space-between;">
        <div class="news-header">
          新闻速览
        </div>
        <div style="display: flex;padding: 3vh;justify-content: center;  ">
          <el-input placeholder="请输入关键词" :suffix-icon="searchInput" clearable style="width: 60vw;height: 5vh;">
          </el-input>
        </div>

        <div style="display: flex;padding: 3vh;justify-content: center;  ">
          <div v-for="item in btnList" :class="btnSelect !== item ? 'header-btn' : 'header-btn-select'"
            @click="changeBtn(item)">
            {{ item }} >
          </div>
          <div class="header-btn-more">
            <img src="@/assets/icons/adjustment.png" />
          </div>
        </div>

      </div>
      <div style="display: flex;">
        <div class="box">
          <div class="box-header">
            <img class="box-header-img" src="@/assets/icons/Headlines-icon.svg"></img>
            <div style="cursor: pointer;" @click="changePage('headlines')">
              今日要闻 >
            </div>
          </div>
          <div class="divider"></div>
          <div v-for="item in HeadlinesData">
            <div style="display: flex;">
              <div>
                <div class="title-blob">
                  {{ item.title }}
                </div>
                <div class="content">
                  新闻来源： {{ item.from }} 发表时间：{{ item.time }}
                </div>
                <div style="display: flex;">
                  <div v-for="tag in item.tag" class="tag">
                    {{ tag }}
                  </div>
                </div>
              </div>
              <div style="margin-left: auto;padding: 10px;">
                <img :src="item.image" />
              </div>
            </div>

            <div class="divider">
            </div>
          </div>
        </div>
        <div class="box" style=" margin-left: 4%;">
          <div class="box-header">
            <img class="box-header-img" src="@/assets/icons/subject-icon.png"></img>
            <div style="cursor: pointer;" @click="changePage('subject')">
              中美博弈专题
            </div>
          </div>
          <div class="divider">

          </div>
          <div v-for="(item, index) in subjectData">
            <div class="subject-line">
              <!-- 左侧：序号 + 文字 -->
              <div style="display: flex; align-items: center;">
                <div :style="{
                  color:
                    index === 0 ? '#CF4F51'
                      : index === 1 ? '#FF964D'
                        : index === 2 ? '#E8BD0D'
                          : '#3B414B'
                }">
                  {{ index <= 2 ? index + 1 : "." }} </div>
                    <div
                      style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;width: 32vw ;margin-left: 20px;"
                      :class="index <= 2 ? 'title-blob' : 'content'">{{ item.text }}
                    </div>
                </div>

                <!-- 右侧：箭头 -->
                <img :src="`src/assets/icons/arrow-${item.arrow}.png`" />
              </div>
            </div>

          </div>
        </div>
      </div>

      <Headlines v-if="showPage === 'headlines'" @type="showPage" @back="changePage" />
      <Subject v-if="showPage === 'subject'" @back="changePage" />

    </div>
</template>

<script setup>
import { ref } from "vue";
import Headlines from './Headlines.vue'
import Subject from './Subject.vue'
// import style from './style.css'

//顶部数据搜索
const searchInput = ref('')
const btnList = ref(["新闻纵览", "焦点新闻", "全球热点", "军事热点", "台湾动向", "美国政治", "亚洲局势", "东亚动态"])
const btnSelect = ref('新闻纵览')
const HeadlinesData = ref([
  {
    "title": "黎巴嫩真主党指责美国破坏黎稳定 谴责以色列“蓄意挑衅”",
    "from": "人民网",
    "time": "2025-10-05",
    "tag": ["以色列", "美国"],
    "image": '/testData/HeadlinesData-img.png',
  },
  {
    "title": "IMF上调中东和北非地区经济增长预期",
    "from": "CNN",
    "time": "2025-10-05",
    "tag": ["经济", "中东", "IMF"],
    "image": '/testData/HeadlinesData-img.png',
  },
  {
    "title": "日本外务省亚洲大洋洲局局长金井正彰启程访华 预计18日与中方会面",
    "from": "人民网",
    "time": "2025-10-05",
    "tag": ["日本", "访华"], "image": '/testData/HeadlinesData-img.png',
  },
  {
    "title": "韩日因独岛主权争议暂停本月联合搜救演习",
    "from": "凤凰网",
    "time": "2025-10-05",
    "tag": ["独岛", "联合军演", "韩国", "日本"], "image": '/testData/HeadlinesData-img.png',
  },
  {
    "title": "美“福特”号航母抵达加勒比海 于委内瑞拉附近展开大规模军事集结",
    "from": "央视网",
    "time": "2025-10-05",
    "tag": ["美国", "航母", "加勒比海"], "image": '/testData/HeadlinesData-img.png',
  }
])


function changeBtn(btn) {
  btnSelect.value = btn
}

//当前页面显示
const showPage = ref('home')
function changePage(page) {
  console.log(page)
  showPage.value = page
}
//博弈专题新闻数据
const subjectData = ref([
  { id: 1, text: "乌克兰与法国签署意向书 将获 100 架“阵风”战机及多套防空系统", arrow: 0 },
  { id: 2, text: "安理会通过涉加沙决议 建立和平委员会作为过渡行政机构", arrow: 1 },
  { id: 3, text: "日本首相高市早苗涉台及修“无核三原则”言论遭多方强烈反对", arrow: 1 },
  { id: 4, text: "美“福特”号航母打击群进入加勒比海 委方谴责其意图策动政权更迭", arrow: 1 },
  { id: 5, text: "BBC回应特朗普10亿-50亿美元索赔诉讼 称诽谤指控无依据", arrow: 1 },
  { id: 6, text: "俄军打击乌142个区域设施 乌军击落或压制91架俄无人机", arrow: 1 },
  { id: 7, text: "中国女法官张玲玲以第一高票当选联合国上诉法庭法官", arrow: 0 },
  { id: 8, text: "美股三大股指17日收盘普跌 比特币跌破92000美元", arrow: 1 },
  { id: 9, text: "高盛大幅下调2026年布伦特和WTI原油价格预测", arrow: 1 },
  { id: 10, text: "2026米兰冬奥会火炬传递完整路线公布 将穿越意大利全部20个大区", arrow: 1 },
  { id: 11, text: "特朗普宣称若重掌白宫将推动美国开展自1992年以来首次核试验", arrow: 1 },
  { id: 12, text: "欧盟发布2025年秋季经济预测 欧元区今年GDP预计增长1.3%", arrow: 1 }
])
</script>
<style scoped>
@import url('./style.css');

.newsBrief-page {
  max-width: 100vw;
  height: 100%;
  overflow: hidden;
  margin: 0 auto;
  padding: 5vh 10vw 20vh 10vw;
  background: url('@/assets/images/background.png') no-repeat;
  background-position: center -100px;
  background-size: 100% 100%;
  min-height: 100vh;
}
</style>
