<template>
    <view
        v-if="stepList || tips"
        class="step"
        :style="stepStyle"
    >
        <view v-if="stepList && stepList.length" class="step-box">
            <view
                v-for="(item, index) in stepList"
                :key="index"
                class="item"
                :style="{
                    width: (100 / stepList.length) - 2 + '%',
                }"
            >
                <view class="row">
                    <c-icon
                        class="icon"
                        name="yixuanzhong-solid"
                        font-size="17px"
                        :color="item.status ? '#FD503E' : '#E0E0E0'"
                    />
                    <view
                        v-if="index !== stepList.length - 1"
                        class="line"
                    />
                </view>
                <view
                    class="name"
                    :style="{
                        color: item.status && '#FD503E',
                    }"
                >
                    {{ item.text }}
                </view>
                <!-- 倒三角 -->
                <view
                    v-if="tips && tips.length && item.status && (!stepList[index + 1] || !stepList[index + 1].status)"
                    class="triangle"
                />
            </view>
        </view>
        <view
            v-if="highligtTips && highligtTips.length"
            class="tip"
        >
            <view
                v-for="(tip,i) in highligtTips"
                :key="i"
                :class="{
                    'tip--blod': tip.blod,
                }"
            >
                <rich-text v-if="tip" :nodes="tip.text" />
            </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: {
            type: Array,
            default: () => {
                return [];
            }
        },
        stepStyle: {
            type: Object,
            default() {
                return {};
            }
        },
        iconSize: {
            type: String,
            default: '15px'
        },
        tips: {
            type: Array,
            default() {
                return [];
            }
        }
    },
    components: {
        CIcon
    },
    data() {
        return {
            highligtTips: []
        };
    },
    created() {
        // 初始化组件数据
        this.initHilightTips();
    },
    methods: {
        initHilightTips() {
            this.highligtTips = this.tips.map(tip => {
                return {
                    ...tip,
                    text: this.highlightFormat(tip.text),
                };
            });
        },
        // 匹配高亮文本
        highlightFormat(text = '', color = '#FD503E') {
            return text
                .replace(new RegExp('<em>', 'g'), '<span style="color: ' + color + ';">')
                .replace(new RegExp('</em>', 'g'), '</span>')
                .replace(new RegExp('<b>', 'g'), '<b style="font-weight: bold;">');
        }
    },
};
</script>
<style lang="less" scoped>
.step {
    width: 100%;
    border-radius: 1px;

    .step-box {
        margin-top: .08rem;
        margin-bottom: 0.12rem;
        display: flex;
        justify-content: space-around;

        .item {
            display: flex;
            justify-content: space-between;
            flex: 1 1 auto;
            align-items: center;
            flex-direction: column;
            position: relative;

            .row {
                position: relative;
                width: 100%;
                display: flex;
                flex-direction: row;

                .icon {
                    position: absolute;
                    z-index: 2;
                    left: 50%;
                    transform: translate(-50%, -50%);
                }

                .line {
                    z-index: 1;
                    position: absolute;
                    left: 55%;
                    top: 50%;
                    transform: translateY(-50%);
                    flex: 1 1 auto;
                }
            }

            .triangle {
                position: absolute;
                bottom: -0.12rem;
                left: calc(50% - 0.07rem);
                width: 0.16rem;
                height: 0.07rem;
                background: url('https://med-drug.cdn.bcebos.com/triangle.png');
                background-size: cover;
                // border-right: .07rem solid transparent;
                // border-left: .07rem solid transparent;
                // border-bottom: .07rem solid #F5F5F5;
            }
        }

        .line {
            width: 92%;
            border-bottom: 1px solid #e0e0e0;
        }

        .name {
            color: #858585;
            margin-top: 0.2rem;
            font-size: 0.14rem;
        }
    }

    .tip {
        text-align: left;
        background: #f5f5f5;
        border-radius: .09rem;
        padding: .125rem .13rem;
        font-size: .15rem;
        color: #525252;
        line-height: .2rem;
        word-break: break-all;

        &--blod {
            font-family: PingFangSC-Medium;
            color: #1f1f1f;
            margin-bottom: .06rem;
        }
    }
}
</style>


