<template>
  <CommonHeader />
  <div class="allPageWidthBg movPage" v-loading="loading">
    <div class="withShadow">
      <div class="likeBread">
        <div class="likeBread_left">{{ zyName }}</div>
        <div class="likeBread_right">
          <span>课程资源</span>- <span>查看详情</span>-
          <span>{{ zyName }}</span>
        </div>
      </div>
    </div>
    <div class="common1280 vedioMain">
      <div class="vedio_titel">
        <div class="vedio_titel_left">{{ zyName }} <span v-if="currentFilename"> - {{ currentFilename }}</span></div>
        <div class="vedio_titel_right" @mouseenter="showTrue" @mouseleave="showFalse">
          <img src="../assets/kczy/shareIcon.png" alt="" /> 分享
          <div class="qrcodeAll" v-if="shareSwitch">
            <p class="bigTit">呼唤小伙伴们前来围观吧</p>
            <div class="shareCover">
              <div class="sinaShare" @click="sinaWeiBo">
                <img src="../assets/zbktwlzb/weibo.png" alt="" />
              </div>
              <div class="QQShare" @click="shareQQ">
                <img src="../assets/zbktwlzb/QQ.png" alt="" />
              </div>
              <div class="zoneShare" @click="qZone">
                <img src="../assets/zbktwlzb/QQzone.png" alt="" />
              </div>
              <div class="wechatShare">
                <div class="mainInQR">
                  <qrcode-vue :value="shareLink" :size="size" level="H" />
                </div>
                <p class="textS">微信扫码分享</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="vedioMainContent">
        <div class="vedioMainContent_left">
          <div class="vedioMainContent_left_top">
            <div class="nicBaseInfo_avator">
              <img :src="userInfoData.user_avatar" v-if="userInfoData.user_avatar" />
              <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" v-else />
            </div>
            <div class="nicBaseInfo_text">
              <div class="nicBaseInfo_text_top" style="height: 50%">
                <span class="fir">{{ userInfoData.user_name }}</span>
                <span class="middle"><img src="../assets/kczy/fireIcon.png" alt="" /></span>
                <span class="sec" v-if="userInfoData.ext">{{
                    userInfoData.ext.ue_hot
                  }}</span>
              </div>
              <div class="nicBaseInfo_text_bottom" style="height: 50%">
                <span class="markLableOne">金牌讲师</span>
                <span class="markLableTwo">YYDS</span>
              </div>
            </div>
            <div class="nicBaseInfo_action">
              <div class="downIcon" @click="downLoadFile1" v-if="sourceDetailData.file_allow_preview_web==2">
                <img src="/kczy/downIcon.png" alt="" srcset="">
                <p>下载</p>
              </div>
              <template v-else>
                <div class="coverC" @click="handleFinger">
                  <img class="posiA posi1" v-if="fingerSwitch == '0'" src="../assets/kczy/zanIcon.png" />
                  <img class="posiA posi1" v-else src="../assets/kczy/zanIcon_full.png" />
                  <span class="posiA posi2">{{ fingerNum }}</span>
                </div>
                <div class="coverC" @click="handleLoveIcon">
                  <img class="posiA posi3" v-if="loveSwitch == '0'" src="../assets/kczy/collectIcon.png" />
                  <img class="posiA posi3" v-else src="../assets/kczy/collectIcon_full.png" />
                  <span class="posiA posi4">{{ loveNum }}</span>
                </div>
              </template>
            </div>
            <div class="nicBaseInfo_forceBtn" v-show="false">
              <span>关注</span>
            </div>
          </div>
          
          <div v-if="sourceDetailData.file_allow_preview_web==2" class="vedioMainContent_left_bottom" style="line-height: 300px;text-align: center;font-size: 16px;color: #ccc;background: #fff;">
            当前文件暂不支持预览
          </div>
          <template v-else>
            <div class="vedioMainContent_left_bottom" v-if="transIconType == 'mp4'">
              <!-- 换用阿里云播发器 -->
              <div class="aliPlayerShow" id="J_prismPlayer"></div>

              <!-- <video id="video" ref="urlResouce" controls :src="sourceDetailData.kf_path">
              </video> -->
              <!-- <div class="assi">助教：沈老师</div> -->
              <div class="watchingNum">
                当前观看人数：{{ sourceDetailData.kf_view_num }}
              </div>
            </div>

            <div class="vedioMainContent_left_bottom" v-else-if="transIconType == 'mp3'">
              <audio ref="urlResouce" controls :src="sourceDetailData.kf_path">
                <source :src="prefixImg+sourceDetailData.kf_path" type="audio/mp3">
              </audio>
            
              <!-- <div class="assi">助教：沈老师</div> -->
              <div class="watchingNum">
                当前观看人数：{{ sourceDetailData.kf_view_num }}
              </div>
            </div>

            <iframe v-else class="vedioMainContent_left_bottom" name="content_frame" :src="previewUrl+currentUrl" frameborder=0  scrolling="no"></iframe>
          </template>
        </div>
        <div class="vedioMainContent_right">
          <div class="vedioMainContent_right_top" v-show="false">
            <div class="titleChapter">
              <span class="titleBorder-title">相关章节</span>
              <span class="titleBorder-line"></span>
            </div>
            <div class="detailChapter">
              <ul>
                <li>02 课时 行程问题</li>
                <li>03 课时 过桥问题</li>
                <li>04 课时 流水问题</li>
                <li>05 课时 行程问题</li>
              </ul>
            </div>
          </div>
          <div class="vedioMainContent_right_bottom">
            <div class="tabTitle">
              <ul>
                <li :class="{'activein': num==index}" v-for="(item,index) in sliderTab" :key="index" @click="handleSwitch(index)">
                  <p>{{ item }}</p>
                  <span></span>
                </li>
              </ul>
            </div>
            <div class="comList" v-show="num==0">
              <div>
                <el-rate v-model="starsValue" :texts="['极差', '失望', '普通', '优秀', '惊艳']" show-text />
              </div>
              <div class="rateBtn" @click="evalua()">
                <button>评价</button>
              </div>
              <div class="allCommonList" v-if="evaluaListData && evaluaListData.length > 0">
                <div class="singleList" v-for="(item, index) in evaluaListData" :key="index">
                  <p class="item1">
                    {{
                      item.ke_user_realname
                    }}<span class="itemSon1">{{ item.create_dateline }}</span>
                  </p>
                  <div class="starListS">
                    <img src="../assets/kczy/stars.png" v-for="(itemsec, index) in Number(item.ke_star)" :key="index" alt="" />
                  </div>
                </div>
              </div>

              <div class="NOdata" style="padding-top: 40%" v-else>
                <img src="../assets/kczy/noData4.png" alt="" />
                <p class="NOdata_p">暂无数据~</p>
              </div>
            </div>
            <div class="comList" v-show="num==1">
              <div class="allCommonList allCommonListSec">
                <div class="singleList" v-for="(item, index) in sourceData" :key="index">
                  <p class="item1">
                    {{ item.user_name == false ? "未知" : item.user_name }}
                    <span class="itemSon1">{{ item.create_time }}</span>
                  </p>
                  <div class="px-5px pt-10px" v-if="item.fileData.length>1">
                    <div class="text-15px">{{ item.kf_name }}</div>
                    <div class="pt-8px">
                      <div class="flex items-center text-13px mb-3px" v-for="(value, i) in item.fileData" :key="`${index}-${i}`">
                        <div class="flex-1 truncate">
                          <el-tooltip  effect="dark" :content="value.name"  placement="left">{{ value.name }}</el-tooltip>
                        </div>
                        <el-button class="!h-24px !bg-transparent !text-hex-409eff" plain round type="primary" size="mini" @click="handleDownload(value)">下载</el-button>
                        <el-button class="!h-24px !bg-transparent !text-hex-409eff" plain round type="primary" size="mini" @click="handlePreview(item, value, i)">预览</el-button>
                      </div>
                    </div>
                  </div>
                  <div class="px-5px pt-10px" v-else>
                    <div class="flex items-center text-13px mb-3px">
                      <div class="flex-1 truncate">
                        <el-tooltip  effect="dark" :content="item.kf_name"  placement="left">{{ item.kf_name }}</el-tooltip>
                      </div>
                      <template v-if="item.fileData.length==1">
                        <el-button class="!h-24px !bg-transparent !text-hex-409eff" plain round type="primary" size="mini" @click="handleDownload(item.fileData[0])">下载</el-button>
                        <el-button class="!h-24px !bg-transparent !text-hex-409eff" plain round type="primary" size="mini" @click="handlePreview(item, item.fileData[0], 0)">预览</el-button>
                      </template>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="comList" v-show="num==2">
              <div class="allCommonList allCommonListSec">
                <div class="singleList" v-for="(item, index) in homeWorkList" :key="index">
                  <div class="fileAll">
                    <div class="fileAll_middle">{{ item.yzk_name }}</div>
                    <div class="fileAll_right" v-if="item.yzkx_status=='2'" @click="diglogaAnswer(item)">答题</div>
                    <div class="fileAll_right" v-else @click="diglogaAnswer(item)">查看</div>

                  </div>
                </div>
              </div>

            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- dialog  -->
    <el-dialog v-model="dialogVisible" title="" width="50%" center>
      <div class="dialogSTY">
        <h4>{{ dialogT }}</h4>
        <div>
          <div class="singleOption" v-for="(item,index) in singleAnswer" :key="index">
            <div class="titleShow">{{ index + 1 }}、{{ item.problem }}【{{ problemTypeData[item.problemType] }}】
            </div>

            <el-radio-group :disabled="currentRow.answerd==1?true:false" v-if="item.problemType==0" v-model="item.result" size="large">
              <el-radio style="width: 100%;" v-for="(value, i) in item.options" :key="i" :label="(i+1)+''">
                {{ item.options[i] }}
              </el-radio>
            </el-radio-group>
            <el-checkbox-group :disabled="currentRow.answerd==1?true:false" v-if="item.problemType==1" v-model="item.result" size="large">
              <el-checkbox style="width: 100%;" v-for="(value, i) in item.options" :key="i" :label="(i+1)+''">
                {{ item.options[i] }}
              </el-checkbox>
            </el-checkbox-group>
            <el-radio-group :disabled="currentRow.answerd==1?true:false" v-if="item.problemType==2" v-model="item.result" size="large">
              <el-radio label="1">对</el-radio>
              <el-radio label="2">错</el-radio>
            </el-radio-group>
            <div class="flex posiA" v-if="dialogStatus==1">
              <span class="nowrap">全市作答正确率：</span>
              <el-progress type="circle" :width="72" :stroke-width="12" color="#4BBC88" :percentage="currentRow.right_percent" />
            </div>
          </div>

        </div>
      </div>
      <template #footer>
        <span class="dialog-footer" align="center">
          <el-button type="primary" @click="sublimeAdd">提交</el-button>
          <el-button @click="dialogVisible = false">关闭</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 此预览暂时停用 -->
    <!-- <el-dialog v-model="dialogPreviewVisible" :key="dialogDataFile" draggable width="65vw">
      <file-preview :url="dialogDataFile" alt="" class="w-full min-h-65vh" />
    </el-dialog> -->
  </div>
  <common-footer/>
