<template>
    <div class="resource_show_detail_pc_1">
        <!--简介-->
        <div class="container">
            <div class="row">
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                    <div class="resourece-detail-info">
                        <div class="row">
                            <div class="col-lg-7 col-md-6 col-sm-12 col-xs-12">
                                <div class="rdi-video">
                                    <div>
                                        <!--                                    <script type="text/javascript" :src="http://dsw.jsou.cn/assets/sdk/play-sdk/dist/e3c-play.js"></script>-->
                                    </div>
                                    <div id="my-video" class="video-js" style="height:362px"></div>
                                    <!--<video id=/"my-video" class="video-js" controls preload="auto" width="100%" height="100%" data-setup="{}">-->
                                    <!--<source src="mp4/video.mp4" type="video/mp4">-->
                                    <!-- <source src="http://vjs.zencdn.net/v/oceans.webm" type="video/webm">
                                    <source src="http://vjs.zencdn.net/v/oceans.ogv" type="video/ogg"> -->
                                    <!--</video>-->
                                </div>
                            </div>
                            <div class="col-lg-5 col-md-6 col-sm-12 col-xs-12">
                                <div class="rdi-info">
                                    <span class="sp1">{{resdetail.resName}}</span>
                                    <span class="sp2">
                          <a @click="delcill()" v-if="collId==1" class="share-icon"><img
                                  src="../../theme-chalk/src/images/class-detail-faving.png" alt=""></a>
                          <a @click="addcill()" v-else class="share-icon"><img
                                  src="../../theme-chalk/src/images/class-detail-fav.png" alt=""></a><i
                                            v-if="favNum==''">收藏(0)</i><i v-else>收藏({{favNum}})</i>丨
                                        <!--class 为 faving 为已收藏-->
                           <a href="" class="share">分享</a>
                        </span>
                                    <span class="sp3">
<!--                           <span class="spp1">资源积分：<i v-if="resdetail.resPoints==''">0</i><i v-else>{{resdetail.resPoints}}</i></span>-->
                           <span class="spp2">资源时长：<i>{{time}}</i></span>
                        </span>
                                    <ul class="ul1">
                                        <li>讲课老师：<span>{{resdetail.resAuthor}}</span></li>
                                        <li>资源类型：<span v-show="resdetail.fileType=='video'">视频</span></li>
                                        <li>资源分类：<span>{{resdetail.resCatnamestr}}</span></li>
                                        <li>资源格式：<span>{{resdetail.fileFormat}}</span></li>
                                        <li>资源标签： <span>{{resdetail.resLabel}}</span></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--tab页-->
        <div class="et4-class">
            <div class="container">
                <div class="row">
                    <div class="col-lg-9 col-md-8 col-sm-12 col-xs-12">
                        <div class="et4-class-body">
                            <div class="et4-class-body-hd">
                                <ul>
                                    <li class="active">资源介绍</li>
                                </ul>
                            </div>
                            <div class="et4-class-body-bd">
                                <div class="et4-class-cont">
                                    <p>{{resdetail.resInfo}}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-4 col-sm-12 col-xs-12 et4-class-right-body">
                        <div class="et4-class-right">
                            <div class="et4-class-right-title">推荐资源</div>
                            <div class="et4-course-part" v-for="item in resourceList" :key="item.resId">
                                <a :href="'/resourcedetail?id='+item.resId"><img :src="item.resPhoto" alt="">
                                    <span>{{item.resName}}</span></a>
                            </div>

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

    </div>
    <!--    </div>-->
</template>

