<template>
  <view class="navbox">
    <view class="status_bar"></view>
    <uni-nav-bar
      left-icon="left"
      title="视频详情"
      @clickLeft="goBack"
      color="#8B2316"
      :border="false"
      backgroundColor="#eeeeee"
    >
      <template #right>
        <view class="nav-actions" v-if="from != 'download'">
          <view class="collect-img" @click="shareToggle">
            <image class="share-img-icon" :src="shareIcon" mode="aspectFill" />
          </view>
          <view class="collect-img" @click="toCollection">
            <image
              class="collect-img-icon"
              :src="videoInfo.isCollection ? collectImg : discollectImg"
              mode="aspectFill"
            />
          </view>
        </view>
      </template>
    </uni-nav-bar>
  </view>

  <!-- <video
          v-if="showVideo"
          class="player-wrapper"
          :style="{width: videoWidth + 'px'}"
          :src="videoSrc"
          controls
          object-fit="contain"
          :autoplay="false"
        ></video> -->
  <sunny-video
    v-if="showVideo"
    class="player-wrapper"
    :src="videoSrc"
    :videoHeight="220"
    :seekTime="0"
    @fullscreenchange="onFullscreenChange"
  />
  <!-- 标签切换 -->
  <cover-view class="tabs" v-if="from != 'download'" :style="{ opacity: isFullScreen ? 0: 1 }">
    <cover-view
      class="tab"
      :class="{ active: activeTab === 'info' }"
      @click="switchTab('info')"
    >
      视频简介
      <cover-view class="tab-line" v-if="activeTab === 'info'"></cover-view>
    </cover-view>
    <cover-view
      class="tab"
      :class="{ active: activeTab === 'comment' }"
      @click="switchTab('comment')"
    >
      评论
      <cover-view class="tab-line" v-if="activeTab === 'comment'"></cover-view>
    </cover-view>
  </cover-view>
  <view class="video-detail-page" v-if="from != 'download'">
    <!-- <scroll-view
      class="content-scroll"
      scroll-y
      :show-scrollbar="false"
      @scrolltolower="onScrollToLower"
      lower-threshold="60"
    > -->
    <view class="content-scroll">
      <!-- 内容区 -->
      <view v-if="activeTab === 'info'" class="intro">
        <!-- 显示传递过来的视频信息 -->
        <!-- <view v-if="pageParams.title" class="video-info">
          <view class="video-title">{{
            decodeURIComponent(pageParams.title)
          }}</view>
          <view v-if="pageParams.author" class="video-author">{{
            decodeURIComponent(pageParams.author)
          }}</view>
        </view> -->
        <!-- <view class="speaker">{{ videoInfo.public_name }}</view> -->
        <text class="intro-text">{{ videoInfo.note }}</text>
      </view>
      <view v-else class="comments">
        <view v-if="commentList.length === 0" class="empty">暂无评论</view>
        <view v-else>
          <view class="comment-item" v-for="(c, idx) in commentList" :key="idx">
            <image class="avatar" :src="c.avatar" mode="aspectFill" />
            <view class="meta">
              <view class="name">{{ c.name }}</view>
              <view class="content">{{ c.content }}</view>
              <view class="time">{{ c.time }}</view>
              <view v-if="c.children && c.children.length" class="child-list">
                <view class="child-item" v-for="(r, i) in c.children" :key="i">
                  <image
                    class="avatar small"
                    :src="r.avatar"
                    mode="aspectFill"
                  />
                  <view class="meta">
                    <view class="name">{{ r.name }}</view>
                    <view class="content">{{ r.content }}</view>
                    <view class="time">{{ r.time }}</view>
                  </view>
                </view>
              </view>
            </view>
            <view class="reply-btn" @click="onReply(c)">回复</view>
          </view>
          <!-- 加载状态/没有更多 -->
          <view v-if="loading" class="list-loading">加载中...</view>
          <view v-if="noMore" class="list-no-more">没有更多了</view>
        </view>
      </view>

      <!-- 留白，避免被底部按钮遮挡 -->
      <!-- <view class="bottom-spacer"></view> -->
    </view>
  </view>

  <!-- 底部区域：信息页为下载条，评论页为上传图片+输入+发送 -->
  <view v-if="activeTab === 'info' && from != 'download'" class="bottom-download" @click="onDownload">
    <text class="download-text" v-if="!hasDownload"
      >点击下载<text v-if="!isVideoDownloadRecord && welfareNum <= 0"
        >(限时<text class="discount">5</text>折，仅需{{
          videoInfo.point
        }}积分)</text
      >
      <text v-if="!isVideoDownloadRecord && welfareNum > 0">(剩余免费下载{{ welfareNum }}次数)</text>
      </text
    >
   
    <text class="download-text" v-else-if="downLoadStatus === 'loading' || downLoadStatus === 'failed'">视频缓存中</text>
    <text class="download-text" v-else-if="downLoadStatus === 'completed'">查看缓存</text>
  </view>
  <view v-if="activeTab !== 'info' && from != 'download'" class="bottom-comment">
    <input
      class="comment-input"
      v-model="commentText"
      placeholder="我也说一句"
      confirm-type="send"
      @confirm="sendComment"
    />
    <view class="send-btn" @click="sendComment">发送</view>
  </view>
  <unidialog
    :visible="networkVisible"
    :content="networkContent"
    @close="networkVisible = false"
    @confirm="networkConfirm"
  ></unidialog>
  <unidialog
    :visible="pointVisible"
    :content="pointContent"
    @close="pointVisible = false"
    @confirm="pointConfirm"
  ></unidialog>
  <unidialog
    :visible="notEnoughVisible"
    :content="notEnoughContent"
    @close="notEnoughVisible = false"
    @confirm="notEnoughConfirm"
  ></unidialog>
  <!-- 分享弹窗 -->
  <uni-popup ref="shareRef" type="bottom" safeArea backgroundColor="#fff">
    <view class="share-popup">
      <view class="share-title">分享到</view>
      <view class="share-content">
        <view class="share-item" @click="shareToWechat">
          <view class="share-icon wechat-icon">
            <image class="share-img" :src="wxImg" mode="aspectFill" />
          </view>
          <text class="share-text">微信</text>
        </view>
        <view class="share-item" @click="shareToMoments">
          <view class="share-icon moments-icon">
            <image class="share-img" :src="friendImg" mode="aspectFill" />
          </view>
          <text class="share-text">朋友圈</text>
        </view>
        <view class="share-item" @click="shareToWeibo">
          <view class="share-icon weibo-icon">
            <image class="share-img" :src="sinaImg" mode="aspectFill" />
          </view>
          <text class="share-text">新浪微博</text>
        </view>
      </view>
      <view class="share-cancel" @click="closeShare">
        <text>取消</text>
      </view>
    </view>
  </uni-popup>
