<template>
    <view class="overview">
        <scroll-view scroll-x class="overview-scroll">
            <view
                v-for="(doctor, index) in doctorData"
                :id="'doctor-' + index"
                :key="index"
                class="overview-doc-wrap"
                :style="{
                    width: doctorData.length === 1 ? '100%' : '28vh',
                    marginRight: doctorData.length === 1 ? '0' : '10px',
                }"
                @tap.stop="tapUrl(doctor.url)"
            >
                <view class="overview-doc-cont">
                    <view class="c-gap-right-middle">
                        <image
                            :src="doctor.docImg || doctor.portrait"
                            :style="{
                                width: '40px',
                                height: '40px',
                                borderRadius: '50%',
                            }"
                        />
                        <!-- <b-img :src="doctor.docImg || doctor.portrait" width="40px" height="40px" /> -->
                    </view>
                    <view class="overview-doc-reviewer" :class="dust ? 'dust' : ''">
                        <view class="c-font-normal c-color-link overview-doc-info-wrap c-line-clamp1">
                            <text v-if="doctor.name" class="overview-doc-info-name c-gap-right-middle">{{
                                doctor.name
                            }}</text>
                            <text v-if="doctor.docRank" class="overview-doc-info-job c-gap-right-small">{{
                                doctor.docRank
                            }}</text>
                            <text class="overview-doc-info-team" @tap.stop="navigateUrl(docTeamUrl)">医典专家团</text>
                        </view>
                        <view class="c-color-gray c-font-small c-line-clamp1 set-line">
                            <text v-if="doctor.hospital" class="c-gap-right">{{ doctor.hospital }}</text>
                            <text v-if="doctor.title" class="c-gap-right">{{ doctor.title }}</text>
                        </view>
                        <view
                            v-if="doctor.doctorText || doctor.profile"
                            class="c-color-gray c-font-small c-line-clamp2 set-line"
                        >
                            {{ doctor.doctorText || doctor.profile }}
                        </view>
                    </view>
                </view>
            </view>
        </scroll-view>
    </view>
</template>

<script>
/**
 * @file 落地页医生模块
 * @author yumingzhi
 * @categories
 * @tags
 */
import {navigate, navToBdBoxH5, navToH5} from '../../../utils/navigate';
import cookie from '@utils/cookie';
import {COOKIE_KEY} from '@utils/constant';

export default {
    config: {
        component: true
    },
    options: {},
    props: {
        /**
         * 医生数据
         */
        doctorData: {
            type: Array,
            default: () => []
        },
        /**
         * 灰色遮罩
         */
        dust: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            zhuanjiaUrl: 'https://baike.baidu.com/yidian/experts',
            docTeamUrl: 'https://expert.baidu.com/#/pages/speTopic/dict/introduce/doctor/index'
        };
    },
    mounted() {},
    methods: {
        // 跳转
        tapUrl(url) {
            if (!url) {
                return;
            }
            if (process.env.MARS_ENV === 'h5') {
                !cookie(COOKIE_KEY.IS_OPPO_WEBVIEW) && navToH5(url);
            } else if (process.env.MARS_ENV === 'swan') {
                navToBdBoxH5(url);
            }
        },
        navigateUrl(url) {
            url && navigate({url: url});
        }
    }
};
</script>
<style lang="less" scoped>
.dust {
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: gray;
}
.overview {
    line-height: normal;

    &-scroll {
        white-space: nowrap;
        width: 100%;
    }

    .overview-doc-wrap {
        display: inline-block;
        width: 270px;
        margin-right: 10px;
        box-sizing: border-box;

        .overview-doc-cont {
            display: flex;
            align-items: flex-start;
        }

        .overview-doc-reviewer {
            position: relative;
            flex: 1;
            box-sizing: border-box;
            width: calc(100% - 43px);
            .overview-doc-info-wrap {
                position: relative;
                &.no-wrap {
                    white-space: normal;
                }
                .overview-doc-info-team {
                    font-size: 12px;
                    color: #00c8c8;
                    border: 1px solid #b1eff0;
                    box-sizing: border-box;
                    padding: 0 5px;
                    border-radius: 12px;
                    line-height: 14px;
                }
            }
            .overview-doc-info-name {
                vertical-align: middle;
                font-weight: 500;
            }
            .overview-doc-info-job {
                position: relative;
                padding: 0 5px;
                color: #ffa523;
                font-size: 12px;
                border: 1px solid #ffa523;
                border-radius: 12px;
                vertical-align: middle;
            }
        }
        .set-line {
            line-height: 18px;
        }
    }
}
</style>
