<template>
    <view class="appointlist-doctor-info" @tap="handleDoctorHome">
        <view 
            class="appointlist-doctor-info__info"
        >
            <view class="appointlist-doctor-info__info__avatar c-gap-right-xmiddle">
                <b-img
                    :src="expert.expertLogo ? expert.expertLogo : defaultExpertLogo"
                    width=".48rem"
                    height=".48rem"
                    class="expert-image"
                    has-border
                />
            </view>
            <view>
                <view>
                    <text class="c-font-large c-font-wb">{{ expert.expertName }}</text>
                    <text class="c-gap-left-small">{{ expert.expertLevel }}</text>
                    <view v-if="expert.expertTags" class="expert-tag">
                        <text
                            v-for="(expertTag, index) in expert.expertTags"
                            :key="index"
                            style="margin-left: 0.07rem"
                        >{{ expertTag }}</text>
                    </view>
                </view>
                <view class="expert-hospital">{{ expert.hospital }}</view>
                <view class="appointlist-doctor-info__info__labels">
                    <c-label
                        v-for="(tag, tagIndex) in expert.hospitalTags"
                        :key="tagIndex"
                        :text="tag"
                        :disable-sanjia="false"
                        margin="3"
                        color="green"
                    />
                </view>
            </view>
        </view>
        <c-truncation
            v-if="expert.goodAt"
            :text="expert.goodAt"
            :line-num="2"
            :font-size="14"
            :slot-width="42"
            type="navigate"
            btn-color="#999"
            ellipsis="..."
            more-text="了解更多"
            more-icon="right"
            @tapMore="handleDoctorHome"
        >
            <image
                v-if="expert.gootAtImgNew"
                slot="label"
                :src="expert.gootAtImgNew"
                mode="widthFix"
                class="appointlist-doctor-info__goodat--logo"
            />
        </c-truncation>
    </view>
</template>

<script>
/**
 * @file 页面头部 医生信息
 * @author 颜廷熙
 * @categories 业务组件
 * @tags [component]
 */

import CLabel from '@baidu/med-ui/components/Label/Label';
import CTruncation from '@baidu/med-ui/components/Truncation/Truncation';
import Image from '@components/common/image';

import {Mars as MarsUtils} from '@baidu/med-utils';
import {ubcSend} from '@utils/log';

export default {
    config: {
        component: true
    },
    props: {
        /**
         * 专家信息
         */
        expert: {
            type: Object,
            default: () => ({})
        }
    },
    components: {
        CLabel,
        CTruncation,
        'b-img': Image,
    },
    methods: {
        handleDoctorHome() {
            ubcSend({
                type: 'clk',
                value: 'doctor_info'
            });
            MarsUtils.navigate({
                url: this.expert.url,
                extra: {
                    mod: 'appointlist-expert-more'
                }
            });
        }
    }
};
</script>
<style lang="less" scoped>
.appointlist-doctor-info {
    padding: .18rem .13rem .14rem;
    
    &__info {
        display: flex;
        align-items: center;
        margin-bottom: 0.13rem;

        &__avatar {
            flex: 0 0 auto;
        }


        &__labels {
            display: inline-block;
            margin-left: 6px;
        }
    }

    &__goodat--logo {
        width: .3rem;
        position: relative;
        top: 1px;
        margin-right: .07rem;
    }

    .expert-hospital {
        display: inline-block;
        font-size: .14rem;
        color: #525252;
    }

    .expert-image {
        width: .7rem;
        height: .7rem;
    }
    .expert-tag {
        display: inline-block;
        position: relative;
        margin-left: 0.06rem;
        &::before {
            top: 0.05rem;
            left: 0;
            position: absolute;
            display: block;
            width: 1px;
            height: 0.11rem;
            background: #F0F0F0;
            content: '';
        }
    }
}
</style>
