<template>
    <div class="ht-base-guide-distribution-item">
        <ht-base-tip
                :visible="isShow"
                :width="width"
                :placement="placement"
                :popper-class="className">
            <slot name="dis-tip">
            </slot>
            <div class="ht-dis-cont" slot="content">
                <slot>
                </slot>
                <div class="ht-oper-box">
                    <ht-base-button :type="bttonType" @click="stepNext">{{buttonText}}</ht-base-button>
                </div>
            </div>
        </ht-base-tip>

    </div>
</template>

<script>
    export default {
        name: 'HtBaseGuideDistributionItem',
        props: {
            width: {
                type: String,
                default: '416'
            },
            bttonType: {
                type: String,
                default: 'primary'
            },
            placement: {
                type: String
            },
            className: {
                type: String
            }
        },
        data() {
            return {
                isShow: false,
                buttonText: '下一步',
                count: 0,
                items: []
            }
        },
        methods: {
            getChild() {
                let childs = this.$parent.$children;
                let spreads = childs.filter(item => {
                    return item.$vnode.tag.indexOf('HtBaseGuideDistributionItem') >= 0;
                });
                this.items = spreads;
                this.count = spreads.length;
                this.items[this.count - 1].buttonText = "完成";
                this.items[0].isShow = true;
                for (var i = 0; i < this.count; i++) {
                    this.items[i].ids = i;
                }
            },
            stepNext() {
                let index = this.ids + 1;
                for (var i = 0; i < this.count; i++) {
                    this.items[i].isShow = false;
                }
                if (index < this.count) {
                    this.items[index].isShow = true;
                }
                if (index === this.count) {
                    this.$parent.spreadShow = false;
                }
                this.$emit('on-click-button');
            }
        },
        mounted() {
            this.getChild();
        }
    }
</script>
<style>
    .ht-base-guide-distribution-item {

    }
</style>

