<template>
    <view>
        <view
            class="step"
            :class="{
                'step-bg': !!topNavBarHasBg,
            }"
        >
            <!-- 进度文案提示 -->
            <view
                v-if="tip && tip.length"
                class="step-status"
                :class="{
                    'step-top-has-bg': !!topNavBarHasBg,
                }"
            >
                <view
                    v-for="(item, i) in tip"
                    :key="i"
                    class="step-status-item c-inline c-font-normal"
                >
                    <view class="row">
                        <c-icon
                            v-if="i < tip.length - 1"
                            name="youjiantou"
                            font-size="16px"
                            class="c-inline-block step-icon-gap icon step-top-has-bg-icon"
                        />
                    </view>
                    <text :class="item.selected === 1 ? 'c-color-green has-bg-text-selected' : 'c-color-gray has-bg-text'">
                        {{ item.txt }}
                    </text>
                </view>
                <view class="c-line-superfine-after step-top-has-bg-superfine-after"/>
            </view>
            <!-- 进度条 -->
            <view
                v-if="progress && progress.total"
                class="step-process"
            >
                <view
                    class="step-process-inner"
                    :style="{
                        width: (progress.current / progress.total * 100) + '%',
                        backgroundColor: (progress.progressColor ? progress.progressColor : ''),
                    }"
                />
                <view
                    v-if="progress.current > 0 && ((progress.current < progress.total) || (progress.showLast && progress.current <= progress.total))"
                    :style="{
                        left: (progress.current / progress.total * 100) + '%',
                        width: progress.width ? progress.width + 'px' : '',
                        marginLeft: progress.width ? -progress.width / (progress.showLast && progress.current == progress.total ? 1 : 2) + 'px' : '',
                    }"
                    class="step-process-tip c-inline-block c-color-333 c-font-tiny c-tac"
                    :class="[
                        progress.showLast && progress.current == progress.total ? 'last' : '',
                        progress.size === 'small' ? '' : 'c-gap-inner-top-small c-gap-inner-bottom-small',
                    ]"
                >
                    {{ progress.text }}<span v-if="progress.showTotal">/{{ progress.total }}</span>
                </view>
            </view>
            <!-- 医生接诊卡 -->
            <view v-if="doctorTips && doctorTips.isShow === '1'" class="card-doctor-reception">
                <im-card-doctor-reception
                    :doctor-tips="doctorTips"
                />
            </view>
        </view>
        <view
            :style="{
                height: (progress && progress.total) || topNavBarHasBg > 0 ? '.55rem' : '.38rem',
                display: progress && progress.hideLayer ? 'none' : 'block',
            }"
            class="tips-place"
        />
        <view v-if="doctorTips && doctorTips.isShow === '1'" class="card-doctor-reception-place"/>
    </view>
</template>

<script>
/**
* @file 问诊-步骤导航
* @author haoyan
* @categories 业务组件
* @tags [component]
*/
import CIcon from '@baidu/med-ui/components/Icon/Icon';
import ImCardDoctorReception from './im-card-doctor-reception';

export default {
    config: {
        component: true
    },
    props: {
        /**
         * tip内容
         */
        tip: {
            'type': Array,
            'default': () => []
        },
        /**
         * progress
         */
        progress: {
            'type': Object,
            'default'() {
                return {};
            }
        },
        // 头部是否有背景色
        topNavBarHasBg: {
            type: Number,
            default: 0
        },
        doctorTips: {
            type: Object,
            default() {
                return {};
            }
        }
    },
    data() {
        return {
            rate: 100
        };
    },
    components: {
        CIcon,
        ImCardDoctorReception
    },
    lifetimes: {
        attached() {
        }
    },
    methods: {
    }
};
</script>

<style lang="less" scoped>
.step-bg {
    background: linear-gradient(134deg, #00CFA3 0%, #05CFCD 61%, #00D3EA 100%);
}
.step {
    position: fixed;
    width: 100%;
    z-index: 89;
    left: 0;

    .step-top-has-bg {
        color: rgba(255, 255, 255, .8);
        background: linear-gradient(134deg, #00CFA3 0%, #05CFCD 61%, #00D3EA 100%);
        margin-top: .17rem;

        .has-bg-text {
            color: inherit;
        }

        .has-bg-text-selected {
            color: #fff;
            font-weight: bold;
        }

        .step-top-has-bg-icon {
            color: inherit;
        }

        &-superfine-after {
            display: none;
        }
    }
}
.step-status {
    color: #555;
    font-size: 0;
    background-color: #F4F4F4;
    text-align: center;
    line-height: .38rem;
    height: .38rem;
    display: flex;
    flex: 1 1 auto;

    &-item {
        display: flex;
        flex: 1 1 auto;
        align-items: center;
        flex-direction: column;
        justify-content: center;

        .row {
            position: relative;
            width: 100%;

            .icon {
                position: absolute;
                top: 0;
                right: 0;
                transform: translate(50%, 0);
                display: flex;
                align-items: center;
                justify-content: center;
            }
        }
    }
}
.step-bk {
    height: .38rem;
}
.step-process-tip {
    border-radius: 5px;
    background-color: #fff;
    position: relative;
    margin-top: 8px;
    margin-left: -35px;
    width: 70px;
    box-shadow: 1px 3px 10px rgba(0, 0, 0, .2);
    transition: left .5s;
    &::after {
        content: '';
        position: absolute;
        top: -15px;
        left: 50%;
        margin-left: -8px;
        width: 0;
        height: 0;
        border: 8px solid;
        border-color: transparent transparent #fff;   
    }
    &.last::after {
        margin-left: 12px;
        top: -6px;
        border: 4px solid;
        border-color: transparent #fff #fff transparent;
    }
}

.step-process-inner {
    background-color: #00C8C8;
    height: .02rem;
    transition: width .5s;
}

.step-icon-gap {
    color: #BBBBBB;
}

.card-doctor-reception {
    padding: 0 .17rem;
}

.tips-place {
    background-color: #F4F4F4;
}

.card-doctor-reception-place {
    background-color: #F4F4F4;
    height: .8rem;
}
</style>
