<template>
    <el-dialog
            :title="title"
            :visible.sync="dialogVisible"
            width="50%"
            @close="handleClose"
            custom-class="dialogGuideContent"
            :close-on-click-modal="false"
            center
    >
        <video-banner
                ref="video"
                :code="code"
                @skip="handleSkip"
                @status="getStatus"></video-banner>
        <span slot="footer" class="dialog-footer">
            <el-button v-if="step && (status === 'continue' || status === 'end')" @click="handlePrev">上一步</el-button>
            <el-button v-if="step && (status === 'continue' || status === 'start')" @click="handleNext">下一步</el-button>
            <el-button v-if="step &&  status === 'end'" type="primary" @click="handleClick">完  成</el-button>
            <el-button v-if="!step" type="primary" @click="handleClick">关  闭</el-button>
        </span>
    </el-dialog>
</template>

<script>
    import videoBanner from './index';

    export default {
        name:       'dialogGuideContent',
        props:      {
            title:   {
                type:    String,
                default: '使用提示',
            },
            visible: {
                type:    Boolean,
                default: false,
            },
            step:    {
                type:    Boolean,
                default: true,
            },
            /**
             * mode : String
             * @param video 视频组件
             * @param image 图片组件
             */
            mode: {
                type: String,
                require: true
            },
            /**
             * code: string
             * 引导页的唯一code
             */
            code: {
                type: String,
                require: true
            }
        },
        data() {
            return {
                dialogVisible: this.visible,
                status:        `start`,
            };
        },
        components: {
            videoBanner,
        },
        watch:      {
            visible(newVal, oldVal) {
                this.dialogVisible = newVal;
            },
        },
        methods:    {
            handleSkip() {
                this.dialogVisible = false;
                this.$emit('update:visible', this.dialogVisible);
                this.$emit('skip');
            },
            handleClick() {
                this.dialogVisible = false;
                this.$emit('update:visible', this.dialogVisible);
                this.$emit('complete')
            },
            handleClose() {
                /**
                 * 注意 关闭弹窗时需要暂停视频
                 */
                this.$refs.video.pause();
                this.$emit('update:visible', this.dialogVisible);
            },
            getStatus(data) {
                this.status = data;
            },

            handlePrev() {
                this.$refs.video.prev();
            },
            handleNext() {
                this.$refs.video.next();
            },
        },

    };
</script>

