<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" style="margin-right: 20rpx;">
            <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>
   <view class="videobox ">
    <!-- <cover-view class="play-img" v-if="showVideo && !isPlaying && !isAndroid" @click="playVideo">
     <cover-image :src="playImg" mode="aspectFill" />
    </cover-view> -->
       <video
          v-if="showVideo"
          class="player-wrapper"
          :style="{width: videoWidth + 'px'}"
          :src="videoSrc"
          controls
          id="myVideo"
          object-fit="contain"
          :autoplay="false"
          @play="onVideoPlay"
          @pause="onVideoPause"
          @ended="onVideoEnded"
          @error="onVideoError"
        ></video> 
        <!-- <sunny-video
    v-if="showVideo"
    class="player-wrapper"
    :src="videoSrc"
    :videoHeight="220"
    :videoWidth="videoWidth"
    :seekTime="0"
    @fullscreenchange="onFullscreenChange"
  />  -->
   </view>
   <!-- @play="onVideoPlay"
   @pause="onVideoPause" -->
 
  <!-- 标签切换 -->
  
  <cover-view class="tabs" v-if="from != 'download'" :style="{ opacity:isFullScreen?0:1, width: videoWidth + 'px' }" >
    <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 class="line"></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 getVisibleChildren(c)" :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
                  class="toggle-children"
                  v-if="c.children.length > 3"
                  @click="toggleChildren(c)"
                >
                  {{ c.showAllChildren ? "--收起" : "--展开更多回复" }}
                </view>
              </view>
            </view>
            <uni-icons type="trash" size="30" color="#8b2316" @click="onDelete(c)" v-if="current_user_id==c.user_uuid"></uni-icons>

            <!-- <view class="reply-btn" @click="onReply(c)"v-if="current_user_id==c.user_uuid">删除</view> -->
            <view class="reply-btn" @click="onReply(c)" v-else>回复</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>
  <!-- 删除确认弹窗 -->
  <view v-if="showDeleteModal" class="delete-modal-mask" @click="closeDeleteModal">
    <view class="delete-modal-content" @click.stop>
      <view class="delete-modal-title">确认删除</view>
      <view class="delete-modal-text">确定要删除这条评论吗？</view>
      <view class="delete-modal-buttons">
        <view class="delete-modal-btn cancel-btn" @click="closeDeleteModal">取消</view>
        <view class="delete-modal-btn confirm-btn" @click="confirmDelete">删除</view>
      </view>
    </view>
  </view>
  <!-- 分享弹窗 -->
  <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="shareToPatient" v-if="type == 'patientVideo'">
          <view class="share-icon wechat-icon" style="background: none;">
            <image class="share-img" :src="paitientImg" mode="aspectFill" />
          </view>
          <text class="share-text">患者</text>
        </view> -->
        <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>
  <!-- 选择弹窗（复制自 groupMessage） -->
  <view v-if="showModal" class="mask" @click="closeModal"></view>
  <view v-if="showModal" class="center-modal">
    <view class="modal-title">温馨提示</view>
    <view class="modal-divider"></view>
    <view class="modal-item" @click="onSelect('single')">
      <text class="text">单独选择</text>
    </view>
    <view class="modal-divider"></view>
    <view class="modal-item" @click="onSelect('group')">
      <text class="text">分组选择</text>
    </view>
  </view>
</template>

<script setup>
import { ref, nextTick } from "vue";
//import uniVideo from "@/components/uniVideo/uniVideo.vue";
import { onLoad, onShow,onReady,onUnload,onHide } 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 isAndroid from "@/utils/platform.js";
import avastarImg from "@/static/avastar.png";
import playImg from "@/static/play.png";
import paitientImg from "@/static/info_icon_1.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 selectedPatients = ref([]);
const video_uuid = ref("");
const videoInfo = ref({});
const tags = 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 isPlaying = ref(false);
const playTime = ref(0);
const timer = ref(null);
const hasPlay = ref(false);
// 删除弹窗相关
const showDeleteModal = ref(false);
const currentDeleteItem = ref(null);
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);
const showModal = 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([]);
let userInfo = uni.getStorageSync("userInfo");
const current_user_id = ref(userInfo.uuid);
//const videoContext = ref(null);
// onReady(() => {
//   videoContext.value = uni.createVideoContext('myVideo');
// });
// 添加下载任务

