<template>
  <view>
    <!-- 公共组件-每个页面必须引入 -->
    <public-module></public-module>
    <z-nav-bar :title="courseInfo.id ? courseTitle : '课程说明'">
      <!-- <uni-icons type="bars" class="topRight" slot="right" @click="showDrawer('showRight')"   size="22"></uni-icons> -->
    </z-nav-bar>
    <view class="" style="background: #55aaff">
      <u-tabs
        :class="['tabList']"
        @click="tabChange"
        :current="curTagIndex"
        :activeStyle="activeStyle"
        :scrollable="scrollable"
        lineColor="#ef9f00"
        :list="tabList"
        :inactiveStyle="{
          color: '#fff',
        }"
        itemStyle="padding-left: 15px;  padding-right: 15px; height: 50px;"
      ></u-tabs>
    </view>

    <view class="tabLeve1 subItem flexbox" v-if="Leve1.length > 0">
      <text
        :class="[leve1Index == index ? 'cur' : '']"
        v-for="(item, index) in Leve1"
        :key="index"
        @click="leve1Click(item, index)"
        >{{ item.title }}</text
      >
    </view>
    <view class="tabLeve2 subItem flexbox" v-if="Leve2.length > 0">
      <text
        :class="[leve2Index == index ? 'cur' : '']"
        v-for="(item, index) in Leve2"
        :key="index"
        @click="leve2Click(item, index)"
        >{{ item.title }}</text
      >
    </view>
    <view class="tabLeve3 subItem flexbox" v-if="Leve3.length > 0">
      <text
        :class="[leve3Index == index ? 'cur' : '']"
        v-for="(item, index) in Leve3"
        :key="index"
        @click="leve3Click(item, index)"
        >{{ item.title }}</text
      >
    </view>
    <view class="" v-if="courseInfo.content == '' && courseInfo.media == ''">
      <u-divider text="本门课程没有编写课程说明"></u-divider>
    </view>
    <view class="containerBg" v-else>
      <view class="infoBox" v-if="courseInfo.id">
        <uni-section :title="courseTitle" type="line" titleFontSize="16px">
          <curriculum-video
            v-if="curriculumVideoShow"
            ref="curriculumVideo"
            :courseInfo="courseInfo"
          ></curriculum-video>

          <rich-text
            v-if="courseInfo.content"
            class="content"
            :nodes="formatRichText(courseInfo.content)"
          ></rich-text>
          <!-- <text>超强树选择器、树组件、树插件、无限级联树、单选树、多选树、自定义样式树、树形选择 </text> -->
        </uni-section>
      </view>
    </view>
    <!-- <z-navigation></z-navigation> -->
    <!-- <music-play :playData="playData"></music-play> -->
  </view>
</template>

