<template>
    <view class="b-expert-item" @tap="expertItemTap(expert.unifiUrl || expert.url,'each_doc')">
        <b-img
            has-compress
            :extra="{column: 2}"
            :src="expert.expertPic ? expert.expertPic : defaultExpertLogo"
            :hack-white-stroke="expert.expertPic ? true : false"
            class="expert-image c-gap-right-middle"
        />
        <view class="expert-info">
            <view class="c-line-clamp1 line-short c-line-height">
                <text
                    v-if="expert.expertName"
                    class="c-color-title c-font-medium c-gap-right-xsmall"
                >
                    {{ expert.expertName }}</text>
                <text
                    v-if="expert.expertLevel"
                    class="c-font-normal c-gap-right-xsmall c-color-gray"
                >{{ expert.expertLevel }}</text>
                <c-label
                    v-for="(item,index) in expert.servicesTag"
                    v-if="expert.servicesTag && expert.servicesTag.length"
                    :key="index"
                    :text="item"
                    color="#858585"
                    bg-color="rgba(133,133,133,0.06)"
                    border-color="rgba(133,133,133,0.50)"
                    custom
                    class="c-gap-right-xsmall"
                />
            </view>
            <view class="expert-epartment">
                <view class="c-line-clamp1 c-font-normal c-color-title c-line-height">
                    <text v-if="expert.expertDepartment" class="c-gap-right">{{ expert.expertDepartment }}</text>
                    <text v-if="expert.expertHospital">{{ expert.expertHospital }}</text>
                </view>
                <c-label
                    v-if="expert.hospitalLevel || expert.hospitalTag"
                    :text="labelArr"
                    color="box_green"
                    class="c-gap-left-middle level"
                />
            </view>
            <view
                v-if="expert.goodAtNew"
                :class="expert.recReason && expert.recReason.length ? '' : 'c-gap-inner-bottom-xsmall'"
            >
                <rich-text
                    class="c-line-clamp1 c-color-title c-font-normal c-line-height"
                    :nodes="expert.goodAtNew | filterGoodAt"
                >
                </rich-text></view>
            <!-- 优势 -->
            <view
                v-if="expert.recReason && expert.recReason.length"
                class="c-line-clamp2 c-color-gray c-font-normal"
                :class="currentType === '0' ? 'c-line-clamp2' : 'c-line-clamp1'"
            >
                <text>优势：</text>
                <text
                    v-for="(item,index) in expert.recReason"
                    :key="index"
                    class="advantage"
                >
                    <text>{{ item }}</text>
                    <text v-if="index !== expert.recReason.length - 1" class="line"></text>
                </text>
            </view>
            <!-- 科普之星内容 -->
            <view
                v-if="currentType === '1' && expert.kpzxContent && expert.kpzxContent.title"
                class="science c-gap-top-middle c-gap-bottom"
                @tap="expertItemTap(expert.kpzxContent.url,'artic_mode_clk','2')"
            >
                <!-- eslint-disable max-len -->
                <view
                    v-if="expert.kpzxContent.picture && (expert.kpzxContent.data_type_norm === '102' || expert.kpzxContent.data_type_norm === '101')"
                    class="img-box"
                    :style="{
                        'background-image': 'url(' + expert.kpzxContent.picture + ')',
                    }"
                >
                    <c-icon
                        name="play"
                        font-size="30px"
                        class="play-icon"
                    />
                    <view class="video-duration">
                        {{ expert.kpzxContent.long }}
                    </view>
                </view>
                <!-- eslint-enable max-len -->
                <view class="science-content">
                    <view class="c-font-normal c-color-title c-line-clamp1">
                        {{ expert.kpzxContent.title }}
                    </view>
                    <view class="c-font-normal c-color-gray c-line-clamp2">
                        {{ expert.kpzxContent.abstract || expert.kpzxContent.content }}
                    </view>
                </view>
            </view>
            <!-- 诊疗能手 -->
            <view
                v-if="(currentType === '2' || currentType === '3') && expert.seviceLabel && expert.seviceLabel.length"
                class="clinic-list c-gap-top-middle c-gap-bottom"
            >
                <view
                    v-for="(item,index) in expert.seviceLabel"
                    :key="index"
                    class="clinic-item c-color-title c-font-normal"
                    @tap="expertItemTap(item.unifiUrl, item.logstr)"
                >
                    {{ item.title }}
                </view>
            </view>
        </view>
    </view>
</template>

