<template>
    <view class="step-wrap">
        <view class="wrap-left"><slot name="leftContent"></slot></view>
        <view class="wrap-right">
            <view :class="'wux-class ' + classes.wrap + ' ' + className" :style="'width: ' + width">
                <!-- <view class="{{ classes.leftcontent }}">
                <slot name="leftContent"></slot>
            </view> -->
                <view :class="classes.hd">
                    <!-- <view class="{{ classes.icon }}" wx:if="{{ !hasIcon }}">{{ index + 1 }}</view> -->
                    <view :class="classes.icon" v-if="!hasIcon"></view>
                    <view :class="classes.icon" v-else>
                        <wux-icon :wux-class="classes.thumb" :type="thumb" :size="24" v-if="thumb"></wux-icon>
                    </view>
                </view>
                <view :class="classes.bd">
                    <view :class="classes.title" v-if="title">{{ title }}</view>
                    <view :class="classes.title" v-else>
                        <slot name="title"></slot>
                    </view>
                    <view :class="classes.content" v-if="content">{{ content }}</view>
                    <view :class="classes.content" v-else>
                        <slot name="content"></slot>
                    </view>
                </view>
                <view :class="classes.ft" v-if="index !== length - 1"></view>
            </view>
        </view>
    </view>
</template>

<script>
import wuxIcon from '../icon/index';
import baseComponent from '../helpers/baseComponent';
import classNames from '../helpers/classNames';
const defaultStatus = ['wait', 'process', 'finish', 'error'];
const defaultIcon = 'ios-checkmark';
baseComponent({
    relations: {
        '../steps/index': {
            type: 'parent'
        }
    },
    properties: {
        prefixCls: {
            type: String,
            value: 'wux-step'
        },
        status: {
            type: String,
            value: ''
        },
        leftContent: {
            type: String,
            value: ''
        },
        title: {
            type: String,
            value: ''
        },
        content: {
            type: String,
            value: ''
        },
        icon: {
            type: String,
            value: ''
        }
    },
    data: {
        width: '100%',
        length: 1,
        index: 0,
        current: 0,
        direction: 'horizontal'
    },
    computed: {
        classes: [
            'prefixCls, direction',
            function (prefixCls, direction) {
                const wrap = classNames(prefixCls, {
                    [`${prefixCls}--${direction}`]: direction
                });
                const hd = `${prefixCls}__hd`;
                const icon = `${prefixCls}__icon`;
                const thumb = `${prefixCls}__thumb`;
                const bd = `${prefixCls}__bd`;
                const title = `${prefixCls}__title`;
                const content = `${prefixCls}__content`;
                const ft = `${prefixCls}__ft`;
                return {
                    wrap,
                    hd,
                    icon,
                    thumb,
                    bd,
                    title,
                    content,
                    ft
                };
            }
        ]
    },
    methods: {
        updateCurrent(opts = {}) {
            const width = opts.direction === 'horizontal' ? 100 / opts.length + '%' : '100%';
            const index = defaultStatus.indexOf(this.status);
            const hasIcon = opts.index < opts.current || this.icon;
            const thumb = this.icon || defaultIcon;
            const suffix = index !== -1 ? defaultStatus[index] : opts.index < opts.current ? 'finish' : opts.index === opts.current ? 'process' : '';
            const className = `${this.prefixCls}--${suffix}`;
            const options = Object.assign(
                {
                    width,
                    className,
                    hasIcon,
                    thumb
                },
                opts
            );
            this.setData(options);
        }
    },
    attached() {
        this.updateCurrent(this);
    }
});
</script>
<style>
.wux-step {
    font-size: 0;
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    padding: 0 10rpx;
    vertical-align: top;
}
.wux-step--vertical {
    padding-bottom: 60rpx;
}
.wux-step--vertical .wux-step__hd {
    float: left;
}
.wux-step--vertical .wux-step__bd {
    overflow: hidden;
    display: block;
    margin-left: 80rpx;
    margin-top: 0;
    text-align: left;
    clear: inherit;
}
.wux-step--vertical .wux-step__ft {
    position: absolute;
    left: 38rpx;
    top: 0;
    height: 100%;
    width: 2rpx;
    padding: 60rpx 0 8rpx;
    margin-left: 0;
}
.wux-step--vertical .wux-step__ft::after {
    width: 2rpx;
    height: 100%;
}
.wux-step__ft {
    position: absolute;
    left: 50%;
    width: 100%;
    top: 24rpx;
    padding: 0 48rpx;
    margin-left: 6rpx;
    box-sizing: border-box;
}
.wux-step__ft::after {
    content: '';
    display: inline-block;
    background: #d9d9d9;
    height: 2rpx;
    border-radius: 2rpx;
    width: 100%;
    transition: background 0.3s;
    position: relative;
    left: -4rpx;
}
.wux-step__icon {
    box-sizing: border-box;
    font-size: 24rpx;
    width: 48rpx;
    height: 100%;
    border-radius: 50%;
    background: #fff;
    position: relative;
    z-index: 2;
    margin: 0 auto;
    border: #e9eaec solid 2rpx;
}
.wux-step__thumb {
    width: 100%;
    height: 100%;
    display: inline-block;
    overflow: hidden;
}
.wux-step--process .wux-step__icon {
    border: #387ef5 solid 2rpx;
    color: #fff;
    background: #387ef5;
}
.wux-step--wait .wux-step__icon {
    border: #e9eaec solid 2rpx;
    color: #e9eaec;
}
.wux-step--wait .wux-step__ft::after {
    background: #e9eaec;
}
.wux-step--finish .wux-step__icon {
    border: #387ef5 solid 2rpx;
    color: #387ef5;
}
.wux-step--finish .wux-step__ft::after {
    background: #387ef5;
}
.wux-step--error .wux-step__icon {
    border: #ef473a solid 2rpx;
    color: #ef473a;
}
.wux-step--error .wux-step__ft::after {
    background: #ef473a;
}
.wux-step__hd {
    width: auto;
    height: 48rpx;
    line-height: 48rpx;
    text-align: center;
    box-sizing: border-box;
}
.wux-step__bd {
    margin-top: 20rpx;
    text-align: center;
    clear: both;
}
.wux-step__title {
    font-size: 32rpx;
    font-weight: 700;
    color: rgba(0, 0, 0, 0.85);
}
.wux-step__content {
    font-size: 24rpx;
    margin-top: 6rpx;
    color: rgba(0, 0, 0, 0.65);
}
.step-wrap {
    display: flex;
}
.wrap-left {
    flex: 1;
    text-align: right;
    margin-right: 13rpx;
}
.wrap-right {
    flex: 3;
}
</style>
