<template>
    <div
        class="info-steps"
        :class="[`${config.direction || 'horizontal'}-steps`]"
    >
        <el-steps
            :active="active - 1"
            :direction="config.direction"
            :align-center="config.alignCenter || true"
            :simple="config.simple"
        >
            <el-step
                v-for="(step, index) in steps"
                :key="index"
                :title="$t(step.title)"
                :description="$t(step.description || '')"
                :icon="step.icon"
                @click="nativeActive(step, index + 1)"
            />
        </el-steps>
        <div class="step-content">
            <div class="slot">
                <slot :active="active" />
            </div>
            <div class="operation">
                <info-form
                    v-if="isShowButton"
                    :config="btnConfig"
                    :modelData="{}"
                />
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent, ref, reactive } from 'vue'
import InfoForm from '../infoForm/infoForm.vue'
import {
    FormConfig
} from '../form'
import { isPromise } from '../../script'

interface IStep {
    title: string,
    description?: string,
    icon?: string
}

export default defineComponent({
    name: 'InfoSteps',
    props: {
        config: {
            type: Object,
            default () {
                return {}
            }
        },
        steps: {
            type: Array<IStep>,
            required: true
        },
        isShowButton: {
            type: Boolean,
            default: true
        },
        methods: {
            type: Object,
            default () {
                return {}
            }
        },
        loading: {
            type: Object,
            default () {
                return { isLoading: false }
            }
        },
        defaultIndex: {
            type: Number,
            default: 1
        }
    },
    components: {
        InfoForm
    },
    setup (props) {
        const active = ref<number>(1)
        active.value = props.defaultIndex
        const next = () => {
            active.value++
        }
        // form配置
        let formConfig = new FormConfig({
            disabled: () => props.loading.isLoading,
            labelWidth: '0px'
        })
        formConfig.setRule({
            label: '',
            model: '',
            type: 'infoButton',
            aligning: props.config.buttonAligning,
            operation: [
                {
                    label: 'cancel',
                    type: 'info',
                    plain: true,
                    methods: () => {
                        props.methods.cancel()
                    }
                }, {
                    show: () => active.value !== 1, // 不是第一个
                    label: 'prev',
                    methods: () => {
                        props.methods.prev?.()
                        active.value--
                    }
                }, {
                    show: () => active.value !== props.steps.length, // 不是最后一个
                    label: 'next',
                    methods: () => {
                        const nextValid = props.methods.next?.() // 有校验 true/false/Promise 无校验 undefined
                        if (isPromise(nextValid)) {
                            nextValid.then((v:Boolean) => {
                                v && next()
                            })
                        } else {
                            nextValid !== false && next()
                        }
                    }
                }, {
                    show: () => active.value === props.steps.length, // 最后一个
                    label: 'complete',
                    type: 'primary',
                    loading: () => props.loading.isLoading,
                    methods: () => {
                        props.methods?.complete()
                    }
                }
            ]
        })
        // 直接点击el-step跳转
        const nativeActive = (step: object, num: number) => {
            if (props.methods?.nativeActive) {
                props.methods.nativeActive(step, num) && (active.value = num)
            }
        }
        return {
            active,
            btnConfig: reactive(formConfig),
            nativeActive
        }
    }
})
</script>

<style lang="scss" scoped>
.info-steps {
    padding: 15px;
    display: flex;
    
    .step-content {
        flex: 1;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        .slot {
            flex: 1;
        } 
    }
}
.vertical-steps {
    .el-steps {
        min-width: 150px;
    }
    .step-content {
        border-left: 1px solid var(--ep-text-color-placeholder);
        padding-left: 15px;
    }
}
.horizontal-steps {
    flex-direction: column;
}
</style>
