<template>
  <view class="page">

    <Head></Head>
    <!-- 内容区 -->
    <view class="content">
      <!-- 新闻区域 -->
      <view class="news">

        <!-- 轮播图 -->
        <swiper v-if="post.imgs && post.imgs.length" :indicator-dots="false" :autoplay="false" :interval="3000"
          :duration="1000" :circular="true" class="swiper-banner" @change="onChange">
          <swiper-item v-for="(item, i) in post.imgs" :key="i">
            <view class="swiper-center">
              <image v-if="item.type === 'img'" :src="item.src" class="swiper-item" mode="aspectFit" alt="新闻图片" />
              <video v-else :src="item.src" class="swiper-item" object-fit="contain" muted style="pointer-events:none;"
                alt="新闻视频" />
              <cover-view class="swiper-mask" @tap="common.openapp">
              </cover-view>
            </view>
          </swiper-item>
        </swiper>

        <!-- 外部指示点:2个及以上才显示 -->
        <view v-if="post.imgs && post.imgs.length > 1" class="dots-bar">
          <view v-for="(dot, i) in post.imgs" :key="i" class="dot" :class="{ active: i === current }" />
        </view>

        <!-- 新闻标题 -->
        <view v-if="post.title" class="newstitle">
          <text class="title">{{ post.title }}</text>
        </view>

        <!-- 底部文案 -->
        <view v-if="post.copywriting && post.date" class="newsbottom">
          <text class="copywriting">{{ post.copywriting }}</text>
          <view class="meta-info">
            <text v-if="post.source" class="source">{{ post.source }}</text>
            <text v-if="post.source" class="date-text">·</text>
            <view class="datetextview">
              <uni-dateformat :date="Date.parse(post.date.replace(/-/g, '/'))" :threshold="[0, 0]" format="yyyy-MM-dd"
                class="date-text" />
              <text class="date-text">{{ post.time }}</text>
            </view>
            <view class="spacerview"></view>
            <view class="toseeall" @tap="handleInteraction">
              <text class="toseealltext">查看全文</text>
              <image src="@/static/imgs/arrowrightup/arrowrightup@3x.png" class="arrowrightupicon" mode="aspectFit"
                alt="查看全文图标" />
            </view>
          </view>
        </view>

      </view>

    </view>

    <!-- 评论区域 + 互动区域 -->
    <Comments :comments="post.comments" :showInteraction="true" :collectsum="post.collectsum" :likesum="post.likesum" />


  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useCommonStore } from '@/stores/common.js'
import Head from '@/pages/components/head/head.vue'
import Comments from '@/pages/components/comments/comments.vue'
const common = useCommonStore()

// 当前 dot
const current = ref(0)
const onChange = e => current.value = e.detail.current

// 动态数据
const post = ref({})

// 模拟获取数据函数
const fetchPostData = async () => {
  try {
    // 使用uni.request替代axios
    const response = await new Promise((resolve, reject) => {
      uni.request({
        url: '', // 这里可以填写实际API地址
        method: 'GET',
        timeout: 1000,
        success: resolve,
        fail: reject
      })
    })

    // 处理数据...
    const mockData = {
      userId: 1000011,
      userName: 'Kun Chang-Min',
      userImg: '/static/logo.png',
      date: '2024-12-03',
      time: '14:00',
      title: '智能体是人类智慧的延伸，它们将成为我们最强大的工具，也是最亲密的朋友。',
      source: '36氪',
      copywriting: '智能体是人类智慧的延伸，它们将成为我们最强大的工具，也是最亲密的朋友。',
      collectsum: 114514,
      likesum: 114514,
      imgs: [
        { type: 'video', src: '/static/videos/beauty.mp4' }
      ],
      comments: [
        {
          id: 101,
          userName: 'Brad Lewin',
          atUsers: ['JackyLove'],
          content: '今天天气真不错~',
          date: '2024-12-01',
          likeCount: 99999,
          showChild: false,
          children: [
            { id: 201, userName: 'Alice', content: '快智能体是人类智慧的延伸，它们将成为我们最强大的工具，也是最亲密的朋友。智能体是人类智慧的延伸', atUsers: ['Brad Lewin', 'JackyLove'], date: '2024-12-01', likeCount: 2 },
            { id: 202, userName: 'Bob', content: '我同意你的观点。我记得喜欢这个版本。这个新版本对我来说Nothing好处', atUsers: [], date: '2024-12-01', likeCount: 1 }
          ]
        },
        {
          id: 102,
          userName: 'Leanne Simpson',
          atUsers: ['Theshy'],
          content: '有人一起开黑吗？',
          date: '2024-12-02',
          likeCount: 1145140,
          showChild: false,
          children: [
            { id: 203, userName: 'Carol', content: '带我一个', atUsers: [], date: '2024-12-02', likeCount: 3 }
          ]
        },
        {
          id: 103,
          userName: 'Tom Hardy',
          atUsers: [],
          content: '主评论3：分享一张今晚的月亮。',
          date: '2024-12-03',
          likeCount: 999,
          showChild: false,
          children: []
        }
      ]
    }

    // 将模拟数据赋值给post
    post.value = mockData

  } catch (error) {
    console.error('获取数据失败:', error)
    // 如果获取失败，使用默认数据
    post.value = {
      userId: 1000011,
      userName: 'Kun Chang-Min',
      userImg: '/static/logo.png',
      date: '2024-12-03',
      title: '人工智能技术的最新突破',
      source: '科技日报',
      copywriting: '智能体是人类智慧的延伸，它们将成为我们最强大的工具，也是最亲密的朋友。',
      collectsum: 114514,
      likesum: 114514,
      imgs: [
        { type: 'img', src: '/static/logo.png' }
      ],
      comments: []
    }
  }
}

// 处理点击查看全文
const handleInteraction = () => {
  common.openapp();
}
// 组件挂载时获取数据
onMounted(() => {
  fetchPostData()
})

</script>

<style scoped>
page,
.page {
  display: flex;
  position: relative;
  flex-direction: column;
  margin: 0;
  height: 100vh;
}

.content {
  flex-shrink: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.news {
  width: 100%;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.swiper-banner {
  width: 100%;
  height: 357px
}

swiper-item {
  display: flex;
  align-items: center;
  justify-content: center
}

.swiper-center {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center
}

.swiper-item {
  width: 100%;
  height: 100%
}

.swiper-center {
  position: relative;
}

.swiper-mask {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: transparent;
}

.dots-bar {
  display: flex;
  justify-content: center;
  gap: 6px;
  padding: 8px 0 0;
}

.dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .2);
  transition: background .3s
}

.dot.active {
  background: #333
}

.newstitle {
  padding: 16px 16px 0;
}

.title {
  font-family: PingFangSC;
  font-size: 20px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.6;
  letter-spacing: 0.6px;
  color: #000;
}

.newsbottom {
  padding: 16px 16px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.copywriting {
  font-family: PingFangSC;
  font-size: 14px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.86;
  letter-spacing: 0.4px;
  color: #000;
}

.meta-info {
  display: flex;
  align-items: center;
  gap: 4px;
}

.source,
.date-text {
  font-family: PingFangSC;
  font-size: 13px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  text-align: left;
  color: #666;
}

.datetextview {
  display: flex;
  align-items: center;
  gap: 8px;
}

.spacerview {
  flex: 1;
  height: 0;
  pointer-events: none
}

.toseeall {
  display: flex;
  align-items: center;
}

.toseealltext {
  font-family: PingFangSC;
  font-size: 13px;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: 0.46px;
  color: #7c45ed;
}

.arrowrightupicon {
  width: 18px;
  height: 18px;
}
</style>