<script>
import curriculumVideo from "./components/video.vue";
import $http from "@/config/requestConfig.js";
var clear;
import { mapState } from "vuex";
export default {
  data() {
    return {
      curriculumVideoShow: false,
      isFullScreen: false,
      playData: {},
      Leve1: [],
      Leve2: [],
      Leve3: [],
      options: {}, //上个页面获取的视频参数（视频id）
      playAuth: "", //播放凭证
      videoId: "", //阿里云视频id
      videoData: {}, //阿里云视频其他参数
      accordionVal: "",
      // extraIcon:{
      // 	color: '#4cd964',
      // 	size: '100',
      // }
      scrollable: true,
      treeList: [],
      tagId: null,
      pid: null,
      bgiStyle: {
        background: "#fff",
      },
      curTagIndex: 0,
      leve1Index: null,
      leve2Index: null,
      leve3Index: null,
      iconStyle: {
        fontSize: "40rpx",
        fontWeight: "bold",
        color: "#258feb",
      },
      tabList: [],
      activeStyle: {
        color: "#fff",
        fontWeight: "bold",
        padding: "20rpx",
        transform: "scale(1.2)",
        backgroundColor: "#ef9f00",
      },
      courseInfo: {},
      poster: "../../static/videoF.jpg", //封面图
      audioPoster: "../../static/logo.png",
      current: {
        // poster: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/music-a.png',
        // name: '致爱丽丝',
        // author: '暂无',
        // src: 'https://web-ext-storage.dcloud.net.cn/uni-app/ForElise.mp3',
      },
      audioAction: {
        method: "pause",
      },
      curId: null,
      courseTitle: "",
      showTemp: true,
      videoContext: null,

      videoUrl:
        "https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4",
    };
  },
  //第一次加载
  onLoad(e) {
    // 隐藏原生的tabbar
    uni.hideTabBar();
    this.pid = e.pid;
    this.tagId = e.id;
    console.log(e, "------");
    this.videoContext = uni.createVideoContext("myVideo");
  },
  computed: {
    ...mapState(["userInfo"]),
    videoHTML() {
      return `<video class="video-box" poster="http://ehh-public-01.oss-cn-beijing.aliyuncs.com/wumenyishu-image/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20240606110049.jpg" src="${this.videoUrl}"  enable-danmu danmu-btn controls style="width:100%;height:320rpx"></video>`;
    },
  },
  //页面显示
  onShow() {
    // 隐藏原生的tabbar
    uni.hideTabBar();
    this.getData();
  },
  onUnload() {
    // #ifdef APP-PLUS
    plus.screen.lockOrientation("portrait-primary"); // 清除横屏
    // #endif
    this.showTemp = true;
    this.videoContext = null;
  },
  onPullDownRefresh() {
    uni.stopPullDownRefresh();
  },
  components: {
    curriculumVideo,
  },
  //方法
  methods: {
    getLive(playAuthsss) {
      //playAuth 是播放凭证 通过后端自己根据api去获取，返回时不知道为什么结束会带有 = 有时候甚至是2个 所以要截取等号 不然不能播放
      var playAuth = this.playAuth.replace(/=/g, "");
      // var playAuth = playAuthsss
      this.videoData = {
        // ...res.video,//视频其他信息
        type: 1,
        videoId: this.videoId, //阿里云视频id
        playAuth: playAuth, //阿里云播放凭证
      };
      console.log("得到播放凭证");
      this.playAuth = playAuth;
      this.$forceUpdate();
    },
    tabChange(e) {
      console.log(e, "e");
      let _index = e.index;
      this.clickCourseInfo(this.treeList[_index]);
      this.curTagIndex = _index;
      this.leve1Index = null;
      this.leve2Index = null;
      this.leve3Index = null;
      if (
        this.treeList[_index].isLast == 0 &&
        this.treeList[_index].children.length > 0
      ) {
        this.Leve1 = this.treeList[_index].children;
        this.Leve2 = [];
        this.Leve3 = [];
        // if(this.Leve1[0].isLast == 0 && this.Leve1[0].children.length > 0){
        // 	this.Leve2 = this.Leve1[0].children
        // 	this.Leve3 = []
        // 	// console.log(this.Leve2,'Leve2');
        // 	if(this.Leve2[0].isLast == 0 && this.Leve2[0].children.length > 0){
        // 		this.Leve3 = this.Leve2[0].children
        // 	}else{
        // 		this.Leve3 = []
        // 	}
        // }else{
        // 	this.Leve2 = []
        // 	this.Leve3 = []
        // }
      } else {
        this.Leve1 = [];
        this.Leve2 = [];
        this.Leve3 = [];
      }
    },
    leve1Click(val, index) {
      console.log(this.Leve1[index], "val");
      this.leve1Index = index;
      this.leve2Index = null;
      this.leve3Index = null;
      this.clickCourseInfo(val);
      if (
        this.Leve1[index].isLast == 0 &&
        this.Leve1[index].children.length > 0
      ) {
        this.Leve2 = this.Leve1[index].children;
        // console.log(this.Leve2,'Leve2');
        this.Leve3 = [];
      } else {
        this.Leve2 = [];
        this.Leve3 = [];
      }
    },
    leve2Click(val, index) {
      this.leve2Index = index;
      if (this.leve1Index == null) {
        this.leve1Index = 0;
      }
      this.leve3Index = null;
      // console.log(val,'三级点击');
      this.clickCourseInfo(val);
      if (
        this.Leve2[index].isLast == 0 &&
        this.Leve2[index].children.length > 0
      ) {
        this.Leve3 = this.Leve2[index].children;
      } else {
        this.Leve3 = [];
      }
    },
    leve3Click(val, index) {
      this.leve3Index = index;
      // console.log(val,'四级点击');
      if (this.leve2Index == null) {
        this.leve2Index = 0;
      }
      if (this.leve1Index == null) {
        this.leve1Index = 0;
      }
      this.clickCourseInfo(val);
      // if(this.Leve3[index].isLast == 0){
      // 	this.Leve3 = this.Leve2[index].children
      // }
    },

    formatRichText(html) {
      //控制图片大小
      let newContent = html.replace(/<img[^>]*>/gi, function (match, capture) {
        match = match
          .replace(/style="[^"]+"/gi, "")
          .replace(/style='[^']+'/gi, "");
        match = match
          .replace(/width="[^"]+"/gi, "")
          .replace(/width='[^']+'/gi, "");
        match = match
          .replace(/height="[^"]+"/gi, "")
          .replace(/height='[^']+'/gi, "");
        return match;
      });
      newContent = newContent.replace(
        /style="[^"]+"/gi,
        function (match, capture) {
          match = match
            .replace(/width:[^;]+;/gi, "max-width:100%;")
            .replace(/width:[^;]+;/gi, "max-width:100%;");
          return match;
        }
      );
      newContent = newContent.replace(/<br[^>]*\/>/gi, "");
      newContent = newContent.replace(
        /\<img/gi,
        '<img style="max-width:100%;height:auto;display:inline-block;margin:10rpx auto;"'
      );
      return newContent;
    },
    getData() {
      this.$http
        .post("medical/home/getCourseMedicalTree")
        .then((res) => {
          if (res.code == 0 && res.labels.length > 0) {
            this.tabList = [];
            this.treeList = res.labels;
            if (this.tagId && this.pid) {
              res.labels.forEach((item, index) => {
                this.tabList.push({
                  id: item.id,
                  name: item.title,
                });
                if (item.id == this.pid) {
                  this.curTagIndex = index;
                  console.log(this.curTagIndex);
                }
              });
              this.getCourseInfo(this.tagId);
            } else {
              this.curTagIndex = 0;
              this.leve1Index = null;
              this.getCourseInfo(this.treeList[0].id);
            }
            // this.treeList = res.labels
            if (
              this.treeList[this.curTagIndex].isLast == 0 &&
              this.treeList[this.curTagIndex].children.length > 0
            ) {
              this.Leve1 = this.treeList[this.curTagIndex].children;
              if (this.tagId) {
                this.Leve1.forEach((item, index) => {
                  if (item.id == this.tagId) {
                    this.leve1Index = index;
                  }
                });
                if (
                  this.Leve1[this.leve1Index].isLast == 0 &&
                  this.Leve1[this.leve1Index].children.length > 0
                ) {
                  this.Leve2 = this.Leve1[this.leve1Index].children;
                  // console.log(this.Leve2,'Leve2');
                  // if(this.Leve2[0].isLast == 0 && this.Leve2[0].children.length > 0){
                  // 	this.Leve3 = this.Leve2[0].children
                  // }else{
                  // 	this.Leve3 = []
                  // }
                } else {
                  this.Leve2 = [];
                  this.Leve3 = [];
                }
              } else {
                this.leve1Index = null;
                this.Leve2 = [];
                this.Leve3 = [];
              }
            } else {
              this.Leve1 = [];
              this.Leve2 = [];
              this.Leve3 = [];
            }
            res.labels.forEach((item) => {
              this.tabList.push({ id: item.id, name: item.title });
            });
            // /this.getCourseInfo(this.treeList[0].id)
            // console.log(this.treeList[0].id,'+++++')
            // this.showDrawer('showRight')
          } else {
            this.treeList = [];
          }
        })
        .catch((e) => {
          console.log(e, "报错");
        });
    },
    // 获取课程详情
    getCourseInfo(id) {
      this.curriculumVideoShow = false;
      $http
        .request({
          url: "medical/home/getCourseMedicalDetail",
          method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
          data: {
            id: id,
          },
          header: {
            //默认 无 说明：请求头
            "Content-Type": "application/json",
          },
        })
        .then(async (res) => {
          if (res.code == 0 && res.course.id) {
            this.courseInfo = res.course;
            this.courseTitle = this.courseInfo.title + "课程说明";
            this.curId = id;
            if (this.courseInfo.mediaType == 1 && this.courseInfo.media != "") {
              this.curriculumVideoShow = true;
              this.$nextTick(() => {
                this.$refs.curriculumVideo.initVideo({
                  videoId: this.courseInfo.media,
                  playAuth: this.courseInfo.media,
                });
              });

              // this.videoId =
              // this.playAuth =
              // this.getLive(this.playAuth)
            } else {
              // this.videoUrl = ''
              this.poster = "";

			  this.curriculumVideoShow = true;
              this.$nextTick(() => {
                this.$refs.curriculumVideo.initAudio();
              });

            }

            // console.log(id, 'id')
          } else {
            this.courseInfo = {};
            this.videoUrl = "";
            this.poster = "";
          }
        })
        .catch((e) => {
          this.courseInfo = {};
          this.courseTitle = "";
          this.curId = null;
          this.poster = "";
          this.videoUrl = "";
          console.log(e, "课程详情报错");
        });
    },
    // 获得播放地址
    async getVideoPath(str) {
      // console.log(str, 'str');
      let path = "";
      await $http
        .request({
          url: "medical/course/checkVideoByMD",
          method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
          data: {
            id: str,
          },
          header: {
            //默认 无 说明：请求头
            "Content-Type": "application/json",
          },
        })
        .then((res) => {
          if (res.code == 0) {
            // console.log(res, 'res');
            path = res.playAuth;
          }
        })
        .catch((e) => {
          console.log(e, "获取视频播放地址错误");
        });
      return path;
    },
    clickCourseInfo(item) {
      this.getCourseInfo(item.id);
    },
    playEnd() {
      this.showTemp = true;
    },
    clickToPlay() {
      this.showTemp = false;
      this.videoContext.play();
    },
  },
};
</script>
<script module="renderScript" lang="renderjs">
import $ from 'jquery'
//  import StaticADComponent from './staticadcomponent/index.js';
/**
 * 静态广告组件
 */