</template>

<script setup>
import { ref, nextTick } from "vue";
import uniVideo from "@/components/uniVideo/uniVideo.vue";
import { onLoad, onShow } from "@dcloudio/uni-app";
import unidialog from "@/components/dialog/dialog.vue";
import collectImg from "@/static/icon_book_collect_sel.png";
import discollectImg from "@/static/icon_book_collect_nor.png";
import shareIcon from "@/static/icon_share.png";
import sinaImg from "@/static/share_sina.png";
import wxImg from "@/static/share_weixin.png";
import friendImg from "@/static/share_wxc.png";
import logoImg from "@/static/weiboShare.png";
import api from "@/api/api";
import docUrl from "@/utils/docUrl";
import navTo from "@/utils/navTo";
const shareLink = ref("");
import otherHost from "@/utils/otherHost";
const video_uuid = ref("");
const videoInfo = ref({});
const networkVisible = ref(false);
const networkContent = ref("");
const pointVisible = ref(false);
const pointContent = ref("");
const notEnoughVisible = ref(false);
const notEnoughContent = ref("");
const welfareNum = ref(0);
const showVideo = ref(false);
const videoWidth = ref(375);
const hasDownload = ref(false);
const downLoadStatus = ref('start');
let downList = uni.getStorageSync("downLoadVideo") || [];
const downLoadList = ref(downList);
const isFullScreen = ref(false);
//import DomVideoPlayer from 'uniapp-video-player'
import sunnyVideo from "@/uni_modules/sunny-video/components/sunny-video/sunny-video.vue";
import downloadStore from "@/store/downloadStoreVideo.js";
const downloadTasks = ref([]);
// 添加下载任务
const addDownloadTask = (item) => {
  // 使用store添加任务
  const taskIndex = downloadStore.addTask(item);
  // 同步任务列表
  syncTasksFromStore();
  // 开始下载
  startDownload(taskIndex);
};
const onFullscreenChange = (e) => {
  let { fullScreen, direction } = e;
   nextTick(() => {
    isFullScreen.value = fullScreen;
   });
};
// 开始下载
const startDownload = (index) => {
  const taskItem = downloadStore.getTask(index);
  if (!taskItem) return;
  hasDownload.value = true;
  downLoadStatus.value = 'loading';
  const task = uni.downloadFile({
    url: taskItem.url,
    success: (res1) => {
      //console.log("res1:"+JSON.stringify(res1));
      if (res1.statusCode === 200) {
        downloadStore.updateTask(index, {
          status: "completed",
          filePath: res1.tempFilePath,
        });
        downLoadStatus.value = 'completed';
        uni.showToast({
          title: "下载成功",
          icon: "none",
        });
        downLoadStatus.value = 'completed';
       
        uni.saveFile({
          tempFilePath: res1.tempFilePath,
          success: function (res2) {
            console.log("res2:"+JSON.stringify(res2));
            uni.getSavedFileInfo({
              filePath: res2.savedFilePath,
              success: function (res) {
                
                console.log("res:"+JSON.stringify(res));
                console.log("size:"+res.size);
                downloadStore.updateTask(index, {
                  status: "completed",
                  localPath: res2.savedFilePath,
                  size: res.size,
                });
                VideoDownloadRecord();
              },
            });
          },
        });
      } else {
        downloadStore.updateTask(index, {
          status: "failed",
        });
        uni.showToast({
          title: "下载失败",
          icon: "none",
        });
      }
    },
    fail: (err) => {
      downloadStore.updateTask(index, {
        status: "failed",
      });
      uni.showToast({
        title: "下载失败: " + (err.errMsg || "未知错误"),
        icon: "none",
        duration: 2000,
      });
    },
  });

  // 监听下载进度
  task.onProgressUpdate((update) => {
    const currentTask = downloadStore.getTask(index);
    if (currentTask && currentTask.status === "downloading") {
      downloadStore.updateTask(index, {
        progress: update.progress,
        downloadSize: update.totalBytesWritten,
        totalSize: update.totalBytesExpectedToWrite,
      });
    }
  });

  // 保存task对象到store（用于暂停/继续）
  downloadStore.updateTask(index, {
    task: task,
  });
};

