<template>
    <nav-bar :navbar-data="navbarData" />
    <view class="detail-content" :style="'padding-top: ' + navHeight + 'px;'">
        <view style="position: relative;">
            <view class="detail-head" :style="{background: 'url('+ imgHost +'/images/icon/bg_patients.png) no-repeat', backgroundSize: '100% 100%'}">
            </view>
            <view class="detail-head-func">
                <view class="tip" v-if="info && info.statusDesc=='拒绝'">
                    <image style="width:24rpx;height:24rpx;" :src="imgHost +'/images/icon/prompt_icon_refuse.png'" />
                    <text style="margin-left:20rpx">问诊申请已被拒绝</text>
                </view>
                <view class="tip" style="background: #F4F4F4;" v-if="info && info.statusDesc=='已结束'">
                    <text style="color: #999999;">本次问诊已结束</text>
                </view>
                <view class="tip" style="background: #E6F2FF;" v-if="info && info.statusDesc=='进行中'">
                    <text style="color: #007AFF;">问诊正在进行中…</text>
                </view>
                <view class="tip" style="background: #E6F2FF;" v-if="info && info.statusDesc=='未开始'">
                    <text style="color: #007AFF;">医生尚未接诊，请您耐心等待</text>
                </view>
                <view class="tip" style="background: #FFF5E4;" v-if="info && info.statusDesc=='取消'">
                    <image style="width:24rpx;height:24rpx;" :src="imgHost +'/images/icon/prompt_icon_cancel.png'" />
                    <text style="margin-left:20rpx;color: #FF8F37;">问诊申请已取消</text>
                </view>
                <view class="doc">
                    <view class="doc-img">
                        <image style="width:100rpx;height:100rpx;border-radius: 50%;" :src="info ? info.image : ''"></image>
                    </view>
                    <view class="doc-intro">
                        <view class="text1">{{ info ? info.doctorName : '-' }}<text>{{ info ? info.locDesc : '-' }}</text></view>
                        <view class="text2">
                            <uni-rate readonly value="3" color="#FF7E3B" size="28rpx" @change="onChange" />
                        </view>
                        <view class="text3">问诊量：<text>{{ info.consultNum }}</text></view>
                    </view>
                    <view class="doc-follow">
                        <view class="btn" @tap.stop="doctorSave" v-if="concernFlag===''">
                            <image style="width:26rpx;height:24rpx;" :src="imgHost +'/images/icon/icon_attention.png'" />
                            <text style="margin-left:8rpx">关注</text>
                        </view>
                        <view class="btn" @tap.stop="deleteDoctor" v-if="concernFlag==='Y'" style="background: #F3F3F3;color: #999999;border:0;">
                            <text>取消关注</text>
                        </view>
                    </view>
                </view>
                <view style="height:58rpx">
                    <image style="width:100%;height:58rpx" :src="imgHost +'/images/icon/shading.png'" />
                </view>
            </view>
        </view>
        <view class="detail-ord">
            <view>
                <text>就诊人</text>
                <text>{{ info ? info.patSymptomInfo.patName : '-' }}</text>
            </view>
            <view>
                <text>科室医生</text>
                <text>{{ info ? info.doctorName : '-' }}</text>
            </view>
            <view>
                <text>申请时间</text>
                <text>{{ info && info.consultationDate }}</text>
            </view>
            <view>
                <text>订单时间</text>
                <text>{{ info ? info.orderTime : '-' }}</text>
            </view>
        </view>
        <view class="detail-cons">
            <view>咨询内容</view>
            <view>{{ info ? info.patSymptomInfo.symptom : '-' }}</view>
        </view>
        <view class="detail-upimg" v-if="info && info.patSymptomInfo.imageData.length>0">
            <view>上传图片</view>
            <view>
                <image v-for="(item,index) in info.patSymptomInfo.imageData" :key="index" :src="item" @tap.stop="bigImg" />
            </view>
        </view>
        <view class="detail-cons" style="padding-bottom:15rpx" v-if="info && info.statusDesc=='拒绝'">
            <view style="color:#FB3349">拒绝原因</view>
            <view>{{ info.refReasonDesc || "无" }}</view>
        </view>
        <view style="background: #F6F6F6;height:20rpx"></view>

        <view class="detail-list">
            <view class="detail-list-item" @tap="jumpPage('message')">
                <view>咨询记录</view>
                <view class="right">
                    <text style="margin-right:20rpx">{{ info ? info.unReadMsgCount : '-' }}条未读消息</text>
                    <uni-icons size="28rpx" color="#333333" type="right" />
                </view>
            </view>
            <view class="detail-list-item">
                <view>电子病历</view>
                <view class="right">
                    <text style="color:#999999">暂无可查看病历</text>
                </view>
            </view>
            <view class="detail-list-item" @tap="jumpPage('prescription')">
                <view>电子处方</view>
                <view class="right">
                    <text style="margin-right:20rpx">查看处方</text>
                    <uni-icons size="28rpx" color="#333333" type="right" />
                </view>
            </view>
            <view class="detail-list-item" @tap="jumpPage('waitPayOrder')">
                <view>订单</view>
                <view class="right">
                    <text style="margin-right:20rpx">查看待支付订单</text>
                    <uni-icons size="28rpx" color="#333333" type="right" />
                </view>
            </view>
            <view class="detail-list-item" @tap="jumpPage('evaluate')">
                <view>评价</view>
                <view class="right">
                    <text style="margin-right:20rpx">去评价</text>
                    <uni-icons size="28rpx" color="#333333" type="right" />
                </view>
            </view>
        </view>
        <view style="background: #F6F6F6;height:20rpx"></view>
        <!-- <view class="detail-btn" v-if="info && info.statusDesc=='已结束'">
            <view class="btn1">再次预约</view>
        </view>
        <view class="detail-btn" v-if="info && info.statusDesc=='拒绝'">
            <view class="btn1">再次预约</view>
        </view>
        <view class="detail-btn" v-if="info && info.statusDesc=='取消'">
            <view class="btn1">再次预约</view>
        </view>
        <view class="detail-btn" v-if="info && info.statusDesc=='未开始'">
            <view class="btn2">进入候诊室</view>
            <view class="btn3">立即咨询</view>
        </view>
        <view class="detail-btn" v-if="info && info.statusDesc=='进行中'">
            <view class="btn2">返回候诊室</view>
            <view class="btn3">继续咨询</view>
        </view> -->
    </view>
