<template>
    <nav-bar :navbar-data="navbarData"></nav-bar>
    <view class="page video-consult-choose-date" :style="{ marginTop: height +'px', height: 'calc(100vh - '+ height +'px - env(safe-area-inset-bottom))' }">
        <view class="write-dise-con-scroll">
            <view class="choose-doctor-header-bg" :style="'background: url('+ imgHost +'/images/icon/graphic-consultation-bg.png) no-repeat;background-size: 100% auto'">
            </view>
            <view class="choose-doctor-header"></view>
            <view class="itdc-head">
                <view class="itdc-head-content" v-if="docObj">
                    <view class="itdc-head-portrait" onerror="imageError"
                        :style="'background:url('+ (docObj.image?docObj.image:imgHost+'/images/icon/avatar_doctor_act.png') +') no-repeat;background-size: 100%;'" />
                    <view class="itdc-head-content-top">
                        <view class="itdc-head-content-top-text">
                            <text>{{docObj.doctorName}}</text>
                            <text>{{docObj.title}}</text>
                            <text>{{docObj.locDesc}}</text>
                        </view>
                        <view class="itdc-rate">
                            <uni-rate :value="1" :size="14" allow-half void-icon="star" readonly active-color="#FA541C" />
                        </view>
                        <view>
                            咨询量：<text>{{docObj.totalNum}}</text>
                            <text v-if="docObj.resTime"><text>{{docObj.resTime}}</text>响应</text>
                        </view>
                    </view>
                </view>
            </view>
            <view class="choose-doctor-tabs">
                <view class="cdt-header border-bottom-after">{{schDate}}</view>
                <view class="choose-doctor-tabs-header">
                    <view v-for="(item,index) in schedulingDate" :key="index" :class="'choose-doctor-tabs-header-content '+ (schDate === item.date ? 'active-tabs' : '')" @tap="onChange"
                        :data-page="item">
                        <view class="cdthc-week">{{item.showWeek}}</view>
                        <view class="cdthc-title">{{item.showTitle}}</view>
                        <view :class="item.type === 'U' ? 'cdthc-no-number' : 'cdthc-number'">{{item.typeDesc}}</view>
                    </view>
                </view>
            </view>
            <scroll-view :scroll-y="true" style="padding: 0 24rpx;padding-bottom: 10rpx;box-sizing: border-box">
                <view v-for="(schList,index) in schedulingList" :key="index">
                    <view class="consulTime">{{schList.timeRange}}</view>
                    <view class="consul-list">
                        <view v-for="(resDetail, tip) in schList.resDetail" :key="tip" @tap="chooseRestTimeID" :data-index="resDetail.timeDatail" :id="resDetail.resTimeID" class="consul-list-item">
                            <view :class="schTimeKey==resDetail.resTimeID?'timeCroCheck consul-list-item-child':'consul-list-item-child'">
                                <view>{{resDetail.timeDatail}}</view>
                                <view>(余号：{{resDetail.usableNum}})</view>
                            </view>
                        </view>
                    </view>
                </view>
            </scroll-view>
        </view>
        <view class="btn-box">
            <van-button custom-class="btn" type="primary" block custom-style="background: #1890FFFF !important; height: 88rpx" @tap="gotoWrite" :disabled="nextStep">下一步</van-button>
        </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 VanButton from '../../../../../components/button/index'
    const app = getApp()
    export default {
        components: {
            'nav-bar': navBar,
            'van-button': VanButton
        },
        data() {
            return {
                imgHost: httpConfig && httpConfig.imgHost,
                height: app.globalData.height,
                navbarData: {
                    isGoHome: true,
                    isGoBack: true,
                    title: "选择时段"
                },
                docObj: null,
                nextStep: true,
                schTimeKey: '', ///预约时间ID
                active: 0,
                path: "../videoConsulWriteContent/videoConsulWriteContent",
                doctorData: {},
                locID: '',
                hisHospID: this.$cache.get('userData').hisHospID,
                schedulingList: [], ///排班列表
                schedulingDate: [], //排班日期列表
                schDate: "",
            }
        },
        onLoad: function(options) {
            console.log(app.globalData)
            this.setData({
                docObj: app.globalData.docObj,
                locID: app.globalData.locObj.locID,
                schDate: app.globalData.schDate,
            }, () => {
                this.getDocSchedulingDate();
                this.getDocSchedulingList();
            });
        },
        onReady: function() {
            app.globalData.writeObj.schDateKey = "";
        },
        methods: {
            ///排班日期改变
            onChange(event) {
                this.setData({
                    nextStep: true,
                    schDate: event.currentTarget.dataset.page.date
                }, () => {
                    app.globalData.schDate = event.currentTarget.dataset.page.date;
                    this.getDocSchedulingList();
                });
            },

            ///选择预约时间
            chooseRestTimeID: function(event) {
                this.setData({
                    schTimeKey: event.currentTarget.id,
                    nextStep: false
                });
                app.globalData.writeObj.schTimeKey = event.currentTarget.id;
                app.globalData.writeObj.time = event.currentTarget.dataset.index;
            },

            ///跳转到咨询内容页面
            gotoWrite: function(params) {
                if (this.nextStep) {
                    uni.showToast({
                        icon: 'none',
                        title: '请先选择挂号时间！'
                    })
                } else {
                    uni.navigateTo({
                        url: this.path,
                    })
                }
            },

            ///根据科室ID和医生ID获取排班日期
            getDocSchedulingDate: function() {
                let entrance = app.globalData.reservationEntrance;
                let data = {
                    params: [{
                        doctorID: this.docObj.doctorID,
                        locID: this.locID,
                        hospCode: this.hisHospID,
                        videoFlag: entrance === '3' ? "Y" : undefined,
                        opFlag: entrance === '4' ? "Y" : undefined,
                    }]
                }
                $http.post("urlS", this, {
                    namespace: "Y",
                    code: "03100039",
                    data: data,
                    success: function(res) {
                        if (+res.errorCode === 0) {
                            for (var i = 0; i < res.result.length; i++) {
                                res.result[i].showWeek = res.result[i].week ? Util.digitalConversionWeek(+res.result[i].week) : '';
                                res.result[i].showTitle = res.result[i].currentFlag === 'Y' ? '今天' : res.result[i].title.slice(3);
                                if (res.result[i].type === 'U') {
                                    res.result[i].typeDesc = '无号'
                                } else if (res.result[i].type === 'A') {
                                    res.result[i].typeDesc = '有号'
                                } else {
                                    res.result[i].typeDesc = '约满'
                                }
                            }
                            this.setData({
                                schedulingDate: res.result,
                                schDate: !this.schDate || this.schDate === "" ? (res.result.length > 0 ? res.result[0].date : "") : this.schDate
                            });
                        } else {
                            this.setData({
                                schedulingDate: []
                            });
                        }
                    }
                });
            },

            ///根据科室ID和医生ID获取排班列表
            getDocSchedulingList: function() {
                const self = this
                let entrance = app.globalData.reservationEntrance;
                let data = {
                    params: [{
                        doctorID: self.docObj.doctorID,
                        locID: self.locID,
                        hospCode: self.hisHospID,
                        videoFlag: entrance === '3' ? "Y" : undefined,
                        opFlag: entrance === '4' ? "Y" : undefined,
                        date: self.schDate
                    }]
                }
                uni.showLoading({
                    mask: true
                })
                $http.post("urlS", self, {
                    namespace: "Y",
                    code: "03100040",
                    data: data,
                    success: function(res) {
                        uni.hideLoading();
                        if (+res.errorCode === 0) {
                            console.log(res.result)
                            self.setData({
                                schedulingList: res.result
                            }, () => {
                                if (res.result.length === 1 && res.result[0].resDetail.length === 1) {
                                    self.setData({
                                        nextStep: false,
                                        schTimeKey: res.result[0].resDetail[0].resTimeID
                                    })
                                    app.globalData.writeObj.schTimeKey = res.result[0].resDetail[0].resTimeID;
                                    app.globalData.writeObj.time = res.result[0].resDetail[0].timeDatail;
                                }
                            });
                        } else {
                            self.setData({
                                schedulingList: []
                            });
                        }
                    }
                });
            },
        }

    }
