<template>
    <div :class="itemClass"
         @click="handleClick">
        <div :class="`${prefix}-step-item__main`">
            <div :class="`${prefix}-step-item__icon`">
                <i v-if="data.status"
                   :class="iconClass">
                    {{showNumber?index:''}}
                </i>
            </div>
            <div :class="`${prefix}-step-item__desc`">
                <p class="major-title">{{data.title}}</p>
                <p class="minor-title"
                   :style="subStyle">{{data.subTitle}}</p>
            </div>
        </div>
        <div :class="[`${prefix}-step-item__line`, nextStatus]"></div>
    </div>
</template>

<script>
import { prefix, prefixMixins } from 'jdd-design/utils';
export default {
    name: `${prefix}-step-item`,
    mixins: [prefixMixins],
    inject: {
        jddStep: {
            default: null
        }
    },
    props: {
        data: Object,
        steps: Array,
        version: String,
        width: Number
    },
    data() {
        return {
            nextStatus: 'waiting',
            subStyle: null,
            index: 0
        };
    },
    computed: {
        itemClass() {
            let clsNames = [`${prefix}-step-item`];
            this.version &&
                clsNames.push(`${prefix}-step-item--${this.version}`);
            this.data.status &&
                clsNames.push(`${prefix}-step-item--${this.data.status}`);
            return clsNames;
        },
        iconClass() {
            let clsNames = [];
            this.data.status &&
                clsNames.push(`${prefix}-step-item__icon--${this.data.status}`);
            if (['success', 'error'].includes(this.data.status)) {
                clsNames.push(`${prefix}-icon-${this.data.status}-o`);
            }
            return clsNames;
        },
        showNumber() {
            return ['active', 'waiting'].indexOf(this.data.status) > -1;
        }
    },
    watch: {
        width: function(val) {
            this.subStyle = {
                'min-width': `${val - 50}px`
            };
        },
        steps: {
            deep: true,
            handler: function() {
                this.getStyle();
            }
        }
    },
    methods: {
        getStyle() {
            this.index = this.steps.indexOf(this.data) + 1;
            let nextStep = this.steps[this.index];
            this.nextStatus = (nextStep && nextStep.status) || 'waiting';
            this.subStyle = {
                'min-width': `${this.width - 50}px`
            };
        },
        handleClick() {
            this.$emit('click');
        }
    },
    mounted() {
        this.$nextTick(() => {
            this.getStyle();
        });
    }
};
</script>