</template>

<script>
import $http from "@/utils/https";
import Util from '@/utils/utils';
import httpConfig from '@/utils/httpConfig'
import NavBar from '@/components/navBar/index'
import VanTabs from '@/components/tabs/tabs'
import VanDivider from '@/components/divider/index'
const app = getApp()
export default {
    components: {
        'nav-bar': NavBar,
        'van-divider': VanDivider,
        'van-tabs': VanTabs
    },
    data() {
        return {
            imgHost: httpConfig && httpConfig.imgHost,
            height: app.globalData.height,
			navHeight: app.globalData.navHeight,
            navbarData: {
                isGoHome: true,
                isGoBack: true,
                title: "就诊详情",
                // background: `${httpConfig.imgHost}/images/icon/bg_patients.png`,
            },
            userData: null,
            info: null,
            options: {},
            concernFlag: '',
            concerID: ''
        }
    },
    onLoad: function (options) {
		console.log('options onLoad', options)
        let admID = options.admID
        let consultID = options.consultID
        let consultTypeID = options.consultTypeID
        let payFlag = options.payFlag
        let doctorID = options.doctorID
        let doctorName = options.doctorName
        let obj = {
            admID: admID,
            consultID: consultID,
            consultTypeID: consultTypeID,
            payFlag: payFlag,
            doctorID: doctorID,
            doctorName: doctorName
        }
        const userData = this.$cache.get('userData')
        this.setData({
            userData,
            ...obj
        }, () => {
            this.detailQuery();
        })
    },
    methods: {
        jumpPage(type) {
            let url = ''
            switch(type) {
                case 'message': // 消息
                    uni.switchTab({
                        url: "../../../tabBar/message/message"
                    })
                    break;
                case 'prescription': // 处方
                    uni.navigateTo({
                        url: '../../myPrescription/prescriptionList/prescription'
                    })
                    break;
                case 'waitPayOrder': // 待支付订单
                    uni.switchTab({
                        url: '../../../tabBar/order/order'
                    })
                    break;
                case 'evaluate': // 评价
                    let { admID, doctorID, doctorName } = this
                    uni.navigateTo({
                        url: "/pages/mine/evaluate/evaluate?" + "admID" + "=" + admID + "&doctorname" + "=" + doctorName + "&doctorID" + "=" + doctorID
                    })
                    break;
            }
            
        },
        detailQuery() {
            let { payFlag, admID, consultID, consultTypeID } = this
            var typeCode = []
            if (payFlag == 1) {
                var typeCode = ["01"]
            } else if (payFlag == 2) {
                var typeCode = ["02"]
            } else if (payFlag == 3) {
                var typeCode = ["05"]
            } else if (payFlag == 4) {
                var typeCode = ["03", "04"]
            } else {
                var typeCode = []
            }
            let data = {
                params: [{
                    "patID": this.$cache.get('userData').hisPatID,
                    "typeCode": typeCode ? typeCode : undefined,
                    "admID": admID ? admID : undefined,
                    "consultID": consultID ? consultID : undefined,
                    "consultTypeID": consultTypeID ? consultTypeID : undefined
                }]
            }
			console.log('02090009 == data:', data)
            //获取我的问诊列表
            $http.post("urlS", this, {
                code: "02090009",
                data: data,
                namespace: "Y",
                success: function (res) {
                    if (+res.errorCode === 0) {
						const data = res.result.rows
						let info = {}
						if(data && data.length == 1) {
							info = data[0]
						} else if(data && data.length > 1) {
							data.map(item => {
								if(+item.admID == +admID) info = item
							})
						}
                        info['consultNum'] = res.result.consultNum || ''
                        this.setData({
                            info
                        }, () => {
                            console.log('info==', info)
                            this.doctorQuery();
                        });
                    }
                }
            });
        },
        ///查询是否关注
        doctorQuery: Util.debounce(function () {
            let userData = this.$cache.get('userData');
            let data = {
                params: [{
                    openID: userData.openID || "",
                    patID: userData.hisPatID || "",
                    patNo: userData.hisPatNo || "",
                    hospCode: userData.hisHospID || "",
                    doctorType: "0",
                    doctorID: this.info.doctorID
                }]
            }
            $http.post("urlS", this, {
                code: "03100113",
                data: data,
                namespace: "Y",
                success: function (res) {
                    if (+res.errorCode === 0) {
                        this.setData({
                            concernFlag: res.result.data[0] ? res.result.data[0].concernFlag : '',
                            concerID: res.result.data[0] ? res.result.data[0].concerID : ''
                        });
                    } else {
                        this.setData({
                            concernFlag: 'N'
                        });
                    }
                }
            });
        }),

        ///关注医生
        doctorSave: Util.debounce(function () {
            let userData = this.$cache.get('userData');
            let data = {
                params: [{
                    openID: userData.openID || "",
                    doctorID: this.info.doctorID
                }]
            }
            $http.post("urlS", this, {
                code: "03100126",
                data: data,
                namespace: "Y",
                success: function (res) {
                    if (+res.errorCode === 0) {
                        this.setData({
                            concernFlag: 'Y'
                        }, () => {
                            this.doctorQuery()
                        })
                    }
                }
            });
        }),

        ///取消关注
        deleteDoctor: Util.debounce(function () {
            let userData = this.$cache.get('userData');
            let data = {
                params: [{
                    openID: userData.openID || "",
                    doctorID: this.info.doctorID,
                    concerID: this.concerID
                }]
            }
            $http.post("urlS", this, {
                code: "03100127",
                data: data,
                namespace: "Y",
                success: function (res) {
                    if (+res.errorCode === 0) {
                        this.setData({
                            concernFlag: ''
                        })
                    }
                }
            })
        })
    }
}
</script>

