<template>
    <view class="itdc-head">
        <view catchtap="doctorDetail" style="display:flex;padding-bottom:18rpx">
            <view style="display: flex;align-items: center;justify-content: center;">
                <view class="itdc-head-portrait"
                    :style="{ background: 'url(' + (doctorInfoData.image ? doctorInfoData.image : imgHost + '/images/icon/avatar_doctor_act.png') +') no-repeat', backgroundSize: '100%', float: 'left' }" />
                <image style="height:0rpx;width:0rpx;" onerror="imageError"
                    :src="(doctorInfoData.image ? doctorInfoData.image : imgHost) + '/images/icon/avatar_doctor_act.png'"></image>
            </view>
            <view class="itdc-head-content-top">
                <view class="itdc-head-content-top-text">
                    <text>{{ doctorInfoData.doctorName }}</text>
                    <text>{{ doctorInfoData.title }}</text>
                    <text>{{ doctorInfoData.locDesc }}</text>
                </view>
                <uni-rate custom-class="rate" :value="doctorInfoData.score" :size="20" allow-half readonly color="#ececec" disabled-color="#ececec" active-color="#FA541C" />
                <view class="font-28" style="margin-top:16rpx;">
                    咨询量：<text style="color:#13C2C2FF;">{{ doctorInfoData.totalNum }}</text>
                    <text v-if="doctorInfoData.resTime"><text style="color:#13C2C2FF;">{{ doctorInfoData.resTime }}</text>响应</text>
                </view>
            </view>
        </view>
        <view class="font-28 itdc-introduct border-bottom-after" style="clear:both;" @tap.stop="doctorDetail">
            <text class="itdc-introduct-text" v-if="doctorInfoData.introduce">{{ doctorInfoData.introduce }}</text>
            <text v-if="doctorInfoData.introduce ? false : true">暂无该医生描述</text>
        </view>
        <view style="height:109rpx;line-height:109rpx;text-align:right;">
            <van-button v-if="doctorInfoData.imageFlag == 'Y'" @tap="turnGraphic(doctorInfo,2)" custom-class="button-css" color="#FFEAC8" round>
                <text class="font-26">图文(¥{{ doctorInfoData.imagePrice }})</text>
            </van-button>
            <van-button v-if="doctorInfoData.imageFlag != 'Y'" disabled round type="default" custom-class="button-css" color="#FFEAC8">
                <text class="font-26">图文(无排班)</text>
            </van-button>
            <van-button v-if="doctorInfoData.videoFlag == 'Y'" @tap="turnVideo(doctorInfo,3)" custom-class="button-css" color="#FFEAC8" round>
                <text class="font-26">视频(¥{{ doctorInfoData.videoPrice }})</text>
            </van-button>
            <van-button v-if="doctorInfoData.videoFlag != 'Y'" disabled round type="default" custom-class="button-css" color="#FFEAC8">
                <text class="font-26">看诊(无排班)</text>
            </van-button>
            <van-button v-if="doctorInfoData.videoFlag == 'Y'" @tap="turnVideo(doctorInfo,4)" custom-class="button-css" color="#FFEAC8" round>
                <text class="font-26">线下(¥{{ doctorInfoData.videoPrice }})</text>
            </van-button>
            <van-button v-if="doctorInfoData.videoFlag != 'Y'" disabled round type="default" custom-class="button-css" color="#FFEAC8">
                <text class="font-26">线下(无排班)</text>
            </van-button>
        </view>
    </view>
</template>

<script>
import Util from '@/utils/utils';
import httpConfig from '@/utils/httpConfig';
import VanButton from '@/components/button/index'
const app = getApp();
export default {
    components: {
        'van-button': VanButton
    },
    props: {
        doctorInfo: {
            type: Object,
            default: {}
        },
        path: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            windowHost: httpConfig && httpConfig.ipDeault,
            imgHost: httpConfig && httpConfig.imgHost,
            doctorInfoData: {}
        }
    },
    mounted() {
        const { doctorInfo } = this
        let windowHost = this.windowHost
        let url = doctorInfo && doctorInfo.image ? doctorInfo.image : "";
        doctorInfo.image = url.indexOf("http") !== -1 ? url : windowHost + url;
        this.setData({
            doctorInfoData: doctorInfo
        })
    },
    methods: {
        // 查看医生主页
        doctorDetail: Util.debounce(function (e) {
            var docObj = this.doctorInfoData
            app.globalData.docObj = docObj
            app.globalData.locObj.locID = docObj.locID
            app.globalData.schDate = docObj.date
            uni.navigateTo({
                url: '/pages/index/pages/doctorInfo/doctorInfo'
            })
        }),

        // 图片加载出错，替换为默认图片
        imageError(e) {
            let { doctorInfoData, imgHost } = this;
            doctorInfoData.image = imgHost + "/images/icon/avatar_doctor_act.png";
            this.setData({ doctorInfoData });
        },

        turnGraphic: Util.debounce(function (page, index) {
            var docObj = page
            app.globalData.docObj = docObj
            app.globalData.locObj.locID = docObj.locID
            app.globalData.schDate = docObj.date
            app.globalData.reservationEntrance = index
            uni.navigateTo({
                url: "/pages/index/pages/graphicConsultation/graphicConsulWriteContent/graphicConsulWriteContent"
            })
        }),

        turnVideo: Util.debounce(function (page,index) {
            var docObj = page
            app.globalData.docObj = docObj
            app.globalData.locObj.locID = docObj.locID
            app.globalData.schDate = docObj.date
            app.globalData.reservationEntrance = index
            uni.navigateTo({
                url: "/pages/index/pages/videoConsultation/videoConsulChooseDate/videoConsulChooseDate"
            })
        })
    }
}
</script>

<style>
.itdc-head {
    padding: 31rpx 24rpx 0 25rpx;
    background: rgba(255, 255, 255, 1);
    border-radius: 10rpx;
    margin: 0rpx 24rpx 8rpx 24rpx;
}

.itdc-head-portrait {
    width: 120rpx;
    height: 120rpx;
    border-radius: 50%;
    margin-right: 24rpx;
}

.font-28 {
    font-size: 28rpx;
    font-family: PingFang SC;
    color: #666666FF
}

.font-26 {
    font-size: 26rpx;
    font-family: PingFang SC;
    color: #CC6600;
}

.font-36 {
    font-size: 36rpx;
    font-family: PingFang SC;
    color: rgba(51, 51, 51, 1);
}

.itdc-introduct {
    width: 100%;
    padding: 20rpx 53rpx 29rpx 25rpx;
    box-sizing: border-box;
}

.itdc-introduct text {
    overflow: hidden;
    line-height: 38rpx;
    word-break: break-all;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 28rpx;
    color: #999;
}

.itdc-introduct .itdc-introduct-text {
    color: #666;
}

.button-css {
    height: 60rpx !important;
    margin-left: 8rpx;
    width: 200rpx;
    padding: 0;
}

.itdc-head-content-top-text {
    font-size: 28rpx;
    color: #666;
}

.itdc-head-content-top-text text:nth-child(1) {
    font-size: 36rpx;
    font-weight: 600;
    color: #333;
}

.itdc-head-content-top-text text:nth-child(2) {
    margin: 0 16rpx;
}

.rate {
    border-radius: 10rpx;
    width: 240rpx;
    height: 40rpx;
    margin: 16rpx 0;
    line-height: 40rpx;
    background: #feeee8;
    display: flex;
    justify-content: space-between;
    padding: 0 12rpx;
    padding-bottom: 4rpx;
    align-items: center;
    box-sizing: border-box;
}
</style>