<template>
    <div class="ht-base-steps-combination-demo">
        <ht-base-steps :current="current">
            <ht-base-step v-for="(item,index) of step" :title="item.stepTitle" :content="item.stepDescription"
                          :key="index" :status="item.status"/>
        </ht-base-steps>
        <br/>
        <ht-base-button :disabled="disabled" type="primary" @click="next">下一步</ht-base-button>
        <ht-base-button v-if="current == '1'" type="primary" @click="fixed">修复错误</ht-base-button>
    </div>
</template>

<script>
    export default {
        name: 'HtBaseStepsCombinationDemo',
        data() {
            return {
                cloneStep: [],
                current: 0,
                status: 'process',
                disabled: false,
                step: [
                    {
                        stepTitle: '进行中',
                        stepDescription: '这里是进行中的描述信息',
                        status: 'process'
                    },
                    {
                        stepTitle: '待进行1',
                        stepDescription: '这里是待进行的描述信息',
                        status: 'wait'
                    },
                    {
                        stepTitle: '待进行2',
                        stepDescription: '这里是待进行的描述信息',
                        status: 'wait'

                    },
                    {
                        stepTitle: '待进行3',
                        stepDescription: '这里是待进行的描述信息',
                        status: 'wait'

                    },
                ],
            }
        },
        methods: {
            next() {
                this.step[this.current].stepTitle = '已完成';
                this.step[this.current].status = 'finish';
                if (this.current < this.step.length) {
                    this.current += 1
                    if (this.current == 1) {
                        this.step[this.current].status = 'error';
                        this.step[this.current].stepTitle = '进行中';
                        this.disabled = true
                    } else if (this.current == 4) {
                        this.current = 0;
                        this.step = this.cloneStep
                        this.step[this.current].stepTitle = '进行中';
                        this.step[this.current].status = 'process';
                    } else {
                        this.step[this.current].stepTitle = '进行中';
                        this.step[this.current].status = 'process';
                    }
                }
            },
            fixed() {
                this.step.forEach((item) => {
                    if (item.status == 'error') {
                        item.status = 'process'
                    }
                })
                this.disabled = false
            }
        },
        created() {
            this.cloneStep = this.step.map(item => ({...item}))
        }
    }
</script>
<style>
    .ht-base-steps-combination-demo {

    }
</style>