</template>

<script>
import CommonHeader from "@/components/CommonHeader/index.vue";
import CommonFooter from "@/components/CommonFooter/index.vue";
import { _debounce, _throttle } from "../utils/throttleWithDebounce";
import {
  courseSourceDetail,
  evaluaList,
  evaluaAdd,
  likeApi_add,
  likeApi_del,
  collectApi_add,
  collectApi_del,
  userInfoDetail,
  sourceList,
  homeWork_list,
  homeWork_detail,
  courseDetail,
  homeWork_singleStu_add,
  homeWork_singleStu_edit,
  homeWork_singleStu_detail
} from "./kczy/allApi.js";
import { user } from "@/store/user.js";
import QrcodeVue from "qrcode.vue";

export default {
  name: "moviePage",
  components: {
    CommonHeader,
    CommonFooter,
    QrcodeVue,
  },
  data() {
    return {
      loading: false,
      previewUrl: "https://view.officeapps.live.com/op/view.aspx?src=",
      zyName: "",
      currentIndex: 0,
      currentUrl: "",
      currentFilename: "",
      starsValue: "",
      transIconType: "",
      transKfId: "",
      sourceDetailData: "",
      typeKind: "",
      prefixImg: "https://tyyxopenapi.bozedu.top/",
      evaluaListData: [],
      userInfoData: "",
      shareLink: "",
      shareSwitch: false,
      transKkId: '',
      fingerNum: 0, //点赞数
      fingerSwitch: 0, //0：关 1：开
      loveNum: 0, //关注
      loveSwitch: 0, //0：关 1：开
      sliderTab: [
        '评价', '资源', '作业'
      ],
      num: 0,
      dialogVisible: false,
      sourceData: [],
      homeWorkList: [],
      currentRow: '',
      dialogT: '',
      dialogStatus: '',
      singleAnswer: '',
      colors: [
        { color: '#4BBC88', percentage: 20 },
        { color: '#4BBC88', percentage: 40 },
        { color: '#4BBC88', percentage: 60 },
        { color: '#4BBC88', percentage: 80 },
        { color: '#4BBC88', percentage: 100 },
      ],
      problemTypeData: ["单选题", "多选题", "判断题"],
      kkName: '',
      yzkxId: '',

      dialogPreviewVisible: false,
      dialogDataFile: {},
      sourceUrl:'',
      player:''
    };
  },

  mounted() {
    this.initData();
    this.initEvaluaList();
    this.initUserInfoDetail();
    this.initDetail();
  },
  methods: {
    //预览
    // handlePreview(d) {
    //   this.dialogDataFile = d
    //   this.dialogPreviewVisible = true
    // },
    getFullUrl(url) {
      if (!url) return '';
      return url.startsWith('http') ? url : window.GLOBAL_CONFIG.oss + '/' + url
    },
    /**初始化数据*/
    initData() {
      // this.transIconType = this.$route.query.icon;
      this.transKfId = this.$route.query.kfId;
      this.transKkId = this.$route.query.kkID;
      this.currentIndex = sessionStorage.getItem("index");
      let transObj = {
        token: user?.token,
        kf_id: this.transKfId,
      };
      this.loading = true;
      courseSourceDetail(transObj)
        .then((res) => {
          if (res.code == "1") {
            this.sourceDetailData = res.data.one_info;
            let tempD = res.data.one_info.kf_path;
            this.typeKind = tempD.substr(tempD.lastIndexOf(".") + 1);
            // this.$refs.urlResouce.src = res.data.one_info.kf_path;

           //示例设置清晰度为超清和高清的地址("OD": "<原画URL>","FD": "<流畅URL>","LD":"<标清URL>","SD": "<高清URL>","HD": "<超清URL>","2K": "<2K URL>","4K": "<4K URL>")
           // source:'{"HD":"http://******/player/hdexample.mp4","SD":"http://******/player/sdexample.mp4"}'

            // let oneInfoData = res.data.one_info;
            // console.log(oneInfoData)
            // this.sourceUrl = { "OD": oneInfoData.kf_path_od, "FD": oneInfoData.kf_path_fd, "LD": oneInfoData.kf_path_ld };
            // let stringSourceUrl = JSON.stringify( this.sourceUrl)

            this.fingerNum = res.data.one_info.kf_like_num; //点赞数
            this.fingerSwitch = res.data.one_info.is_like; //0：关 1：开
            this.loveNum = res.data.one_info.kf_fav_num; //关注
            this.loveSwitch = res.data.one_info.is_fav; //0：关 1：开

            this.zyName = this.sourceDetailData.kf_name;
            let fileData = this.initFileData(this.sourceDetailData.kf_path);
            this.initCurrentFile(fileData[this.currentIndex || 0]);
            this.loading = false;
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    initFileData(path) {
      let arr = path.split(";");
      let fileData = arr.map((item, index) => {
        let file = item.split("|");
        let url = this.getFullUrl(file[0])
        let suffix = file[0]?.substr(file[0].lastIndexOf(".") + 1);
        let name = arr.length == 1 ? "" : (file[1] || `文件${index+1}`);
        return {
          url, suffix, name
        }
      })
      return fileData
    },
    initCurrentFile(data) {
      this.player && this.player.dispose();
      this.transIconType = data.suffix;
      this.currentUrl = data.url;
      this.currentFilename = data.name;
      if (data.url && (data.suffix=="mp3" || data.suffix=="mp4")) {
        setTimeout(() => {
          this.initPlayer(data.url)
        }, 1000)
      }
    },
    initPlayer(source) {
      let _this = this;
      // 初始换aliplayer
      this.player = new Aliplayer({
          id: 'J_prismPlayer',
          source: source,
          language: "zh-cn",
          width: '100%', //容器的大小
          height: '100%', //容器的大小
          isLive:false,//是不是直播
          preload:true,//播放器自动加载
          autoplay: true,//是否自动播放
          qualitySort:'asc',//从小到大排序
        },function(player){
          console.log('播发器创建完成~')
      });
      if(localStorage.getItem('cur_time_'+ this.transKkId)) {
        this.player.seek(localStorage.getItem('cur_time_'+ this.transKkId));
      }
      var timer = setInterval(() => {
        var curTime = parseInt(this.player.getCurrentTime());
        if (this.player && this.player.getStatus() == "playing") {
          localStorage.setItem('cur_time_'+ this.transKkId,curTime);
        }
      }, 30000);
    },
    handlePreview(item, value, index) {
      sessionStorage.setItem("index", index);
      if (item.kf_id == this.transKfId) {
        this.zyName = item.kf_name;
        this.initCurrentFile(value);
      } else {
        const query = JSON.parse(JSON.stringify(this.$route.query));
        query.kfId = item.kf_id;
        this.$router.replace({ path: this.$route.path, query });
      }
    },
    /**初始化评论*/
    initEvaluaList() {
      let transObj = {
        token: user?.token,
        kf_id: this.transKfId,
      };
      evaluaList(transObj)
        .then((res) => {
          if (res.code == "1") {
            this.evaluaListData = res.data.page_data;
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    /**课程用户信息*/
    initUserInfoDetail() {
      let transObj = {
        token: user?.token,
        user_id: user.user_id,
      };
      userInfoDetail(transObj)
        .then((res) => {
          if (res.code == "1") {
            this.userInfoData = res.data;
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    /**初始化资源列表*/
    initSourceList() {
      let transObj = {
        limit: 99,
        token: user?.token,
        kk_id: this.transKkId
      };
      sourceList(transObj)
        .then(res => {
          if (res.code == '1') {
            res.data.page_data.map((item) => {
              item.fileData = this.initFileData(item.kf_path);
            })
            this.sourceData = res.data.page_data;
          }
        })
        .catch(error => {
          console.log(error)
        })
    },
    /**初始化作业列表*/
    initHomeworkList() {
      let transObj = {
        limit: 30,
        // yzk_ids: this.transKkId
        yzk_id: this.sourceDetailData.yzk_id
      }
      homeWork_list(transObj)
        .then(res => {
          if (res.code == 1) {
            this.homeWorkList = res.data.page_data;
          }
        })
        .catch(error => {
          console.log(error)
        });
    },
    /**初始化课程名称*/
    initDetail() {
      this.kkID = this.$route.query.kkID;
      let transObj = {
        token: user?.token,
        kk_id: this.kkID
      }
      courseDetail(transObj)
        .then(res => {
          if (res.code == "1") {
            this.kkName = res.data.one_info.kk_name;
          }
        })
        .catch(error => {
          console.log(error)
        })
    },
    /**切换*/
    handleSwitch(index) {
      this.num = index;
      switch (index) {
        case 0:
          this.initEvaluaList();
          break;
        case 1:
          this.initSourceList();
          break;
        case 2:
          this.initHomeworkList();
          break;
      }
    },
    /**资源-下载*/
    downloadFile(item) {
      let downFileUrl = item.kf_path;
      window.open(downFileUrl, '_self');
    },
    handleDownload(value) {
      let downFileUrl = value.url;
      window.open(downFileUrl);
    },
    /**评价*/
    evalua() {
      let prefiexOBJ = {
        ke_star: this.starsValue,
        ke_user_realname: user.user_realname,
        kk_id: this.transKkId,
        kf_id: this.transKfId,
      };
      let transObj = {
        token: user?.token,
        kczy_evaluate: prefiexOBJ,
      };
      evaluaAdd(transObj)
        .then((res) => {
          if (res.code == "1") {
            ElMessage({
              message: res.msg,
              type: "success",
            });
            this.initEvaluaList();
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    /**增加赞或取消*/
    handleFinger() {
      if (this.fingerSwitch == 1) {//0：关 1：开
        //去掉赞
        let transObj = {
          kf_id: this.transKfId,
        };
        likeApi_del(transObj)
          .then((res) => {
            if (res.code == "1") {
              this.fingerNum--;
              this.fingerSwitch = 0;
              ElMessage({
                message: res.msg,
                type: "success",
              });
            } else {
              ElMessage({
                message: res.msg,
                type: "waring",
              });
            }
          })
          .catch((error) => {
            console.log(error);
          });
      } else {
        let transObj = {
          kczy_files_like: {
            kf_id: this.transKfId,
            kt_id: this.transKkId,
          },
        };
        likeApi_add(transObj)
          .then((res) => {
            if (res.code == "1") {
              ElMessage({
                message: res.msg,
                type: "success",
              });
              this.fingerNum++;
              this.fingerSwitch = 1;
            } else {
              ElMessage({
                message: res.msg,
                type: "waring",
              });
            }
          })
          .catch((error) => {
            console.log(error);
          });
      }
      // this.initData();
    },
    /**增加收藏或取消*/
    handleLoveIcon() {
      if (this.loveSwitch == 1) {
        //去掉收藏
        let transObj = {
          kf_id: this.transKfId,
        };
        collectApi_del(transObj)
          .then((res) => {
            console.log(res);
          })
          .catch((error) => {
            console.log(error);
          });
        this.loveNum--;
        this.loveSwitch = 0;
      } else {
        let transObj = {
          kczy_files_fav: {
            kf_id: this.transKfId,
            kt_id: this.transKkId,
          },
        };
        collectApi_add(transObj)
          .then((res) => {
            if (res.code == "1") {
              ElMessage({
                message: res.msg,
                type: "success",
              });
              this.loveNum++;
              this.loveSwitch = 1;
            } else {
              ElMessage({
                message: res.msg,
                type: "waring",
              });
            }
          })
          .catch((error) => {
            console.log(error);
          });
      }
      // this.initData();
    },
    /**作业-答题*/
    diglogaAnswer(item) {
      this.dialogVisible = true;
      if (item.yzkx_status == '2') {//没有答过
        this.currentRow = item;
        this.dialogT = item.yzk_name;
        this.dialogStatus = item.yzkx_status;//1 已经答过了，2 没有答题
        this.singleAnswer = JSON.parse(item.yzk_content_json);
        this.yzkId = item.yzk_id;
      } else {//已经答题过了
        let transObj = {
          yzkx_id: item.yzk_id
        }
        homeWork_singleStu_detail(transObj)
          .then(res => {
            if (res.code == "1") {
              let responseData = res.data.one_info;
              this.currentRow = responseData;
              this.dialogT = responseData.yzk_name;
              this.dialogStatus = 1;//1 已经答过了，2 没有答题
              this.singleAnswer = JSON.parse(responseData.yzzx_content_json);
              this.yzkId = responseData.yzk_id;
              this.yzkxId = responseData.yzkx_id;
            }
          })
          .catch(error => {
            console.log(error)
          })
      }

    },
    /**提交*/
    sublimeAdd() {
      this.singleAnswer.map(item => {
        if (item.problemType == 1) {
          item.answer = item.result.join(",");
        } else {
          item.answer = item.result;
        }
      })

      if (this.dialogStatus == "2") {//没有答题，走学生试卷添加接口
        let transObj = {
          yzy_zy_kczy_xsdt: {
            yzk_name: this.dialogT,//作业名称
            yzk_id: this.yzkId,
            kk_id: this.transKkId,//所属课程资源编号
            kk_name: this.kkName,//所属课程资源名称
            kf_id: this.transKfId,//所属课程资源编号
            kf_name: this.zyName,//所属课程资源名称
            yzkx_content_json: JSON.stringify(this.singleAnswer),//学生答题情况
            yzkx_student_realname: user.user_realname,
          }
        }
        // console.log(JSON.parse(transObj.yzy_zy_kczy_xsdt.yzkx_content_json),"000000")
        //只能学生提交
        let isWhoId = user.user_role_id;
        if (isWhoId > 75) {//学生
          homeWork_singleStu_add(transObj)
            .then(res => {
              if (res.code == "1") {
                ElMessage.success("提交成功!");
                this.dialogVisible = false;
                this.initHomeworkList();
              }
            })
            .catch(error => {
              console.log(error)
            });
        } else {
          ElMessage.error("仅限学生答题提交!");
          return
        }
      } else {
        //如果是答过题，是学生试卷编辑接口
        let transObj = {
          yzkx_id: this.yzkxId,
          yzy_zy_kczy_xsdt: {
            yzk_name: this.dialogT,//作业名称
            yzk_id: this.yzkId,
            kk_id: this.transKkId,//所属课程资源编号
            kk_name: this.kkName,//所属课程资源名称
            kf_id: this.transKfId,//所属课程资源编号
            kf_name: this.sourceDetailData.kf_name,//所属课程资源名称
            yzkx_content_json: JSON.stringify(this.singleAnswer),//学生答题情况
            yzkx_student_realname: user.user_realname,
          }
        }
        //只能学生提交
        let isWhoId = user.user_role_id;
        if (isWhoId > 75) {//学生
          homeWork_singleStu_edit(transObj)
            .then(res => {
              if (res.code == '1') {
                ElMessage.success("提交成功!");
                this.dialogVisible = false;
                this.initHomeworkList();
              }
            })
            .catch(error => {
              console.log(error)
            });
        } else {
          ElMessage.error("仅限学生答题提交!");
          return
        }
      }
      console.log("后台要answer:", this.singleAnswer);
    },
    /**创建二维码*/
    showTrue() {
      this.shareSwitch = true;
      //地址栏参数
      this.shareLink = window.location.href;
    },
    showFalse() {
      this.shareSwitch = false;
    },
    //分享大全
    shareQQ(title, url, pic) {
      var p = {
        url: this.shareLink /*获取URL，可加上来自分享到QQ标识，方便统计*/,
        desc: "来自桐乡艺校的分享" /*分享理由(风格应模拟用户对话),支持多分享语随机展现（使用|分隔）*/,
        title: "优质课程一起围观~" /*分享标题(可选)*/,
        summary: "优质课程一起围观~" /*分享描述(可选)*/,
        pics: pic /*分享图片(可选)*/,
        flash: "" /*视频地址(可选)*/,
        //commonClient : true, /*客户端嵌入标志*/
        site: "桐乡艺校" /*分享来源 (可选) ，如：QQ分享*/,
      };
      var s = [];
      for (var i in p) {
        s.push(i + "=" + encodeURIComponent(p[i] || ""));
      }
      var target_url =
        "http://connect.qq.com/widget/shareqq/iframe_index.html?" + s.join("&");
      window.open(target_url, "qq", "height=520, width=720");
    },
    qZone(title, pic) {
      var p = {
        url: this.shareLink,
        showcount: "1" /*是否显示分享总数,显示：'1'，不显示：'0' */,
        desc: "这篇文章不错,分享一下~~" /*默认分享理由(可选)*/,
        summary: "" /*分享摘要(可选)*/,
        title: "优质课程一起围观~" /*分享标题(可选)*/,
        site: "桐乡艺校" /*分享来源 如：腾讯网(可选)summary*/,
        pics: pic /*分享图片的路径(可选)*/,
        style: "101",
        width: 199,
        height: 30,
      };
      var s = [];
      for (var i in p) {
        s.push(i + "=" + encodeURIComponent(p[i] || ""));
      }
      var target_url =
        "http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?" +
        s.join("&");
      window.open(target_url, "qZone", "height=430, width=400");
    },
    weixin() {
      var target_url =
        "http://qr.liantu.com/api.php?text=http://test.qicheyitiao.com";
      window.open(target_url, "weixin", "height=320, width=320");
    },
    sinaWeiBo(title, url, pic) {
      var param = {
        url: this.shareLink,
        type: "3",
        count: "1" /** 是否显示分享数，1显示(可选)*/,
        appkey: "桐乡艺校" /** 您申请的应用appkey,显示分享来源(可选)*/,
        title:
          "优质课程一起围观~" /** 分享的文字内容(可选，默认为所在页面的title)*/,
        pic: pic,
        /**分享图片的路径(可选)*/
        ralateUid: "",
        /**关联用户的UID，分享微博会@该用户(可选)*/ rnd: new Date().valueOf(),
      };
      var temp = [];
      for (var p in param) {
        temp.push(p + "=" + encodeURIComponent(param[p] || ""));
      }
      var target_url =
        "http://service.weibo.com/share/share.php?" + temp.join("&");
      window.open(target_url, "sinaweibo", "height=430, width=400");
    },
    //文件下载
    downLoadFile1() {
      window.open(this.currentUrl);
    },
  },
  watch: {
    '$route' (to, from) {
      this.$router.go(0);
    }
  },

};
</script>

<style lang="scss" scoped>
@import "../styles/common_resource.scss";

.vedio_titel {
  display: flex;
  height: 40px;
  line-height: 40px;

  .vedio_titel_left {
    font-size: 20px;
    font-weight: 800;
    text-align: left;
    color: #000000;
  }

  .vedio_titel_right {
    font-size: 16px;
    font-weight: 400;
    text-align: left;
    color: #00a3ff;
    margin-left: 20px;
    position: relative;

    img {
      display: inline-block !important;
      width: 16px;
    }

    .qrcodeAll {
      position: absolute;
      left: 10px;
      top: 32px;
      z-index: 14;
      width: 408px;
      border-radius: 10px;
      box-sizing: border-box;
      padding: 10px;
      background-color: rgb(255, 255, 255);

      .bigTit {
        font-size: 16px;
        font-weight: 500;
        text-align: center;
        color: #000000;
        margin-bottom: 20px;
      }

      .shareCover {
        display: flex;

        .sinaShare,
        .QQShare,
        .zoneShare {
          width: 20%;
          height: 115px;
          line-height: 115px;
          text-align: center;
          cursor: pointer;

          img {
            width: 50%;
          }
        }

        .wechatShare {
          width: 40%;
          text-align: center;
          cursor: pointer;

          .mainInQR {
            height: 100px;
          }

          .textS {
            font-size: 14px;
            font-weight: 400;
            text-align: center;
            color: #000000;
          }
        }
      }
    }
  }
}

.vedioMainContent {
  display: flex;
  justify-content: space-between;

  .vedioMainContent_left {
    width: 70%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .vedioMainContent_left_top {
      display: flex;
      height: 100px;
      background: #ffffff;
      border-radius: 10px;
      box-shadow: 2px 10px 24px 0px rgba(161, 153, 168, 0.18);
      margin-bottom: 10px;
      justify-content: space-between;

      .nicBaseInfo_avator {
        width: 10%;
        line-height: 100px;
        position: relative;
        overflow: hidden;
        img{
          width: 77px;
          height: 77px;
          border-radius: 50%;
          display: inline-block;
          background-color: #cacaca;
          position: absolute;
          left: 50%;
          top: 50%;
          z-index: 13;
          transform: translate(-50%, -50%);
        }
      }

      .nicBaseInfo_text {
        width: 50%;

        .nicBaseInfo_text_top {
          line-height: 70px;
          display: flex;

          span.middle {
            display: inline-block;
            margin-left: 10px;
            margin-right: 3px;
            box-sizing: border-box;
            padding-top: 4%;

            img {
              width: 19px;
              height: 22px;
            }
          }

          span.fir {
            font-size: 16px;
            font-weight: 800;
            text-align: left;
            color: #000000;
          }

          span.sec {
            font-size: 14px;
            font-weight: 400;
            text-align: left;
            color: #949494;
            background: url("../assets/images/kczy/fireIcon1.png");
            background-size: 100% 100%;
          }
        }

        .nicBaseInfo_text_bottom {
          line-height: 30px;

          .markLableOne {
            background: #190006;
            border: 1px solid #f1c342;
            border-radius: 12px;
            font-size: 12px;
            font-weight: 400;
            text-align: center;
            color: #ffffff;
            padding: 5px 8px;
            margin-right: 10px;
          }

          .markLableTwo {
            background: linear-gradient(90deg, #00a3ff 1%, #57c38f);
            border-radius: 12px;
            font-size: 12px;
            font-weight: 400;
            text-align: center;
            color: #ffffff;
            padding: 5px 8px;
          }
        }
      }

      .nicBaseInfo_action {
        width: 30%;
        font-size: 16px;
        font-weight: 400;
        text-align: left;
        color: #00a3ff;
        position: relative;

        .coverC {
          cursor: pointer;
        }

        .posiA {
          position: absolute;
          z-index: 12;
        }

        .posi1 {
          left: 0px;
          top: 50%;
          transform: translate(0, -50%);
        }

        .posi2 {
          margin: 0 2px;
          left: 10%;
          top: 50%;
          transform: translate(0, -50%);
        }

        .posi3 {
          left: 33%;
          top: 50%;
          transform: translate(0, -50%);
        }

        .posi4 {
          margin: 0 2px;
          left: 43%;
          top: 50%;
          transform: translate(0, -50%);
        }

        .zan {
          background: url("../assets/kczy/zanIcon.png") no-repeat left center;
          background-size: 21px 20px;
          box-sizing: border-box;
          padding: 3px 0 3px 25px;
          cursor: pointer;
        }

        .collect {
          background: url("../assets/kczy/collectIcon.png") no-repeat left
            center;
          background-size: 21px 20px;
          box-sizing: border-box;
          padding: 3px 0 3px 25px;
          margin-left: 30px;
          cursor: pointer;
        }
      }

      .downIcon{
        width: 28px;
        font-size: 14px;
        font-weight: 400;
        text-align: center;
        color: #00a3ff;
        position: absolute;
        right:8%;
        top: 50%;
        transform: translateY(-50%);
        z-index:12;
        cursor: pointer;
        img{
          width:26px;
        }
        p{
          margin-top:5px;
        }
      }

      .nicBaseInfo_forceBtn {
        width: 10%;
        text-align: left;
        line-height: 100px;

        span {
          font-size: 16px;
          font-weight: 400;
          text-align: center;
          color: #ffffff;
          background: rgba(0, 131, 197, 0.8);
          border-radius: 6px;
          padding: 7px 20px;
          cursor: pointer;
        }
      }
    }

    .vedioMainContent_left_bottom {
      height: 504px;
      background: #cee5fb;
      border-radius: 10px;
      overflow: hidden;
      position: relative;

      video {
        width: 100%;
        height: 100%;
      }

      audio {
        width: 100%;
        height: 100%;
      }

      .assi {
        position: absolute;
        left: 0;
        top: 0;
        z-index: 13;
        width: 176px;
        height: 48px;
        line-height: 48px;
        background: #ffffff;
        border-bottom-right-radius: 10px;
        font-size: 16px;
        font-weight: 400;
        text-align: center;
        color: #00a3ff;
      }

      .watchingNum {
        position: absolute;
        right: 0;
        top: 0;
        z-index: 13;
        width: 190px;
        height: 38px;
        line-height: 38px;
        background-color: rgba(255, 255, 255, 0.5);
        border-bottom-left-radius: 10px;
        width: 166px;
        font-size: 16px;
        font-weight: 400;
        text-align: center;
        color: #ffffff;
      }
    }
  }

  .vedioMainContent_right {
    width: 28%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .vedioMainContent_right_top {
      width: 100%;
      height: 459px;
      background: #ffffff;
      border-radius: 12px;
      box-shadow: 2px 10px 24px 0px rgba(161, 153, 168, 0.18);
      box-sizing: border-box;
      padding: 33px 18px;

      .titleChapter {
        width: 100%;
        height: 50px;
        position: relative;

        .titleBorder-title {
          font-size: 16px;
          font-weight: 500;
          text-align: left;
          color: #222222;
          position: absolute;
          left: 5px;
          top: 13%;
          z-index: 14;
        }

        .titleBorder-line {
          width: 72px;
          height: 6px;
          opacity: 0.2;
          background: #6c5dd3;
          border-radius: 3px;
          position: absolute;
          left: 0;
          top: 42%;
          z-index: 13;
        }
      }

      .detailChapter {
        overflow: auto;

        ul {
          li {
            width: 100%;
            height: 40px;
            line-height: 40px;
            background: #f3faff;
            border-radius: 16px 16px 0px 0px;
            margin-bottom: 20px;
            box-sizing: border-box;
            padding-left: 24px;
          }
        }
      }
    }

    .vedioMainContent_right_bottom {
      width: 100%;
      // min-height: 578px;
      height: 100%;
      background: #ffffff;
      border-radius: 12px;
      box-shadow: 2px 10px 24px 0px rgba(161, 153, 168, 0.18);
      box-sizing: border-box;
      padding: 18px;

      .tabTitle {
        ul {
          display: flex;
          justify-content: space-between;
          box-sizing: border-box;
          padding: 0 5%;

          li {
            width: 100%;
            height: 32px;
            line-height: 32px;
            font-size: 16px;
            font-weight: 500;
            text-align: left;
            color: #a09dbb;
            cursor: pointer;
            position: relative;

            p {
              width: 100%;
              height: 100%;
              position: absolute;
              left: 0%;
              top: 0%;
              z-index: 13;
              text-align: center;
            }
          }
        }
      }

      .comList {
        box-sizing: border-box;
        padding: 25px 0 0 0;

        .rateBtn {
          margin-top: 20px;

          button {
            width: 111px;
            height: 32px;
            line-height: 32px;
            background: linear-gradient(90deg, #00a3ff 1%, #57c38f);
            border-radius: 38px;
            font-size: 14px;
            font-weight: 400;
            text-align: center;
            color: #ffffff;
            letter-spacing: 0.6px;
          }
        }

        .allCommonListSec {
          height: 495px !important;
        }

        .allCommonList {
          margin-top: 25px;
          height: 412px;
          overflow-y: auto;

          .singleList {
            min-height: 70px;
            border-bottom: 1px dashed #6e58c5;
            box-sizing: border-box;
            padding-top: 10px;

            .item1 {
              height: 20px;
              line-height: 20px;
              font-size: 14px;
              font-weight: 600;
              text-align: left;
              color: #171721;

              .itemSon1 {
                font-size: 12px;
                font-weight: 400;
                text-align: left;
                color: #8083a3;
                margin-left: 15px;
              }
            }

            .starListS {
              margin: 10px 0;
              box-sizing: border-box;
              padding: 0 10%;

              img {
                display: inline;
                margin-left: 2%;
              }
            }

            .fileAll {
              display: flex;
              height: 25px;
              line-height: 25px;
              box-sizing: border-box;
              padding: 0 10% 0 4%;
              margin: 10px 0 15px 0;

              .fileAll_left {
                width: 30px;

                img {
                  width: 20px;
                  height: 25px;
                }
              }

              .fileAll_middle {
                flex: 1;
                font-size: 14px;
                font-weight: 400;
                text-align: left;
                color: #171721;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }

              .fileAll_right {
                width: 58px;
                height: 25px;
                border: 1px solid #00a3ff;
                border-radius: 12px;
                font-size: 12px;
                font-family: PingFangSC, PingFangSC-Regular;
                font-weight: 400;
                text-align: center;
                color: rgba(0, 131, 197, 0.8);
                cursor: pointer;
                margin-left: 10px;
              }
            }
          }
        }
      }
    }
  }
}

.activein {
  color: #222222 !important;

  span {
    position: absolute;
    left: 50%;
    top: 80%;
    transform: translate(-50%, -50%);
    z-index: 12;
    width: 50%;
    height: 6px;
    border-radius: 3px;
    background-color: #e2e0f6;
  }
}

.allCommonList::-webkit-scrollbar {
  width: 5px;
  // height: 10px; // 高度写不写，都不影响，因为会根据内容的长度自动计算
}

.allCommonList::-webkit-scrollbar-thumb {
  background: #ccc; // 滑块颜色
  border-radius: 3px; // 滑块圆角
}

.allCommonList::-webkit-scrollbar-thumb:hover {
  background: #019ff9; // 鼠标移入滑块变红
}

.dialogSTY {
  h4 {
    height: 28px;
    line-height: 28px;
    font-size: 20px;
    font-weight: 800;
    text-align: center;
    color: #00101a;
  }

  .singleOption {
    margin-top: 48px;
    position: relative;

    .titleShow {
      height: 18px;
      line-height: 18px;
      font-size: 14px;
      font-weight: 500;
      text-align: left;
      color: #00101a;
    }

    .answerOption {
      margin-top: 10px;
    }

    .chartsShow {
      position: absolute;
      right: 0;
      top: 0;
      z-index: 14;
      width: 190px;
      display: flex;

      .normalT {
        flex: 1;
        line-height: 73px;
      }

      .circleMap {
        width: 73px;
        height: 73px;
      }
    }
  }

  .singleOption:first-child {
    margin-top: 0 !important;
  }
}

.posiA {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translate(-50%, -50%);

  .nowrap {
    line-height: 72px;
  }
}

// 百分比样式
::v-deep .circleMap .el-progress__text {
  color: #a3ddc5;
  font-size: 16px;
}

::v-deep .circleMap .el-progress {
  margin-left: 0;
}

// 百进度条底色
::v-deep .circleMap .el-progress-bar__outer {
  background-color: rgba(0, 0, 0, 0.15);
}

// 百进度条颜色
::v-deep .circleMap .el-progress-bar__inner {
  background-color: #4bbc88;
}

::v-deep .circleMap .el-progress-circle__track {
  stroke: #a3ddc5;
}

::v-deep .el-dialog__footer {
  text-align: center;
}

.problemContent {
  .flex {
    display: flex;
    align-items: center;
    font-size: 14px;
  }

  .nowrap {
    white-space: nowrap;
  }

  .title {
    text-align: center;
  }

  .problemList {
    margin-top: 40px;

    .problem-list {
      padding: 0 20px;
      margin-bottom: 40px;
      display: flex;
      justify-content: space-between;

      .pro-title {
        font-size: 14px;
        color: #00101a;
      }

      ::v-deep .el-progress {
        .el-progress__text {
          color: #4bbc88;
          font-size: 16px !important;
          font-weight: 600;
        }
      }
    }
  }
}
.aliPlayerShow{
  width:100%;
  height: 100%!important;
}
</style>