<script>
/**
* @file 医生
*/
import Label from '@baidu/med-ui/components/Label/Label';
import Image from '../../components/common/image';
import CIcon from '@baidu/med-ui/components/Icon/Icon';

import {navigate} from '../../utils/navigate';

export default {
    config: {
        component: true
    },
    props: {
        expert: Object,
        /**
        *
        * 0全部医生; 1科普之星; 2可问诊; 3可挂号;
        */
        currentType: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            defaultBackgroundImage: 'https://selfpage-gips.cdn.bcebos.com/selfvideo/314fb060f31d3e89f5ad5aba35633217.jpeg',
            defaultExpertLogo: 'https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=3070734021,137864038&fm=179&app=35&f=PNG?w=144&h=144&s=88011F7C4F236B241E5E49D9030070B9',
            labelArr: []
        };
    },
    components: {
        'c-label': Label,
        'b-img': Image,
        CIcon
    },
    watch: {
        expert: {
            handler(item) {
                let levelArr = [];
                if (item.hospitalLevel) {
                    levelArr.push(item.hospitalLevel);
                }
                if (item.hospitalTag) {
                    levelArr.push(item.hospitalTag);
                }
                this.labelArr = levelArr;
            },
            immediate: true
        },
    },
    filters: {
        filterGoodAt(goodAt) {
            return '擅长：' + goodAt.replace(new RegExp('<b>', 'g'), '<span style="color: #00c8c8;font-weight: bold;">')
                .replace(new RegExp('</b>', 'g'), '</span>');
        }
    },
    methods: {
        expertItemTap(url, log = '', urlType = 0) {
            let expert = this.expert;
            navigate({
                url,
                urlType: urlType,
                log: {
                    type: 'clk',
                    value: log,
                    ext: {
                        doctorId: expert.expertId || ''
                    }
                }
            });
        },
    }
};
</script>
<style lang="less" scoped>
.b-expert-item {
    position: relative;
    display: flex;
    align-items: flex-start;
    border-radius: 9px;
    box-sizing: border-box;
    background: #fff;

    .c-line-height {
        line-height: .23rem;
    }

    .expert-info {
        box-sizing: border-box;
        flex: 1;
        width: calc(100% - 58px);
    }

    .expert-image {
        width: .55rem;
        height: .55rem;
    }

    .font-weight-bold {
        font-weight: bold;
    }

    .line-short {
        padding-right: 38px;
        display: flex;
        align-items: center;
    }

    .expert-epartment {
        display: flex;
        align-items: center;
        justify-content: flex-start;

        .level {
            flex-shrink: 0;
        }
    }

    .advantage {
        position: relative;
        line-height: .23rem;

        .line {
            display: inline-block;
            width: 1px;
            height: 14px;
            background: #eee;
            vertical-align: middle;
            margin: 0 8px;
        }
    }

    .clinic-list {
        display: flex;
        align-items: center;
        justify-content: flex-start;

        .clinic-item {
            background: #f5f5f5;
            border-radius: 9px;
            height: 33px;
            line-height: 33px;
            width: 86px;
            margin-right: 8px;
            text-align: center;
        }

        .clinic-item:last-child {
            margin-right: 0;
        }
    }

    .science {
        display: flex;
        align-items: center;
        background: #f5f5f5;
        border-radius: 9px;

        .img-box {
            width: 118px;
            height: 79px;
            border-radius: 9px 0 0 9px;
            flex: 0 0 auto;
            position: relative;
            background-color: transparent;
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center center;

            .play-icon {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translateX(-50%) translateY(-50%);
                color: #fff;
            }

            .video-duration {
                font-size: 12px;
                line-height: 12px;
                color: #fff;
                position: absolute;
                right: 6px;
                bottom: 6px;
            }
        }

        .science-content {
            width: 0;
            flex: 1;
            max-height: 79px;
            padding: 6.5px 10px 2px;
            box-sizing: border-box;
        }
    }
}

.label {
    flex-shrink: 0;
    display: inline-block;
    vertical-align: middle;
    border: 1px solid rgba(0, 200, 200, 0.5);
    border-radius: 15px;
    height: 14px;
    line-height: 14px;
    padding-left: 5px;
    background-color: rgba(0, 200, 200, 0.1);
}

.labelText {
    display: inline-block;
    color: rgb(0, 200, 200, 1);
    font-size: 10px;
    padding-left: 2px;
    padding-right: 5px;
}
</style>



