<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
                    has-compress
                    :src="expert.expertPic ? expert.expertPic : defaultExpertLogo"
                    width="0.48rem"
                    height="0.48rem"
                    mode="aspectFill"
                    has-border
                    :hack-white-stroke="false"
                    :extra="{column: 2}"
                />
            </view>
            <view>
                <view>
                    <text class="c-font-large c-font-wb">{{ expert.expertName }}</text>
                    <text class="c-gap-left-small">{{ expert.title }}</text>
                    <!-- 医生tag -->
                    <view v-if="expert.tags" class="expert-tag">
                        <text
                            v-for="(expertTag, index) in expert.tags"
                            :key="index"
                            style="margin-left: 0.07rem;"
                        >{{ expertTag.name }}</text>
                    </view>
                </view>
                <view class="expert-hospital">{{ expert.hospitalName }}</view>
                <!-- 医院tag -->
                <view class="appointlist-doctor-info__info__labels">
                    <c-label
                        v-for="(tag, tagIndex) in expert.hospitalTags"
                        :key="tagIndex"
                        :text="tag.name"
                        :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.goodAt"
                slot="label"
                src="https://med-fe.cdn.bcebos.com/gh/goodat_icon.png"
                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: () => ({})
        },
        options: {
            type: Object,
            default: () => ({})
        }
    },
    components: {
        CLabel,
        CTruncation,
        'b-img': Image,
    },
    methods: {
        handleDoctorHome() {
            ubcSend({
                type: 'clk',
                value: 'doctor_info'
            });
            let url = '/pages/wz/experthome/index?pd=med&openapi=1&from_sf=1&resource_id=5216&vn=med'
                + `&expert_id=${this.expert.outCoreId}&title=${this.expert.expertName}医生&tab=register_comments`
                + `&from=appointslistv1&atn=experthome&word=问医生&sf_ref=${this.options.sf_ref}`;
            MarsUtils.navigate({
                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>
