<template>
    <div :class="stepClass"
         :style="{height:`${height}px`}">
        <step-item v-for="item in stepData"
                   :key="item.title"
                   :steps="stepData"
                   :data="item"
                   :width="width/stepData.length"
                   :version="version"
                   @click="handleClick(item)"></step-item>
    </div>
</template>

<script>
import { prefix } from 'jdd-design/utils';
import StepItem from './step-item';
export default {
    name: `${prefix}-step`,
    provide() {
        return {
            jddStep: this
        };
    },
    components: {
        StepItem
    },
    data() {
        return {
            width: 0
        };
    },
    props: {
        layout: {
            type: String,
            default: 'horizontal',
            validator(value) {
                return ['vertical', 'horizontal'].indexOf(value) > -1;
            }
        },
        stepData: Array,
        size: {
            type: String,
            default: 'medium',
            validator(value) {
                return ['large', 'medium', 'small', 'mini'].indexOf(value) > -1;
            }
        },
        height: Number,
        version: {
            type: String,
            default: ''
        }
    },
    methods: {
        handleClick(item) {
            this.$emit('itemClick', item);
        }
    },
    computed: {
        stepClass() {
            let clsNames = [`${prefix}-step`];
            clsNames.push(`${prefix}-step--${this.layout}`);
            clsNames.push(`${prefix}-step--${this.size}`);
            return clsNames;
        }
    },
    mounted() {
        this.$nextTick(() => {
            this.width = this.$el.clientWidth;
        });
    }
};
</script>

<style>
</style>
