<template>
    <view class="info-wrap">
        <navigate
            :url="expert.unifiUrl || expert.sfUrl || expert.url || expert.targetUrl"
            class="qa-med-expert-info"
        >
            <view
                class="c-row"
            >
                <!-- 头像 -->
                <view class="c-span2 avatar">
                    <c-image
                        :src="expert.expertPic"
                        has-compress
                        def-src="https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=3070734021,137864038&fm=179&app=35&f=PNG?w=144&h=144&s=88011F7C4F236B241E5E49D9030070B9"
                        width=".48rem"
                        height=".48rem"
                        is-round
                        hack-white-stroke
                        :extra="{column: 2}"
                    />
                </view>
                <!-- 信息 -->
                <view class="c-span10 expert-content" :class="{'expert-content-border': showBorder}">
                    <view>
                        <view class="expert-name line c-gap-right">{{ expert.expertName }}</view>
                        <view class="expert-level line c-gap-right">{{ expert.expertLevel }}</view>
                        <c-label
                            v-if="expert.isAuthenticated"
                            :text="expert.isAuthenticated"
                            color="gray"
                            class="c-gap-left-small auth"
                        />
                    </view>
                    <view v-if="expert.commentCount && expert.commentCount != '0'" class="wa-doctor-star">
                        <view class="line-block">
                            <c-stars
                                :num="expert.star"
                                :size="12"
                                icon-color="#ff6050"
                                text-color="#ff6050"
                                :text="expert.star"
                            />
                        </view>
                        <view class="line c-gap-left c-color-gray">({{ expert.commentCount }}参与评价)</view>
                    </view>
                    <view v-if="expert.commentTxt" class="c-color c-font-normal c-line-clamp1">
                        <view class="c-gap-right line">
                            {{ expert.commentTxt }}
                        </view>
                    </view>
                    <!-- eslint-disable max-len -->
                    <view
                        v-if="expert.expertHospital"
                        class="c-color c-font-normal"
                        :style="{marginTop: '3px'}"
                        :class="expert.isOpenWenzhen === '1' && expert.isOpenGuahao === '1' ? 'hospital-major-line c-line-clamp2' : 'c-line-clamp1'"
                    >
                        <view class="c-gap-right line">{{ expert.expertHospital }}</view>
                        <view class="c-gap-right line">{{ expert.expertDepartment }}</view>
                    </view>
                    <view v-if="expert.tags && expert.tags.length > 0">
                        <c-label
                            v-for="(text, index) in expert.tags"
                            :key="index"
                            :text="text"
                            color="gray"
                            class="c-gap-right-small"
                        />
                    </view>
                    <rich-text
                        class="c-line-clamp2 c-color c-font-normal good-at"
                        :nodes="expert.goodAt"
                    />
                    <view v-if="follow" class="expert-follow">
                        <b-follow-btn
                            :favorite-id="expert.id"
                            :follow="1"
                            :relation-id="expert.relation_id"
                            :content="expert"
                            :selected-index="selectedIndex"
                            :central-concern-doctor="centralConcernDoctor"
                        />
                    </view>
                </view>
            </view>
        </navigate>
        <view
            class="expert-btn-wrap"
        >
            <view v-if="expert.isOpenWenzhen === '1'" class="wz-icon">可咨询</view>
            <view v-if="expert.isOpenGuahao === '1'" class="yh-icon">可挂号</view>
        </view>
    </view>
</template>

<script>
/**
* @file 医生-搜索
* @author huanghongwei
* @categories 业务组件
* @tags [component]
*/
import CStars from '@baidu/med-ui/components/Stars/Stars';
import CLabel from '@baidu/med-ui/components/Label/LabelOld';
import Navigate from '../common/navigate';
import BFollowBtn from '@commonComponents/follow-btn';

import CImage from '../common/image';
export default {
    config: {
        component: true
    },
    props: {
        // 医生信息
        expert: {
            type: Object,
            default: () => {
                return {};
            }
        },
        // 是否显示边框
        showBorder: {
            'type': Boolean,
            'default': false
        },
        /**
         * 是否开启关注功能
         */
        follow: {
            type: Boolean,
            default: false
        },
        /**
         * tab点击索引
         */
        selectedIndex: {
            type: Number,
            default: 0
        },
    },
    data() {
        return {
            centralConcernDoctor: true
        };
    },
    components: {
        Navigate,
        CStars,
        CLabel,
        CImage,
        BFollowBtn
    },
    options: {
        addGlobalClass: true
    }
};
</script>

<style lang="less" scoped>
/* csshint-disable */
.info-wrap {
    position: relative;

    .expert-btn-wrap {
        position: absolute;
        top: 0;
        right: -15px;
        z-index: 1;
        color: #fff;
        text-align: center;
        font-size: 12px;
    }

    .wz-icon {
        width: 50px;
        height: 20px;
        background: #00c8c8;
        border-radius: 40px 0 0 40px;
        margin-bottom: 5px;
    }

    .yh-icon {
        width: 50px;
        height: 20px;
        background: #489af6;
        border-radius: 40px 0 0 40px;
    }
}

.qa-med-expert-info {
    font-size: 12px;

    .avatar {
        width: .48rem;
        flex: none;
        box-sizing: content-box;
    }

    .expert-content {
        position: relative;
        box-sizing: border-box;
        padding-right: .15rem;
    }

    .expert-follow {
        position: absolute;
        right: .15rem;
        top: 0;
    }

    .expert-content-border {
        padding-bottom: .15rem;
        border-bottom: 1px solid #f1f1f1;
    }

    .good-at {
        margin-bottom: 0;
        margin-top: .03rem;
    }

    .auth {
        position: relative;
        top: -2px;
    }

    .expert-name {
        font-size: 17px;
        color: #333;
        font-weight: bold;
    }

    .expert-level {
        font-size: 13px;
        color: #333;
        font-weight: bold;
    }

    .color-orange {
        color: #f60;
    }

    .line {
        display: inline;
    }

    .line-block {
        display: inline-block;
    }

    .button {
        padding-left: .08rem;
        padding-right: .08rem;

        .button-text {
            font-size: 14px;
        }

        .button-info {
            font-size: 12px;
        }
    }
    @media only screen and (max-width: 320px) {
        .button {
            padding-left: .05rem;
            padding-right: .05rem;

            .button-text {
                font-size: 12px;
            }

            .button-info {
                font-size: 12px;
            }
        }
    }
}

.wa-label-color {
    color: #02b7ca;
    border-color: #92dbe2;
}

.high-color {
    color: #00c8c8;
    font-style: normal;
}

.hospital-major-line {
    width: 220px;
}
</style>
