<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
    },
    data() {
        return {
            nextStatus: 'waiting',
            subStyle: null,
            index: 0
        };
    },
    computed: {
        itemClass() {
            let clsNames = [`${prefix}-step-item--v2`];
            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}`);
            return clsNames;
        },
        showNumber() {
            return ['active', 'waiting'].indexOf(this.data.status) > -1;
        }
    },
    methods: {
        getStyle() {
            this.index = this.steps.indexOf(this.data) + 1;
            let nextStep = this.steps[this.index];
            this.nextStatus = (nextStep && nextStep.status) || 'waiting';
        },
        handleClick() {
            this.$emit('click');
        }
    },
    mounted() {
        this.$nextTick(() => {
            this.getStyle();
        });
    }
};
</script>