const syncTasksFromStore = () => {
  downloadTasks.value = downloadStore.getTasks();
};

const notEnoughConfirm = () => {
  notEnoughVisible.value = false;
  navTo({
    url: "/pages_app/buyPoint/buyPoint",
  });
};
const pointConfirm = () => {
  pointVisible.value = false;
  payVideoDownload();
};
const toCollection = () => {
  if (videoInfo.value.isCollection == 1) {
    discollection();
  } else {
    collection();
  }
};
const networkConfirm = () => {
  networkVisible.value = false;
 
  if(welfareNum.value > 0) {
    useWelfareNum();
  }else{
    pointVisible.value = true;
  }
  
};
const addVideoWatchRecord = async () => {
  const res = await api.addVideoWatchRecord({
    video_uuid: video_uuid.value,
  });
  if (res.code == 200) {
  }
};
const onLoadedmetadata = (e) => {
  un.showModal({
    content: "加载完成：" + JSON.stringify(e),
    showCancel: false,
  });
};
const onVideoError = (e) => {
  uni.showModal({
    content: JSON.stringify(e),
    showCancel: false,
  });
};
// 接收页面参数
const pageParams = ref({});
const useWelfareNum = async () => {
  const res = await api.useWelfareNum({
    type: 1,
    other_uuid:video_uuid.value,
  });
  if (res.code == 1) {
      uni.showToast({ title: "使用次数成功", icon: "none" });
      welfareNum.value--;
      addDownloadTask({
    url: videoSrc.value,
    id: video_uuid.value,
    imgpath: videoInfo.value.imgpath,
    author: videoInfo.value.public_name,
    name: videoInfo.value.name,
  });
  }
};
const videoDetail = async () => {
  const res = await api.videoDetail({ video_uuid: video_uuid.value });
  if (res.code == 200) {
    const userInfo = uni.getStorageSync("userInfo");
    videoInfo.value = res.video;
  
    //hasDownload.value = downLoadList.value.includes(video_uuid.value);
    let vid = res.video.polyv_uuid;
    let uuid = vid.substring(0, 10);
    let index = vid.lastIndexOf("_");
    let f = vid.substring(index - 1, index);
    let id = vid.substring(0, index + 1);
    //videoSrc.value = 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4';
    videoSrc.value = `http://mpv.videocc.net/${uuid}/${f}/${id}1.mp4`;
    showVideo.value = true;
    shareLink.value =
      otherHost +
      "/video/hcp_detial?share=1&uuid=" +
      video_uuid.value +
      "&expertshare=videoshare&fromtype=doctor";
  }
};
const collection = async () => {
  const res = await api.collection({
    other_uuid: video_uuid.value,
    type: 5,
  });
  if (res.code == 200) {
    uni.showToast({ title: "收藏成功", icon: "none" });
    videoDetail();
  }
};
const discollection = async () => {
  const res = await api.discollection({
    other_uuid: video_uuid.value,
    type: 5,
  });
  if (res.code == 200) {
    uni.showToast({ title: "取消收藏成功", icon: "none" });
    videoDetail();
  }
};
const isVideoDownloadRecord = ref(false);
const VideoDownloadRecord = async () => {
  const res = await api.isVideoDownloadRecord({ video_uuid: video_uuid.value });
  if (res.code == 200) {
    isVideoDownloadRecord.value = res.result == 0 ? false : true;
    if(isVideoDownloadRecord.value) {
      downloadTasks.value.forEach(item => {
      if (item.id == video_uuid.value) {
            uni.getSavedFileInfo({
           filePath: item.localPath, //仅做示例用，非真正的文件路径
            success: function (res) {
            hasDownload.value = true;
            downLoadStatus.value = 'completed';
           },
           fail: function (err) {
            // hasDownload.value = false;
            // downLoadStatus.value = 'failed';
           }
        });       
      }
    });
    
    }
  }
};

