<template>
  <view class="dynamic-detail">
    <!-- 滚动容器 -->
    <scroll-view scroll-y class="scroll-wrap">
      <view class="page-content">
        <!-- 审核驳回区域 -->
        <view class="reject-card" v-if="detail.auditStatus == 1 || detail.auditStatus == 3"
          :style="{ background: detail.auditStatus == 3 ? '#FFF5F5' : '#FFF8EC' }">
          <view class="reject-head">
            <image src="/static/workbench/warringIcon.png" style="width: 32rpx;height: 32rpx;" mode="widthFill" />

            <text v-if="detail.auditStatus == 3" class="reject-title2">审核驳回</text>
            <text v-if="detail.auditStatus == 1" class="reject-title1">审核中</text>
          </view>
          <view :class="{ 'reject-text1': detail.auditStatus == 1, 'reject-text2': detail.auditStatus == 3 }">
            审核结果将会在7个工作日通知您
          </view>
        </view>

        <!-- 文章标题 -->
        <view class="article-title">
          {{ detail.title || '无标题' }}
        </view>

        <!-- 发布信息 -->
        <view class="info-bar">
          <text>{{ detail.technicianNickName || '--' }}</text>
          <text>{{ detail.publishTime || '--' }}</text>
          <text>{{ detail.viewCount || '--' }}已读</text>
          <!-- <text>252点赞</text> -->
        </view>

        <!-- 正文内容 -->
        <view class="article-body">
          {{ detail.content || '--' }}

        </view>

        <!-- 图片/视频占位 -->
        <view class="media-placeholder">
          <view v-for="(item, index) in detail.mediaList" :key="index" :style="{ height: item.mediaType == '1' ? '214rpx' : '100%' }">
            <image v-if="item.mediaType == '1'" class="media-item" mode="aspectFill" :src="item.mediaUrl"
              @error="imageError"></image>
            <video v-if="item.mediaType == '2'" class="myVideo" :src="item.mediaUrl" @error="videoErrorCallback"
               enable-danmu danmu-btn controls></video>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>

import { dynamicDetail } from '@/api/dynamic'
export default {
  name: 'DynamicDetail',
  data() {
    return {
      momentId: '',
      detail: {},
    }
  },
  onLoad(options) {
    this.momentId = options.momentId
    this.getDetail()
  },
  methods: {
    getDetail() {
      dynamicDetail({
        momentId: this.momentId
      }).then(res => {
        if (res.data.code === 200) {
          this.detail = res.data.data
        } else {
          this.detail = {}
        }
      })
    }
  }

}
</script>

<style lang="scss" scoped>
.dynamic-detail {
   background-color: #F7F8FA;
   height: 100vh;
}

/* 滚动区域高度：扣除导航栏高度 */
.scroll-wrap {
  height: calc(100vh - var(--u-navbar-height));
}

/* 页面整体内边距 */
.page-content {
  background-color: #fff;
}

/* 驳回卡片样式 */
.reject-card {
  padding: 24rpx 32rpx;
}

.reject-head {
  display: flex;
  align-items: center;
  gap: 8rpx;
  margin-bottom: 16rpx;
}

.reject-title1 {
  font-weight: 500;
  font-size: 32rpx;
  color: #FF7D00;
}

.reject-title2 {
  font-weight: 500;
  font-size: 32rpx;
  color: #F53F3F;
}

.reject-text1 {
  font-weight: 400;
  font-size: 26rpx;
  color: #FF7D00;
}

.reject-text2 {
  font-weight: 400;
  font-size: 26rpx;
  color: #F53F3F;
}

/* 文章标题 */
.article-title {
  font-weight: 500;
  font-size: 32rpx;
  color: #1D2129;
  padding: 32rpx 32rpx 0 32rpx;
}

/* 发布信息栏 */
.info-bar {
  display: flex;
  gap: 48rpx;
  font-weight: 400;
  font-size: 22rpx;
  color: #86909C;
  padding: 8rpx 32rpx 0 32rpx;
}

/* 正文 */
.article-body {
  font-weight: 400;
  font-size: 28rpx;
  color: #4E5969;
  padding: 32rpx 32rpx 0 32rpx;
}

/* 媒体占位框 */
.media-placeholder {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding: 32rpx;
  gap: 24rpx;
  .media-item {
    width: 214rpx;
    height: 214rpx;
    border-radius: 8rpx;
  }
}
.myVideo {
  // width: 214rpx;
  // height: 214rpx;
  border-radius: 8rpx;
}
::v-deep .uni-video-danmu-button.uni-video-danmu-button-active{
  display: none;
}
// ::v-deep .uni-video-control-button{
//   padding:40rpx 0 0 5rpx!important;
//   width: 15rpx;
//   height: 15rpx;
// }
// ::v-deep .uni-video-bar.uni-video-bar-full{
//   width: 214rpx;
//   padding: 0;
// }
// ::v-deep .uni-video-bar-full{
//   .uni-video-inner{
//     display: none;
//   }
// }
// ::v-deep .uni-video-bar{
//   height: 30rpx;
// }
// ::v-deep .uni-video-danmu-button.uni-video-danmu-button-active{
//   display: none;
// }
// ::v-deep .uni-video-current-time{
//   font-size: 18rpx;
//   margin-left: 10rpx;
// }
// ::v-deep .uni-video-duration{
//   font-size: 18rpx;
// }
</style>
