<template>
    <view class="info-wrap">
        <view
            class="qa-med-expert-info"
            @tap="onGo(expert.unifiUrl, 'other', expert)"
        >
            <view
                class="c-row"
            >
                <!-- 头像 -->
                <view
                    class="c-span2 avatar"
                    @tap.stop="onGo(expert.url, 'head', expert)"
                >
                    <c-image
                        has-compress
                        :src="expert.expertPic"
                        width="0.48rem"
                        height="0.48rem"
                        is-round
                        hack-white-stroke
                        :extra="{column: 2}"
                    />
                    <view v-if="expert.authIcon" class="expert-selected-img">
                        <c-image
                            mode="scaleToFill"
                            :src="expert.authIcon"
                            has-compress
                            :hack-white-stroke="false"
                            :is-round="false"
                            width="100%"
                            height="100%"
                            :extra="{column: 2}"
                        />
                    </view>
                    <view v-if="expert.vIcon" class="expert-vip-img">
                        <c-image
                            :src="expert.vIcon"
                            mode="widthFix"
                            has-compress
                            :hack-white-stroke="false"
                            :is-round="false"
                            width="100%"
                            height="100%"
                            :extra="{column: 2}"
                        />
                    </view>
                </view>
                <!-- 信息 -->
                <view class="c-span10 expert-content" :class="{'expert-content-border': showBorder}">
                    <!--姓名职称-->
                    <view class="c-flex">
                        <view class="expert-name line">
                            <text>{{ expert.expertName }}</text>
                            <c-label
                                v-if="expert.tag"
                                :text="expert.tag"
                                color="red"
                                class="c-gap-left-small"
                            />
                        </view>
                        <view
                            class="c-color-333 b-font-bold line c-gap-left-small c-font-normal"
                        >{{ expert.expertLevel }}</view>
                        <c-label
                            v-if="expert.isAuthenticated"
                            :text="expert.isAuthenticated"
                            color="gray"
                            class="c-gap-left-small auth"
                        />
                        <view v-if="expert.topLabels && expert.topLabels.length" class="line auth c-gap-left-small">
                            <c-label-new
                                v-for="(label, index) in expert.topLabels"
                                :key="index"
                                :text="label.text"
                                :color="label.color || 'box_orange'"
                                :bg-color="label.bgColor || ''"
                                :border-color="label.borderColor || ''"
                                class="c-gap-right-small"
                                :custom="(label.bgColor || label.borderColor) ? true : false"
                            />
                        </view>
                        <view v-if="expert.isOnline && expert.isOnline === 1" class="online c-color-main c-font-small">
                            <view class="online-dot c-inline-block"/>
                            <text class="c-gap-left-small">在线</text>
                        </view>
                    </view>
                    <!-- 另起一行的职称 -->
                    <view v-if="expert.expertLevelNew || expert.expertDepartmentNew">
                        <view
                            v-if="expert.expertLevelNew"
                            class="c-color c-font-normal line c-gap-right-small"
                        >{{ expert.expertLevelNew }}</view>
                        <view v-if="expert.expertDepartmentNew" class="c-color c-font-normal line c-gap-right-small">
                            {{ expert.expertDepartmentNew }}
                        </view>
                    </view>
                    <!--打星-->
                    <view
                        v-if="expert.commentCount && expert.commentCount !== '0' && !expert.commentShow && expert.star"
                        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
                            v-if="!expert.keepComment"
                            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>
                    <!--医院信息-->
                    <view
                        v-if="expert.expertHospital && !expert.hospitalLevelNew"
                        class="c-color c-font-normal c-line-clamp1"
                    >
                        <c-label-new
                            v-if="hospitalLevel"
                            :text="hospitalLevel"
                            :disable-sanjia="false"
                            class="c-gap-right-small"
                            color="box_green"
                        />
                        <!-- 医院自定义标签 -->
                        <span v-if="hospitalLabel.length > 0">
                            <c-label-new
                                :text="hospitalLabel"
                                class="c-gap-right-small"
                                color="box_green"
                            />
                        </span>
                        <view
                            :class="['c-gap-right-small','line', expert.hospitalBold ? 'expert-level' : '']"
                        >{{ expert.expertHospital }}</view>
                        <view
                            :class="['c-gap-right-small','line', expert.hospitalBold ? 'expert-level' : '']"
                        >{{ expert.expertDepartment }}</view>
                    </view>
                    <!--新医院信息-->
                    <view
                        v-if="expert.expertHospital && expert.hospitalLevelNew"
                        class="c-color c-font-normal hospital-info-wrap"
                    >
                        <view class="hospital-name c-line-clamp1">{{ expert.expertHospital }}</view>
                        <view
                            v-if="expert.hospitalLevelNew"
                            class="c-gap-left-small hospital-label"
                            :style="{
                                background: textColor,
                            }"
                        >{{ expert.hospitalLevelNew }}</view>
                    </view>
                    <!--tag-->
                    <view v-if="expert.tags && expert.tags.length > 0 && !expert.tagsHide">
                        <c-label
                            v-for="(text, index) in expert.tags"
                            :key="index"
                            :text="text"
                            color="gray"
                            class="c-gap-right-small"
                        />
                    </view>
                    <!-- 描述信息 -->
                    <view
                        v-if="expert.info && expert.info.length"
                        class="c-color c-font-normal"
                    >
                        <text
                            v-for="(o, i) in expert.info"
                            :key="i"
                            class="c-gap-right"
                        >{{ o.key }}{{ o.value }}</text>
                    </view>
                    <!-- 新 评分、评价 行 -->
                    <view
                        v-if="expert.newEvaluateRow && expert.newEvaluateRow.evaluteLabel.length"
                        class="new-evaluate-row"
                    >
                        <span
                            v-for="(item, index) in expert.newEvaluateRow.evaluteLabel"
                            :key="index"
                            class="evalute-label"
                            :style="{'padding-left': index === 0 ? '0px' : ''}"
                        >
                            <span
                                v-if="index === 0"
                                class="evalute-grade c-font-wb"
                            >{{ expert.newEvaluateRow.grade }}</span>
                            {{ item }}
                        </span>
                    </view>
                    <!-- 健康榜单 -->
                    <view v-if="expert.newHealthRank" class="health-rank-box">
                        <view
                            class="health-rank-img"
                            :style="{'background-image': 'url(' + 'https://med-fe.cdn.bcebos.com/brand/list-card-ranking.png' + ')'} | imgCompress('background-image',{column: 2})"
                        />
                        <span class="health-rank">{{ expert.newHealthRank }}</span>
                    </view>
                    <!--擅长-->
                    <rich-text
                        v-if="expert.goodAt && expert.type === 'expertRec' && isShow"
                        class="c-line-clamp2 c-color c-font-normal good-at"
                        :nodes="expert.goodAt"
                    />
                    <rich-text
                        v-if="expert.goodAt && expert.type !== 'expertRec'"
                        class="c-line-clamp2 c-color c-font-normal good-at"
                        :nodes="expert.goodAt"
                    />
                    <!-- N分钟前来过 -->
                    <view v-if="expert.minAgo && expert.minAgo !== ''" class="minago c-color-main c-font-normal">
                        <view class="minago-dot c-inline-block"/>
                        <text class="c-gap-left-small">{{ expert.minAgo }}</text>
                    </view>
                    <!--打星实验展现顺序不同，后面下掉-->
                    <view
                        v-if="expert.commentCount && expert.commentCount !== '0'
                            && expert.bottomStarShow && expert.star && !expert.newEvaluateRow"
                        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
                            v-if="!expert.keepComment"
                            class="line c-gap-left c-color-gray"
                        >({{ expert.commentCount }}人已评价)</view>
                    </view>
                    <!-- 新服务体验 -->
                    <view v-if="expert.serviceDataNew" class="c-color c-font-small c-line-clamp1">
                        <view
                            v-for="(svc, index) in expert.serviceDataNew"
                            :key="index"
                            class="c-gap-right-large line"
                        >
                            <view v-if="svc.title" class="line c-color-gray">{{ svc.title }}</view>
                            <view
                                v-if="svc.num"
                                class="line c-gap-left-small"
                                :style="{
                                    color: svc.numColor ? svc.numColor : '#00C8C8',
                                }"
                            >{{ svc.num }}</view>
                        </view>
                    </view>
                    <!--服务tag-->
                    <view v-if="expert.serviceTag && !(expert.newHealthRank || expert.hostpitalLabel)">
                        <view
                            v-for="(text, index) in expert.serviceTag"
                            :key="index"
                            class="c-gap-right-small c-gap-top-small c-gap-bottom-small service-label"
                        >{{ text }}</view>
                    </view>
                    <!--新服务tag-->
                    <view v-if="expert.serviceTagNew && expert.serviceTagNew.length" class="new-svc-tag-wrap">
                        <view
                            v-for="(label,index) in expert.serviceTagNew"
                            :key="index"
                            class="line"
                        >
                            <c-label-new
                                :text="label.text"
                                font-size="10"
                                height="16"
                                class="c-gap-right-small"
                                :color="label.color || '#00C8C8'"
                                :bg-color="label.bgColor || '#DFF8F8'"
                                :border-color="label.borderColor || '#00C8C8'"
                                custom
                            />
                        </view>
                    </view>
                    <!--服务体验-->
                    <view
                        v-if="expert.serviceData && !expert.listStyleType && !expert.newEvaluateRow"
                        class="c-color c-font-small c-line-clamp1"
                    >
                        <view
                            v-for="(text, index) in expert.serviceData"
                            :key="index"
                            class="c-gap-right line"
                        >
                            <text v-if="text.label">{{ text.label + '：' + text.value }}</text>
                            <text v-else>{{ text }}</text>
                        </view>
                    </view>
                    <!--服务-->
                    <view
                        v-if="expert.consultArr && expert.consultArr.length"
                    >
                        <view :style="{display: 'flex'}">
                            <view
                                v-for="(consult, index) in expert.consultArr"
                                :key="index"
                                :class="['c-slink c-slink-auto c-gap-top button button-bright c-line-clamp1',
                                         {'c-gap-right': index + 1 !== expert.consultArr.length},
                                ]"
                                :style="{
                                    color: (consult.btnColorType && consult.btnColorType === 2) ? '#1F1F1F' : textColor,
                                    background: (consult.btnColorType && consult.btnColorType === 2)
                                        ? '#FAFAFA' : labelColor,
                                    border: (consult.btnColorType && consult.btnColorType === 2)
                                        ? '1px solid #E0E0E0' : '',
                                }"
                                @tap.stop="onBtnTap(consult, expert)"
                            >
                                <login-btn
                                    :disabled="!consult.callbackUrl || expert.type === 'expertRec'"
                                    @onTapStart="onTapStart(consult, expert)"
                                    @onLoginSuccess="onBtnTap(consult, expert)"
                                >
                                    <text :class="['button-text']">{{ consult.text }}</text>
                                    <!-- 划线价 -->
                                    <text
                                        v-if="consult.deleteline"
                                        class="c-color-gray c-gap-left-small button-info button-del"
                                    >
                                        {{ consult.deleteline }}
                                    </text>
                                    <text
                                        v-if="!consult.btnColorType || consult.btnColorType !== 2"
                                        class="c-color-orange c-gap-left-small button-info"
                                    >
                                        ({{ consult.abstract }})
                                    </text>
                                    <text
                                        v-if="consult.btnColorType && consult.btnColorType === 2"
                                        class="c-color-orange button-info price-left"
                                        :style="{'color': '#B97020'}"
                                    >
                                        {{ consult.newAbstract }}
                                    </text>
                                </login-btn>
                            </view>
                        </view>
                    </view>
                    <!-- 新版服务按钮 -->
                    <view v-if="expert.serviceInfo">
                        <view
                            v-if="expert.serviceInfo.list && expert.serviceInfo.list.length"
                            class="btn-wrap c-gap-top-small c-font-normal"
                            :style="{
                                'justify-content': expert.serviceInfo.position || '',
                            }"
                        >
                            <view
                                v-for="(btn,index) in expert.serviceInfo.list"
                                :key="index"
                                :class="['btn-wrap-item', expert.serviceInfo.position ? 'c-gap-left' : 'c-gap-right']"
                                :style="{
                                    'margin-left': index === 0 && expert.serviceInfo.position === 'flex-end'
                                        ? '0' : '10px',
                                }"
                                @tap.stop="onBtnTap(btn, expert)"
                            >
                                <view
                                    :class="['c-gap-right-small', btn.color ? btn.color : 'c-color-gray']"
                                >{{ btn.text }}</view>
                                <view
                                    :style="{color: btn.priceColor ? btn.priceColor : '#FF6F61'}"
                                >{{ btn.abstract }}</view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <view
            class="expert-btn-wrap"
        >
            <view v-if="expert.expertTag" class="asked-icon">{{ expert.expertTag }}</view>
        </view>
    </view>
