<template>
    <view
        v-if="stepList"
        class="step" 
        :style="stepStyle"
    >
        <text v-if="title" class="title c-font-16">{{ title }}</text>
        <view class="step-box">
            <view
                v-for="(item, index) in stepList"
                :key="index"
                class="item"
                :style="itemStyle"
            >
                <view class="row">
                    <c-icon
                        v-if="item.status || item.selected"
                        class="icon icon-check"
                        name="check-circle-solid"
                        :font-size="iconSize"
                        :style="{
                            opacity: '1',
                            color: checkedColor,
                        }"
                    />
                    <view v-if="!item.status && !item.selected && !newUncheckIcon" class="icon icon-uncheck"/>
                    <c-icon
                        v-if="!item.status && !item.selected && newUncheckIcon"
                        class="icon icon-check"
                        name="check-circle-solid"
                        :font-size="iconSize"
                        :style="{
                            opacity: '1',
                            color: '#e0e0e0',
                        }"
                    />
                    <view
                        v-if="index !== stepList.length - 1 && !preLine"
                        class="line"
                        :class="{cur: item.status || item.selected}"
                        :style="item.status || item.selected ? checkedLineStyle : uncheckLineStyle"
                    />
                    <!-- 第一个节点选中时，进度条的线不选中 -->
                    <view
                        v-if="index !== 0 && preLine"
                        class="preline"
                        :class="{cur: item.selected}"
                        :style="item.selected ? checkedLineStyle : uncheckLineStyle"
                    />
                </view>
                <view 
                    class="name" 
                    :style="{
                        'color': item.status || item.selected ? checkedColor : textColor,
                        'font-size': textSize,
                        'margin-top': textTop + 'px',
                    }"
                >
                    {{ item.text }}
                </view>
            </view>
        </view>
    </view>
</template>

<script>
/**
 * @file step
 * @author kangpuqing
 * @categories 业务组件
 * @tags [component]
 */

import CIcon from '@baidu/med-ui/components/Icon/Icon';

export default {
    config: {
        component: true
    },
    props: {
        /**
         * stepList 步骤列表
         */
        stepList: {
            type: Array,
            default: () => {
                return [];
            }
        },
        title: {
            type: String
        },
        /**
         * step 样式
         */
        stepStyle: {
            type: Object
        },
        iconSize: {
            type: String,
            default: '15px'
        },
        textSize: {
            type: String,
            default: '13px'
        },
        textTop: {
            type: Number,
            default: 15
        },
        /**
         * 默认的文字颜色
         */
        textColor: {
            type: String,
            default: '#fff'
        },
        /**
         * 已完成的步骤色值
         */
        checkedColor: {
            type: String,
            default: '#fff'
        },
        newUncheckIcon: {
            type: Boolean,
            default: false
        },
        /**
         * 完成的步骤条样式
         */
        checkedLineStyle: {
            type: Object
        },
        uncheckLineStyle: {
            type: Object
        },
        // 图标前的步骤条
        preLine: {
            type: Boolean,
            default: false
        },
        itemStyle: {
            type: Object
        }
    },
    components: {
        CIcon
    }
};
</script>
<style lang="less" scoped>
.step {
    width: 100%;
    min-height: 0.8rem;
    border-radius: 1px;
    .title {
        color: #fff;
        font-weight: 500;
    }
    .step-box {
        margin-top: 0.2rem;
        display: flex;
        justify-content: space-around;
        .item {
            display: flex;
            justify-content: space-between;
            flex: 1 1 auto;
            align-items: center;
            flex-direction: column;
            .row {
                position: relative;
                width: 100%;
                display: flex;
                flex-direction: row;
                .icon {
                    position: absolute;
                    left: 50%;
                    transform: translate(-50%, -50%);
                }
                .line {
                    position: absolute;
                    left: 55%;
                    top: 50%;
                    transform: translateY(-50%);
                    flex: 1 1 auto;
                }
                .preline {
                    position: absolute;
                    right: 55%;
                    top: 50%;
                    transform: translateY(-50%);
                    flex: 1 1 auto;
                }
            }
        }
        .icon-check {
            z-index: 2;
        }
        .icon-uncheck {
            width: 0.08rem;
            height: 0.08rem;
            background-color: #FFA093;
            z-index: 2;
            border-radius: 100%;
        }
        .line {
            // position: absolute;
            // top: 17%;
            // left: 52.5%;
            width: 92%;
            border-bottom: 3px solid #FFA093;
        }
        .name {
            color: #fff;
            margin-top: 0.15rem;
        }
        .cur {
            border-bottom: 2px solid #E6E6E6;
        }
    }
}
</style>