const getWelfareNum = async () => {
  const res = await api.getWelfareNum({
    type: 1,
  });
  if (res.code == 1) {
    welfareNum.value = res.WelfareNum;
  }
};

const videoCommentListV2 = async () => {
  loading.value = true;
  try {
    const res = await api.videoCommentListV2({
      uuid: video_uuid.value,
    });
    if (res && res.code == 200 && Array.isArray(res.data)) {
      const mapped = res.data.map(mapComment);
      commentList.value = mapped.reverse();
      noMore.value = true;
    } else {
      noMore.value = true;
    }
  } finally {
    loading.value = false;
  }
};
// 恢复正在下载的任务
const resumeDownloadingTasks = () => {
  // 使用 nextTick 确保在页面渲染后再恢复下载任务
  nextTick(() => {
    downloadStore.resumeDownloadingTasks((index) => {
      // 重新开始下载（uni.downloadFile不支持断点续传，所以从0开始）
      console.log("恢复下载任务:", downloadStore.getTask(index)?.url);
      startDownload(index);
    });
  });
};

onShow(() => {
  hasDownload.value = false;
  downLoadStatus.value = 'start';
  console.log('onShow');
  syncTasksFromStore();
  // 监听store变化
   downloadStore.addListener((tasks) => {
    downloadTasks.value = tasks;
   
  });
  // 恢复正在下载的任务
  resumeDownloadingTasks();
  console.log('tasks');
    console.log(downloadTasks.value);
    if(downloadTasks.value.length > 0) {
       for(let i = 0; i < downloadTasks.value.length; i++) {
        if(downloadTasks.value[i].id == video_uuid.value) {
             console.log('runing');
             console.log(downloadTasks.value[i].status);
             hasDownload.value = true;
           if(downloadTasks.value[i].status == 'completed') {
            downLoadStatus.value = 'completed';
           }else if(downloadTasks.value[i].status == 'downloading') {
            uni.showToast({
              title: '视频缓存中',
              icon: 'none',
            });
            hasDownload.value = true;
            downLoadStatus.value = 'loading';
           }else if(downloadTasks.value[i].status == 'paused') {
            hasDownload.value = true;
            downLoadStatus.value = 'loading';
           }else if(downloadTasks.value[i].status == 'failed') {
            hasDownload.value = true;
            downLoadStatus.value = 'loading';
           }
        }
       }
    };
  if (activeTab.value == "comment") {
    videoCommentListV2();
  }
  if(from.value != 'download') {
    videoDetail();
  }
  uni.hideLoading();
   
});

