<template>
    <div class="c-px-player-box">

        <div class="play-board">
            <perfect-scrollbar>
                <div>
                    <MtaBusVideoPlayer class="video-player" v-if="playBoardObj.type === 1 || playBoardObj.type === 7"
                                       :options="playBoardObj.videoOptions" ref="mbVideoPlayer"></MtaBusVideoPlayer>
                    <div class="div-mta-bus-audio-player" v-else-if="playBoardObj.type === 2">
                        <MtaBusAudioPlayer :options="playBoardObj.audioOptions"
                                           :checktimes="false"></MtaBusAudioPlayer>
                    </div>

                    <MtaBusPdfPlayer
                            v-else-if="playBoardObj.type === 3 || playBoardObj.type === 4 || playBoardObj.type === 5 || playBoardObj.type === 6"
                            :options="playBoardObj.pdfOptions" :loaded.sync="pdfloaded"></MtaBusPdfPlayer>

                    <iframe v-if="playBoardObj.type === 8 && playBoardObj.ibl !== null && playBoardObj.ibl === false"
                            :src="playBoardObj.iframeOptions.oldUrl"
                            allowfullscreen='true'></iframe>
                    <div v-if="playBoardObj.type === 8 && playBoardObj.ibl !== null && playBoardObj.ibl === true">
                        <!--<a :href="playBoardObj.iframeOptions.oldUrl" target="_blank">请点击打开</a>-->
                        <div style="margin-left: 300px;margin-top: 200px">三方视频未显示，请手动点击右侧菜单</div>

                    </div>
                </div>
            </perfect-scrollbar>
        </div>
        <div class="menu-list">
            <perfect-scrollbar class="perfect-box">
                <!--<ul class="menu-list-ul">
                    <li :class="{'active':item.active}" v-for="item in playList" :key="item.kjId"
                        @click="genPlayboard(item)">
                        <span class="courseware-title" :title="item.name"><i></i>{{ item.name }}</span>
                        <span class="courseware-data">{{ formatSecondsToCnhms(item.duration, true) }}</span>
                    </li>
                </ul>-->
                <div v-for="chapter in kecheng" :key="chapter.index">
                    <div class="menu-chapter">{{chapter.value}}</div>
                    <div v-for="section in chapter.children" :key="section.index">
                        <div class="menu-section">&nbsp;&nbsp;{{section.value}}</div>
                        <ul class="menu-list-ul">
                            <li :class="{'active':kejian.active}" v-for="kejian in section.kejianArr" :key="kejian.kjId"
                                @click="genPlayboard(kejian)">
                                <span class="courseware-title" :title="kejian.name"><i></i>{{ kejian.name }}</span>
                                <span class="courseware-data">{{ formatSecondsToCnhms(kejian.duration, true) }}</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </perfect-scrollbar>
        </div>
        <div class="menu-icon" @click="iconClivk">
            <i :class="{ 'el-icon-tickets': !menuFlag}"></i>
        </div>
    </div>
</template>

