<template>
    <div class="mta-Aliplay">
        <!-- 上部video播放内容 -->
        <AliPlay @ready="videoReady"
                 :autoplay="true"
                 :source="myArr[tabIndex].videoUrl"
                 v-if="myArr[tabIndex].mode === 'video' && !!myArr[tabIndex].videoUrl"
                 height="400px"
                 @ended="videoEnd"
                 ref="player"
        ></AliPlay>
        <el-button @click="handleClick" v-if="myArr[tabIndex].mode === 'video' && !!myArr[tabIndex].videoUrl" size="small" style="position: absolute;top: 5px; right: 5px;border:none; background-color: rgba(255,255,255,0.8)">跳过</el-button>
        <img class="mta-img" height="397px" :src="myArr[tabIndex].imageUrl" alt="" v-if="myArr[tabIndex].mode === 'image' && !!myArr[tabIndex].imageUrl">

        <!--    下部切换内容    -->
        <el-carousel height="150px"
                     :initial-index="tabIndex"
                     trigger="click"
                     :autoplay="false"
                     :interval="0"
                     v-if="myArr.length"
                     :loop="false"
                     @change="changeVideo"
                     ref="carousel"
                     @ready="videoReady">
            <el-carousel-item v-for="item in myArr.length" :key="item">
                <div class="mta-carousel-body">
                    <h2>{{myArr[tabIndex].title}}</h2>
                    <p>{{myArr[tabIndex].content}}</p>
                </div>

            </el-carousel-item>
        </el-carousel>
    </div>
</template>

<script>
    import AliPlay      from '@/components/management/Layout/AliPlay/AliPlay.vue';
    import { getuserGuide } from '@/utils/common.js';

    export default {
        name:       'videoBanner',
        props:      {
            height:  {
                type:    String,
                default: '0px',
            },
            /**
             * 识别标识
             * 1. welcome 欢迎页引导
             */
            code:    {
                type:    String,
                // require: true,
                default: 'welcome'
            },
            /**
             *    指示器的触发方式
             */
            trigger: {
                type:    String,
                default: 'click',
            },
            /**
             * 序号默认起始点
             */
            index:   {
                type:    Number,
                default: 0,
            },
        },
        data() {
            return {
                myArr:    getuserGuide(this.code),
                tabIndex: this.index,
                status:   false, // 首次进入页面
            };
        },
        components: {
            AliPlay,
        },
        watch: {
            index(newVal, oldVal) {
                this.tabIndex = newVal;
            }
        },
        methods:    {
            handleClick() {
                this.$emit('skip');
            },
            changeVideo(data) {
                this.tabIndex = data;
                if (this.tabIndex === 0) {
                    this.$emit('status', `start`)
                } else if (this.tabIndex === this.myArr.length-1){
                    this.$emit('status', `end`)
                } else {
                    this.$emit('status', `continue`)
                }

                // 播放器播放
                if (this.status && this.myArr[this.tabIndex].mode === 'video') {
                    this.handleEnd();
                }
            },
            /*playVideo() {
                if (this.$refs.player && this.mode === 'video') {

                    this.$refs.player.play();
                }
            },*/
            videoReady() {
                this.status = true;
                /**
                 * @author Wxy
                 * @description 视频播放
                 * FIXME 我无法初始化视频时暂停播放
                 * 折中解决 视频就绪是无差别暂停视频
                 * 想连续播放就注释一下代码
                 *
                 * 【问题】： 一旦视频播放数据异常
                 * 会导致 下一个视频 在暂停中进行播放
                 *
                 */
                /*if (this.isVideoMode()) {
                    this.$refs.player.pause();
                }*/
            },
            videoEnd(data) {
                if (this.isVideoMode()) {

                }
            },
            handleEnd() {
                if (this.isVideoMode()) {
                    this.$refs.player.initAliplayer();
                }
            },
            isVideoMode() {
                return this.$refs.player && this.myArr[this.tabIndex].mode === 'video';
            },
            pause() {
                if (this.isVideoMode()) {
                    this.$refs.player.pause();
                }
            },
            prev() {
                this.$refs.carousel.prev();
            },
            next() {
                this.$refs.carousel.next();
            }
        },
    };
</script>

<style lang="scss">
    .mta-Aliplay {
        width: 100%;
        text-align: center;
        margin: 0 auto;

        .el-carousel {
            width: 100%;
        }

        .el-carousel__item h3 {
            color: #475669;
            font-size: 14px;
            opacity: 0.75;
            margin: 0;
        }

        .el-carousel__item:nth-child(2n) {
            /*background-color: #99A9BF;*/
        }

        .el-carousel__item:nth-child(2n+1) {
            /*background-color: #D3DCE6;*/
        }

        .mta-img {
            /*width: 100%;*/

        }

        .mta-carousel-body {
            text-align: center;

            h1 {
                margin: 30px 0 0 0
            }

            p {
                margin-top: 5px
            }
        }
    }

</style>