<script type="module">
    import {httpPost} from '../../../src/utils/utils';
    import formMixin from '../../../src/mixins/formMixin';
    import lenye_base from 'lenye_base';
    import * as $ from 'fy-kit';
    // import HlsJsPlayer from 'xgplayer-hls.js';
    import Player from 'xgplayer';
    import msg from "../../message";
    import de from "../../../src/locale/lang/de";

    export default {
        name: 'ElResourceShowDetailPc1',
        mixins: [formMixin],
        model: {},
        data() {
            return {

                resId: 'fffe3f954f6f463c8b736d09e3b83198',//a23e12c7a76b4b278e0208c2eb216188
                resdetail: {},
                resourceList: {},
                newPlay: '',
                playVideoList: '',
                userdata: '',
                isplay: true,
                learClockTime: 0,
                islearsave: true,
                studyBreakpoint: '',
                time: '',
                collId: '',
                favNum: ''

            };
        },
        created() {
        },
        mounted() {
            this.resId = $.util.urlParams('id');
            this.userdata = lenye_base.user_data.getuserData();
            this.getdetail();
            this.resourcedetail();
            this.islogin();
            this.statList();
            if (lenye_base.user_data.getuserData() && lenye_base.user_data.getuserData() != 'undefined') {
                this.cillent();
            } else {
                return;
            }
        },

        methods: {
            //请求列表
            getdetail() {
                const that = this;
                httpPost(
                    lenye_base.base_data.getapiUrl() +
                    '/resource-service/common/resResource/queryById.do',
                    lenye_base.base_data.getformatting({
                        resId: that.resId
                    }),
                    function (data) {
                        that.resdetail = data.data;
                        // console.log(data.data);
                        var secondTime = parseInt(data.data.fileTimeLen);// 秒
                        var minuteTime = 0;// 分
                        var hourTime = 0;// 小时
                        if (secondTime > 60) {//如果秒数大于60，将秒数转换成整数
                            //获取分钟，除以60取整数，得到整数分钟
                            minuteTime = parseInt(secondTime / 60);
                            //获取秒数，秒数取佘，得到整数秒数
                            secondTime = parseInt(secondTime % 60);
                            //如果分钟大于60，将分钟转换成小时
                            if (minuteTime > 60) {
                                //获取小时，获取分钟除以60，得到整数小时
                                hourTime = parseInt(minuteTime / 60);
                                //获取小时后取佘的分，获取分钟除以60取佘的分
                                minuteTime = parseInt(minuteTime % 60);
                            }
                        }
                        var result = "" + parseInt(secondTime) + "秒";

                        if (minuteTime > 0) {
                            result = "" + parseInt(minuteTime) + "分" + result;
                        }
                        if (hourTime > 0) {
                            result = "" + parseInt(hourTime) + "小时" + result;
                        }
                        that.time = result
                    }
                );
                httpPost(
                    lenye_base.base_data.getapiUrl() +
                    '/resource-service/common/resResource/queryShowPageModify.do',
                    lenye_base.base_data.getformatting({
                        sites: lenye_base.site_data.getsiteData().siteId,
                        resTjStatus: 1,
                        sorts: 'createDate=0',
                        rows: 2
                    }),
                    function (data) {
                        that.resourceList = data.data;
                        // console.log();


                    }
                );
            }, //取消收藏
            delcill() {
                const that = this;
                httpPost(
                    lenye_base.base_data.getapiUrl() +
                    "/interact-service/api2/itaCollection/delete.do",
                    lenye_base.base_data.getformatting({
                        objId: that.resId,
                        type: 'resource',
                    }),
                    function (data) {
                        if (data.success === '1') {
                            that.cillent();
                        }
                    }
                )
            },
            statList() {
                const that = this;
                httpPost(
                    lenye_base.base_data.getapiUrl() +
                    "/interact-service/common/itaInteractionTimes/queryPage.do",
                    lenye_base.base_data.getformatting({
                        list: [{
                            objId: that.resId,
                            type: 'resource',
                        }]
                    }),
                    function (data) {
                        that.statlist = data.data
                        that.favNum = data.data[0].favNum
                    }
                )
            },
            //添加收藏
            addcill() {
                if (lenye_base.user_data.getuserData() && lenye_base.user_data.getuserData() != 'undefined') {
                    const that = this;
                    httpPost(
                        lenye_base.base_data.getapiUrl() +
                        "/interact-service/api2/itaCollection/insert.do",
                        lenye_base.base_data.getformatting({
                            objId: that.resId,
                            type: 'resource',
                        }),
                        function (data) {
                            if (data.success === '1') {
                                that.cillent();
                            }
                        }
                    )
                } else {
                    msg.error("请先登录");
                }
            },
            //判断是否收藏
            cillent() {
                const that = this;
                httpPost(
                    lenye_base.base_data.getapiUrl() +
                    "/interact-service/api2/itaCollection/isCollect.do",
                    lenye_base.base_data.getformatting({
                        collects: [
                            {type: 'resource', objId: that.resId},
                        ]
                    }),
                    function (data) {
                        that.collId = data.data[0].status
                    }
                )
            },
            resourcedetail() {
                // httpPost(lenye_base.base_data.getapiUrl() + '/resource-service/common/resResource/gainPlayUrlFromDSW.do', lenye_base.base_data.getformatting({
                //         dswResId: '0912995c66024b0da955fed2cf657cff'
                //         // data.data[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: false, //true 默认优先H5，false 优先Flash方式
                //                     source: 'hls',
                //                     src: res.data.playUrl
                //                 };
                //
                //             let options = {
                //                 id: 'my-video',
                //                 type: res.data.type,
                //                 height:'400px',
                //                 playbackRates: playbackRates,
                //                 //playlist: $("#hls_playlist").val(),
                //                 //disableControlBar:flag,  // 此处禁用整个菜单栏
                //                 // disableProgressBar: flag,   // 此处是禁用进度条，防止第一次观看视频时用户进行拖拽快进
                //                 controlBar: {}
                //             }
                //             setTimeout(function () {
                //                 new E3CPlayer(options)
                //             },1000)
                //             // that.playVideoList = data.data;
                //             // if (data.data[0].thirdResource) {
                //             //
                //             // } else {
                //             //     that.playvideo(data.data[0]);
                //             //     console.log(data.data);
                //             // }
                //
                //         };
                //     }
                // );
                const that = this;
                httpPost(lenye_base.base_data.getapiUrl() + '/resource-service/common/resResource/queryById.do', lenye_base.base_data.getformatting({
                        resId: that.resId
                    }),
                    function (data) {
                        if (data.success === '1') {
                            that.playVideoList = data.data;
                            if (data.data.thirdResource=='1' && data.data.thirdSource=='jsxxzx') {
                                httpPost(lenye_base.base_data.getapiUrl() + '/resource-service/common/resResource/gainPlayUrlFromDSW.do', lenye_base.base_data.getformatting({
                                        dswResId: data.data.thirdResId
                                        // '0912995c66024b0da955fed2cf657cff'
                                    }),
                                    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: 'my-video',
                                                type: res.data.type,
                                                playbackRates: playbackRates,
                                                //playlist: $("#hls_playlist").val(),
                                                //disableControlBar:flag,  // 此处禁用整个菜单栏
                                                // disableProgressBar: flag,   // 此处是禁用进度条，防止第一次观看视频时用户进行拖拽快进
                                                controlBar: {}
                                            }
                                            setTimeout(function () {
                                                new E3CPlayer(options)
                                            },1000)
                                            // that.playVideoList = data.data;
                                            // if (data.data[0].thirdResource) {
                                            //
                                            // } else {
                                            //     that.playvideo(data.data[0]);
                                            //     console.log(data.data);
                                            // }

                                        };
                                    }
                                );

                            } else {
                                that.playvideo(data.data);
                                console.log(data.data);
                            }

                        }
                        ;
                    }
                );
            },
            playvideo(data) {
                console.log(data)
                const that = this;
                setInterval(() => {
                    that.learClockTime += 1;
                }, 1000);
                if (!that.newPlay) {
                    that.newPlay = new Player({
                        id: 'my-video',
                        autoplay: true,
                        url: data.resFiles[0].fileId,
                        height: '100%',
                        width: '100%',
                        lang: 'zh-cn',
                        videoInit: true,
                        playbackRate: [0.5, 0.75, 1, 1.5, 2],
                        defaultPlaybackRate: 1
                    });
                    that.newPlay.on('play', function () {
                        that.newPlay.currentTime = that.isplay ? that.studyBreakpoint : 0;
                        that.isplay = false;
                    }).on('pause', function () {
                        /*暂停*/
                        that.saveTime(data.resId, that.newPlay.currentTime, that.learClockTime);
                        that.learClockTime = 0;
                    }).on('ended', function () {
                        /*结束*/
                        that.saveTime(data.resId, that.newPlay.currentTime, that.learClockTime);
                        that.learClockTime = 0;
                        that.nextcourse();
                    }).on('timeupdate', function () {
                        // console.log('timeupdate', this.learClockTime, resId);
                        if (that.learClockTime > 30 && that.islearsave) {
                            that.islearsave = false;
                            that.saveTime(data.resId, that.newPlay.currentTime, that.learClockTime);
                            that.learClockTime = 0;
                        }
                    });
                } else {
                    that.newPlay.src = data.resFiles[0].fileId;
                }
            },
            /*资源学习提交计时*/
            saveTime(id, point, time) {
                const that = this;
                if (!that.userdata) {
                    return false;
                }
                if (that.userdata.custId) {
                    lenye_base.httpPost(lenye_base.base_data.getapiUrl() + lenye_base.api_url.resource.learnSave, lenye_base.base_data.getformatting({
                        'studyUserId': that.userdata.custId,
                        'resId': id,
                        'studyBreakpoint': parseInt(point) + '',
                        'studyTime': time + '',
                    }), function (e) {
                        if (e.success === '1') {
                            that.learClockTime = 0;
                            that.islearsave = true;
                        }
                        ;
                    });
                }
            },
            // tuijian(id){
            //  this.resId=id
            //   this.getdetail()
            // }
            islogin() {
                const that = this;
                /*是否登录*/
                if (that.userdata.custId) {
                    /*课程是否完成*/
                    lenye_base.httpPost(lenye_base.base_data.getapiUrl() + '/resource-service/api2/stdCustLearnResource/queryResources.do', lenye_base.base_data.getformatting({
                        resId: that.resId,
                        studyUserId: that.userdata.custId,
                        orderType: '0',
                    }), function (e) {
                        if (e.success === '1') {
                            if (e && e.data.length) {
                                that.studyBreakpoint = e.data[0].studyBreakpoint
                            } else {
                                lenye_base.httpPost(lenye_base.base_data.getapiUrl() + '/resource-service/api2/stdCustLearnResource/save.do', lenye_base.base_data.getformatting({
                                    studyUserId: that.userData.custId,
                                    resId: that.resId,
                                    source: 0
                                }), function (res) {
                                    if (res.success === '1') {
                                        that.$message({
                                            showClose: true,
                                            message: '成功加入资源！',
                                            type: 'success'
                                        });
                                    }
                                });
                                that.studyBreakpoint = 0;
                            }
                        }
                    });
                }
            },
        }
    };

</script>