<style>
.detail-content {
    background: #FFFFFF;
	padding-bottom: 80rpx;
}

.detail-head {
    width: 100%;
    height: 274rpx;
    padding: 15rpx 56rpx 0 56rpx;
    box-sizing: border-box;
    display: flex;

}

.detail-head-func {
    position: absolute;
    bottom: -100rpx;
    left: 30rpx;
    right: 30rpx;
    box-sizing: border-box;
    background: #FFFFFF;
    box-shadow: 0rpx 4rpx 38rpx 0rpx rgba(211, 211, 211, 0.32);
    border-radius: 8rpx;
}

.detail-head-func .tip {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 52rpx;
    background: #FFF6F7;
    font-size: 22rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #FB3349;
    line-height: 32rpx;
}

.detail-head-func .doc {
    display: flex;
    align-items: center;
    margin: 30rpx 20rpx 0 20rpx;
}

.detail-head-func .doc-intro {
    margin-left: 32rpx;
    width: 370rpx;
}

.detail-head-func .doc-img {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: -20rpx;
}

.detail-head-func .doc-intro .text1 {
    margin-bottom: 16rpx;
    font-size: 30rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 500;
    color: #333333;
    line-height: 42rpx;
}

.detail-head-func .doc-intro .text1 text {
    font-size: 26rpx;
    color: #999999;
    font-weight: 400;
    line-height: 36rpx;
    margin-left: 20rpx;
}

