<template>
    <view class="man-health-expert" @tap="onConsultBtn">
        <view class="man-health-expert__avatar" :style="{width: leftWidth}">
            <slot></slot>
        </view>
        <view class="man-health-expert__info" :style="{marginLeft: leftWidth, width: 'calc(100% - ' + leftWidth + ')'}">
            <view class="c-color-333 man-health-expert__info__title">
                <text
                    class="c-font-large c-gap-right-small man-health-expert__info__title__name"
                    >{{ expert.expertName }}</text
                >
                <text class="man-health-expert__info__title__subname">{{
                    expert.expertLevel
                }}</text>
            </view>
            <view
                class="c-color-333 c-font-small man-health-expert__info__info"
            >
                <text class="c-gap-right">{{ expert.expertDepartment }}</text>
                <view class="c-line-clamp1 man-health-expert__info__info__hospital">
                    <text>{{ expert.expertHospital }}</text>
                </view>
                <text
                    v-if="expert.label"
                    class="man-health-expert__info__info__label c-font-tiny"
                    style="margin-top: -2px"
                >
                    {{ expert.label }}
                </text>
            </view>
            <view
                v-if="expert.expertGoodAt"
                class="c-font-small c-color c-line-clamp2 man-health-expert__info__goodAt"
            >
                <rich-text :nodes="expert.expertGoodAt"></rich-text>
            </view>
            <view v-if="expert.serveice" class="c-font-small c-color-gray"
                >累计线上服务：{{ expert.serveice }}人</view
            >
            <view class="man-health-expert__info__bottom c-gap-top-small">
                <view class="man-health-expert__info__bottom__price">
                    <text
                        v-if="expert.newPrice"
                        class="man-health-expert__info__bottom__price-new c-inline-block"
                        :class="screenWidth <= 320 ? 'man-health-expert__info__bottom__price-new-small': ''"
                    >
                        {{ expert.newPrice }}
                    </text>
                    <text
                        v-if="expert.originalPrice"
                        class="c-color-gray man-health-expert__info__bottom__price-original c-inline-block"
                        :class="screenWidth <= 320  ? 'man-health-expert__info__bottom__price-original-small': ''"
                    >
                        {{ expert.originalPrice }}
                    </text>
                </view>
                <view
                    v-if="expert.btnText"
                    :class="{'man-health-expert__info__bottom__btn': true, 'man-health-expert__info__bottom__btn-small': screenWidth <= 375 && expert.btnText.length > 4}"
                    :style="expert.toast ? 'background: #bbb': ''"
                    @tap.stop="onConsultBtn"
                >
                    {{expert.btnText}}
                </view>
            </view>
        </view>
    </view>
</template>

<script>
/**
 * @file 问诊-男性健康日专家信息
 * @author mayifan02
 */
import * as core from '../../utils/core';
import * as log from '../../utils/log';
import {toLoginPage} from '../../utils/login';
export default {
    config: {
        component: true
    },
    props: {
        type: {
            type: String
        },
        expert: {
            type: Object
        },
        leftWidth: {
            type: String,
            default: '34.87vw'
        },
        screenWidth: {
            type: Number
        },
        isLogin: {
            type: Boolean,
            default: false
        }
    },
    components: {},
    data() {
        return {};
    },
    options: {},
    methods: {
        // 咨询按钮点击
        onConsultBtn() {
            let extra = {
                action: this.type,
                id: this.expert.id || this.expert.expertId,
                btnText: this.expert.btnText
            };

            if (!this.isLogin) {
                toLoginPage();
                return;
            }
            if (this.expert.toast) {
                this.$api.showToast({
                    icon: 'none',
                    title: this.expert.toast
                });
                log.send({
                    action: 'navigate',
                    extra
                });
                return;
            }

            this.$emit('handleConsultBtn', {expert: this.expert, extra});
        }
    }
};
</script>

<style lang="less" scoped>
.man-health-expert {
    position: relative;
    background-image: url(https://medactivity.cdn.bcebos.com/med-health/card-bj.png);
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-color: #fff;
    border-radius: 8px;
    margin-bottom: 15px;
    padding: 15px 4.34vw 20px 0;
    overflow: hidden;
    min-height: 160px;
    box-sizing: border-box;
    display:flex;
    align-items:center;
    &__avatar {
        position: absolute;
        height: 100%;
        left: 0;
        top: 0;
    }
    &__pic--small {
        left: 3.78vw;
        top: 15px;
    }
    &__info {
        position: relative;
        flex: 1;
        &__title {
            font-weight: 600;
            &__name {
                font-weight: 600;
            }
            &__subname {
                font-size: 13px;
            }
        }
        &__info {
            font-weight: 600;
            position: relative;
            display: flex;
            align-items: center;
            &__hospital {
                flex: 1;
            }
            &__label {
                background-color: #00c8c8;
                color: #fff;
                line-height: 16px;
                height: 16px;
                padding: 0 6px;
                border-radius: 8px;
                margin-left: 8px;
                line-height: 16px;
                display: inline-block;
            }
        }
        &__bottom {
            display: flex;
            justify-content: space-between;
            align-items: center;
            &__btn {
                background: #00c8c8;
                color: #fff;
                text-align: center;
                padding: 8px 11px;
                border-radius: 15px;
                line-height: 14px;
                font-size: 14px;
                font-weight: 600;
                &-small {
                    padding-left: .04rem;
                    padding-right: .04rem;
                }
            }
            &__price {
                &-new {
                    font-size: 15px;
                    font-weight: 600;
                    color: #EA252E;
                    &-small {
                        font-size: 14px;
                    }
                }
                &-original {
                    font-size: 13px;
                    margin-left: 5px;
                    text-decoration: line-through;
                    &-small {
                        font-size: 12px;
                    }
                }
            }
        }
        &__goodAt {
            margin-bottom: 0px;
        }
    }
    &-color-1515 {
        color: #151515;
    }
}
</style>