const shareRef = ref();
// 分享APP
const shareToggle = () => {
  shareRef.value.open();
};

// 关闭分享弹窗
const closeShare = () => {
  shareRef.value.close();
};

// 分享到微信
const shareToWechat = () => {
  // #ifdef APP-PLUS
  // 使用系统分享

  uni.share({
    provider: "weixin",
    scene: "WXSceneSession",
    type: 0,
    title: videoInfo.value.name,
    summary: videoInfo.value.note,
    href: shareLink.value,
    imageUrl: docUrl + videoInfo.value.imgpath,
    success: function (res) {
      //console.log("success:" + JSON.stringify(res));
    },
    fail: function (err) {
      //console.log("fail:" + JSON.stringify(err));
    },
  });
  // #endif

  // #ifdef H5
  // H5环境下的分享
  if (navigator.share) {
    navigator
      .share({
        title: "肝胆相照APP",
        text: "专业的医疗健康平台，快来下载体验吧！",
        url: shareLink.value,
      })
      .then(() => {
        uni.showToast({
          title: "分享成功",
          icon: "success",
        });
      })
      .catch(() => {
        uni.showToast({
          title: "分享失败",
          icon: "none",
        });
      });
  } else {
    // 复制到剪贴板
    uni.setClipboardData({
      data:
        "肝胆相照APP - 专业的医疗健康平台，快来下载体验吧！\n下载链接：" +
        shareLink.value,
      success: () => {
        uni.showToast({
          title: "已复制到剪贴板",
          icon: "success",
        });
      },
    });
  }
  // #endif

  // #ifdef MP-WEIXIN
  // 微信小程序分享
  uni.showShareMenu({
    withShareTicket: true,
    menus: ["shareAppMessage", "shareTimeline"],
  });
  // #endif

  closeShare();
};

// 分享到朋友圈
const shareToMoments = () => {
  // #ifdef APP-PLUS
  uni.share({
    provider: "weixin",
    scene: "WXSceneTimeline",
    type: 0,
    title: videoInfo.value.name,
    summary: videoInfo.value.note,
    href: shareLink.value,
    imageUrl: docUrl + videoInfo.value.imgpath,
    success: function (res) {
      //console.log("success:" + JSON.stringify(res));
    },
    fail: function (err) {
      //console.log("fail:" + JSON.stringify(err));
    },
  });
  // #endif

  // #ifdef H5
  // 复制到剪贴板
  uni.setClipboardData({
    data: "肝胆相照APP - 专业的医疗健康平台，快来下载体验吧！\n下载链接：https://www.igandan.com",
    success: () => {
      uni.showToast({
        title: "已复制到剪贴板，可分享到朋友圈",
        icon: "success",
      });
    },
  });
  // #endif

  // #ifdef MP-WEIXIN
  uni.showShareMenu({
    withShareTicket: true,
    menus: ["shareAppMessage", "shareTimeline"],
  });
  // #endif

  closeShare();
};

