<template>
    <view class="health-doctor-info c-gap-top c-gap-inner-top" @tap="onClick">
        <view class="health-doctor-info-img-wrapper">
            <c-image
                has-compress
                :src="doctorData.docImg"
                width=".36rem"
                height=".36rem"
                radius="50%"
                lazy-load
                :extra="{column: 2}"
            />
            <text
                v-if="(doctorData.docLink || doctorData.docSwanUrl) && doctorData.docCard"
                :style="{
                    backgroundImage: `url(${doctorData.docCard})`
                }"
                class="health-doctor-info-card"
            ></text>
        </view>
        <view class="health-doctor-info-doc c-line-clamp1">
            <view class="health-doctor-name">
                <text>{{ doctorData.docName }}</text>
                <text v-if="doctorData.jobTitle" class="health-doctor-info-job-title">{{ doctorData.jobTitle }}</text>
            </view>
            <view
                v-if="doctorData.jobTitle || doctorData.department || doctorData.legalName"
                class="health-doctor-location-info c-line-clamp1"
            >
                <view class="c-line-clamp1">
                    <text
                        v-if="doctorData.department"
                        class="health-doctor-info-text"
                    >{{ doctorData.department }}</text>
                    <text class="health-doctor-info-text">{{ doctorData.legalName }}</text>
                </view>
                <view v-if="doctorData.tags && doctorData.tags.length > 0" class="health-doctor-info-tags">
                    <view
                        v-for="(item, index) in doctorData.tags"
                        :key="index"
                        class="health-doctor-info-tags-tag"
                    >
                        <text>{{ item }}</text>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>
<script>

/**
 *  @file index.js
 *  @author yantingxi
 */

import {navToBdBoxH5} from './../../../utils/navigate';
import {send} from './../../../utils/log';
import CImage from '@components/common/image';
export default {
    config: {
        component: true
    },
    props: {
        doctorData: {
            type: Object,
            default: () => ({})
        }
    },
    components: {
        CImage
    },
    methods: {
        onClick(event) {
            if (this.doctorData.homepage) {
                navToBdBoxH5(this.doctorData.homepage);
                // 发送日志
                send({
                    type: 'l',
                    action: 'navigate',
                    extra: {
                        mod: 'detail-doctor'
                    }
                });
            }
        }
    }
};
</script>
<style lang="less" scoped>
.health-doctor-info {
    display: flex;
    flex-direction: row;
    justify-content: center;
    text-align: justify;
    background-color: #fff;
    font-size: .16rem;

    &-job-title {
        font-size: .13rem;
        margin-left: .05rem;
    }

    &-card {
        display: inline-block;
        width: .15rem;
        padding-top: 30%;
        position: absolute;
        bottom: 0;
        right: 0;
        background-size: cover;
    }

    &-tags {
        display: flex;
        align-items: center;

        &-tag {
            border: 1px solid #f1f1f1;
            padding: 2px 5px;
            font-weight: 400;
            font-style: normal;
            line-height: 10px;
            vertical-align: middle;
            text-decoration: none;
            display: inline-block;
            overflow: hidden;
            color: #999;
            box-sizing: content-box;
            margin-bottom: 2px;
            border-radius: 24px;
            font-size: 10px;
        }
    }
}

.health-doctor-info-doc {
    flex: 1;
    padding-left: .1rem;

    .health-doctor-name {
        color: #333;
        line-height: .2rem;
    }
}

.health-doctor-location-info {
    color: #999;
    font-size: .13rem;
    display: flex;
}

.health-doctor-info-img {
    width: .36rem;
    height: .36rem;
    border-radius: 50%;

    &-wrapper {
        position: relative;
        height: .36rem;
        margin-top: .01rem;
    }
}

.health-doctor-info-text {
    margin-right: .05rem;
}

</style>