</template>

<script>
/**
* @file 搜索-问诊结果
* @author haoyan
* @categories 业务组件
* @tags [component]
*/
import CStars from '@baidu/med-ui/components/Stars/Stars';
import CLabel from '@baidu/med-ui/components/Label/LabelOld';
import CLabelNew from '@baidu/med-ui/components/Label/Label';
import {navigate} from '../../utils/navigate';
import {pay} from '../../utils/pay';
import * as login from '../../utils/login';
import {request} from '../../utils/request';
import CImage from '../common/image';
import LoginBtn from '@components/common/login-btn';
import {ubcSend} from '@utils/log';
export default {
    config: {
        component: true
    },
    props: {
        /**
        * 数据
        */
        expert: {
            type: Object,
            default: () => ({})
        },
        /**
        * 是否显示边框
        */
        showBorder: {
            'type': Boolean,
            'default': false
        },
        /**
        * 元素在列表中的索引
        */
        index: {
            type: Number,
            default: 0
        },
        /**
        * 文字颜色
        */
        textColor: {
            type: String,
            default: '#00c8c8'
        },
        /**
        * 标签颜色
        */
        labelColor: {
            type: String,
            default: '#e5f9f9'
        },
        /**
        * 日志信息
        */
        log: {
            type: Object,
            default() {
                return {};
            }
        }
    },
    components: {
        CStars,
        CLabel,
        CImage,
        CLabelNew,
        LoginBtn
    },
    options: {
        addGlobalClass: true
    },
    data() {
        return {
            isShow: false,
            hospitalLevel: '',
            hospitalLabel: []
        };
    },
    mounted() {
        if (this.expert.type === 'expertRec') {
            let timer = setTimeout(() => {
                this.isShow = true;
                clearTimeout(timer);
            }, 100);
        }
    },
    created() {
        this.hospitalLevel = this.expert.hospitalLevel || '';
        this.hospitalLabel = this.expert.hostpitalLabel || [];
        if (this.expert.hostpitalLabel && this.expert.hostpitalLabel.length > 0) {
            this.hospitalLabel.unshift(this.expert.hospitalLevel);
            this.hospitalLevel = '';
        }
    },
    methods: {
        onGo(url, type, item) {
            if (item.type && item.type === 'expertRec' && type === 'other') {
                // 咨询页面点击弹出浮层逻辑
                this.$emit('popup', item, true);
            } else if (url) {
                ubcSend({
                    type: 'clk',
                    value: 'wenyishengka'
                });
                navigate({
                    url,
                    extra: {
                        pos: this.index + 1,
                        id: 'expert_' + item.expertId,
                        part: type,
                        expTag: item.expTag,
                        ...this.log
                    }
                });
            }
        },
        onTapStart(btn, expert) {
            if (process.env.MARS_ENV === 'h5') {
                if (btn.isLogin && btn.isLogin === 1) {
                    this.onBtnTap(btn, expert);
                }
                else {
                    login.toH5LoginPage({openType: 'relaunch', href: btn.refreshUrl});
                }
            }
        },
        onBtnTap(btn, expert) {
            if (expert.type === 'expertRec' && btn.callbackUrl) { // 诊前推荐定向医生支付逻辑
                this.$api.showLoading({
                    title: '正在跳转支付...'
                });
                request({
                    url: btn.callbackUrl, // 自测注释，后面放开
                    method: 'POST',
                    header: {
                        'content-type': 'application/x-www-form-urlencoded'
                    },
                    isNeedLogin: true,
                    isFirstScreen: false
                }).then(res => {
                    // 分端逻辑
                    if (res.data.toast) {
                        this.$api.showToast({
                            icon: 'none',
                            title: res.data.toast
                        });
                        return;
                    }
                    const {pay_url, payUrl, jumpUrl} = res.data || {};
                    if (process.env.MARS_ENV === 'swan') {
                        // 去支付
                        this.$api.hideLoading();
                        if (pay_url || payUrl) {
                            pay({
                                url: pay_url || payUrl,
                            });
                        }
                    } else if (process.env.MARS_ENV === 'h5') {
                        // 跳转
                        if (jumpUrl) {
                            let path = window.location.hash;
                            path = path + '&timestamp=' + new Date().getTime();
                            window.history.replaceState(null, null, path);
                            this.$api.hideLoading();
                            window.location.href = jumpUrl;
                        }
                    }
                });
            } else {
                if (btn.callbackUrl) {
                    request({
                        url: btn.callbackUrl, // 自测注释，后面放开
                        method: 'POST',
                        header: {
                            'content-type': 'application/x-www-form-urlencoded'
                        },
                        isNeedLogin: true,
                        isFirstScreen: false
                    }).then(res => {
                        const {pay_url, payUrl} = res.data || {};
                        if (pay_url || payUrl) {
                            pay({
                                url: pay_url || payUrl,
                            });
                        }
                        if (res.data && res.data.msUrl) {
                            navigate({
                                url: res.data.msUrl
                            });
                        }
                    });
                }
            }
            if (btn.url) {
                this.onGo(btn.url + '&askType=' + btn.type, 'ask_' + btn.type, expert);
            }
        }
    }
};
</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;
    }

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

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

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

    .expert-vip-img {
        width: .16rem;
        height: .16rem;
        position: absolute;
        right: .04rem;
        bottom: -.02rem;
        z-index: 5;
    }

    .expert-selected-img {
        width: .4rem;
        height: .142rem;
        position: absolute;
        bottom: -3px;
        left: 50%;
        margin-left: -20px;
        z-index: 5;
    }

    .expert-content {
        box-sizing: border-box;
    }

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

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

    .auth {
        position: relative;
    }

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

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

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

    .color-orange {
        color: #f60;
    }

    .line {
        display: inline;
    }

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

    .button {
        padding-left: .12rem;
        padding-right: .12rem;
        font-size: 14px;
        line-height: .28rem;
        border-radius: 30px;
    }

    .button-bright {
        background: #e5f9f9;
        color: #00c8c8;
    }

    .button-del {
        text-decoration: line-through;
    }
    @media only screen and (max-width: 320px) {
        .button {
            padding-left: .05rem;
            padding-right: .05rem;

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

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

.service-label {
    display: inline-block;
    height: 18px;
    line-height: 18px;
    font-size: 12px;
    padding: 0 5px;
    border-radius: 18px;
    background: #fff7f6;
    color: #ff6050;
}

.hospital-label {
    flex-shrink: 0;
    display: inline-block;
    height: 16px;
    line-height: 16px;
    font-size: 10px;
    padding: 0 5px;
    border-radius: 16px;
    background: #00c8c8;
    color: #fff;
}

.btn-wrap {
    display: flex;

    &-item {
        border: 1px solid #e0e0e0;
        padding: 0 15px;
        display: flex;
        flex-direction: row;
        align-items: center;
        height: 32px;
        border-radius: 32px;
        overflow: hidden;
    }
}

.new-svc-tag-wrap {
    padding: 5px 0 3px;
}

.hospital-info-wrap {
    display: flex;
    align-items: center;
    flex-direction: row;
}

.hospital-name {
    /* max-width: 78%; */
    overflow: hidden;
}

.new-evaluate-row {
    display: flex;
    flex-wrap: wrap;
    margin-top: 0.05rem;

    .evalute-label {
        background: #fff4ed;
        border-radius: 4px;
        margin: 0 0.04rem 0.08rem 0;
        padding: 0 0.06rem;
        color: #f60;
        line-height: 0.18rem;
    }

    .evalute-grade {
        background-image: linear-gradient(270deg, #f49d63 3%, #f60 100%);
        border-radius: 4px 4px 0 4px;
        padding: 0.00rem 0.04rem;
        color: #fff;
        height: 0.18rem;
        margin-right: 0.03rem;
    }
}

.health-rank-box {
    display: flex;
    margin-bottom: 0.08rem;

    .health-rank-img {
        width: 0.54rem;
        height: 0.22rem;
        background-size: cover;
        background-repeat: no-repeat;
    }

    .health-rank {
        background: #f8f2eb;
        border-radius: 0 4px 4px 0;
        padding: 0 0.06rem 0 0.04rem;
        color: #b97020;
        line-height: 0.22rem;
    }
}

.c-flex {
    display: flex;
}

.online {
    margin-left: auto;

    &-dot {
        width: 5px;
        height: 5px;
        border-radius: 5px;
        line-height: 0.12rem;
        background-color: #00c8c8;
        transform: translateY(-1px);
    }
}

.minago {
    margin-top: 0.12rem;
    line-height: .14rem;
    margin-bottom: 0.06rem;

    &-dot {
        width: 4px;
        height: 4px;
        border-radius: 4px;
        line-height: 0.14rem;
        background-color: #00c8c8;
        transform: translateY(-1px);
    }
}

.price-left {
    word-spacing: -3px;
}
</style>