// 分享到新浪微博
const shareToWeibo = () => {
  // #ifdef APP-PLUS
  uni.share({
    provider: "sinaweibo",
    type: 0,
    title: videoInfo.value.name,
    summary: videoInfo.value.note,
    href: shareLink.value,
    imageUrl: logoImg,
    success: function (res) {
      //console.log("分享成功");
    },
    fail: function (err) {
      //console.log("fail:" + JSON.stringify(err));
    },
  });
  // plus.share.sendWithSystem({
  // 	type: 'text',
  // 	content: '肝胆相照APP - 专业的医疗健康平台，快来下载体验吧！\n下载链接：https://www.igandan.com'
  // }, () => {
  // 	uni.showToast({
  // 		title: '分享成功',
  // 		icon: 'success'
  // 	})
  // }, (err) => {
  // 	console.log('分享失败：', err)
  // 	uni.showToast({
  // 		title: '分享失败',
  // 		icon: 'none'
  // 	})
  // })
  // #endif

  // #ifdef H5
  // 复制到剪贴板
  uni.setClipboardData({
    data: "肝胆相照APP - 专业的医疗健康平台，快来下载体验吧！\n下载链接：https://www.igandan.com",
    success: () => {
      uni.showToast({
        title: "已复制到剪贴板，可分享到微博",
        icon: "success",
      });
    },
  });
  // #endif

  closeShare();
};
const from = ref('');
// 使用uni-app的onLoad生命周期
onLoad((options) => {
  uni.getSystemInfo({
    success: function (res) {
      videoWidth.value = res.windowWidth; // 窗口宽度
    },
  });
  video_uuid.value = options.id;
  from.value = options.from;
  if(from.value != 'download') {
    addVideoWatchRecord();
    VideoDownloadRecord();
    getWelfareNum();
  }
  
   // 从store同步任务列表
   syncTasksFromStore();
  // 监听store变化
   downloadStore.addListener((tasks) => {
    downloadTasks.value = tasks;
   
  });
  // 恢复正在下载的任务
  resumeDownloadingTasks();
 if(from.value == 'download') {
  downloadTasks.value.forEach(item => {
    if(item.id == video_uuid.value) {
      console.log(222222);
        console.log(item.localPath);
       videoSrc.value = item.localPath;
       showVideo.value = true;
    }
  });
 }
  

  // navTo({
  //   url: "/pages_app/downLoadVideo/downLoadVideo",
  // });
});

const videoSrc = ref("");
const activeTab = ref("info");
const introText = ref(
  "首都医科大学附属北京佑安医院，肝病中心四科主任（疑难肝病与人工肝中心主任），主任医师，教授，博士生导师。中华医学会肝病学分会副秘书长、委员、终末期肝病学组副组长，北京医学会肝病学分会常委，肝衰竭及人工肝学组副组长，北京肝胆相照公益基金会副理事长等。发表论文500余篇，累计SCI论文150余篇，出版专著20余部，获得科研奖项10余项，获得发明专利7项。"
);

// 示例评论数据
const commentList = ref([]);

const switchTab = (tab) => {
  activeTab.value = tab;
  if (tab == "comment") {
    videoCommentListV2();
  }
};
const payVideoDownload = async () => {
  const res = await api.payVideoDownload({ video_uuid: video_uuid.value });
  if (res.code == 200) {
    addDownloadTask({
      url: videoSrc.value,
      id: video_uuid.value,
      imgpath: videoInfo.value.imgpath,
      author: videoInfo.value.public_name,
      name: videoInfo.value.name,
    });
    
  } else if (res.code == 106) {
    notEnoughVisible.value = true;
    notEnoughContent.value = `您的积分不足，是否购买积分？`;
  }
};

const onDownload = () => {
  if (!isVideoDownloadRecord.value) {
     if(welfareNum.value <= 0) {
          pointContent.value = `当前需要${videoInfo.value.point}积分兑换，若删除可以再次缓存`;
          uni.getNetworkType({
          success: function (res) {
            if (res.networkType != "none") {
              networkVisible.value = true;
              networkContent.value = `当前为${res.networkType}网络，确定下载？`;
            } else {
              uni.showToast({ title: "当前未联网，请检查网络", icon: "none" });
            }
          },
        });
     }else{
      uni.getNetworkType({
          success: function (res) {
            if (res.networkType != "none") {
              networkVisible.value = true;
              networkContent.value = `当前为${res.networkType}网络，确定下载？`;
            } else {
              uni.showToast({ title: "当前未联网，请检查网络", icon: "none" });
            }
          },
        });
     }

    
  } else {
    if (hasDownload.value) {
      navTo({
        url: "/pages_app/downLoadVideo/downLoadVideo",
      });
    } else {
      addDownloadTask({
        url: videoSrc.value,
        id: video_uuid.value,
        imgpath: videoInfo.value.imgpath,
        author: videoInfo.value.public_name,
        name: videoInfo.value.name,
      });
    }
  }
};

const goBack = () => {
  uni.navigateBack();
};
const addCommentV2 = async () => {
  const res = await api.addCommentV2({
    article_uuid: video_uuid.value,
    type: "8",
    comment: commentText.value,
  });
  if (res.code == 200) {
    uni.showToast({ title: "评论成功", icon: "none" });
    commentText.value = "";
    videoCommentListV2();
  }
};
const onReply = (c) => {
  navTo({
    url:
      "/pages_app/reply/reply?comment_partent=" +
      c.content +
      "&name=" +
      c.name +
      "&video_uuid=" +
      video_uuid.value,
  });
};