.detail-head-func .doc-intro .text2 {
    margin-bottom: 16rpx;
    margin-left: -4rpx;
}

.detail-head-func .doc-intro .text3 {
    margin-bottom: 16rpx;
    font-size: 26rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 500;
    color: #333333;
    line-height: 36rpx;
}

.detail-head-func .doc-intro .text3 text {
    font-size: 30rpx;
    font-weight: 500;
    color: #007AFF;
    line-height: 42rpx;
}

.detail-head-func .doc-follow {
    display: flex;
    justify-content: center;
    align-items: center;
}

.detail-head-func .doc-follow .btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 140rpx;
    height: 56rpx;
    background: #007AFF;
    border-radius: 8rpx;
    border: 2rpx solid #007AFF;
    font-size: 26rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #F9FCFF;
    line-height: 36rpx;
    margin-right: 8rpx;
}

.detail-ord {
    margin: 5rpx 30rpx 0 30rpx;
    margin-top: 125rpx;
}

.detail-ord view {
    padding: 15rpx 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.detail-ord view text {
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
    line-height: 40rpx;
}

.detail-ord view text:nth-last-child(1) {
    color: #333333;
}

.detail-cons {
    margin: 0 30rpx;
    padding-bottom: 30rpx;
}

.detail-cons view {
    padding: 15rpx 0;
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
    line-height: 40rpx;
}

.detail-cons view:nth-last-child(1) {
    color: #333333;
    line-height: 38rpx;
    background: #F6F6F6;
    border-radius: 8px;
    padding: 30rpx 20rpx;
}

.detail-upimg {
    margin: 0 30rpx;
    padding-bottom: 15rpx;
}

.detail-upimg view {
    padding: 15rpx 0;
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
    line-height: 40rpx;
}

.detail-upimg view:nth-last-child(1) {
    padding: 5rpx 20rpx 0 20rpx;
}

.detail-upimg view:nth-last-child(1) image {
    width: 150rpx;
    height: 150rpx;
    border-radius: 8rpx;
    margin: 0 12rpx 0 0;
}

.detail-list {
    padding: 0 30rpx;
}

.detail-list-item {
    height: 110rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
    line-height: 40rpx;
    border-bottom: 2rpx solid #E5E5E5;
}

.detail-list-item .right {
    display: flex;
    align-items: center;
    font-size: 24rpx;
    color: #007AFF;
    line-height: 34rpx;
}

.detail-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 30rpx;
}

.detail-btn .btn1 {
    width: 591rpx;
    height: 84rpx;
    background: #007AFF;
    border-radius: 8rpx;
    font-size: 27rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #FFFFFF;
    line-height: 38rpx;
    display: flex;
    justify-content: center;
    align-items: center;
}

.detail-btn .btn3 {
    width: 313rpx;
    height: 84rpx;
    background: #007AFF;
    border-radius: 8rpx;
    font-size: 27rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #FFFFFF;
    line-height: 38rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 12rpx;
}

.detail-btn .btn2 {
    width: 313rpx;
    height: 84rpx;
    background: #FFFFFF;
    border-radius: 8rpx;
    font-size: 27rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #007AFF;
    line-height: 38rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2rpx solid #007AFF;
}
</style>