<template>
    <nav-bar :navbar-data="navbarData" ref="navBar" />
    <view class="my-consultation" :style="{paddingTop: height +'px', height: '100vh', boxSizing: 'border-box', overflow: 'hidden'}">
        <van-tabs :tabs="['全部','未开始','进行中','已结束','已取消']" :scroll="false" :active="active" @change="onChangeIndex" />
        <view :style="{height: 'calc(100vh - '+ (height + 35) +'px)', overflowY: 'auto'}">
            <view class="card" v-for="(item,index) in info" :key="index" @tap.stop="getConsultationDetail" :data-admID="item.admID"
                :data-consultID="item.consultID" :data-consultTypeID="item.consultTypeID">
                <view class="card-head">
                    <view class="card-head-show">
                        <image style="width:48rpx;height:48rpx;border-radius: 50%;" :src="item.image"></image>
                        <text class="text1">{{ item.doctorName }}</text>
                        <text class="text2">{{ item.locDesc }}</text>
                    </view>
                    <view class="card-head-status" v-if="item.statusDesc=='进行中'" style="color: #007AFF">
                        {{ item.statusDesc }}
                    </view>
                    <view class="card-head-status" v-if="item.statusDesc=='未开始'" style="color: #999999">
                        {{ item.statusDesc }}
                    </view>
                    <view class="card-head-status" v-if="item.statusDesc=='取消'" style="color: #FF5700">
                        {{ item.statusDesc }}
                    </view>
                    <view class="card-head-status" v-if="item.statusDesc=='拒绝'" style="color: #FB3349">
                        {{ item.statusDesc }}
                    </view>
                    <view class="card-head-status" v-if="item.statusDesc=='已结束'" style="color: #20A735">
                        {{ item.statusDesc }}
                    </view>
                </view>
                <view class="card-boby">
                    <view class="line" v-if="item.consultID!==''">
                        <view class="text1">咨询内容：</view>
                        <view class="text2">{{ item.patSymptomInfo.symptom }}</view>
                    </view>
                    <view class="line" v-if="item.statusDesc=='拒绝'">
                        <view class="text1">拒绝原因：</view>
                        <view class="text2" style="color:#FB3349">{{ item.refReasonDesc || "无" }}</view>
                    </view>
                    <view class="line" v-if="item.statusDesc=='取消'">
                        <view class="text1">取消原因：</view>
                        <view class="text2" style="color:#FF5700">无</view>
                    </view>
                    <view class="line">
                        <view class="text1">就诊人：</view>
                        <view class="text2">{{ item.patName }}</view>
                    </view>
                    <view class="line">
                        <view class="text1">服务类型：</view>
                        <view class="text2">{{ item.consultType }}</view>
                    </view>
                    <view class="line">
                        <view class="text1">就诊时间：</view>
                        <view class="text2">{{ item.orderTime }}</view>
                    </view>
                </view>
                <view class="card-foot">
                    <view class="card-foot-msg">
                        <text class="card-foot-text1" v-if="item.unReadMsgCount>0">{{ item.unReadMsgCount }}</text>
                        <text class="card-foot-text2" v-if="item.unReadMsgCount>0">条未读消息</text>
                    </view>
                    <view class="card-foot-buttonlist">
                        <view class="card-foot-buttonlist" v-if="item.statusDesc!='拒绝'&&item.statusDesc!='取消'">
                            <view class="card-foot-button" style="background: #007AFF;color: #F9FCFF;"
                                v-if="item.statusDesc==='未开始'&&item.consultType==='图文咨询'" @tap.stop="turnRecord"
                                :data-admid="item.admID" :data-touser="item.toUserID" :data-docimg="item.image"
                                :data-docname="item.doctorName">咨询</view>
                            <view class="card-foot-button" style="background: #007AFF;color: #F9FCFF;"
                                v-if="item.statusDesc==='进行中'&&item.consultType==='图文咨询'" @tap.stop="turnRecord"
                                :data-admid="item.admID" :data-touser="item.toUserID" :data-docimg="item.image"
                                :data-docname="item.doctorName">继续咨询</view>
                            <view class="card-foot-button"
                                v-if="item.statusDesc==='已结束'||item.statusDesc==='取消'||item.statusDesc==='拒绝'"
                                @tap.stop="turnRecord" :data-admid="item.admID" :data-touser="item.toUserID"
                                data-end="end" :data-docname="item.doctorName">咨询记录</view>
                            <view class="card-foot-button"
                                v-if="item.statusDesc==='已结束'&&item.evaluationInfo.totalNum==0" @tap.stop="evaluat"
                                :data-doctorName="item.doctorName" :data-admid="item.admID"
                                :data-docid="item.doctorID">评价</view>
                            <view class="card-foot-button" style="background: #007AFF;color: #F9FCFF;"
                                v-if="item.statusDesc==='未开始'&&item.consultType==='视频咨询'" @tap.stop="turnRecord"
                                :data-admid="item.admID" :data-touser="item.toUserID" :data-docimg="item.image"
                                :data-docname="item.doctorName">咨询</view>
                            <view class="card-foot-button" style="background: #007AFF;color: #F9FCFF;"
                                v-if="item.statusDesc==='进行中'&&item.consultType==='视频咨询'" @tap.stop="turnRecord"
                                :data-admid="item.admID" :data-touser="item.toUserID" :data-docimg="item.image"
                                :data-docname="item.doctorName">继续咨询</view>
                            <view class="card-foot-button" style="background: #007AFF;color: #F9FCFF;"
                                v-if="item.statusDesc==='未开始'&&item.consultType==='视频咨询'" @tap.stop="turnWait"
                                :data-admid="item.admID" :data-touser="item.toUserID"
                                :data-docname="item.doctorName">进入候诊室
                            </view>
                            <view class="card-foot-button" style="background: #007AFF;color: #F9FCFF;"
                                v-if="item.statusDesc==='进行中'&&item.consultType==='视频咨询'" @tap.stop="turnWait"
                                :data-admid="item.admID" :data-touser="item.toUserID"
                                :data-docname="item.doctorName">返回候诊室
                            </view>
                        </view>

                        <view v-if="item.statusDesc==='拒绝'||item.statusDesc==='取消'" class="card-foot-buttonlist">
                            <view class="card-foot-button" @tap.stop="turnRecord" :data-admid="item.admID"
                                :data-touser="item.toUserID" data-end="end" :data-docname="item.doctorName">咨询记录
                            </view>
                        </view>
                    </view>
                </view>
			</view>
            <!-- <van-divider contentPosition="center">数据已全部加载</van-divider> -->
			<view class="no-data" v-if="info && info.length == 0" :style="{height: 'calc(100% - '+ navHeight +'px)'}">
				<van-icon name="orders-o" size="50px" color="#cccccc" />
			    <view class="txt">暂无记录</view>
			</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 Loadmore from '@/components/loadmore/loadmore';
