<template>
    <view
        :class="[
            'b-expert-item',
            expert.makeAppointmentBtn ? 'btn-style' : 'no-btn-style',
            borderShadow ? 'hide-shadow c-line-top' : '',
        ]"
        :style="{backgroundColor: color, padding: padding, boxShadow: isNoShadow ? 'none' : ''}"
        @tap="expertItemTap(expert)"
    >
        <b-img
            :src="expert.expertLogo ? expert.expertLogo : defaultExpertLogo"
            class="expert-image c-gap-right"
            has-border
        />
        <view class="expert-info">
            <view class="c-line-clamp1 line-short c-color-title">
                <text v-if="expert.expertName" class="c-font-big-less c-gap-right-xsmall font-weight-bold">{{ expert.expertName }}</text>
                <text v-if="expert.expertLevel" class="c-font-normal font-weight-bold">{{ expert.expertLevel }}</text>
            </view>
            <!-- <view class="c-font-normal">
                <text v-if="expert.satisfaction" class="c-color-orange c-gap-right-middle">治疗满意度：{{ expert.satisfaction }}</text>
                <text v-if="(+expert.appointmentsNum)" class="expert-appoint-num c-gap-inner-left-middle">{{ expert.appointmentsNum }}人预约</text>
            </view> -->
            <view class="c-line-clamp1 c-font-normal hospital-department">
                <text v-if="expert.expertHospital" class="c-gap-right-xsmall">{{ expert.expertHospital }}</text>
                <text v-if="expert.expertDepartment">{{ expert.expertDepartment }}</text>
            </view>
            <view v-if="expert.tags && expert.tags.length" class="expert-tags">
                <c-label
                    v-for="(tag, tagIndex) in expert.tags"
                    :key="tagIndex"
                    :text="tag"
                    color="gray"
                    class="c-gap-right-small"
                />
            </view>
            <view 
                v-if="expert.goodAt"
                class="c-line-clamp2 c-font-normal goodat"
            >
                {{ expert.goodAt }}
            </view>
            <view v-if="expert.expertProfession" class="c-line-clamp1 c-color-normal c-font-13 expert-profession">
                <text class="c-color-blue">{{ expert.expertProfessionText }}</text>{{ expert.expertProfession }}
            </view>
            <view
                v-for="(tagItem, tagItemIndex) in expert.tagList"
                :key="tagItemIndex"
                class="expert-taglist"
            >
                <e-tag :tag-item="tagItem"/>
                <text class="c-font-13 expert-text">{{ tagItem.text }}</text>
            </view>

            <view v-if="expert.makeAppointmentBtn" class="expert-btn-wrap">
                <c-button
                    v-if="expert.makeAppointmentBtn.status !== '1'"
                    disabled
                    type="primary"
                    primary-color="#aaaaaa"
                    border-radius="14px"
                    :height="28"
                    :font-size="12"
                    class="expert-btn font-weight-bold"
                    @tap.stop="expertBtnClick(expert.makeAppointmentBtn)"
                >
                    {{ expert.makeAppointmentBtn.text }}
                </c-button>
                <c-button
                    v-else
                    type="primary"
                    :primary-color="isPreConsultationTypeThree ? '#00C8C8' : '#00C8C8'"
                    border-radius="14px"
                    :height="28"
                    :font-size="12"
                    class="expert-btn font-weight-bold"
                    @tap.stop="expertBtnClick(expert.makeAppointmentBtn)"
                >
                    {{ expert.makeAppointmentBtn.text }}
                </c-button>
            </view>
        </view>
    </view>
</template>

<script>
/**
 * @file 医生Item
 * @author wangying51
 *
 * @update caiyouliang
 * @params color {string} 颜色如 white
 */
import Button from '@baidu/med-ui/components/Button/Button';
import Label from '@baidu/med-ui/components/Label/LabelOld';
import Image from '../../components/common/image';
import Tag from '../../components/gh/expert-tag';

import {navigate, navToH5, navToBdBoxH5} from '../../utils/navigate';
import {ubcSend} from '@utils/log';