export default {
	/**
	 * 静态广告组件
	 */

	components: {
		// MyComponent
	},
	mounted() {
		// 在适合的生命周期，通过script和link标签引入播放器sdk、css
		console.log(this.options, '这是monted')
		this.loadWebPlayerSDK()
		this.loadComponent()
	},
	beforeDestroy() {

	    if (this.player) {
	      this.player.dispose()
	      this.player = null
	    }
	  },
	data() {
		return {
			player: null,
			curTime: null,
			curStatus: null,
			// currentTime:null,
		}
	},


	watch: {

		curTime(val) {
			if (this.curTime !== null && this.curStatus !== null) {
				this.$refs.videoContent1.click()
			}
		}
	},

	methods: {

		handleClick(event, ownerInstance) {
			console.log('event at line 165:', event)
			//             this.player.on('ready',function(){
			//    var status=  this.player.fullscreenService.getIsFullScreen()
			//    console.log('status at line 403:', status)
			// console.log('触发点击事件',status))
			//   })

			// ownerInstance.callMethod('getData')

		},
		emitData(event, ownerInstance) {
			var that = this;

			ownerInstance.callMethod('recordTime', {
				time: that.curTime,
				status: that.curStatus
			})

		},
		changeVideoScreen(event, ownerInstance) {
			var that = this;
			// this.$emit('changeScreenLoading',true)
			var status = this.player.fullscreenService.getIsFullScreen();



			ownerInstance.callMethod('screenChange', {
				status: status,
				primary: status ? 'portrait' : 'landscape'
			})


			if (status) {



				setTimeout(() => {
					plus.screen.lockOrientation("portrait-primary"); //锁死屏幕方向为竖屏
					this.player.fullscreenService.cancelFullScreen();
					// this.$emit('changeScreenLoading',false);


				}, 100);


				// this.player.setPlayerSize('100%','200px');




			} else {

				//               this.player.setPlayerSize({
				//   w:"400px",
				//   height:'60%'
				//  });
				// plus.screen.unlockOrientation();
				this.player.fullscreenService.requestFullScreen();
				setTimeout(() => {
					// this.$emit('changeScreenLoading',false);
					plus.screen.lockOrientation("landscape-primary");

				}, 100);

			}
		},
		endEmitData(event, ownerInstance) {
			var that = this;

			ownerInstance.callMethod('handleEnd', )
		},
		getLive() {
			if (this.videoData.type == 1) {
				var fullScreenButtonComponent = Aliplayer.Component({
					/**
					 * 初始函数，在new对象时调用
					 *
					 * @param {string} adAddress - 广告视频地址
					 * @param {string} toAddress - 广告链接地址
					 */
					init: function(status, toAddress) {

						this.fullScreenStatus = status
						// this.adAddress = adAddress;
						// this.toAddress = toAddress;

						this.$html = $('.fullScreenButton-container');
						// this.$html.hide();
					},

					/**
					 * 创建广告Dom元素
					 */
					createEl: function(el) {


						this.$html.find('.ad').attr('src', this.adAddress);
						var $adWrapper = this.$html.find('.ad-wrapper');
						$adWrapper.attr('href', this.toAddress);
						$adWrapper.click(function() {
							// Aliplayer.util.stopPropagation();
						});
						// this.$html.find('.close').click(function () {
						//   this.$html.hide();
						// });
						// $(el).find('.prism-controlbar').append(this.$html);
						$(el).find('.prism-time-display').after(this.$html);
					},
					ready: function(player, e) {
						// this.$html.hide()
					},
					/**
					 * 隐藏广告
					 */
					play: function(player, e) {
						// this.$html.show();
					},
					/**
					 * 显示广告
					 */
					pause: function(player, e) {
						// this.$html.show();
					},
					/**
					 * 隐藏广告
					 */
					playing: function(player, e) {
						this.$html.show();
						// this.$html.hide();
					},
					waiting: function(player, e) {
						// this.$html.hide()
					},
					timeupdate: function(player, e) {},
					error: function(player, e) {},
					/**
					 * 显示广告
					 */
					ended: function(player, e) {
						// this.$html.show();
					}
				});

				console.log('this.currentVideoList at line 456111111111111111111111:', this.videoList)
				var player = new Aliplayer({
					id: "url-player-test",
					"vid": this.videoData.videoId, // 必选参数，可以通过点播控制台（路径：媒资库>音/视频）查询。示例：1e067a2831b641db90d570b6480f****。
					"playauth": this.videoData.playAuth, // 必选参数，参数值可通过调用GetVideoPlayAuth接口获取。
					"encryptType": 1, // 必选参数，当播放私有加密流时需要设置本参数值为1。其它情况无需设置。
					"playConfig": {
						"EncryptType": 'AliyunVoDEncryption'
					},
					width: '100%', //容器的大小
					// videoWidth: '100vw', //容器的大小
					// videoHeight: '100vh', //容器的大小
					height: '200px', //容器的大小
					playsinline: true,
					controlBarVisibility: "click",
					cover: "http://ehh-public-01.oss-cn-beijing.aliyuncs.com/wumenyishu-image/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20240606110049.jpg",
					autoplay: false,
					components: [
						//                   {
						//   name: 'BulletScreenComponent',
						//   type: AliPlayerComponent.BulletScreenComponent,
						//   /** Descriptions of the scrolling text component parameters: text, style, bulletPosition
						//    * text: The scrolling text
						//    * style: The style of the scrolling text
						//    * bulletPosition: The position of the scrolling text. Valid values: 'top', 'bottom', and 'random'. The default is 'random'.
						//    */
						//   args: ['本课程版权归天津众妙之门科技有限公司所有，翻版必究!', {fontSize: '16px', color: 'red',}, 'random']
						// },
						{
							name: 'adComponent',
							type: fullScreenButtonComponent,
							args: [
								'http://101.201.146.165:8088/Pf-EH/statics/uploadFile/2024-05-10/b0f420c7-9178-41ad-9dd6-f59a64a6e190.png']
						},



						// {
						//   name: 'RotateMirrorComponent',
						//   type: AliPlayerComponent.RotateMirrorComponent
						// },


					],

					skinLayout: [{
							name: "bigPlayButton",
							align: "blabs",
							x: 30,
							y: 80
						},
						{
							name: "H5Loading",
							align: "cc"
						},
						{
							name: "errorDisplay",
							align: "tlabs",
							x: 0,
							y: 0
						},
						{
							name: "infoDisplay"
						},
						{
							name: "tooltip",
							align: "blabs",
							x: 0,
							y: 56
						},
						{
							name: "thumbnail"
						},
						{
							name: "controlBar",
							align: "blabs",
							x: 0,
							y: 0,
							children: [{
									name: "progress",
									align: "blabs",
									x: 0,
									y: 44
								},
								{
									name: "playButton",
									align: "tl",
									x: 15,
									y: 12
								},
								{
									name: "timeDisplay",
									align: "tl",
									x: 10,
									y: 7
								},
								// {name: "fullScreenButton", align: "tr", x: 10, y: 12},
								// {name:"subtitle", align:"tr",x:15, y:12},
								{
									name: "setting",
									align: "tr",
									x: 15,
									y: 12
								},
								{
									name: "prism-speed-selector",
									align: "tr",
									x: 15,
									y: 12
								},
								{
									name: "volume",
									align: "tr",
									x: 5,
									y: 10
								}
							]
						}
					]

				}, function(player) {



				});



				this.player = player;
				this.$refs.videoContent.click()

				var timer = setInterval(() => {
					var that = this;
					that.curTime = parseInt(this.player.getCurrentTime());
					that.curStatus = this.player.getStatus()

				}, 1000);
				// player.on('ready',function(){
				//      player.fullscreenService.requestFullScreen()

				//   })
				this.player.on('ended', function() {
					console.log('that.curTime at line 242:', this.curTime)
					console.log('that.curStatus at line 210:', this.curStatus)
					this.$refs.videoContent2.click()

				})
			}


			// player.setRotate(90)

			//全屏播放

			// player.one('canplay', function() {
			//     // console.log('canplay', this.player.tag);
			//     player.tag.play();

			// });



		},
		receiveScreenType(newValue) {
			console.log('newValue at line 427屏幕方向111111111111:', newValue)

		},
		receiveFirstTime(newValue, oldValue, ownerVm, vm) {
			// //数据变化

			console.log('newValue111', newValue)

			console.log('vm4444', vm)
			console.log('this.firstTime at line 215:', newValue)
			if (this.player) {
				this.player.seek(newValue);
			}


		},
		receiveVideoList(newValue, oldValue, ownerVm, vm) {
			// //数据变化

			console.log('currentVideoListcurrentVideoListcurrentVideoList', newValue)

		},
		receiveMsg(newValue, oldValue, ownerVm, vm) {
			//数据变化
			// console.log('newValue', newValue)
			if(newValue.playAuth){
				this.checkValue();
			}

			// console.log('oldValue', oldValue)
			// console.log('ownerVm', ownerVm)
			// console.log('vm', vm)
		},
		receiveWinWidth(newValue, oldValue, ownerVm, vm) {
			//数据变化
			console.log('newValue', newValue)
			// console.log('oldValue', oldValue)
			// console.log('ownerVm', ownerVm)
			// console.log('vm', vm)
		},
		receiveWinHeight(newValue, oldValue, ownerVm, vm) {
			//数据变化
			console.log('newValue', newValue)
			// console.log('oldValue', oldValue)
			// console.log('ownerVm', ownerVm)
			// console.log('vm', vm)
		},
		checkValue() {
			console.log(this.videoData, "1111888888")
			if (!this.videoData) {
				// if (!this.videoData.playAuth) {
				setTimeout(() => {
					this.checkValue();
				}, 1000);
			} else {

				console.log('this.videoList at line 这是这只只是594:', this.currentVideoList)
				this.getLive();
			}
		},
		loadWebPlayerSDK() {
			return new Promise((resolve, reject) => {

				const s_tag = document.createElement('script'); // 引入播放器js
				s_tag.type = 'text/javascript';
				s_tag.src = 'https://g.alicdn.com/apsara-media-box/imp-web-player/2.20.3/aliplayer-min.js';
				s_tag.charset = 'utf-8';
				s_tag.onload = () => {
					const s_tag1 = document.createElement('script'); // 引入播放器js
					s_tag1.type = 'text/javascript';
					s_tag1.src =
						'https://player.alicdn.com/aliplayer/presentation/js/aliplayercomponents.min.js';
					s_tag1.charset = 'utf-8';
					s_tag1.onload = () => {
						// this.checkValue();
						resolve();

					}
					document.body.appendChild(s_tag1);

				}
				document.body.appendChild(s_tag);



				const l_tag = document.createElement('link'); // 引入播放器css
				l_tag.rel = 'stylesheet';
				l_tag.href =
					'https://g.alicdn.com/apsara-media-box/imp-web-player/2.20.3/skins/default/aliplayer-min.css';



				document.body.appendChild(l_tag);
			});
		},
		loadComponent() {
			// return new Promise((resolve, reject) => {
			//     const s_tag = document.createElement('script');
			//     s_tag.type = 'text/javascript';
			//     // 需要先下载组件 js 文件，放到项目 /static/ 目录下
			//     // 下载地址：https://github.com/aliyunvideo/AliyunPlayer_Web/blob/master/customComponents/dist/aliplayer-components/aliplayercomponents-1.0.9.min.js
			//     s_tag.src = '@/static/aliplayercomponents.js';
			//     s_tag.charset = 'utf-8';
			//     s_tag.onload = () => {
			//         resolve();
			//     }
			//     document.body.appendChild(s_tag);
			// });
		}
	}
}
</script>