const onFullscreenChange = (e) => {
  let { fullScreen, direction } = e;
   nextTick(() => {
    isFullScreen.value = fullScreen;
   });
};
const onVideoPlay = () => {
  isPlaying.value = true;
  hasPlay.value = true;
  timer.value = setInterval(() => {
    playTime.value++;
  }, 1000);
};
const onVideoPause = () => {
  isPlaying.value = false;
 if(timer.value) {
  clearInterval(timer.value);
  timer.value = null;
 }
  
};
const onVideoEnded = () => {
  isPlaying.value = false;
  if(timer.value) {
   clearInterval(timer.value);
   timer.value = null;
 }
};
onHide(() => {
 
});
// const playVideo = () => {
//     videoContext.value.play();
//   };
// const onVideoPause = () => {
//   isPlaying.value = false;
// };
const addDownloadTask = (item) => {
  
  // 使用store添加任务
  const taskIndex = downloadStore.addTask(item);
  // 同步任务列表
  syncTasksFromStore();
  // 开始下载
  startDownload(taskIndex);
};
// 开始下载
const startDownload = (index) => {
  const taskItem = downloadStore.getTask(index);
  if (!taskItem) return;
  hasDownload.value = true;
  isVideoDownloadRecord.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;
  // uni.sendNativeEvent('buyPointPage', {
  //   msg: 'buyPointPage'
  // },ret => {
  //   console.log(ret);
  // });
  navTo({
    url: "/pages_app/buyPoint/buyPoint?product_id="+video_uuid.value+"&type=video",
  });
};
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 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--;
      uni.sendNativeEvent("portraitReport",{
      msg:{
        event_nickname: "viorder_deo_download",
        page_type: type.value == 'patientVideo' ? '患教视频' : "肝胆视频",
        resource_name:videoInfo.value.name,
        resource_option:tags.value?tags.value:'',
        event_unit:'分',
        number:1,
        event_val:0,
      },
    },
    (ret) => {
      console.log(ret);
    });
      addDownloadTask({
    url: videoSrc.value,
    id: video_uuid.value,
    imgpath: videoInfo.value.imgpath,
    author: videoInfo.value.public_name,
    name: videoInfo.value.name,
  });
  }
};
const onVideoError = (e) => {
  // uni.showToast({
  //   title: "视频加载失败",
  //   icon: "none",
  // });
  videoSrc.value= videoSrc.value.replace('.mp4', '.m3u8');
};
const videoDetail = async (flag = false) => {
  const res = await api.videoDetail({ video_uuid: video_uuid.value });
  if (res.code == 200) {
    
    const userInfo = uni.getStorageSync("userInfo");
    videoInfo.value = res.video;
    tags.value = res.video.tags;
    //hasDownload.value = downLoadList.value.includes(video_uuid.value);
    let vid =res.video.polyv_uuid || extractPolyvVid(res.video.content);
    console.log(222222);
    console.log(vid);
    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`;
    console.log(videoSrc.value);
    showVideo.value = true;
    shareLink.value =
      otherHost +
      "/video/hcp_detial?share=1&uuid=" +
      video_uuid.value +
      "&expertshare=videoshare&fromtype=doctor";
      console.log(videoInfo.value.name)
      if(flag) {
      try {
        uni.sendNativeEvent("portraitReport",{
      msg:{
        event_nickname: "detail_page",
        page_type: type.value == 'patientVideo' ? '患教视频' : "肝胆视频",
        resource_name:videoInfo.value.name,
        resource_option:tags.value?tags.value:''
      },
    },
    (ret) => {
      console.log(ret);
    });
      } catch (error) {
        
      }
    }
  }
};
const collection = async () => {
  const res = await api.collection({
    other_uuid: video_uuid.value,
    type: 5,
  });
  if (res.code == 200) {
    uni.showToast({ title: "收藏成功", icon: "none" });
    uni.sendNativeEvent("portraitReport",{
      msg:{
        event_nickname: "collect",
        page_type: type.value == 'patientVideo' ? '患教视频' : "肝胆视频",
        resource_name:videoInfo.value.name,
        resource_option:tags.value?tags.value:'',
      },
    },
    (ret) => {
      console.log(ret);
    });
    videoDetail();
  }
};

const addpoint=()=>{
  api.addBonusPointsN({
    score_type:5
  }).then(res=>{
    if(res.code==200){
     
    }
  })
}
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;
      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);
    });
  });
};
onUnload(() => {
  console.log('onUnload');
  uni.$off('selectedChatPatientsSingle');
  uni.$off('replySuccess', handleReplySuccess);
  if(timer.value) {
   clearInterval(timer.value);
   timer.value = null;
 };
 if(hasPlay.value) {
  let id=videoInfo.value.polyv_uuid || extractPolyvVid(videoInfo.value.content);
  console.log(id);
  uni.sendNativeEvent("portraitReport",{
  msg:{
    event_nickname: "watch_video",
    page_type:'',
    resource_name:id,
    resource_option:tags.value?tags.value:'',
    event_val:playTime.value,
    event_unit:'秒',
  },
 });
 }
});
const replySuccessLocked = ref(false);
const lastReplySuccessAt = ref(0);
const runReplySuccessOnce = (action) => {
  const now = Date.now();
  if (replySuccessLocked.value) return false;
  if (now - Number(lastReplySuccessAt.value || 0) < 1000) return false;
  replySuccessLocked.value = true;
  lastReplySuccessAt.value = now;
  try {
    action && action();
    return true;
  } finally {
    setTimeout(() => {
      replySuccessLocked.value = false;
    }, 300);
  }
};
const handleReplySuccess = () => {
  runReplySuccessOnce(() => {
    console.log('reply-success');
    try {
      uni.sendNativeEvent("portraitReport",{
    msg:{
      event_nickname: "comment",
      page_type: type.value == 'patientVideo' ? '患教视频' : "肝胆视频",
      resource_name:videoInfo.value.name,
      resource_option:tags.value?tags.value:'',
    },
  },
  (ret) => {
    console.log(ret);
  });
    } catch (error) {
      
    }
  });
};
onShow(() => {
  uni.$on('selectedChatPatientsSingle',(data)=>{
        console.log(data)
        selectedPatients.value = data.patients;
        if(type.value == 'patientVideo') {
          addGroupSendMsg4YunXin()
        }
     });
     uni.$off('replySuccess', handleReplySuccess);
     uni.$on('replySuccess', handleReplySuccess);
  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;
             isVideoDownloadRecord.value=true;
           if(downloadTasks.value[i].status == 'completed') {
            downLoadStatus.value = 'completed';
           }else if(downloadTasks.value[i].status == 'downloading') {
            uni.showToast({
              title: '视频缓存中',
              icon: 'none',
            });
            downLoadStatus.value = 'loading';
           }else if(downloadTasks.value[i].status == 'paused') {
            downLoadStatus.value = 'loading';
           }else if(downloadTasks.value[i].status == 'failed') {
            downLoadStatus.value = 'loading';
           }
        }
       }
    };
  if (activeTab.value == "comment") {
    videoCommentListV2();
  }
  if (from.value != "download") {
    videoDetail(true);
  }
  uni.hideLoading();
});

const shareRef = ref();
const shareActionLocked = ref(false);
const lastShareActionAt = ref(0);
const runShareActionOnce = (action) => {
  const now = Date.now();
  if (shareActionLocked.value) return false;
  if (now - Number(lastShareActionAt.value || 0) < 800) return false;
  shareActionLocked.value = true;
  lastShareActionAt.value = now;
  try {
    action && action();
  } finally {
    setTimeout(() => {
      shareActionLocked.value = false;
    }, 500);
  }
  return true;
};
// 分享APP
const shareToggle = () => {
  shareRef.value.open();
};
const shareToPatient = () => {
  if (!runShareActionOnce(() => {})) return;
  closeShare();
  setTimeout(() => {
    openModal();
  }, 120);
};
const openModal = () => {
  showModal.value = true;
};
const closeModal = () => {
  showModal.value = false;
};
const addGroupSendMsg4YunXin=async()=>{
  const res=await api.addGroupSendMsg4YunXin({
    patient_user_uuid: selectedPatients.value.map(item => item.uuid).join(','),
    msg_content: videoInfo.value.uuid,
    msg_type:4,
  });
  if(res.code==200){
    uni.showToast({ title: "推荐成功", icon: "none" });
   
  }else{
    uni.showToast({ title: res.msg, icon: "none" });
  }
}
const onSelect = (type) => {
  showModal.value = false;
  if (type === "single") {
    navTo({
      url: "/pages_app/selectPatient/selectPatient?from=videoDetail",
    });
  } else if (type === "group") {
    navTo({
      url: "/pages_chat/patientGroup/patientGroup?from=videoDetail",
    });
  }
};

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

// 分享到微信
const shareToWechat = () => {
  if (!runShareActionOnce(() => {})) return;
  if(type.value == 'patientVideo') {
    addpoint();
  }

  uni.sendNativeEvent("portraitReport",{
      msg:{
        event_nickname: "share",
        page_type: type.value == 'patientVideo' ? '患教视频' : "肝胆视频",
        resource_name:videoInfo.value.name,
        resource_option:tags.value?tags.value:'',
      },
    },
    (ret) => {
      console.log(ret);
    });
  // #ifdef APP-PLUS
  // 使用系统分享
  uni.downloadFile({
    url:isAndroid?docUrl + videoInfo.value.imgpath:'https://doc.igandan.com/app/html/img/2016/20160714132557.png',
    success: function (res) {
      uni.compressImage({
        src: res.tempFilePath,
        quality: 60,
        success: function (res2) {
          uni.share({
            provider: "weixin",
            scene: "WXSceneSession",
            type: 0,
            title: videoInfo.value.name,
            summary: videoInfo.value.note,
            href: shareLink.value,
            imageUrl: res2.tempFilePath,
            success: function (res) {
              
              console.log("success:" + JSON.stringify(res));
            },
            fail: function (err) {
              console.log("fail:" + JSON.stringify(err));
            },
          });
        },
      });
    },
  });
  // 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 = () => {
  if (!runShareActionOnce(() => {})) return;
  if(type.value == 'patientVideo') {
    addpoint();
  }
  uni.sendNativeEvent("portraitReport",{
      msg:{
        event_nickname: "share",
        page_type: type.value == 'patientVideo' ? '患教视频' : "肝胆视频",
        resource_name:videoInfo.value.name,
        resource_option:tags.value?tags.value:'',
      },
    },
    (ret) => {
      console.log(ret);
    });
  // #ifdef APP-PLUS
   uni.downloadFile({
    url: isAndroid?docUrl + videoInfo.value.imgpath:'https://doc.igandan.com/app/html/img/2016/20160714132557.png',
    success: function (res) {
      uni.compressImage({
        src: res.tempFilePath,
        quality: 60,
        success: function (res2) {
          uni.share({
    provider: "weixin",
    scene: "WXSceneTimeline",
    type: 0,
    title: videoInfo.value.name,
    summary: videoInfo.value.note,
    href: shareLink.value,
    imageUrl: res2.tempFilePath,
    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 = () => {
  if (!runShareActionOnce(() => {})) return;
  // #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('');
const type = ref('');
// 使用uni-app的onLoad生命周期
onLoad((options) => {
  console.log(options);
  if(options.type) {
    type.value = options.type;
  }
  if(options.tags) {
    tags.value = options.tags;
  }
  uni.getSystemInfo({
    success: function (res) {
      videoWidth.value = res.windowWidth; // 窗口宽度
    },
  });
  console.log('enrtyVideoDetail');
  console.log(tags.value);
  //这个是处理关于滋滋声的问题，不能删掉
  uni.sendNativeEvent('enrtyVideoDetail', {
	msg: 'enrtyVideoDetail'
}, ret => {
	console.log(ret);
})
  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 });
  console.log(res);
  if (res.code == 200) {
    uni.sendNativeEvent("portraitReport",{
      msg:{
        event_nickname: "viorder_deo_download",
        page_type: type.value == 'patientVideo' ? '患教视频' : "肝胆视频",
        resource_name:videoInfo.value.name,
        resource_option:tags.value?tags.value:'',
        event_unit:'积分',
        number:1,
        event_val:videoInfo.value.point,
      },
    },
    (ret) => {
      console.log(ret);
    });
    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(videoSrc.value.includes('.m3u8')) {
    uni.showToast({ title: "该视频不支持下载", icon: "none" });
    return;
   }
  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) {
        if(downLoadStatus.value == 'completed') {
          navTo({
            url: "/pages_app/downLoadVideo/downLoadVideo",
          });
        } else {
          navTo({
            url: "/pages_app/downLoadVideo/downLoadVideo?type=2",
          });
        }
    } 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 = "";
    uni.sendNativeEvent("portraitReport",{
      msg:{
        event_nickname: "comment",
        page_type: type.value == 'patientVideo' ? '患教视频' : "肝胆视频",
        resource_name:videoInfo.value.name,
        resource_option:tags.value?tags.value:'',
      },
    },
    (ret) => {
      console.log(ret);
    });
    videoCommentListV2();
  }
};
const onReply = (c) => {
  console.log('onReply');
  console.log(c);
  if(!c.user_uuid){
    uni.showToast({ title: "该评论无法回复", icon: "none" });
    return;
  }
  navTo({
    url:
      "/pages_app/reply/reply?comment_partent=" +
      c.content +
      "&name=" +
      c.name +
      "&video_uuid=" +
      video_uuid.value,
  });
};
 const extractPolyvVid = (htmlStr) => {
  const vidRegex = /["']?vid["']?\s*:\s*["']([^"']+)["']/i;
  
  // 执行匹配
  const match = htmlStr.match(vidRegex);
  
  // 直接返回第一个分组（vid值），无匹配则返回null
  return match ? match[1] : null;
}

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

// 子评论展开收起
const getVisibleChildren = (comment) => {
  if (!comment.children || !comment.children.length) return [];
  return comment.showAllChildren ? comment.children : comment.children.slice(0, 3);
};
const toggleChildren = (comment) => {
  comment.showAllChildren = !comment.showAllChildren;
  // 触发视图更新
  commentList.value = [...commentList.value];
};

// 上拉加载
const page = ref(1);
const pageSize = ref(10);
const loading = ref(false);
const noMore = ref(false);
const onDelete = (c) => {
  currentDeleteItem.value = c;
  showDeleteModal.value = true;
};

// 关闭删除弹窗
const closeDeleteModal = () => {
  showDeleteModal.value = false;
  currentDeleteItem.value = null;
};

// 确认删除
const confirmDelete = async () => {
  console.log(currentDeleteItem.value);
  if (!currentDeleteItem.value) return;
  
  const res = await api.deleteComment({
    uuid: currentDeleteItem.value.comment_uuid,
  });
  if (res.code == 200) {
    uni.showToast({ title: "删除成功", icon: "none" });
    videoCommentListV2();
    closeDeleteModal();
  }
};
const onScrollToLower = async () => {
  if (activeTab.value !== "comment" || loading.value || noMore.value) return;
  // 如需分页，可在此按页码调用接口并 push 结果
};

const toFullUrl = (p) => {
  if (!p) return avastarImg;
  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 || "",
    user_uuid: item.user_uuid || "",
    comment_uuid: item.comment_uuid || "",
    showAllChildren: false,
    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;
.videobox{
  top: calc(var(--status-bar-height) + 44px);
  width:100%;
  height:auto;
  overflow: hidden;
  position: relative;
  .play-img{
    position: absolute;
    z-index:9999;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100rpx;
    height:100rpx;
    image{
      width: 100rpx;
      height:100rpx;
    }
  }
}
.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;

}

.video-detail-page {
 
  background: $bg-color;
  overflow: hidden;
}

.content-scroll {
  height: 100%;
}

.player-wrapper {
  background: #fff;
  position: relative;
 
  z-index: 0;
  height:220px;
  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: 66;
  .line{
    position: absolute;
    height:2rpx;
    bottom:0;
    background: #cccccc;
    width: 100%;
    z-index:999;
  }
  .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: 60rpx 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;
      
    }
  }

  .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: 60rpx 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;
  }
  .toggle-children {
    color: #8b2316;
    font-size: 26rpx;
    margin-top: 12rpx;
  }
}

.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: 32rpx;
  }
}

.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;
}

/* 选择弹窗（与 groupMessage 保持一致） */
.mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 1100;
}

.center-modal {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  margin-top:100rpx;
  width: 650rpx;
  background: #ffffff;
  border-radius: 16rpx;
  z-index: 9999999;
  overflow: hidden;
  box-shadow: 0 10rpx 40rpx rgba(0, 0, 0, 0.15);
}

.modal-title {
  text-align: center;
  font-size: 34rpx;
  color: #8b2316;
  padding: 28rpx 20rpx;
}

.modal-item {
  padding: 36rpx 28rpx;
  font-size: 30rpx;
  color: #333333;
  background: #ffffff;
}

.modal-divider {
  height: 2rpx;
  background: #eeeeee;
}

// 删除确认弹窗
.delete-modal-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.delete-modal-content {
  width: 600rpx;
  background-color: #fff;
  border-radius: 24rpx;
  padding: 60rpx 40rpx 40rpx;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.15);
}

.delete-modal-title {
  font-size: 36rpx;
  font-weight: 600;
  color: #333;
  text-align: center;
  margin-bottom: 30rpx;
}

.delete-modal-text {
  font-size: 28rpx;
  color: #666;
  text-align: center;
  line-height: 1.6;
  margin-bottom: 50rpx;
  word-break: break-all;
}

.delete-modal-buttons {
  display: flex;
  gap: 20rpx;
}

.delete-modal-btn {
  flex: 1;
  height: 80rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12rpx;
  font-size: 32rpx;
  font-weight: 500;
  transition: all 0.3s ease;
}

.cancel-btn {
  background-color: #f5f5f5;
  color: #333;
  
  &:active {
    background-color: #e0e0e0;
  }
}

.confirm-btn {
  background-color: #8b2316;
  color: #fff;
  
  &:active {
    background-color: #6b1a0f;
  }
}
</style>