{extend name="public/container"}
{block name="title"}课程详情{/block}
{block name="style"}
<style>
    .try-btn {
        margin-top: 20px;
        text-align: center;
    }

    .try-btn a {
        display: inline-block;
        width: 150px;
        height: 42px;
        border-radius: 21px;
        background-color: #2C8EFF;
        font-size: 16px;
        line-height: 42px;
        text-align: center;
        color: #FFFFFF;
    }
</style>
{/block}
{block name="app"}
<div v-cloak id="app">
    <base-header :public-data="publicData" :user-info="userInfo"></base-header>
    <div class="layout">
        <div class="container">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item><a :href="$router.home">首页</a></el-breadcrumb-item>
                <el-breadcrumb-item><a :href="$router.special_cate">精品课程</a></el-breadcrumb-item>
                <el-breadcrumb-item>课程详情</el-breadcrumb-item>
            </el-breadcrumb>
            <div class="container_content">
                <div class="container_content_title">
                    <span>{{ taskInfo.title }}</span>
                </div>
                <div class="container_content_message">
                    <div class="container_content_message_viAndAu">
                        <el-image v-if="taskInfo.type == 1 || taskInfo.light_type == 1" :src="taskInfo.image" fit="cover"></el-image>
                        <div v-else class="container_content_message_viAndAu_viAndAuBox">
                            <el-image v-if="taskInfo.type == 2 || taskInfo.light_type == 2" :src="taskInfo.image" fit="cover"></el-image>
                            <div class="prism-player" id="J_prismPlayer"></div>
                            <div v-if="taskInfo.singleProfile && taskInfo.singleProfile.is_try" v-show="tryShow" class="try">免费试看</div>
                        </div>
                    </div>
                    <div v-if="task_id != 0" class="container_content_message_list">
                        <div class="container_content_message_list_title">
                            <div class="container_content_message_list_title_item">
                                <span>课程目录</span>
                            </div>
                        </div>
                        <div class="container_content_message_list_content" v-infinite-scroll="get_course_list" infinite-scroll-disabled="finished">
                            <div v-for="(item, index) in courseList" :key="index" :class="{ active: task_id == item.id }" class="container_content_message_list_content_item"
                                 @click="selectCourse(item)">
                                <div class="container_content_message_list_content_item_label">
                                    <img v-if="taskInfo.type == 1 || taskInfo.light_type == 1" src="{__PUBLIC_WEB_PATH}pc/images/course1.png" alt="图文">
                                    <img v-else-if="taskInfo.type == 2 || taskInfo.light_type == 2" src="{__PUBLIC_WEB_PATH}pc/images/course2.png" alt="音频">
                                    <img v-else-if="taskInfo.type == 3 || taskInfo.light_type == 3" src="{__PUBLIC_WEB_PATH}pc/images/course3.png" alt="视频">
                                </div>
                                <div class="container_content_message_list_content_item_value">
                                    <span class="msaages">{{item.title}}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container">
        <div class="container_courseDetils">
            <div class="container_courseDetils_title">
                <div>课程内容</div>
                <div></div>
            </div>
            <template v-if="taskInfo.type == 1 || taskInfo.light_type == 1">
                <div v-if="taskInfo.type == 1" v-html="!isPay && taskInfo.is_try ? taskInfo.try_content : taskInfo.content"></div>
                <div v-else v-html="!isPay && taskInfo.singleProfile.is_try ? taskInfo.singleProfile.try_content : taskInfo.content"></div>
            </template>
            <div v-else-if="taskInfo.type == 2 || taskInfo.light_type == 2" class="container_courseDetils_content" v-html="taskInfo.detail || taskInfo.abstract"></div>
            <div v-else-if="taskInfo.type == 3 || taskInfo.light_type == 3" class="container_courseDetils_content" v-html="taskInfo.detail || taskInfo.abstract"></div>
        </div>
        <div v-if="taskInfo.type == 1 && taskInfo.is_try && !isPay" class="try-btn">
            <a :href="$router.payment + '?type=1&id=' + special_id">已试看，去购买</a>
        </div>
        <div v-if="taskInfo.light_type == 1 && taskInfo.singleProfile.is_try && !isPay" class="try-btn">
            <a :href="$router.payment + '?type=1&id=' + special_id">已试看，去购买</a>
        </div>
    </div>
    <base-footer :user-info="userInfo" :public-data="publicData"></base-footer>
    <base-login :public-data="publicData" :agree-content="agreeContent"></base-login>
    <base-agree :agree-content="agreeContent"></base-agree>
    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
        <span>购买后可看全部内容，是否购买？</span>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="handleBuy">购 买</el-button>
        </span>
    </el-dialog>