<style>
.fullScreenButton-container {
  color: #fff;
  float: right;
  height: 35px;
  margin-top: 6px;
  margin-right: 5px;
  display: flex;
  align-items: center;
  position: relative;
  i {
    color: #fff;
    display: inline-block;
    font-size: 22px;
    display: block;
    margin-top: 7px;
    cursor: pointer;
    & + i {
      margin-left: 3px;
    }
    @media (min-width: 768px) {
      &:hover + .player-tooltip {
        display: block;
      }
    }
  }
}
</style>
<style lang="scss" scoped>
@import "@/style/mixin.scss";

::v-deep .containerBg {
  .uni-audio-default {
    width: 100% !important;
  }
  #myVideo {
    width: 100% !important;
  }
  video {
    width: 100% !important;
  }
}
.flexbox {
  display: flex;
}
.subItem {
  background-color: #ebeef5;
  padding: 10rpx;
  flex-wrap: wrap;
  justify-content: start;
  text {
    display: inline-block;
    width: calc(25% - 8rpx);
    text-align: center;
    border-radius: 10rpx;
    color: #258feb;
    padding: 10rpx 20rpx;
    border: 1px solid #258feb;
    margin: 6rpx 0;
    font-size: 26rpx;
    margin-right: 10rpx;
  }
  text:last-child {
    margin-right: 0 !important;
  }
  .cur {
    background: #258feb;
    display: inline-block;
    color: #fff;
    border-radius: 10rpx;
    padding: 10rpx 20rpx;
  }
}
.close {
  display: flex;
  justify-content: right;
  padding-top: 60rpx;
  padding-right: 20px;
}
.infoBox {
  padding: 20rpx;
  font-size: 26rpx;
}

