<template>
    <div class="go-steps-pages">
        <div class="steps">
            <go-steps :current="pageIndex" :steps="steps"></go-steps>
        </div>
        <slot></slot>
    </div>
</template>

<script>
    import {AssertUtils} from "goingutils";

    export default {
        name: "go-steps-pages",
        data: function () {
            return {
                baseMargin: 0,
                pageIndex: 1,
                pageCount: 0,
                fistPage: true,
                lastPage: false,
                steps: []
            };
        },
        computed: {
        },
        methods: {
            //进入下个页面
            nextPage(fun) {
                if (AssertUtils.isFunction(fun)) {
                    let flag = fun();
                    if (!flag) {
                        return void 0;
                    }
                }

                ++this.pageIndex;
                let vueObj = this;
                this.$children.forEach((item) => {
                    if (item.$options.name === "go-step-page") {
                        //根据当前页来设置子元素的显示和隐藏
                        if (vueObj.pageIndex === parseFloat($(item.$el).attr("index"))) {
                            $(item.$el).show();
                        } else {
                            $(item.$el).hide();
                        }
                    }
                });
            },
            //获取页数
            getSetps() {
                let json = [];
                let vueObj = this;
                let curIndex = 0;
                this.$children.forEach(item => {
                    if (item.$options.name === "go-step-page") {
                        ++curIndex;
                        //计算页数
                        ++vueObj.pageCount;
                        json.push({title: item["title"], content: item.$attrs["content"]});
                        //第一个tab页需要显示  其他的还是隐藏
                        if (curIndex === 1) {
                            $(item.$el).show();
                        } else {
                            $(item.$el).hide();
                        }
                        //设置序号标志
                        $(item.$el).attr("index", curIndex);
                    }
                });
                return json;
            },
            initSetps() {
                this.steps = this.getSetps();
            }
        },
        mounted() {
            this.$nextTick(function () {
                this.initSetps();
            });
        },
        components: {}
    };
</script>
