<template>
    <b-navigate :url="preConsultation.btn ? preConsultation.btn.url : ''" :log="{type: 'clk', value: 'ask_doctor_card'}">
        <view class="preconsult">
            <b-img
                :src="preConsultation.img"
                class="preconsult__img c-gap-right"
                has-border
            />
            <view class="preconsult__info">
                <view>
                    <text class="preconsult__info__title c-font-17 color-333">{{ preConsultation.title }}</text>
                    <view class="preconsult__info__label__wrap">
                        <view
                            v-for="(l, i) in preConsultation.labels"
                            :key="'label-' + i"
                            class="preconsult__info__label"
                        >
                            <view :style="{color: l.color, borderColor: l.borderColor}" class="preconsult__info__label__inner"><view class="preconsult__info__label__inner__text">{{ l.name }}</view></view>
                        </view>
                    </view>
                </view>
                <view
                    v-for="(t, i) in preConsultation.info"
                    :key="'text-' + i"
                    class="c-color-normal c-font-normal"
                >{{ t }}</view>
                <rich-text :nodes="preConsultationText" class="c-color-normal c-font-normal"/>
                <c-button
                    :height="28"
                    :font-size="12"
                    type="primary"
                    primary-color="#00C8C8"
                    border-radius="14px"
                    class="preconsult__info__btn"
                >
                    {{ preConsultation.btn ? preConsultation.btn.text : '咨询' }}
                </c-button>
            </view>
        </view>
    </b-navigate>
</template>

<script>
/**
* @file 诊前咨询
* @author wangying51
*/

import BNavigate from '../common/navigate';
import BImage from '../common/image';
import CButton from '@baidu/med-ui/components/Button/Button';


export default {
    config: {
        component: true
    },
    options: {
        addGlobalClass: true
    },
    props: {
        /**
        * 诊前咨询参数
        */
        preConsultation: {
            type: Object,
            required: true
        }
    },
    computed: {
        preConsultationText() {
            return this.preConsultation.text
                .replace(new RegExp('<b>', 'g'), '<span style="color: #FF6F61;">')
                .replace(new RegExp('</b>', 'g'), '</span>');
        }
    },
    data() {
        return {
        };
    },
    components: {
        'b-img': BImage,
        'c-button': CButton,
        'b-navigate': BNavigate
    },
    methods: {
    }
};
</script>
<style lang="less" scoped>
.preconsult {
    display: flex;
    padding: .15rem .2rem .13rem .15rem;
    background-color: #fff;
    box-shadow: 0 3px 20px rgba(0, 0, 0, .08);
    border-radius: .08rem;
    &__info {
        position: relative;
        width: calc(100% - 0.48rem - 0.1rem);
        &__title {
            margin-right: 6px;
            vertical-align: middle;
        }
        &__label {
            display: inline-block;
            box-sizing: border-box;
            vertical-align: middle;
            margin-right: 6px;
            &__wrap {
                display: inline-block;
                vertical-align: middle;
            }
            &__inner {
                box-sizing: border-box;
                text-align: center;
                display: table;
                overflow: hidden;
                font-size: 10px;
                height: 16px;
                line-height: 16px;
                border-radius: 24px;
                border: 1px solid #999;
                padding-left: 6px;
                padding-right: 6px;
                &__text {
                    vertical-align: middle;
                    display: table-cell;
                }
            }
        }
        &__btn {
            position: absolute;
            top: 0;
            right: -.05rem;
            z-index: 1;
            min-width: 47px;
        }
    }
}
@media only screen and (max-width: 375px) {
    .preconsult .preconsult__info__label__wrap {
        display: block;
    }
}
</style>