// 	  .leve2{background-color: #71a5ff; }
// 	  .leve3{background-color: #9bbeff; }
// .leve4{background-color: #b6d0ff; }
.containerBg {
  // background-color: $containerColor;
  background-color: #fff;
  padding: 0 20rpx;
  min-height: calc(100vh - 270rpx);
}

.uni-collapse-item__title-text {
  font-size: 30rpx;
}

.videoTemp {
  position: relative;

  .u-icon {
    position: absolute;
    z-index: 2;
    left: calc(50% - 40rpx);
    top: calc(50% - 40rpx);
  }

  image {
    width: 100%;
  }
}

.videoTemp:before {
  content: "";
  display: block;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1;
}

.proTitle {
  text-align: center;
  padding: 20rpx 0;
  margin-top: 60rpx;
  // margin-bottom: 20rpx;
  color: #666;
  font-size: 26rpx;
}

.sub1List {
  background-color: #f7f7f7;
  // padding-left: 20rpx;
}

.content {
  .item {
    background-color: #fff;
    line-height: 80rpx;
    font-size: 26rpx;
    color: #497387;
    // border-bottom: 1px solid #dae8f0;

    text {
      padding-left: 20rpx;
    }
    .item:last-child {
      border-bottom: 0;
    }
  }

  .item.active {
    // background-color: #aed1ec;
    color: #fff;
    background-image: linear-gradient(
      90deg,
      #258feb 0%,
      #00e1ec 100%
    ) !important;
  }
  .textss {
    display: inline-block;
    width: 100%;
    border-bottom: 1px solid #ebeef5;
  }
  .leve2 {
    .textss {
      padding-left: 20rpx;
    }
  }
  .leve2 {
    .textss {
      padding-left: 40rpx;
    }
  }
  .leve3 {
    .textss {
      padding-left: 60rpx;
    }
  }
  .leve4 {
    .textss {
      padding-left: 80rpx;
    }
  }
}
// .textss:last-child{
// 			border-bottom: 0;
// 		}
.topRight {
  margin-right: 20rpx;
  font-size: 28rpx;
  display: flex;
}

audio {
  width: 100% !important;
}
</style>
