import {addStyle, getRestProps} from '../utils';

const {
    children, selected, done, 
    title, index, width, error,
    className, style
} = self.get();

const classNameObj = {
    'k-step': true,
    'k-active': selected,
    'k-done': done,
    'k-error': error,
    [className]: className,
};

<div {{ ...getRestProps(self) }} 
    class={{ classNameObj }}
    style={{ addStyle(style, {width: width}) }} 
>
    <div class="k-tail"></div>
    <div class="k-wrapper">
        <div class="k-head">
            <div class="k-inner">
                {{ /* <i class="ion-ios-checkmark-empty k-icon" v-if={{ done }}></i> */ }}
                <i class="ion-ios-close-empty k-icon" v-if={{ error }}></i>
                <span v-else>{{ index + 1 }}</span>
            </div>
        </div>
        <div class="k-main">
            <div class="k-title">{{ title }}</div>
            <div class="k-content">{{ children }}</div>
        </div>
    </div>
</div>