<template>
  <div class="el-resource_show_detail_mobile_1">
    <div class="resource_show_detail_mobile_1">
   <!--以下视频部分-->
   <div class="liveshow-video" v-if="types=='1'">
     <!-- <div class="appbar appbar-transparency liveshow-appicon">
         <span class="goback"><a href="">返回</a></span>
         <span class="appbar-moreicon">
            <a href=""><img src="../../theme-chalk/src/images/details_icon01.png" alt=""></a>
            <a href=""><img src="../../theme-chalk/src/images/details_icon02.png" alt=""></a>
            <a href=""><img src="../../theme-chalk/src/images/details_icon03.png" alt=""></a>
            <a href=""><img src="../../theme-chalk/src/images/details_icon04.png" alt=""></a>
         </span>
      </div>-->
      <!--直播源-->
      <!--<video id="my-player" poster="../../theme-chalk/src/images/pic04.png" class="video-js vjs-big-play-centered video-diystyle" style="object-fit: fill;"  x5-playsinline="" playsinline="" webkit-playsinline="" controls>
         <source src="http://cloud-play.hhalloy.com/live/cf4d66edc142b2f0cc8c71bca56b2268.m3u8" type="application/x-mpegURL">
         <p class="vjs-no-js">
             not support
         </p>
     </video>-->
     <div id="player_video" style="height: 100%;width: 100%"></div>
   </div>
   <div class="liveshow-video" v-if="types=='2'">
      <a v-if="details.resPhoto" :href="details.resPhoto">
        <img style="width:100%;height:100%;" :src="details.resPhoto">

      </a>
       <a  v-else href="../../theme-chalk/src/images/active-pic.jpgo">
       <img style="width:100%;height:100%;" src="../../theme-chalk/src/images/active-pic.jpg">
       </a>
    </div>
   <!--tab页-->
   <div class="grade-list">
      <div class="grade-list-tab2">
         <ul>
            <li :class="{active:active===1}"><a @click="tabs(1)" href="javascript:void(0)">简介</a></li>
            <li :class="{active:active===2}"><a @click="tabs(2)" href="javascript:void(0)">评价</a></li>
         </ul>
      </div>
      <div v-show="active===1" class="course-intro" ><!--简介-->

          <div v-if="details.resInfo" v-html="details.resInfo" ></div>
          <div v-else style="text-align:center;color:#999;margin-top:20px;">暂无简介</div>

      </div>
      <div v-show="active===2" class="course-comment"><!--评价-->
         <span class="cc-title">所有评价<i>({{totalCount}}条)</i></span>


         <fyer-load-more
         ref="pulldown"
        :pageIndex="page"
        :page-size="rows"
        :totalCount="totalCount"
        :openRefresh="false"
        @loadmore="loadmore"
        style="margin-bottom:100px;"
        >
         <div class="course-comment-list" v-for="(list,i) in audioList" :key="i"><!--评价循环-->
            <div class="ccl-part1">
               <span class="sp1 clearfix">
                  <img v-if="list.photo" class="img1"  :src="list.photo" alt="">
                  <img v-else class="img1"  src="../../theme-chalk/src/images/header.png" alt="">
                  <span class="spp1">
                     <span class="sppp1">{{list.cmtUserName}}
                       <!--<img src="../../theme-chalk/src/images/mine_top_vipicon.png" alt="">-->
                     </span>
                  </span>
               </span>
               <span class="sp2">
                  <span>{{list.cmtDate}}</span>
               </span>
            </div>
            <span class="ccl-part2" v-html="list.content">

            </span>
         </div>
         </fyer-load-more>
         <div class="loadings" style="display:none;height:40px;line-height:40px;font-size:12px;background:#f5f5f5;text-align:center;color:#aaa;">没有更多数据了</div>




         <div class="details-comment" ><!--发表评论div-->
            <span class="details-comment-inp">
               <textarea name="" id="textpanel1" v-model="contents" style="resize: none;" ></textarea>
              <!-- <a href="javascript:void(0)" class="messface" @click="showEmojiPanel"><img  src="../../theme-chalk/src/images/mess-face.png" alt=""></a> -->

               <input type="button" @click="saveComment"  value="发表">
            </span>
         </div>
      </div>
   </div>
</div>

  </div>
</template>

<script>
    import {httpPost} from '../../../src/utils/utils';