// 评论输入
const commentText = ref("");
const sendComment = () => {
  if (!commentText.value.trim()) {
    uni.showToast({ title: "请输入内容", icon: "none" });
    return;
  }
  addCommentV2();
};

// 上拉加载
const page = ref(1);
const pageSize = ref(10);
const loading = ref(false);
const noMore = ref(false);

const onScrollToLower = async () => {
  if (activeTab.value !== "comment" || loading.value || noMore.value) return;
  // 如需分页，可在此按页码调用接口并 push 结果
};

const toFullUrl = (p) => {
  if (!p) return "/static/icon_home_my_public.png";
  return p.startsWith("http") ? p : docUrl + p;
};

const mapComment = (item) => {
  return {
    avatar: toFullUrl(item.photo || ""),
    name: item.name || "匿名",
    content: item.content || "",
    time: item.create_date || "",
    children: Array.isArray(item.childs) ? item.childs.map(mapComment) : [],
  };
};
</script>

<style lang="scss" scoped>
$nav-h: 140rpx;
$bottom-h: 100rpx;
$bg-color: #f7f7f7;
$text-primary: #333;
$text-secondary: #666;
$theme-color: #8b2316;
.collect-img {
  /* margin-top:50rpx; */
}
.navbox {
  :deep(.uni-navbar__header-btns-right) {
    width: 100px !important;
  }
  :deep(.uni-navbar__header-btns-left) {
    min-width: 100px;
    width: 100px !important;
  }
}
.share-img-icon {
  width: 40rpx;
  height: 40rpx;
}
.collect-img-icon {
  width: 40rpx;
  height: 40rpx;
}
.nav-actions {
  display: flex;
  align-items: center;
  gap: 20rpx;
}

.video-detail-page {
  border-top: 2rpx solid #cccccc;
  background: $bg-color;
  overflow: hidden;
}

.content-scroll {
  height: 100%;
}

.player-wrapper {
  background: #fff;
  position: relative;
  top: calc(var(--status-bar-height) + 44px);
  z-index: 0;

  overflow: hidden;
}
.share-img {
  width: 100rpx;
  height: 100rpx;
}

