<template>
    <view
        class="b-expert-item"
        @tap="expertBtnClick(expert)"
    >
        <b-img
            has-compress
            :src="expert.expertLogo ? expert.expertLogo : defaultExpertLogo"
            class="c-gap-right"
            width="0.48rem"
            height="0.48rem"
            mode="aspectFill"
            has-border
            :hack-white-stroke="false"
            :extra="{column: 2}"
        />
        <view class="expert-info c-font-13" :class="{'expert-content-border': showBorder}">
            <view class="c-line-clamp1 line-short">
                <text
                    v-if="expert.expertName"
                    class="font-weight-bold c-font-medium c-gap-right-middle color-333"
                >{{ expert.expertName }}</text>
                <text
                    v-if="expert.expertLevel"
                    class="font-weight-bold color-333"
                >{{ expert.expertLevel }}</text>
            </view>
            <view class="c-line-clamp1 c-gap-top-xsmall">
                <text
                    v-if="expert.expertHospital"
                    class="color-333 c-gap-right-small"
                >{{ expert.expertHospital }}</text>
                <text
                    v-if="expert.expertDepartment"
                    class=" c-font-small"
                >{{ 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="restructure ? tag.name : tag"
                    color="gray"
                    class="c-gap-right-small"
                />
            </view>
            <view
                v-if="expert.goodAt && !restructure"
                class="c-line-clamp2 color-333"
            >
                {{ expert.goodAt }}
            </view>
            <rich-text
                v-if="expert.goodAt && restructure"
                class="c-line-clamp2 color-333"
                :nodes="'擅长：' + expert.goodAt"
            />
            <template v-if="restructure">
                <view
                    v-if="expert.appointmentStatus"
                    class="expert-btn-wrap"
                >
                    <c-button
                        v-if="expert.appointmentStatus !== 1"
                        disabled
                        type="primary"
                        primary-color="#aaaaaa"
                        border-radius="14px"
                        :height="28"
                        :font-size="12"
                        class="expert-btn"
                        @tap.stop="expertBtnClick(expert)"
                    >
                        {{ appointmentBtn[expert.appointmentStatus] }}
                    </c-button>
                    <c-button
                        v-else
                        type="primary"
                        :primary-color="labelColor"
                        border-radius="14px"
                        :height="28"
                        :font-size="12"
                        class="expert-btn"
                        @tap.stop="expertBtnClick(expert)"
                    >
                        {{ appointmentBtn[expert.appointmentStatus] }}
                    </c-button>
                </view>
            </template>
            <template v-else>
                <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"
                        @tap.stop="expertBtnClick(expert.makeAppointmentBtn)"
                    >
                        {{ expert.makeAppointmentBtn.text }}
                    </c-button>
                    <c-button
                        v-else
                        type="primary"
                        :primary-color="labelColor"
                        border-radius="14px"
                        :height="28"
                        :font-size="12"
                        class="expert-btn"
                        @tap.stop="expertBtnClick(expert.makeAppointmentBtn)"
                    >
                        {{ expert.makeAppointmentBtn.text }}
                    </c-button>
                </view>
            </template>
        </view>
    </view>

</template>

<script>
/**
 * @file 挂号医生卡片
 * @author wangying51
 */
import Button from '@baidu/med-ui/components/Button/Button';
import Label from '@baidu/med-ui/components/Label/LabelOld';
import Image from '../common/image';

import {GH_APPOINTMENT_STATUS} from '@utils/constant';
import {navigate, navToH5, navToBdBoxH5} from '@utils/navigate';
import * as Log from '@utils/log';

export default {
    config: {
        component: true
    },
    props: {
        expert: Object,
        sysInfo: Object,
        showBorder: {
            type: Boolean,
            default: true
        },
        labelColor: {
            type: String,
            default: '#00c8c8'
        },
        log: {
            type: Object,
            default: () => {}
        },
        /**
         * 是否是挂号重构
         */
        restructure: {
            type: Boolean,
            default: false
        },
        /**
         * 页面参数sf_ref
         */
        sfRef: {
            type: String,
            default: ''
        },
        /**
         * 页面参数from
         */
        from: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            defaultExpertLogo: 'https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=3070734021,137864038&fm=179&app=35&f=PNG?w=144&h=144&s=88011F7C4F236B241E5E49D9030070B9',
            appointmentBtn: GH_APPOINTMENT_STATUS
        };
    },
    components: {
        'c-button': Button,
        'c-label': Label,
        'b-img': Image,
    },
    methods: {
        expertBtnClick(btn) {
            // 发送日志
            Log.send({
                type: 'b',
                action: 'expert-btn-click',
                extra: this.log || {}
            });
            if (!btn) {
                return;
            }
            // 1. 快医跳转
            if (btn.outerLink) {
                let url = btn.outerLink;
                let xcxInfo = btn.xcxInfo;

                if (process.env.MARS_ENV === 'swan') {
                    // 打开快医-跳小程序
                    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;
                }
            }
            // 2. 普通页面跳转
            else if (btn.url) {
                navigate({
                    url: btn.url
                });
            }
            else if (this.restructure) {
                navigate({
                    url: `/pages/guahao/appointslist/index?sf_ref=${this.sfRef}&title=挂号信息`
                        + `&core_id=${encodeURIComponent(btn.coreID)}&from=${this.from}`
                });
            }
        }
    }
};
</script>
<style lang="less" scoped>
.b-expert-item {
    display: flex;
    align-items: flex-start;
    padding: .12rem .13rem 0 .13rem;
    box-sizing: border-box;

    .expert-info {
        box-sizing: border-box;
        flex: 1;
        position: relative;
        width: calc(100% - .48rem - .1rem);
        padding-bottom: .1rem;
    }

    .expert-appoint-num {
        color: #3f3f3f;
        border-left: 1px solid #ccc;
    }

    .expert-btn-wrap {
        position: absolute;
        top: 0;
        right: -.05rem;
        z-index: 1;
    }

    .color-333 {
        color: #333;
    }

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

    .line-short {
        padding-right: 38px;
        box-sizing: border-box;
    }

    .expert-content-border {
        border-bottom: 1px solid #f1f1f1;
    }
}
</style>