import VanTabs from '@/components/tabs/tabs';
import VanDivider from '@/components/divider/index';
import VanIcon from '@/components/icon/index';
const app = getApp()
export default {
    components: {
        'nav-bar': NavBar,
		'loadmore': Loadmore,
        'van-divider': VanDivider,
        'van-tabs': VanTabs,
		'van-icon': VanIcon,
    },
    data() {
        return {
            height: app.globalData.height,
            imgHost: httpConfig && httpConfig.imgHost,
            windowHost: httpConfig && httpConfig.ipDeault,
            navbarData: {
                isGoHome: true,
                isGoBack: true,
                title: "就诊记录"
            },
            userData: null,
            active: 0,
            info: [],
            inpressCount: ""
        }
    },
    onLoad() {
        const userData = this.$cache.get('userData')
        if (userData) {
            this.userData = userData
        }
    },
    onShow: function () {
        this.orderQuery();
        let pages = getCurrentPages();
        let currentPage = pages[pages.length - 1];
        let homeMsgData = this.$cache.get('homeMsgData');
        let mesIndex = '';
        homeMsgData && homeMsgData.forEach(function (item, index) {
            if (!(homeMsgData && homeMsgData.type && (homeMsgData.type === 'D' || homeMsgData.type === 'F' || homeMsgData.type === 'M' || homeMsgData.type === 'E')) && item.timetamp == currentPage.options) {
                mesIndex = index
            }
        })
        if (mesIndex != '') {
            homeMsgData.remove(mesIndex)
            this.$cache.set('homeMsgData', homeMsgData);
        }
    },
    methods: {
        onChangeIndex(event) {
            var that = this
            that.setData({
                active: ` ${event.detail.name}`,
            });
            that.orderQuery();
        },

        orderQuery: Util.debounce(function () {
            var payFlag = this.active
            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
                }]
            }
            //获取我的问诊列表
            $http.post("urlS", this, {
                code: "02090009",
                data: data,
                namespace: "Y",
                success: function (res) {
                    if (+res.errorCode === 0) {
                        let info = res.result && res.result.rows ? res.result.rows : [];
                        for (var i = 0; i < info.length; i++) {
                            let url = info[i] && info[i].image ? info[i].image : "";
                            info[i].image = url.indexOf("http") !== -1 ? url : this.windowHost + url;
                        }
                        this.setData({
                            info
                        });
                        var count = res.result.inpressCount
                        if (count > 0) {
                            this.setData({
                                inpressCount: "(" + count + ")"
                            });
                        } else {
                            this.setData({
                                inpressCount: ""
                            });
                        }
                    } else {
                        this.setData({
                            info: []
                        });
                    }
                }
            });
        }),

        getConsultationDetail: Util.debounce(function (e) {
            let admID = e.currentTarget.dataset["admid"]
            let consultID = e.currentTarget.dataset["consultid"]
            let consultTypeID = e.currentTarget.dataset["consulttypeid"]
            let payFlag = this.active
        }),

        turnRecord: Util.debounce(function (e) {
            //let { userData } = this;
            var userData = this.$cache.get('userData')
            let admid = e.currentTarget.dataset["admid"]
            let toUser = e.currentTarget.dataset["touser"]
            let docImg = e.currentTarget.dataset["docimg"]
            let end = e.currentTarget.dataset["end"]
            let doctorName = e.currentTarget.dataset["docname"]
            let patName = userData.patDesc
            uni.navigateTo({
                url: "/pages/message/pages/im/room/room?" + "admID" + "=" + admid + "&userID" + "=" + userData.imUserID + "&toUser" + "=" + toUser + "&docImg" + "=" + docImg + "&status=" + end + "&toUserName=" + doctorName + "&patName=" + patName
            })
            this.$refs.navBar.matchOrNot(admid);
        }),

        turnWait: Util.debounce(function (e) {
            //let { userData } = this;
            var userData = this.$cache.get('userData')
            let admid = e.currentTarget.dataset["admid"]
            let toUser = e.currentTarget.dataset["touser"]
            let doctorName = e.currentTarget.dataset["docname"]
            let patName = userData.patDesc
            uni.navigateTo({
                url: "/pages/index/pages/waitingConsulation/waitingConsulation?" + "admID" + "=" + admid + "&userID" + "=" + userData.imUserID + "&toUser" + "=" + toUser + "&doctorName=" + doctorName + "&patName=" + patName
            })
        }),

        evaluat: Util.debounce(function (e) {
            //let { userData } = this;
            let admid = e.currentTarget.dataset["admid"]
            let doctorname = e.currentTarget.dataset["doctorname"]
            let doctorID = e.currentTarget.dataset["docid"]
            uni.navigateTo({
                url: "/pages/mine/evaluate/evaluate?" + "admID" + "=" + admid + "&doctorname" + "=" + doctorname + "&doctorID" + "=" + doctorID
            })
        }),
        //图片加载出错，替换为默认图片
        imageError(e) {
            let {
                info,
                imgHost
            } = this;
            var index = e.target.dataset.index;
            info[index].image = imgHost + "/images/icon/avatar_doctor_act.png";
            this.setData({
                info
            });
        },
    }
}
</script>