.tabs {
  background: #fff;
  display: flex;
  justify-content: center;
  position: fixed;
  top: calc(var(--status-bar-height) + 44px + 220px);
  padding: 24rpx 0 0;

 
  width: 100%;
  z-index: 99;

  .tab {
    width: 120rpx;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 16rpx 0 24rpx;
    color: $text-secondary;
    font-size: 28rpx!important;
    .tab-line {
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 64rpx;
      height: 6rpx;
      z-index: 2;
      border-radius: 6rpx;
      background: $theme-color;
    }
    &:nth-child(2) {
      display: flex;
      margin-left: 200rpx;
      justify-content: center;
      align-items: center;
      text-align: center;
    }
    &.active {
      color: $theme-color;
    }

    // &.active::after {
    //   content: "";
    //   position: absolute;
    //   left: 50%;
    //   bottom: 0;
    //   transform: translateX(-50%);
    //   width: 64rpx;
    //   height: 6rpx;
    //   border-radius: 6rpx;
    //   background: $theme-color;
    // }
  }
}
.video-detail-page {
  position: fixed;
  width: 100%;
  background: #fff;
  // padding: 24rpx 28rpx 40rpx;
  top: calc(var(--status-bar-height) + 44px + 220px + 99rpx);
  height: calc(100vh - var(--status-bar-height) - 44px - 220px - 90rpx);
  overflow-y: scroll;
  // background: red;
}
.intro {
  // background: #fff;
  padding: 30rpx 28rpx 100rpx;
  // margin-top: calc(var(--status-bar-height) + 44px + 220px + 88rpx);
  // height: calc(100vh - var(--status-bar-height) - 44px - 220px - 88rpx);
  // overflow-y: scroll;
  // padding-bottom: 100rpx;
  .video-info {
    margin-bottom: 20rpx;
    padding: 20rpx;
    background: #f8f9fa;
    border-radius: 8rpx;

    .video-title {
      font-size: 32rpx;
      color: #333;
      font-weight: bold;
      margin-bottom: 8rpx;
      line-height: 1.4;
    }

    .video-author {
      font-size: 26rpx;
      color: #666;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }

  .speaker {
    font-size: 32rpx;
    color: $text-primary;
    margin: 12rpx 0 20rpx;
  }

  .intro-text {
    font-size: 30rpx;
    line-height: 1.8;
    color: $text-primary;
  }
}

.comments {
  // background: #fff;
  // margin-top: calc(var(--status-bar-height) + 44px + 220px + 88rpx);
  // height: calc(100vh - var(--status-bar-height) - 44px - 220px - 88rpx);
  // overflow-y: scroll;
  // padding-bottom: 100rpx;
  padding: 20rpx 20rpx 40rpx;

  .empty {
    text-align: center;
    color: $text-secondary;
    padding: 60rpx 0;
  }

  .comment-item {
    display: flex;
    align-items: flex-start;
    padding: 24rpx 10rpx;
    border-bottom: 2rpx solid #f0f0f0;

    .avatar {
      width: 100rpx;
      height: 100rpx;
      border-radius: 20rpx;
      margin-right: 20rpx;
      background: #eee;
    }

    .meta {
      flex: 1;
      min-width: 0;

      .name {
        font-size: 30rpx;
        color: #1f1f1f;
        margin-bottom: 6rpx;
      }

      .content {
        font-size: 30rpx;
        color: #666;
        line-height: 1.6;
        margin-bottom: 12rpx;
        word-break: break-word;
      }

      .time {
        font-size: 24rpx;
        color: #909399;
      }
    }

    .reply-btn {
      margin-left: 16rpx;
      border: 2rpx solid #8b2316;
      color: #8b2316;
      border-radius: 36rpx;
      padding: 10rpx 24rpx;
      font-size: 26rpx;
      white-space: nowrap;
    }
  }

  .list-loading,
  .list-no-more {
    text-align: center;
    color: #9aa0a6;
    padding: 20rpx 0;
    font-size: 26rpx;
  }
  .child-list {
    margin-top: 8rpx;
    margin-left: -10rpx;
  }
  .child-item {
    display: flex;
    align-items: flex-start;
    margin-top: 16rpx;
  }
  .avatar.small {
    width: 64rpx;
    height: 64rpx;
    border-radius: 12rpx;
    margin-right: 16rpx;
  }
}

.bottom-spacer {
  height: 40rpx;
}

.bottom-download {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: $bottom-h;
  background: #00cac1;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  .discount {
    color: #d4ff00;
    font-size: 40rpx;
  }
  .download-text {
    color: #fff;
    font-size: 30rpx;
  }
}

.bottom-comment {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100rpx;
  background: #ffffff;
  display: flex;
  align-items: center;
  padding: 0 20rpx;
  gap: 16rpx;
  z-index: 10;

  .comment-input {
    flex: 1;
    height: 72rpx;
    border-radius: 10rpx;
    background: #ffffff;
    border: 2rpx solid #cacaca;
    padding: 0 24rpx;
    font-size: 28rpx;
    color: #333;
  }

  .send-btn {
    padding: 0 28rpx;
    height: 72rpx;
    border-radius: 36rpx;
    background: #8b2316;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28rpx;
  }
}

/* 分享弹窗样式 */
.share-popup {
  background-color: #fff;
  border-radius: 20rpx 20rpx 0 0;
  padding: 40rpx 0 0;
}

.share-title {
  text-align: center;
  font-size: 32rpx;
  color: #333;
  margin-bottom: 40rpx;
  font-weight: 500;
}

.share-content {
  display: flex;
  justify-content: space-around;
  padding: 0 40rpx 40rpx;
}

.share-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}

.share-icon {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20rpx;
}

.wechat-icon {
  background-color: #07c160;
}

.moments-icon {
  background-color: #07c160;
}

.weibo-icon {
  background-color: #e6162d;
}

.qq-icon {
  background-color: #12b7f5;
}

.share-icon-text {
  font-size: 50rpx;
  color: #fff;
  font-weight: bold;
}

.share-text {
  font-size: 24rpx;
  color: #666;
}

.share-cancel {
  height: 100rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 1rpx solid #f0f0f0;
  font-size: 32rpx;
  color: #333;
}

.share-cancel:active {
  background-color: #f5f5f5;
}
</style>