<template>
  <div style="background-color: #f0f2f5; padding-bottom: 20px; min-height: 100%; " >
    <div style="padding: 20px; background-color: #fff;">
      课程视频详情
    </div>
    <div class="contentx" >
      <div class="desct">
        小节信息
      </div>
      <el-descriptions title="" :column="3" border>
        <el-descriptions-item label="视频ID"  >
          <span v-if="item!=null">{{item.videoId}}</span>
        </el-descriptions-item>
        <el-descriptions-item label="视频标题" >
          <span v-if="item!=null">{{item.title}}</span>
        </el-descriptions-item>
        <el-descriptions-item label="封面图" >
          <el-popover v-if="item!=null"
            placement="right"
            title=""
            trigger="hover">
            <img slot="reference" :src="item.thumbnail" width="50px">
            <img :src="item.thumbnail" style="max-width: 150px;">
          </el-popover>
        </el-descriptions-item>
        <el-descriptions-item label="视频描述" >
          <span v-if="item!=null">{{item.description}}</span>
        </el-descriptions-item>
        <el-descriptions-item label="时长" >
            <span v-if="item!=null">{{formatDuration(item.duration)}}</span>
        </el-descriptions-item>
        <el-descriptions-item label="课程排序" >
            <span v-if="item!=null">{{item.courseSort}}</span>
        </el-descriptions-item>

        <el-descriptions-item label="创建时间" >
            <span v-if="item!=null">{{item.createTime}}</span>
        </el-descriptions-item>
        <el-descriptions-item label="审核时间" >
            <span v-if="item!=null">{{item.auditTime}}</span>
        </el-descriptions-item>

		<el-descriptions-item label="默认红包" >
		    <span v-if="item!=null">{{item.redPacketMoney}}</span>
		</el-descriptions-item>

		<el-descriptions-item label="备注" >
		    <span v-if="item!=null">{{item.remark}}</span>
		</el-descriptions-item>
      </el-descriptions>
    </div>
    <div class="contentx" v-if="item" @contextmenu.prevent>
      <div class="desct">
        视频内容
      </div>
      <div style="display: flex; justify-content: center; align-items: center; position: relative;">
        <!-- 父容器设置为 relative，水印根据此容器定位 -->
        <div style="display: grid; place-items: center; position: relative;" v-if="item.videoUrl != null">
          <video ref="video" :src="item.videoUrl" controls disablepictureinpicture controlsList="nodownload nofullscreen nopictureinpicture"
                 style="max-width: 800px; max-height: 600px;" @loadedmetadata="onVideoLoaded">
          </video>

          <!-- 动态生成的20个水印，按照4排每排5个 -->
          <div class="watermarks" :style="watermarkGridStyle">
            <div class="watermark" v-for="n in 20" :key="n"
                 :style="getWatermarkPosition(n)">
              {{ user.nickName }} : {{ user.userId }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="contentx" v-if="item">
      <div class="desct">
        题目内容
      </div>
      <div>
        <div style="display: grid; " v-if="item.questionBankId!=null">
          <el-table border width="100%" style="margin-top:5px;"  :data="item.questionBankList">
            <el-table-column label="问题" align="center" prop="title">
              <template slot-scope="scope">
                <el-tooltip class="item" effect="dark" :content="scope.row.title" placement="top">
                  <div style="display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; text-overflow: ellipsis;">
                    <span>{{ scope.row.title }}</span>
                  </div>
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column label="类别" align="center" prop="type">
              <template slot-scope="scope">
                <dict-tag :options="typeOptions" :value="scope.row.type"/>
              </template>
            </el-table-column>
            <el-table-column label="答案" align="center" prop="answer" />
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {getUserCourseVideo} from "@/api/course/userCourseVideo";
  export default {
    name: "userCourseVideoDetails",
    data() {
      return {
        videoWidth: 0,  // 视频宽度
        videoHeight: 0, // 视频高度
        watermarkCount: 20, // 水印数量，固定为20个
        watermarkSize: 20, // 单个水印的大小，固定为40px
        user: this.$store.state.user.user,  // 从 Vuex 获取当前用户
        typeOptions:[],
        packageTypeOptions: [],
        diseaseTypeOptions: [],
        packageSubTypeOptions:[],
        item:null,
        packageItem:null,
        productJson:[],
        courseIdOptions: [],
        // 视频状态 1：草稿，2：待审核，3：发布字典
        statusOptions: [],
        // 是否展示字典
        orOptions: [],
        // 来源 1 用户 2 后台字典
        sourceOptions: [],
        // 删除标志字典
        isDelOptions: [],
        isAuditOptions:[],
        specShowOptions:[]
      }
    },
    created() {
      this.getDicts("sys_course_temp_type").then(response => {
        this.typeOptions = response.data;
      });
    },
    computed: {
      // 动态计算水印容器的样式
      watermarkGridStyle() {
        return {
          position: 'absolute',
          top: '0',
          left: '0',
          width: '100%',
          height: '100%',
          zIndex: 1,
          pointerEvents: 'none', // 让水印不会干扰视频控制
          display: 'grid',
          gridTemplateColumns: `repeat(5, 1fr)`,  // 每排5个水印
          gridTemplateRows: `repeat(4, auto)`,   // 四排水印
          gap: `${this.gap}px`,  // 水印之间的间隙
        };
      }
    },
    methods: {
      // 视频加载完成后获取其尺寸
      onVideoLoaded() {
        const video = this.$refs.video;
        this.videoWidth = video.videoWidth;
        this.videoHeight = video.videoHeight;

        // // 根据视频尺寸计算水印的数量和大小
        // this.watermarkSize = Math.floor(this.videoWidth / 30); // 水印大小为视频宽度的 1/10
      },
      // 计算每个水印的位置，按照四排5列排列
      getWatermarkPosition(n) {
        return {
          position: 'relative',
          color: 'rgba(255, 255, 255, 0.3)', // 提高透明度，确保不干扰视频内容
          fontSize: `${this.watermarkSize}px`, // 固定水印的字体大小
          textAlign: 'center',
          lineHeight: `${this.watermarkSize}px`, // 水平方向和垂直方向居中
          transform: 'rotate(-30deg)',
        };
      },
      formatDuration(seconds) {
        if (seconds === null || seconds === undefined) {
          return '未上传视频'; // 或者您可以根据具体需求返回其他默认值
        }
        const hours = Math.floor(seconds / 3600);
        const minutes = Math.floor((seconds % 3600) / 60);
        const remainingSeconds = seconds % 60;

        const formattedHours = hours > 0 ? hours.toString() + ':' : '';
        const formattedMinutes = minutes.toString().padStart(2, '0');
        const formattedSeconds = remainingSeconds.toString().padStart(2, '0');

        return `${formattedHours}${formattedMinutes}:${formattedSeconds}`;
      },
      getDetails(videoId) {
        console.log(videoId);
        this.item=null;
        getUserCourseVideo(videoId).then(response => {
          this.item = response.data;
        });
      },
    }
  }
</script>

<style>
/* 水印样式 */
.watermark, .watermark-bottom-right {
  position: absolute;
  color: rgba(255, 255, 255, 0.3);  /* 提高透明度，确保水印不干扰视频内容 */
  font-size: 10vw;  /* 动态字体大小，确保水印不会过大 */
  transform: rotate(-30deg);
  z-index: 1;
  pointer-events: none;  /* 不干扰视频的交互 */
}

/* 设置视频和水印层的绝对定位，使水印显示在视频上方 */
.watermark-full {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  line-height: 100%;  /* 水平和垂直居中 */
}
.contentx{
    height: 100%;
    background-color: #fff;
    padding: 0px 20px 20px;


    margin: 20px;
}
.desct{
    padding-top: 20px;
    padding-bottom: 20px;
    color: #524b4a;
    font-weight: bold;
  }

</style>
