<template>
    <navigate
        :url="expert.url"
        class="qa-med-expert-info">
        <view
            class="c-row"
            >
            <!-- 头像 -->
            <view class="c-span2 avatar">
                <c-image
                    :src="expert.expertPic"
                    width=".48rem"
                    height=".48rem"
                    is-round
                    hack-white-stroke
                />
            </view>
            <!-- 信息 -->
            <view class="c-span10">
                <view
                    >
                    <view class="expert-name line">
                        {{expert.expertName}}
                    </view>
                    <view class="expert-level line">
                        {{ 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 != '0'" class="wa-doctor-star">
                    <view class="line-block">
                        <c-stars
                            :num="expert.star"
                            :size="12"
                            icon-color="#ff6050"
                            empty-icon-color="#ff6050"
                            text-color="#ff6050"
                            :text="expert.star">
                        </c-stars>
                    </view>
                    <view class="line c-gap-left c-color-gray">({{expert.commentCount}}人已评价)</view>
                </view>
                <view class="c-color c-font-normal 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">
                    <!-- style='dxzs'表示命中定向流程优化实验 -->
                    <c-label
                        v-for="(text, index) in expert.tags"
                        :key="index"
                        :text="text"
                        color="gray"
                        class="c-gap-right-small"
                        :class="{'wa-label-color': expert.style === 'dxzs'}"/>
                </view>
                <rich-text
                    class="c-line-clamp2 c-color c-font-normal good-at"
                    :nodes="expert.goodAt">
                </rich-text>
                <view
                    v-if="expert.consultArr && expert.consultArr.length">
                    <!-- 此处不使用slink，避免在小程序下出现重新搜索后，组件数据不更新的问题 -->
                    <view>
                        <view
                            v-for="(consult, index) in expert.consultArr"
                            :key="index"
                            @tap.stop="askDoctor(expert.buttonMsUrl || expert.buttonUrl, consult.type);"
                            class="c-slink c-slink-auto c-gap-top button"
                            :class="{'c-gap-right': index+1!==expert.consultArr.length}"
                        >
                            <text class="button-text">{{consult.text}}</text>
                            <text class="c-color-orange c-gap-left-small button-info">({{consult.abstract}})</text>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </navigate>
</template>

<script>
/**
* @file 医生列表
* @author chenshuo04
*/
import Icon from '@baidu/med-ui/components/Icon/Icon';
import Navigate from './navigate';
import {navigate} from '../../utils/navigate';
import image from './image';
import Stars from '@baidu/med-ui/components/Stars/Stars';
import Label from '@baidu/med-ui/components/Label/LabelOld';
export default {
    mounted() {
    },
    config: {
        component: true
    },
    props: {
        expert: {
            type: Object
        }
    },
    components: {
        'navigate': Navigate,
        'c-icon': Icon,
        'c-stars': Stars,
        'c-label': Label,
        'c-image': image
    },
    options: {
        addGlobalClass: true
    },
    methods: {
        askDoctor(url, type) {
            if (url) {
                navigate({
                    url: `${url}&askType=${type}`,
                    extra: {
                        name: `askType_${type}`
                    }
                });
            }
        }
    }
};
</script>

<style lang="less">
/* csshint-disable */
.qa-med-expert-info {
    font-size: 12px;
    .avatar {
        width: .48rem;
        flex: none;
        box-sizing: content-box;
    }
    .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: #ff6050;
    }
    .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;
}
</style>
