<template>
  <div class="detail">
    <div class="banner"></div>
    <div class="container">
      <div class="breadcrumb">
        <a href="#">首页</a>
        <right-outlined class="iconarrow" />
        <a href="#">新闻中心</a>
        <right-outlined class="iconarrow" />
        <span>新闻详情</span>
      </div>
      <div class="content">
        <div class="title">{{ newsDetail.title }}</div>
        <div class="time">
          <p>来源：泰山先锋</p>
          <p>2022年10月23日12:23</p>
        </div>
        <div class="newImg">
          <img :src="newsDetail.image" alt="" />
        </div>
        <div class="nr">
          {{ newsDetail.desc }}
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { RightOutlined } from '@ant-design/icons-vue'
const route = useRoute()
const newsDetail = ref(
  {
    id: 1,
    title: '降本增效新引擎：AI如何实现能源的精细化管理与数智变革？',
    time: '2021-11-15',
    desc: '在能源革命和数字化转型的双重驱动下，能源发展的必然选择。传统的能源管在能源革命和数字化转型的双重驱动下，能源发展的必然选择。传统的能源管...在能源革命和数字化转型的双重驱动下，能源发展的必然选择。传统的能源管......',
    image: '../../../src/assets/images/new1.png'
  }
)
// 需要添加根据路由参数获取数据的逻辑
onMounted(() => {
  const newsId = route.params.id
  if (newsId) {
    // 这里应该调用 API 获取对应的新闻详情
    fetchNewsDetail(newsId)
  }
})

const fetchNewsDetail = (id: any) => {
  // 模拟 API 调用
  // 实际应该调用后端接口获取数据
  console.log('获取新闻详情，ID:', id)
}
</script>
<style lang="less" scoped>
.detail {

  .banner {
    width: 100%;
    height: 450px;
    background: url('./../../../assets/images/newbanner.png')center center no-repeat;
    background-size: cover;
  }

  .container {
    max-width: 1200px;
    padding: 27px 0 60px;
    margin: auto;

    // 标题部分，面包屑
    .breadcrumb {
      border-bottom: 1px solid #e5e5e5;
      padding-bottom: 14px;

      a {
        color: #666666;
      }

      .iconarrow {
        padding: 0 3px;
        color: #666666;
      }

    }

    .content {
      padding: 31px 0 67px;

      .title {
        font-size: 36px;
        font-weight: 700;
        color: rgba(26, 25, 25, 1);
      }

      .time {
        display: flex;
        justify-content: space-between;
      }

      .newImg {
        width: 676px;
        height: 330px;

        img {}
      }
    }
  }
}
</style>