<template>
    <div class="ht-base-guide-step">
        <transition name="fade">
            <div class="ht-guin-cont" v-show="showPanel">
                <slot name="step-header"></slot>
                <div class="ht-curousel-box">
                    <Carousel
                            v-model="cvalue"
                            dots="outside"
                            :radius-dot="radiusDot"
                            arrow="always"
                            :trigger="trigger"
                            @on-change="handleChange">
                        <slot></slot>
                    </Carousel>
                    <div class="ht-buttons-box">
                        <ht-base-button disabled class="ht-return-bt" v-show="isFirst">返回</ht-base-button>
                        <ht-base-button type="primary" class="ht-close-bt" v-show="isLast" @click="closePanel">关闭
                        </ht-base-button>
                        <ht-base-button type="primary" :class="closeButton ? 'show' : 'hide'" ghost
                                        class="ht-ghost-custom" @click="closePanel">跳过
                        </ht-base-button>
                    </div>
                    <div :class="[returnButton ? 'hide' : 'ht-return-bt-hide']"></div>
                </div>
            </div>
        </transition>
    </div>
</template>

<script>
    export default {
        name: 'HtBaseGuideStep',
        props: {
            radiusDot: {
                type: Boolean,
                default: true
            },
            trigger: {
                type: String,
                default: 'click'
            },
            returnButton: {
                type: Boolean,
                default: true
            },
            closeButton: {
                type: Boolean,
                default: true
            }
        },
        data() {
            return {
                cvalue: 0,
                isFirst: true,
                isLast: false,
                showPanel: true,
                count: 0
            }
        },
        watch: {
            cvalue(value, oldValue) {
                let count = this.count;
                if (value === count - 1) {
                    this.isFirst = false;
                    this.isLast = true;
                } else if (value === 0) {
                    this.isFirst = true;
                    this.isLast = false;
                } else {
                    this.isFirst = false;
                    this.isLast = false;
                }
            }
        },
        methods: {
            handleChange(oldValue, value) {
                let count = this.count;
                if (value === 0) {
                    this.isFirst = true;
                    this.isLast = false;
                } else if (value === count - 1) {
                    this.isLast = true;
                    this.isFirst = false;
                } else {
                    this.isFirst = false;
                    this.isLast = false;
                }
            },
            closePanel() {
                this.showPanel = false;
            },
            getChild() {
                let carousel = this.$children.filter(item => {
                    return item.$vnode.tag.indexOf('Carousel') > 0;
                });
                let steps = carousel[0].$children.filter(item => {
                    return item.$vnode.tag.indexOf('HtBaseGuideStepItem') > 0;
                });
                this.count = steps.length;
            }
        },
        mounted() {
            this.getChild();
        }
    }
</script>
<style>
    .ht-base-guide-step {

    }
</style>

