<template>
    <div class="go-wizard" :style="mainStyle">
        <div class="wizard-steps" v-if="step">
            <go-steps :current="pageIndex" :steps="steps"></go-steps>
        </div>
        <slot></slot>
        <div class="go-wizard-bottom">
            <div class="pull-right toolbar">
                <div
                    btnid="cancelBtn"
                    @click="cancelClick"
                    class="go-btn-simple no-padding gray"
                >
                    <span>取消</span>
                </div>
                <div
                    btnid="preBtn"
                    @click="preClick"
                    v-show="!fistPage"
                    class="go-btn-simple no-padding primary"
                >
                    <span>上一步</span>
                </div>
                <div
                    btnid="nextBtn"
                    @click="nextClick"
                    v-show="!lastPage"
                    class="go-btn-simple no-padding primary"
                >
                    <span>下一步</span>
                </div>
                <div
                    btnid="completeBtn"
                    @click="completeClick"
                    v-show="lastPage"
                    class="go-btn-simple no-padding primary"
                >
                    完成
                </div>
            </div>
        </div>
    </div>
</template>

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

    class GoWizardObj {
        constructor() {
            this.nextFlag = true;
        }

        //获取下一步的标志
        getNextFlag() {
            return this.nextFlag;
        }
    }

    let _openPage = function (vueObj) {
        vueObj.hideAllPage();
        let pageObj = this.getPageObj(vueObj.pageIndex);
        if(pageObj){
            $(pageObj.$el).show();
        }

    };

    export default {
        name: "go-wizard",
        data: function () {
            return {
                goWizardObj:null,
                baseMargin: 0,
                pageIndex: 1,
                pageCount: 0,
                fistPage: true,
                lastPage: false,
                steps: []
            };
        },
        props: {
            step: {
                type: Boolean,
                default: false
            },
            width: {
                type: Number,
                default: 0
            },
            height: {
                type: Number,
                default: 0
            },
            id: {
                type: String,
                default: GoingUtils.getUUid(12)
            }
        },
        computed: {
            mainStyle() {
                if (this.height > 0 && this.width > 0) {
                    return {
                        height: this.height - this.baseMargin * 2 + "px",
                        width: this.width - this.baseMargin * 2 + "px"
                    };
                } else {
                    return {
                        height: "100%",
                        width: "100%"
                    };
                }
            }
        },
        methods: {
            getSetps() {
                let json = [];
                this.$children.forEach(item => {
                    if (item.$options.name === "go-wizard-panel") {
                        json.push({title: item["title"], content: item.$attrs["content"]});
                    }
                });
                return json;
            },
            hideAllPage() {

                return this.$children.forEach(item => {
                    if(item==null){
                        return  void(0);
                    }
                    if (item.$options.name === "go-wizard-panel") {
                        $(item.$el).hide();
                    }
                });
            },
            getOtherHeight() {
                if (this.step) {
                    return 123;
                } else {
                    return 45;
                }
            },
            //设置paneBody的高度
            setPanelBodyHeight() {
                this.$children.forEach(item => {
                    if(item==null){
                        return  void(0);
                    }
                    if (item.$options.name === "go-wizard-panel") {
                        if(item==null){
                            setTimeout(()=>{
                                this.setPanelBodyHeight();
                            },300);
                            return void(0);
                        }
                        if(item.$el==null){
                            return void(0);
                        }
                        if (this.height > 0) {
                            $(item.$el).css(
                                "height",
                                parseFloat(
                                    $(item.$el)
                                        .closest(".go-wizard")
                                        .css("height")
                                ) - this.getOtherHeight()
                            );
                            $(item.$el)
                                .find(".go-wizard-panel-body")
                                .css(
                                    "height",
                                    parseFloat(
                                        $(item.$el)
                                            .closest(".go-wizard")
                                            .css("height")
                                    ) - this.getOtherHeight()
                                );
                            //判断是否需要设置overflow属性
                            if (item.$attrs["overflow"] === "hidden") {
                                $(item.$el)
                                    .find(".go-wizard-panel-body")
                                    .css("overflow", "hidden");
                            }
                        }
                    }
                });
            },
            removePanelHeader() {
                this.$children.forEach(item => {
                    if(item==null){
                        return  void(0);
                    }
                    if (item.$options.name === "go-wizard-panel") {
                        $(item.$el)
                            .find(".go-wizard-title")
                            .hide();
                    }
                });
            },
            getPageObj(pageIndex) {
                return this.$children.filter(
                    item => item.$options.name === "go-wizard-panel"
                )[pageIndex - 1];
            },
            //获取页数
            getPageCount() {
                return this.$children.filter(
                    item => item.$options.name === "go-wizard-panel"
                ).length;
            },
            //点击下一步按钮
            nextClick() {
                let vueObj = this;
                this.$emit("btnClick", {
                    btnId: "nextClick",
                    curPageIndex: this.pageIndex,
                    flag: true,
                    wizardObj: this.goWizardObj
                });
                let nextFlag = this.goWizardObj.getNextFlag();
                if (nextFlag === false) {
                    return void 0;
                }

                if (++this.pageIndex === this.pageCount) {
                    this.lastPage = true;
                }
                //不为1 表示不是第一页
                if (this.pageIndex !== 1) {
                    this.fistPage = false;
                }
                _openPage.call(this, vueObj);
            },
            //点击上一部按钮
            preClick() {
                let vueObj = this;
                if (--this.pageIndex === 1) {
                    this.fistPage = true;
                }

                if (this.pageIndex !== this.pageCount) {
                    this.lastPage = false;
                }
                _openPage.call(this, vueObj);
                this.$emit("btnClick", {
                    btnId: "preClick",
                    curPageIndex: this.pageIndex + 1,
                    flag: false,
                    wizardObj: this.goWizardObj
                });
            },
            initBackState() {
                let vueObj = this;
                this.pageIndex = 1;
                this.fistPage = true;
                this.lastPage = false;
                this.pageCount = 0;
                _openPage.call(this, vueObj);
            },
            //点击完成按钮
            completeClick() {
                //执行完成操作
                this.$emit("btnClick", {
                    btnId: "completeClick",
                    curPageIndex: this.pageIndex,
                    flag: true,
                    wizardObj: this.goWizardObj
                });
            },
            cancelClick() {
                this.$emit("cancelClick", {});
            },
            initBtnState() {
                //获取组件的页数
                this.pageCount = this.getPageCount();
                let pageObj = this.getPageObj(this.pageIndex);
                if(pageObj==null){
                    return  void(0);
                }
                $(pageObj.$el).show();
                //如果存在步骤条
                if (this.step) {
                    this.steps = this.getSetps();
                    //    存在步骤条 则可以去掉panel的标题栏了
                    this.removePanelHeader();
                }
                this.setPanelBodyHeight();
            },
            getObj(){
                return this.goWizardObj;
            },
            //操作完成后 还原到操作前
            complete(){
                this.pageIndex=1;
                this.fistPage = true;
                this.lastPage = false;
                _openPage.call(this, this);
            },
        },
        mounted() {
            //设置容器的高度信息
            this.$nextTick(function () {
                this.goWizardObj = new GoWizardObj();
                this.$nextTick(()=>{
                    //将容器先隐藏掉
                    this.$children.map((item) => {
                        if(item==null){
                            return  void(0);
                        }
                        if (item.$options.name === "go-wizard-panel") {
                            $(item.$el).hide();
                        }
                    });
                    //初始化容器状态
                    this.$nextTick(()=>{
                        this.initBtnState();
                    });
                });
            });

        },
        watch: {},
        beforeDestroy(){
            if(this.goWizardObj!=null){
                this.goWizardObj=null;
            }
        },
        updated() {
        }
    };
</script>