<style lang="scss">
.card {
  background: #FFFFFF;
  margin-top: 10rpx;
  padding: 30rpx;
}

.my-consultation {
	box-sizing: border-box;
	.van-tabs {
		.van-tabs__scroll {
		  background: #FFFFFF !important;
		}
	}
}

.card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2rpx solid #E5E5E5;

}

.card-head-show {
  display: flex;
  align-items: center;
  padding-bottom: 20rpx;
}

.card-head-show .text1 {
  font-size: 30rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 500;
  color: #333333;
  line-height: 42rpx;
  margin-left: 22rpx;
}

.card-head-show .text2 {
  font-size: 26rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #999999;
  line-height: 36rpx;
  margin-left: 16rpx;
}

.card-head-status {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 26rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #20A735;
  line-height: 36rpx;
  padding-bottom: 20rpx;
}

.card-boby {
  padding: 20rpx 0 10rpx 0;
  border-bottom: 2rpx solid #E5E5E5;
}

.card-boby .line {
  margin-bottom: 10rpx;
  display: flex;
  justify-content: left;
}

.card-boby .text1 {
  width: 180rpx;
  font-size: 28rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 500;
  color: #333333;
  line-height: 40rpx;
  text-align: right;

}

.card-boby .text2 {
  font-size: 28rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #666666;
  line-height: 38rpx;
  width: 100%;
}

.card-foot {
  margin-top: 20rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-foot-button {
  min-width: 140rpx;
  height: 56rpx;
  background: #FFFFFF;
  border-radius: 8rpx;
  border: 2rpx solid #007AFF;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 26rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #007AFF;
  line-height: 36rpx;
  margin-left: 20rpx;
}

.card-foot-buttonlist {
  display: flex;
  align-items: center;
}

.card-foot-text1 {
  font-size: 32rpx;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #007AFF;
  line-height: 44rpx;
}

.card-foot-text2 {
  font-size: 22rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #999999;
  line-height: 32rpx;
  margin-left: 6rpx;
}
.card-foot-msg{
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>