<template>
  <div class="company-news-container">
    <div class="company-news-header">
      <div class="title_box">
        <img alt="新闻图标" src="@/assets/imgs/portal/gsxw_icon.png" class="news-icon" />
        <span class="gszx">公司资讯</span>
      </div>
      <el-button class="more-button" text @click="toNewsCenter()">更多</el-button>
    </div>
    <div
      class="news-item"
      v-for="(news, index) in newsList"
      :key="index"
      @click="toDetail(news.id)"
    >
      <img alt="新闻图片" :src="news.imgUrl" class="news-image" />
      <div class="news-content">
        <h3>{{ news.title }}</h3>
        <p class="news-desc">{{ news.summary }}</p>
        <p class="news-date">{{ formatDate(news.createTime) }}</p>
      </div>
    </div>
    <div class="other-news-list">
      <div
        class="other-news-item"
        v-for="(otherNews, index) in otherNewsList"
        :key="index"
        @click="toDetail(otherNews.id)"
      >
        <span class="circle"></span>
        <span class="other-news-title">{{ otherNews.title }}</span>
        <span class="other-news-date">{{ formatDate(otherNews.createTime) }}</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import * as PortalApi from '@/api/portal'
import * as NoticeApi from '@/api/system/notice'
import { useRoute, useRouter } from 'vue-router'
const message = useMessage() // 消息弹窗

const route = useRoute() // 路由
const router = useRouter() // 路由

const formatDate = (timestamp) => {
  const date = new Date(timestamp)
  const year = date.getFullYear()
  const month = String(date.getMonth() + 1).padStart(2, '0') // 月份从0开始，需要+1
  const day = String(date.getDate()).padStart(2, '0')
  return `${year}-${month}-${day}`
}

const queryParams = reactive({
  typeFlag: 1,
  pageNo: 1,
  pageSize: 6
})
// 模拟新闻数据
const newsList = ref([
  // {
  //   image: 'https://example.com/news-image-1.jpg',
  //   title: '这里是新闻标题',
  //   content: '这里是新闻内容这里是新闻内容这里是新闻内容这里是新闻内容',
  //   date: '2025年9月16日'
  // }
])

const otherNewsList = ref([
  // {
  //   title: '关于项目经营“三纲领”的启用通知关于项目经营“三纲领”的启用通知', // 较长标题用于测试省略号
  //   date: '2025-08-29'
  // },
  // {
  //   title: '关于项目经营“三纲领”的启用通知',
  //   date: '2025-08-29'
  // }
])
/** 查询列表 */
const getNewsList = async () => {
  try {
    const data = await PortalApi.getNewsList(queryParams)
    if (data && data.list && data.list.length > 0) {
      const list = data.list
      newsList.value = [list[0]]
      otherNewsList.value = list.slice(1)
    }
  } catch {
    message.error('加载数据出错!')
  }
}

const toNewsCenter = () => {
  router.push({
    name: 'NewsCenter',
    query: { key: 'company' }
  })
}
const toDetail = (id) => {
  router.push({
    name: 'NewsDetail',
    query: { id }
  })
}
/** 初始化 **/
onMounted(() => {
  getNewsList()
})
</script>

<style lang="less" scoped>
.company-news-container {
  width: 100%;
  // max-width: 400px;
  // border: 1px solid #ebeef5;
  border-radius: 4px;
  padding: 15px 14px 16px 20px;
  box-sizing: border-box;
}

.company-news-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  .title_box {
    display: flex;
    align-items: center;
  }
  .gszx {
    font-family: Microsoft YaHei UI;
    font-weight: 700;
    font-style: Bold;
    font-size: 14px;
    color: #0052d9;
  }
}

.news-icon {
  width: 32px;
  height: 32px;
  margin-right: 8px;
}

.more-button {
  font-size: 14px;
  color: #666;
}

.news-item {
  display: flex;
  // margin-bottom: 10px;
  cursor: pointer;
  padding-bottom: 15px;
  border-bottom: 1px dashed #e1e1e1;
}

.news-image {
  width: 128px;
  height: 88px;
  object-fit: cover;
  margin-right: 16px;
}

.news-content {
  flex: 1;
  h3 {
    margin: 3px 0 8px 0;
    color: #333;
    font-size: 14px;
    width: 250px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; // 文字过多时显示省略号
  }
  .news-desc {
    margin: 0 0 8px 0;
    color: #666;

    overflow: hidden; /*必须结合的属性,当内容溢出元素框时发生的事情*/
    text-overflow: ellipsis; /*可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本 。*/
    display: -webkit-box; /*必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。*/
    -webkit-line-clamp: 2; /*用来限制在一个块元素显示的文本的行数。*/
    -webkit-box-orient: vertical; /* 必须设置，否则不生效 */

    width: 224px;
    height: 36px;
    font-family: Microsoft YaHei UI;
    font-weight: 400;
    font-style: Regular;
    font-size: 12px;
    line-height: 18px;
    letter-spacing: 0px;
  }
}

.news-date {
  color: #999;
  font-size: 12px;
}

.divider {
  height: 1px;
  background-color: #ebeef5;
  margin: 16px 0;
}

.other-news-list {
  margin-top: 12px;
}

.other-news-item {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  cursor: pointer;
  padding-bottom: 8px;
  border-bottom: 1px dashed #e1e1e1;
  .circle {
    width: 7px;
    height: 7px;
    border-radius: 7px;
    background: #999;
    display: inline-block;
  }
  .other-news-title {
    // flex: 1;
    width: 250px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; // 文字过多时显示省略号
    margin-left: 6px;
    font-size: 14px;
    color: #666;
  }
  .other-news-date {
    color: #999;
    font-size: 14px;
    margin-left: auto;
  }
}
</style>
