<template>
    <view class="profile-wrapper" @tap="hospitalItemTap">
        <view>
            <b-img
                has-compress
                :extra="{column: 2}"
                :src="hospital.logo ? hospital.logo : defaultHospitalLogo"
            />
        </view>
        <view class="hospital-info">
            <view>
                <text v-if="hospital.name" class="c-font-big-less c-line-clamp1">{{ hospital.name }}</text>
            </view>
            <view class="hospital-lables">
                <view
                    v-for="(item, index) in hospital.tags"
                    :key="index"
                    class="c-gap-right-small"
                >
                    <!-- 医院简介详情页对应的三甲样式 -->
                    <c-label
                        v-if="item"
                        :text="item === '三甲' ? [item] : item"
                        :color="item === '三甲' ? 'box_green' : 'gray'"
                    />
                </view>
            </view>
        </view>
    </view>
</template>
<script>
/**
 * @file 医院简介
 * @author zhoushisen
 */
import Label from '@baidu/med-ui/components/Label/Label';
import Image from '@components/common/image';
import {navigate} from '@utils/navigate';

export default {
    config: {
        component: true
    },
    props: {
        hospital: {
            type: Object,
            default: () => ({})
        }
    },
    data() {
        return {
            defaultHospitalLogo: 'https://med-hospital.cdn.bcebos.com/hospital-icons/102145.png'
        };
    },
    components: {
        'c-label': Label,
        'b-img': Image
    },
    methods: {
        hospitalItemTap() {
            let url = this.hospital.url;
            navigate({
                url
            });
        }
    }
};
</script>
<style lang="less" scoped>
.profile-wrapper {
    width: 100%;
    margin-top: 0.15rem;
    box-sizing: border-box;
    padding: 0.12rem 0.15rem;
    background-color: #f5f5f5;
    border-radius: 0.1rem;
    display: flex;
    align-items: center;

    .hospital-info {
        box-sizing: border-box;
        flex: 1;
        width: calc(100% - 0.58rem);
        padding-left: 0.1rem;

        .hospital-lables {
            display: flex;

            /deep/ .label__sanjia {
                width: 0.47rem;
                height: 0.16rem;
            }
        }
    }
}

</style>
