<template>
  <div class="header-btn" style="width: 100px;display: flex;" @click="back">
    <img :src="`src/assets/icons/arrow-left.png`" style="width: 24px;height: 24px;" /> 返回
  </div>
  <div style="width: 100%;height: 100%;padding:0 20% ">
    <div>
      <div class=" news-header" style="text-align: left;">
        中美博弈专题
      </div>
      <div class="content" style="margin-bottom: 20px;">
        汇聚全球资讯，呈现全球动态，掌握时事脉搏
      </div>

    </div>
    <div class="box" style="width: 100%;height: 90%;">
      <div class="box-header" style="height: 5vh;">
        <div style="display: flex; justify-content: center;  ">
          <div v-for="item in btnList" :class="btnSelect !== item ? 'header-btn-gray' : 'header-btn-select'"
            @click="changeBtn(item)">
            {{ item }} >
          </div>

        </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="`src/assets/icons/arrow-${item.arrow}.png`" />
          </div>
        </div>

        <div class="divider">
        </div>
      </div>
    </div>
  </div>

</template>

<script setup>
import { ref } from "vue";

// const props = defineProps({

//   type: {
//     type: String,
//     default: 'home'
//   }
// })

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

const emit = defineEmits(["back"]);
function back() {
  emit('back', 'home')
}
</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>