</script>

<style scoped>
    .write-dise-con {
        padding-bottom: 100rpx;
    }

    .write-dise-con-scroll {
        width: 100%;
        height: 100%;
        overflow: auto;
        position: relative;
    }

    .choose-doctor-header-bg {
        position: absolute;
        left: 0;
        top: 0;
        height: 242rpx;
        width: 100%;
        z-index: -1;
    }

    .choose-doctor-header {
        padding: 0 24rpx;
        padding-top: 10rpx;
        box-sizing: border-box;
    }

    .choose-doctor-header-content {
        width: 100%;
        height: 100%;
        background: #fff;
        padding-top: 20rpx;
        box-sizing: border-box;
        border-radius: 10rpx;
    }

    .cdhc-steps {
        display: flex;
        justify-content: space-around;
    }

    .cdhc-steps-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        min-width: 112rpx;
    }

    .cdhc-steps-content text {
        color: #666;
        font-size: 28rpx;
        font-weight: bold;
    }

    .cdhc-steps-content:nth-child(1) text {
        color: #1890FF;
    }

    .cdhc-steps .cdhc-steps-image {
        width: 80rpx;
        height: 80rpx;
        margin-bottom: 12rpx;
    }

    .cdhc-steps-content .after,
    .cdhc-steps-content .before {
        position: absolute;
        width: 70%;
        height: 4rpx;
        background: #eee;
        top: 40rpx;
        right: 90%;
    }

    .cdhc-steps-content .before {
        left: 90%;
    }

    .itdc-head {
        padding: 32rpx 32rpx 23rpx 32rpx;
        background: rgba(255, 255, 255, 1);
        border-radius: 10rpx;
        margin: 9rpx 24rpx 10rpx 24rpx;
    }

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

    .wdc-footer-btn {
        background: #1890FFFF;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100rpx;
        line-height: 100rpx;
        font-size: 32rpx;
    }

    .itdc-head-content {
        display: flex;

    }

    .itdc-rate {
        padding: 10rpx 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;
    }

    .itdc-head-content .van-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;
    }

    .cdthc-number {
        color: #1890FF;
    }

    .cdthc-no-number {
        color: #ccc
    }

    .active-tabs .cdthc-title,
    .active-tabs .cdthc-number,
    .active-tabs .cdthc-no-number {
        color: #fff;
    }

    .consulTime {
        height: 72rpx;
        line-height: 72rpx;
        font-size: 32rpx;
        color: #666;
        padding-left: 24rpx;
        box-sizing: border-box;
        background: #FAF9F9;
    }

    .consul-list {
        width: 100%;
        padding: 24rpx;
        padding-bottom: 0;
        box-sizing: border-box;
        display: flex;
        flex-wrap: wrap;
        background: #fff;
    }

    .consul-list-item {
        width: 31%;
        margin-right: 3.5%
    }

    .consul-list-item-child {
        border: 1px solid #E1E1E1;
        border-radius: 10rpx;
        height: 94rpx;
        text-align: center;
        margin-bottom: 24rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: #666;
        font-size: 28rpx;
    }

    .consul-list-item:nth-child(3n) {
        margin-right: 0;
    }

    .timeCroCheck {
        background: #1890FF;
        color: #fff;
    }

    .van-row {
        padding: 24rpx;
        padding-bottom: 0;
        background-color: #FFFFFFFF;
    }

    .border-bottom-after {
        position: relative;
    }

    .cdt-header {
        text-align: center;
        background-color: #fff;
        height: 56rpx;
        line-height: 56rpx;
        font-size: 28rpx;
        color: #666;
    }

    .choose-doctor-tabs {
        margin: 14rpx 24rpx 0rpx 24rpx;
        top: 0rpx;
        position: -webkit-sticky;
        position: sticky;
        z-index: 99;
    }

    .choose-doctor-tabs-header {
        display: flex;
        padding: 16rpx;
        box-sizing: border-box;
        justify-content: space-around;
        background: #fff;
    }

    .choose-doctor-tabs-header-content {
        display: flex;
        flex-direction: column;
        width: 80rpx;
        height: 136rpx;
        color: #666;
        font-size: 28rpx;
        font-weight: bold;
        justify-content: center;
        align-items: center;
    }

    .active-tabs {
        background: #1890FF;
        color: #fff;
    }

    .cdthc-title {
        color: #333;
        font-size: 32rpx;
        margin: 6rpx 0;
    }

    .active-tabs .cdthc-title {
        color: #fff;
    }

    .video-consult-choose-date .btn-box {
        position: fixed;
        width: 100%;
		bottom: 0;
		/* #ifdef MP */
		bottom: calc(env(safe-area-inset-bottom) + 0rpx);
		/* #endif */
    }
	.video-consult-choose-date .btn-box .btn {
		border: 0 !important;
		border-radius: 0 !important;
	}
</style>