import formMixin from "../../../src/mixins/formMixin";
import lenye_base from "lenye_base";
    // require('../../../src/utils/e3c-play');
import fyerLoadMore from "fyer-load-more";
import $ from "fy-kit";
import { Toast } from "vant";
 import Player from 'xgplayer';

export default {
  name: 'ElResourceShowDetailMobile1',
  mixins: [formMixin],
  model: {},
  data(){
    return {
      active:1,
      contents: "",
      flag: false,
      isShowEmojiPanel: false,
      comments: [],
      audioList:[],
      resId:"00138dd3bf6149c899945f561dc1f57e",
      details:{},
      totalCount:0,
      page:1,
      rows:6,
      userdata:'',
      studyBreakpoint: '',
      newPlay:"",
      learClockTime: 0,
      islearsave: true,
      isplay:true,
      types:'1'
    }
   },
   mounted() {

      if(this.types=='1'){
        this.videoPlay();
        this.getLastBreakPosition();
          let script = document.createElement('script');
          script.type = 'text/javascript';
          script.src = '//' + lenye_base.base_data.getDomain() + '/dist/e3c-play.js';
          document.getElementsByTagName('head')[0].appendChild(script);
      }
      this.getList();
   },
   components: {
    [Toast.name]: Toast,
    fyerLoadMore
  },
  created() {

    if(!$.util.getCookie('userData')){
      Toast.fail("请登录！");
      setTimeout(()=>{
        location.href = "/reglogin?type=sy"
      },2000)
      return false;
    }

    if($.util.urlParams('types')){
       this.types = $.util.urlParams('types');
    }


    var resId = $.util.urlParams('resId');
    if(!resId){
      resId = $.util.urlParams('id');
    }

    // var resId = $.util.urlParams('resId');
    // if(!resId){
    //   resId = $.util.urlParams('id');
    // }
    //
    //   this.resId = resId;
    this.userdata = lenye_base.user_data.getuserData();



    /*
    2851f2a9fa514a598951474780e426a4
    63f4352a8d834ccc8e26e43e1ec39307
    10772c9b91b3432e831a3915ffdaea62
    c95988bbe04046b7aaca4d72d5bbe487
    8465db08f3da4903b4e5541f6d9d25f1

    */





  },
   filters: {
    $toYMD(val) {
      if (val) {
        return $.date.moment(val).format("YYYY/MM/DD");
      }
    }
  },
   computed: {},
   methods: {
     async getUrl(){
       let {data} =  await $.util.ajax(
          lenye_base.base_data.getapiUrl() +
           '/resource-service/common/resResource/detail.do',
          lenye_base.base_data.getformatting({
            resId:this.resId

          })
        )
         this.details = data[0]
        return data;
     },
      /*资源学习提交计时*/
            saveTime(id, point, time) {
                const that = this;
                lenye_base.httpPost(lenye_base.base_data.getapiUrl() + '/resource-service/api2/stdCustLearnRecord/learnSave.do', lenye_base.base_data.getformatting({
                    'studyUserId': this.userdata.custId,
                    'resId': id,
                    'studyBreakpoint': parseInt(point) + '',
                    'studyTime': time + '',
                }), function (e) {
                    if (e.success === '1') {
                        that.learClockTime = 0;
                        that.islearsave = true;
                    };
                });
            },

     async videoPlay(){

         let dArr =  await this.getUrl();
         console.log(1212)
         console.log(dArr[0].thirdResource,dArr[0].thirdSource)

                if(dArr[0].thirdResource=='1' && dArr[0].thirdSource=='jsxxzx'){
                    httpPost(lenye_base.base_data.getapiUrl() + '/resource-service/common/resResource/gainPlayUrlFromDSW.do', lenye_base.base_data.getformatting({
                            dswResId: dArr[0].thirdResId
                        }),
                        function (res) {
                            if (res.success === '1') {
                                let loadJS = function (url) {
                                    let script = document.createElement('script');
                                    script.type = 'text/javascript';
                                    script.src = url;
                                    document.getElementsByTagName('head')[0].appendChild(script);
                                };
                                loadJS("http://dsw.jsou.cn/assets/sdk/play-sdk/dist/e3c-play.js");
                                let playbackRates =
                                    {
                                        enable: true, //true 默认优先H5，false 优先Flash方式
                                        source: 'hls',
                                        src: res.data.playUrl
                                    };

                                let options = {
                                    id: 'player_video',
                                    type: res.data.type,
                                    playbackRates: playbackRates,
                                    //playlist: $("#hls_playlist").val(),
                                    //disableControlBar:flag,  // 此处禁用整个菜单栏
                                    // disableProgressBar: flag,   // 此处是禁用进度条，防止第一次观看视频时用户进行拖拽快进
                                    controlBar: {}
                                }
                                setTimeout(function () {
                                    new E3CPlayer(options)
                                },2000)
                                // that.playVideoList = data.data;
                                // if (data.data[0].thirdResource) {
                                //
                                // } else {
                                //     that.playvideo(data.data[0]);
                                //     console.log(data.data);
                                // }

                            };
                        }
                    );

                }else {
       var that = this;

       var url = ""
       if(dArr.length && dArr[0].resFiles[0].fileId){
           url = dArr[0].resFiles[0].fileId;
       }else{
         Toast.fail("暂无资源播放");
         return  false;
       }

      if(url){
         setInterval(() => {
              that.learClockTime++
          }, 1000);
        that.newPlay = new Player({
          id: 'player_video',
          autoplay: true,
          url: url,
          height: '100%',
          width: '100%',
          lang: 'zh-cn',
          videoInit: true,
          playbackRate: [0.5, 0.75, 1, 1.5, 2],
          defaultPlaybackRate: 1,
        })
        that.newPlay.on('play',  ()=> {
                      that.newPlay.currentTime = that.isplay ? that.studyBreakpoint : 0;
                        that.isplay = false;
                    }).on('pause',  ()=> {
                        that.isplay = true;
                        that.studyBreakpoint = that.newPlay.currentTime;
                        that.saveTime(this.resId, that.newPlay.currentTime, that.learClockTime);
                        that.learClockTime = 0;
                    }).on('ended',  ()=> {
                        that.saveTime(this.resId, that.newPlay.currentTime, that.learClockTime);
                        that.learClockTime = 0;
                        that.studyBreakpoint = 0;
                    }).on('timeupdate',  ()=> {
                      // console.log("timeupdate")
                        if (that.learClockTime > 30 && that.islearsave) {
                            that.islearsave = false;
                            that.saveTime(this.resId, that.newPlay.currentTime, that.learClockTime);
                            that.learClockTime = 0;
                        }
                    });
      }
                }

     },
      /*上次资源播放进度*/
            getLastBreakPosition() {
                const that = this;
                lenye_base.httpPost(lenye_base.base_data.getapiUrl() + '/resource-service/api/stdCustLearnResource/queryResources.do', lenye_base.base_data.getformatting({
                    resId: that.resId,
                    studyUserId: this.userdata.custId,
                    resinfo: '0',
                }), function (e) {
                    if (e.success === '1') {
                       if(e.data.length){
                         that.studyBreakpoint = e.data[0].studyBreakpoint ? e.data[0].studyBreakpoint : 0;
                       }
                    }
                    ;
                });
            },

      saveComment() {
        this.page = 1;
      $.util.ajax(
          lenye_base.base_data.getapiUrl() +
            "/interact-service/api2/itaComment/insert.do",
          lenye_base.base_data.getformatting({
            content: this.contents,
            objId: this.resId,
            type: "resource",
            userAuth: 1,
          })
        ).then(res=>{
          if(res.success=='1'){
            this.contents = ""
            this.getList('fp');
          }else{
            Toast.fail(res.message);
          }
        })

    },
    loadmore(page) {
      this.page = page;
      this.getList();
    },
    noMore(){
      if (this.audioList.length < 6) {
            $._.default(".loadings").show().html("没有更多数据了");
          }else{
            $._.default(".loadings").hide()
          }
    },
    getList(str){
       $.util.ajax(
          lenye_base.base_data.getapiUrl() +
            "/interact-service/common/itaComment/queryPage.do",
          lenye_base.base_data.getformatting({
            objId: this.resId,
            type: "resource",
            siteIds: lenye_base.site_data.getsiteData().siteId,
            userAuth: 1,
            page:this.page,
            rows:this.rows,
            sorts: 'cmtDate=0',
          })
        ).then(res=>{
          if(res.success=='1'){
             if(str){
               this.audioList = []
             }

            this.audioList = this.audioList.concat(res.data);
            this.totalCount = res.totalCount;
            this.noMore();


          }else{
            Toast.fail(res.message);
          }
        })
    },
     tabs(active){
       this.active = active;
     }
   },
};
</script>