<script>
    import MtaBusVideoPlayer    from '@/components/custom/MtaBusVideoPlayer.vue';
    import MtaBusAudioPlayer    from '@/components/custom/MtaBusAudioPlayer.vue';
    import MtaBusPdfPlayer      from '@/components/custom/MtaBusPdfPlayer.vue';
    import { PerfectScrollbar } from 'vue2-perfect-scrollbar';
    import * as commonUtils     from '@/utils/common';
    import * as kechengApi      from '@/api/client/peixun/kecheng';

    export default {
        name:       'MtaBusSectionPlayer',
        props:      {
            kecheng: Array,
        },
        components: {
            MtaBusVideoPlayer,
            MtaBusAudioPlayer,
            MtaBusPdfPlayer,
            PerfectScrollbar,
        },
        data() {
            return {
                playBoardObj: {
                    type:            null,
                    pdfOptions:      null,
                    tempKjId:        null,
                    tempKjtype:      null,
                    iframeBlackList: ['youku.com'],
                    ibl:             null,
                },
                menuFlag:     true,
                scrollCnt:    0,
                pdfloaded:    true,
            };
        },
        methods:    {
            formatSecondsToCnhms: commonUtils.formatSecondsToCnhms,
            genPlayboard(item) {
                if (this.tempKjId === item.kjId) {
                    return;
                }
                if (this.pdfloaded !== true) {
                    this.$message.warning('pdf 加载中');
                    return;
                }

                // set active & scrollCnt
                let scrollCnt = 0;
                let iscnt = true;
                for (const chapter of this.kecheng) {
                    iscnt ? scrollCnt++ : scrollCnt;
                    for (const section of chapter.children) {
                        iscnt ? scrollCnt++ : scrollCnt;
                        for (const kejian of section.kejianArr) {
                            if (kejian.kjId === item.kjId) {
                                kejian.active = true;
                                iscnt = false;
                            } else {
                                kejian.active = false;
                            }
                            iscnt ? scrollCnt++ : scrollCnt;
                        }
                    }
                }
                this.scrollCnt = scrollCnt;

                let sectionPage = commonUtils.getCache('CourseInfo', 'sectionPage');
                if (sectionPage) {
                    sectionPage.kjId = item.kjId;
                } else {
                    sectionPage = {
                        kjId: item.kjId,
                    };
                }
                commonUtils.saveCache('CourseInfo', 'sectionPage', sectionPage);

                // 上一个是视频
                if (this.tempKjtype === 1 || this.tempKjtype === 7) {
                    // hide dialog
                    this.$refs.mbVideoPlayer.hidDialog();
                }

                this.playBoardObj.type = item.type;
                // console.log(item);

                this.$set(this.playBoardObj, 'videoOptions', {
                    type:             2,
                    progressFlag:     item.progressFlag,
                    kjId:             item.kjId,
                    questionDoneShow: true,
                });
                this.$set(this.playBoardObj, 'audioOptions', {
                    kjId: item.kjId,
                });
                this.$set(this.playBoardObj, 'pdfOptions', {
                    kjId: item.kjId,
                });
                this.$set(this.playBoardObj, 'iframeOptions', {
                    kjId:   item.kjId,
                    oldUrl: item.oldUrl,
                });
                this.playBoardObj.ibl = this.inIframeBackList(item.oldUrl);

                if (this.playBoardObj.ibl) {
                    window.open(item.oldUrl, '_blank', 'width=950,height=550,left=300,top=250px');
                }


                this.tempKjId = item.kjId;
                this.tempKjtype = item.type;

                this.$nextTick(() => {
                    // 不完美逻辑：当点击视频 音频以外的资源列表时 算100%完成
                    if (item.type === 3
                        || item.type === 4
                        || item.type === 5
                        || item.type === 6
                        || item.type === 8
                    ) {
                        commonUtils.saveCourseProgress(100, 100);
                        commonUtils.updateSectionProgress();
                    }

                    /*if (item.type === 7) {
                        window.open(this.playBoardObj.iframeOptions.oldUrl);
                    }*/

                    // 计算流量
                    kechengApi.kcCRecord({
                                             kcId: sectionPage.kcId,
                                             kjId: item.kjId,
                                         }).then(res => {
                        if (res.code === 0) {
                            // console.log('流量已被记录:kcId|' + sectionPage.kcId + ' ==== kjId|' + item.kjId);
                        }
                    });
                });

            },
            iconClivk() {
                const menuList = document.querySelector('.menu-list');
                const menuListUl = document.querySelector('.menu-list-ul');
                const menuIcon = document.querySelector('.menu-icon');
                const playBoard = document.querySelector('.play-board');

                if (this.menuFlag) {
                    menuList.style.width = '0';
                    menuListUl.style.display = 'none';
                    menuIcon.style.right = '1px';
                    menuIcon.style.borderRadius = '20px 0 0 20px';
                    playBoard.style.borderRadius = '8px';
                    this.menuFlag = false;
                } else {
                    menuList.style.width = '340px';
                    menuListUl.style.display = 'block';
                    menuIcon.style.borderRadius = '0 20px 20px 0';
                    menuIcon.style.right = '320px';
                    playBoard.style.borderRadius = '8px 0 0 8px';
                    this.menuFlag = true;
                }

            },
            inIframeBackList(url) {
                for (const iframeBlack of this.playBoardObj.iframeBlackList) {
                    if (url.indexOf(iframeBlack) > -1) {
                        return true;
                    }
                }
                return false;
            },
        },
        created() {
            console.log(this.kecheng);
        },
        mounted() {
            function getItemByKecheng(kecheng, sectionPage) {
                let kejianArr = kecheng[sectionPage.iChapter].children[sectionPage.iSection].kejianArr;
                for (const kejian of kejianArr) {
                    if (kejian.kjId === sectionPage['kjId']) {
                        return kejian;
                    }
                }
                return null;
            }

            // no cache, default play first
            let sectionPage = commonUtils.getCache('CourseInfo', 'sectionPage');
            if (!sectionPage || !sectionPage['kjId']) {
                let kejian = this.kecheng[0].children[0].kejianArr[0];
                this.genPlayboard(kejian);
            } else {
                let kejian = getItemByKecheng(this.kecheng, sectionPage);
                if (kejian) {
                    this.genPlayboard(kejian);
                }

            }
        },
    };
</script>
<style lang="scss" scoped>
    .div-mta-bus-audio-player {
        margin-top: 295px;
    }
</style>
