<template>
    <div>
        <div class="stepContent">
            <el-steps :active="active" finish-status="success" simple>
                <el-step title="AR内容">
                </el-step>
                <el-step title="讲解员"></el-step>
                <el-step title="讲解内容"></el-step>
                <el-step title="引导内容"></el-step>
                <el-step title="完成"></el-step>
            </el-steps>
            <div class="hot">
                <div class="hot-item" @click="chooseStep(0)"></div>
                <div class="hot-item" @click="chooseStep(1)"></div>
                <div class="hot-item" @click="chooseStep(2)"></div>
                <div class="hot-item" @click="chooseStep(3)"></div>
                <div class="hot-item" @click="chooseStep(4)"></div>
            </div>
        </div>
        <!-- <el-button style="margin-top: 12px;" @click="next">下一步</el-button> -->
        <div v-if="active==0">
            <ArContent @saveInfo='ArContentSave' @next='next'></ArContent>
        </div>

        <div v-if="active==1">
            <ArContentTemplateStep2 @saveInfo='ArContentTemplateStep2Save' @next='next'></ArContentTemplateStep2>
        </div>
        <div v-if="active==2">
            <ArContentTemplateStep3 @saveInfo='ArContentChild' @next='next'></ArContentTemplateStep3>
        </div>
        <div v-if="active==3">
            <ArContentTemplateStep4 @saveInfo='saveSetp4' @next='next'></ArContentTemplateStep4>
        </div>
        <div v-if="active==4">
            <el-alert title="添加完成" style="width:500px;margin:40px auto" type="success" description="已经全部添加完成" show-icon>
            </el-alert>
        </div>
    </div>
</template>
<script>
import formValidator from '../formValidator'
import ArContent from '../components/ArContent';
import ArContentTemplateStep2 from '../components/ArContentTemplateStep2';
import ArContentTemplateStep3 from '../components/ArContentTemplateStep3';
import ArContentTemplateStep4 from '../components/ArContentTemplateStep4';
export default {
    created() {
        this.refreash()
    },
    data() {
        return {
            active: 0,
            canNext: 0
        }
    },
    watch: {
        '$route.query'() {
            this.refreash()
        }
    },
    methods: {
        refreash() {
            if (this.$route.query.arContentId) {
                this.canNext = 1
                this.active = 1
                if (this.$route.query.ArContentTemplateStep2Id) {
                    this.canNext = 2
                    this.active = 2
                    if (this.$route.query.arContentChild) {
                        this.canNext = 3
                        this.active = 3
                        if (this.$route.query.step4ID) {
                            this.canNext = 4
                            this.active = 4
                        }
                    }
                }

            }
        },
        ArContentSave(id) {
            this.$router.replace({
                name: 'arContentTemplate',
                query: {
                    arContentId: id
                }
            })
        },
        ArContentTemplateStep2Save(id) {
            this.$router.replace({
                name: 'arContentTemplate',
                query: {
                    arContentId: this.$route.query.arContentId,
                    ArContentTemplateStep2Id: id
                }
            })
        },
        next() {
            if (this.active++ > 4) this.active = 0;
        },
        chooseStep(step) {
            if (step <= this.canNext) {
                this.active = step
            }

        },
        ArContentChild() {
            this.$router.replace({
                name: 'arContentTemplate',
                query: {
                    arContentId: this.$route.query.arContentId,
                    ArContentTemplateStep2Id: this.$route.query.ArContentTemplateStep2Id,
                    arContentChild: 1
                }
            })
        },
        saveSetp4(id) {
            this.$router.replace({
                name: 'arContentTemplate',
                query: {
                    arContentId: this.$route.query.arContentId,
                    ArContentTemplateStep2Id: this.$route.query.ArContentTemplateStep2Id,
                    arContentChild: 1,
                    step4ID: id
                }
            })
        }


    },
    components: {
        ArContent, ArContentTemplateStep2, ArContentTemplateStep3, ArContentTemplateStep4
    }
}
</script>
<style lang="less" scoped>
.stepContent {
    position: relative;

    .hot {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        .hot-item {
            flex-grow: 1;
            cursor: pointer;
        }
    }
}
</style>