</div>
{/block}
{block name="vm"}
<script>
    require([
        'vue',
        'ELEMENT',
        'components/base-header/index',
        'components/base-footer/index',
        'components/base-login/index',
        'components/base-agree/index',
        'mixins/base',
        'api/special',
        'scripts/util',
        'hls',
        'router/index',
        'aliplayer',
        'css!styles/audioCourse.css'
    ], function (Vue, ELEMENT, BaseHeader, BaseFooter, BaseLogin, BaseAgree, baseMixin, specialApi, util, Hls, router) {
        this.Hls = Hls;
        Vue.use(ELEMENT);
        Vue.use(router);
        new Vue({
            el: '#app',
            components: {
                'base-header': BaseHeader,
                'base-footer': BaseFooter,
                'base-login': BaseLogin,
                'base-agree': BaseAgree
            },
            mixins: [baseMixin],
            data: {
                isPay: false,
                isSourcePay: false,
                specialInfo: {},
                taskInfo: {},
                task_id: '',
                courseList: [],
                page: 1,
                limit: 10,
                viewing_time: 0,
                currentTime: 0,
                player: null,
                seeked: false,
                tryShow: true,
                special_id: 0,
                dialogVisible: false
            },
            created: function () {
                this.task_id = util.getParmas('task_id');
                this.special_id = util.getParmas('specialId');
                this.viewing_time = util.getParmas('viewing_time') / 1e3;
                this.currentTime = Math.floor(this.viewing_time);
                document.title = util.getParmas('special_title');
                this.getTaskInfo();
                // task_id === '0' 轻专题
                if (this.task_id != '0') {
                    this.get_course_list();
                }
            },
            methods: {
                handleBuy: function () {
                    window.location.assign(this.$router.payment + '?type=1&id=' + this.special_id);
                },
                // 素材详情
                getTaskInfo: function () {
                    var vm = this;
                    specialApi.getTaskInfo({
                        special_id: vm.special_id,
                        task_id: vm.task_id
                    }).then(function (res) {
                        var data = res.data;
                        vm.isPay = data.isPay;
                        vm.isSourcePay = data.isSourcePay;
                        vm.specialInfo = data.specialInfo;
                        vm.taskInfo = data.taskInfo;
                        if (vm.taskInfo.type == 1 || vm.taskInfo.light_type == 1) {
                            vm.duration = 100;
                            vm.viewing(100);
                            return;
                        }
                        if (vm.taskInfo.singleProfile && vm.taskInfo.singleProfile.videoId || vm.taskInfo.videoId) {
                            vm.get_video_playback_credentials(vm.taskInfo.singleProfile && vm.taskInfo.singleProfile.videoId || vm.taskInfo.videoId);
                            return;
                        }
                        vm.createPlayer();
                    }).catch(function (err) {
                        vm.$message.error(err.msg);
                    });
                },
                // 播放列表
                get_course_list: function () {
                    var vm = this;
                    specialApi.get_course_list({
                        page: vm.page++,
                        limit: vm.limit,
                        special_id: vm.special_id
                    }).then(function (res) {
                        if (Array.isArray(res.data)) {
                            return;
                        }
                        var list = res.data.list;
                        vm.courseList = vm.courseList.concat(list);
                        vm.finished = vm.limit > list.length;
                    }).catch(function (err) {
                        vm.$message.error(err.msg);
                    });
                },
                // 获取playauth
                get_video_playback_credentials: function (videoId) {
                    var vm = this;
                    specialApi.get_video_playback_credentials({
                        videoId: videoId,
                        type: 2
                    }).then(function (res) {
                        var request = new XMLHttpRequest();
                        request.onreadystatechange = function () {
                            if (request.readyState == 4 && request.status == 200) {
                                try {
                                    var data = JSON.parse(request.responseText);
                                    vm.duration = data.VideoMeta.Duration;
                                    vm.createPlayer(data.PlayAuth);
                                } catch (error) {
                                    vm.$message.error(error);
                                }
                            }
                        };
                        request.open('GET', res.msg, true);
                        request.send();
                    }).catch(function (err) {
                        vm.$message.error(err.msg);
                    });
                },
                // 创建播放器
                createPlayer: function (playauth) {
                    var vm = this;
                    var options = {
                        id: 'J_prismPlayer',
                        source: vm.taskInfo.link,
                        vid: vm.taskInfo.videoId,
                        playauth: playauth || '',
                        height: '100%',
                        cover: vm.taskInfo.image,
                        controlBarVisibility: vm.taskInfo.type == 2 ? 'always' : 'hover',
                        format: vm.taskInfo.type == 2 ? 'mp3' : ''
                    };
                    if (vm.taskInfo.is_light) {
                        options.source = vm.taskInfo.singleProfile.link;
                        options.vid = vm.taskInfo.singleProfile.videoId;
                        options.controlBarVisibility = vm.taskInfo.light_type == 2 ? 'always' : 'hover';
                        options.format = vm.taskInfo.light_type == 2 ? 'mp3' : '';
                    }
                    if (vm.player) {
                        vm.player.dispose();
                        vm.player = null;
                    }
                    vm.player = new Aliplayer(options);
                    vm.player.on('ready', vm.onPlayerReady);
                    vm.player.on('canplay', vm.onPlayerCanplay);
                    vm.player.on('ended', vm.onPlayerEnded);
                    vm.player.on('timeupdate', vm.onPlayerTimeupdate);
                    vm.player.on('hideBar', vm.onPlayerHideBar);
                    vm.player.on('showBar', vm.onPlayerShowBar);
                },
                onPlayerHideBar: function () {
                    this.tryShow = true;
                },
                onPlayerShowBar: function () {
                    this.tryShow = false;
                },
                onPlayerReady: function () {
                    this.duration = this.player.getDuration();
                    if (this.isPay || this.isSourcePay) {
                        return;
                    }
                    if (this.taskInfo.is_light) {
                        this.player.setPreviewTime(this.taskInfo.singleProfile.try_time * 60);
                    } else {
                        this.player.setPreviewTime(this.taskInfo.try_time * 60);
                    }
                },
                onPlayerCanplay: function () {
                    if (this.isPay || this.isSourcePay) {
                        if (!this.seeked) {
                            this.seeked = true;
                            this.player.seek(this.viewing_time);
                        }
                    }
                },
                onPlayerEnded: function () {
                    var vm = this;
                    if (this.isPay || this.isSourcePay) {
                        this.viewing(this.duration);
                    } else {
                        this.dialogVisible = true;
                    }
                },
                onPlayerTimeupdate: function () {
                    var vm = this;
                    var currentTime = vm.player.getCurrentTime();
                    var currentTimeInt = Math.floor(currentTime);
                    if (currentTimeInt == vm.currentTime || currentTimeInt % 10) {
                        return;
                    }
                    vm.currentTime = currentTimeInt;
                    vm.viewing(currentTime);
                },
                // 点击播放列表
                selectCourse: function (task) {
                    var vm = this;
                    if (vm.task_id == task.id) {
                        return;
                    }
                    if (!this.isPay && task.pay_status && !task.is_try) {
                        this.dialogVisible = true;
                        return;
                    }
                    vm.task_id = task.id;
                    vm.viewing_time = task.watch && task.watch.viewing_time / 1e3 || 0;
                    vm.currentTime = Math.floor(vm.viewing_time);
                    vm.seeked = false;
                    vm.getTaskInfo();
                },
                // 更新播放进度
                viewing: function (currentTime) {
                    var vm = this;
                    specialApi.viewing({
                        special_id: vm.special_id,
                        task_id: vm.task_id,
                        total: vm.duration * 1e3,
                        viewing_time: currentTime * 1e3,
                        percentage: Math.floor(currentTime / vm.duration * 100)
                    });
                },
            }
        });
    });
</script>
{/block}