export default {
    config: {
        component: true
    },
    props: {
        isPreConsultationTypeThree: {
            type: Boolean,
            default: false
        },
        expert: Object,
        sysInfo: Object,
        logFlag: {
            type: String,
            default: ''
        },
        color: {
            type: String,
            default: ''
        },
        plan: String,
        borderShadow: {
            type: Boolean,
            default: false
        },
        padding: {
            type: String,
            default: ''
        },
        isNoShadow: {
            type: Boolean,
            default: false
        },
        extra: { // 自定义日志字段
            'type': Object,
            'default': null
        }
    },
    data() {
        return {
            defaultExpertLogo:
                'https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=3070734021,137864038&fm=179&app=35&f=PNG?w=144&h=144&s=88011F7C4F236B241E5E49D9030070B9'
        };
    },
    components: {
        'c-button': Button,
        'c-label': Label,
        'b-img': Image,
        'e-tag': Tag
    },
    methods: {
        expertItemTap(expert) {
            this.jump(expert);
        },
        expertBtnClick(btn) {
            this.jump(btn);
        },
        jump(info) {
            if (!info) {
                return;
            }
            if (this.extra && this.extra.value) {
                ubcSend(this.extra);
            }
            // 1. 外跳跳转
            if (info.outerLink) {
                let url = info.outerLink;
                let xcxInfo = info.xcxInfo;

                if (process.env.MARS_ENV === 'swan') {
                    // 打开外跳页面-跳小程序
                    /* eslint-disable no-console */
                    if (xcxInfo && xcxInfo.xcx_url) {
                        this.$api.navigateToSmartProgram({
                            appKey: xcxInfo.xcx_appkey,
                            path: xcxInfo.xcx_url,
                            success(res) {
                                console.log('navigateToSmartProgram success', res);
                            },
                            fail(err) {
                                console.log('navigateToSmartProgram fail', err);
                                if (this.sysInfo && this.sysInfo.host === 'bdmap') {
                                    navToH5(url);
                                } else {
                                    navToBdBoxH5(url);
                                }
                            }
                        });
                    }
                    // 打开快医-广告落地页
                    else {
                        if (this.sysInfo && this.sysInfo.host === 'bdmap') {
                            navToH5(url);
                        } else {
                            navToBdBoxH5(url);
                        }
                    }
                } else if (process.env.MARS_ENV === 'h5') {
                    window.location.href = url;
                }
            } else if (info.url) {
                let url = info.url;
                navigate({
                    url,
                    extra: {
                        logName: this.logFlag ? this.logFlag + '-exp-item' : 'exp-item'
                    }
                });
            }
        }
    }
};
</script>
<style lang="less" scoped>
.b-expert-item {
    display: flex;
    align-items: flex-start;
    background-color: #fff;
    border-radius: .08rem;
    box-sizing: border-box;
    box-shadow: 0 3px 20px rgba(0, 0, 0, 0.08);
    &.btn-style {
        padding: .15rem .13rem .05rem .13rem;
    }
    &.no-btn-style {
        padding: .15rem .13rem .05rem .13rem;
    }
    .expert-info {
        box-sizing: border-box;
        flex: 1;
        position: relative;
        width: calc(100% - .48rem - .1rem);
        .hospital-department,
        .goodat {
            color: #555;
        }
        .hospital-department {
            max-width: 79%;
        }
    }
    .expert-appoint-num {
        color: #999999;
        border-left: 1px solid #cccccc;
        font-size: 12px;
    }
    .expert-tags {
        padding-bottom: 5px;
    }
    .expert-btn-wrap {
        position: absolute;
        top: .05rem;
        right: -.02rem;
        z-index: 1;
        min-width: 47px;
    }
    .color-333 {
        color: #333333;
    }
    .font-weight-bold {
        font-weight: bold;
    }
    .expert-profession {
        margin-top: -0.05rem;
    }
    .line-short {
        font-family: PingFangSC-Medium;
        padding-right: 38px;
        box-sizing: border-box;
    }
    .expert-taglist {
        display: flex;
        align-items: center;
        justify-content: start;
        box-sizing: border-box;
        height: 0.24rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .expert-text {
        display: block;
        font-size: 13px;
        height: 0.18rem;
        line-height: 0.18rem;
        color: #999;
        overflow: hidden;
        width: calc(100% - 0.56rem);
        white-space: nowrap;
        text-overflow: ellipsis;
    }
}
.hide-shadow {
    border-radius: 0;
    box-shadow: none;
}
</style>
