<template>
    <view>
        <van-popup :show="showPopup" position="bottom" custom-style="height: 80%; background-color: transparent; padding-bottom: 0;">
            <view class="registration-notice-container">
                <view class="h2">{{ hospDesc }}预约挂号须知</view>
                <scroll-view class="registration-notice-scroll" :scroll-y="true">
                    <view class="registration-notice-content">
                        <view class="h3 pdb-20">尊敬的病友及家属：</view>
                        <view class="h4">为了保证您就诊顺畅和安全，请仔细阅读预约挂号须知：</view>
                        <view class="p">
                            信息填写要求请正确填写
                            <text class="red">就诊人姓名、身份证号码、手机号码</text>
                            。请勿使用他人姓名与本人身份证或孩子姓名与家人身份证组合等不规范方式进行就诊。否则到院后无法看诊，造成相关问题，医院拒不负责并自行承担相关法律责任。
                        </view>
                        <view class="h3">
                            <text class="bit">1</text>
                            就诊凭证
                        </view>
                        <view class="p">就诊时请持本人医保卡，实名就诊。</view>
                        <view class="h3">
                            <text class="bit">2</text>
                            按时就诊
                        </view>
                        <view class="p">预约成功后，直接凭预约短信在导诊台登记就诊。就诊时，请携带既往就诊资料。</view>
                        <view class="h3">
                            <text class="bit">3</text>
                            退号规定
                        </view>
                        <view class="p">因故不能如约就诊，请在就诊前1天24:00前取消预约。挂号后连续退号未就诊3次以上的患者，智慧医院挂号将受限制。</view>
                        <view class="h3">
                            <text class="bit">4</text>
                            理解异动情况
                        </view>
                        <view class="p">智慧医院挂号时间为候诊时段，非医生面诊时间，可能因前面患者病情复杂导致延误，请理解并耐心等候。</view>
                        <view class="h3">
                            <text class="bit">5</text>
                            医生停诊处理
                        </view>
                        <view class="p">
                            如遇特殊情况医生停诊，给您造成的不便敬请谅解。医生临时停诊工作人员将会在您就诊前以电话通知您，请配合工作人员进行退费或重新预约，请您留意接听电话。
                            <text v-if="is_registeration_show">
                                若因医生停诊导致您重新预约后就诊时间较晚，医院可根据实际情况为您提供一些优先安排检查等服务，以尽量减少您的等待时间。
                            </text>
                        </view>
                        <view class="h3">
                            <text class="bit">6</text>
                            低龄儿童互联网诊疗限制告知
                        </view>
                        <view class="p">本人/监护人已知悉并同意：由于互联网诊疗存在远程信息采集、体格检查及病情判断受限等客观限制，为保障低龄儿童诊疗安全，本互联网医院暂不为六周岁以下儿童提供线上挂号、问诊、复诊、开具处方及药品配送等互联网诊疗服务。</view>
                        <view class="h3">感谢您的理解与配合，祝您早日康复！</view>
                    </view>
                </scroll-view>
                <view class="btn-box">
                    <!-- <view class="tips" wx:if="{{ registrationNoticeDisabled }}">{{ buttonText }}</view> -->
                    <van-button
                        :disabled="registrationNoticeDisabled"
                        @tap.native="openShow($event, { option: 'loc' })"
                        data-option="loc"
						custom-class="btn"
                        type="info"
                    >
                        {{ buttonText }}
                    </van-button>
                </view>
            </view>
        </van-popup>
    </view>
</template>

<script>
// components/registrationNotice/registrationNotice.js
import VanPopup from '@/components/popup/index.vue';
import VanButton from '@/components/button/index.vue';
let timer;
export default {
	components: {
		'van-popup': VanPopup,
		'van-button': VanButton
	},
    data() {
        return {
            showPopup: false,
            count: 5,
            buttonText: '请仔细阅读挂号须知，5s后可操作',
            registrationNoticeDisabled: true,
            // 须知按钮是否禁用
            hospDesc: '',
            is_registeration_show: true
        };
    },
    props: {
        closeButtonText: {
            type: String,
            default: '确认挂号'
        }
    },
    mounted() {
        // 处理小程序 attached 生命周期
        this.attached();
    },
    destroyed: function () {
        // 在组件实例被从页面节点树移除时执行
        this.resetData();
    },
    methods: {
        handlePageShow() {
            this.resetData();
        },

        attached: function () {},

        resetData() {
            this.setData({
                count: 5,
                buttonText: '请仔细阅读挂号须知，5s后可操作',
                registrationNoticeDisabled: true
            });
        },

        openShow(e, _dataset) {
            /* ---处理dataset begin--- */
            this.handleDataset(e, _dataset);
            /* ---处理dataset end--- */
            const _this = this;
            const bol = !_this.showPopup;
            if (bol) {
                const userData = _this.$cache.get('userData');
                _this.setData(
                    {
                        hospDesc: userData ? userData.hospDesc : '',
                        showPopup: bol,
                        is_registeration_show: userData.hisHospID != 'H34'
                    },
                    () => {
                        _this.shutDown();
                    }
                );
            } else {
                if (_this.registrationNoticeDisabled) {
                    return;
                }
                _this.setData(
                    {
                        showPopup: false
                    },
                    () => {
                        _this.resetData();
                        _this.$emit('topage', {
                            detail: {
                                option: e.currentTarget.dataset.option
                            }
                        });
                    }
                );
            }
        },

        shutDown() {
            const _this = this;
            let { count } = _this;
            timer = setTimeout(() => {
                count = count - 1;
                console.log(count);
                if (count == 0) {
                    _this.setData({
                        count: 5,
                        registrationNoticeDisabled: false,
                        buttonText: '确认挂号'
                    });
                } else if (count > 0) {
                    _this.setData(
                        {
                            count: count,
                            buttonText: '请仔细阅读挂号须知，' + count + 's后可操作',
                            registrationNoticeDisabled: true
                        },
                        () => {
                            _this.shutDown();
                        }
                    );
                }
            }, 1000);
        },

        reset() {
            clearTimeout(timer);
            this.setData({
                count: 5,
                showPopup: false,
                registrationNoticeDisabled: true,
                buttonText: '请仔细阅读，5s后可关闭'
            });
        }
    },
    created: function () {}
};
</script>
<style lang="scss">
.registration-notice-container {
    box-sizing: border-box;
    height: 100%;
    padding: 80rpx 20rpx 80px;
    background-color: #f7f7f7;
    border-radius: 20rpx 20rpx 0 0;
}
.registration-notice-scroll {
    height: calc(100% - 248rpx);
    background-color: #fff;
}
.registration-notice-content {
    box-sizing: border-box;
    padding: 10rpx 20rpx 40rpx;
}
.btn-box {
    text-align: center;
    padding: 20rpx 0;
    background: #f7f7f7;
}
.btn-box .tips {
    height: 100rpx;
    line-height: 100rpx;
    color: #1989fa;
    font-size: 36rpx;
}

.btn-box .btn {
	border-radius: 8px; 
	width: 100%;
	height: 48px;
}

.h2 {
    font-size: 36rpx;
    text-align: center;
    font-weight: bold;
    height: 100rpx;
    line-height: 100rpx;
    border-radius: 40rpx 40rpx 0 0;
    background-color: #1989fa; /* #020a72*/
    color: #fff;
}
.h3 {
    padding: 20rpx 0 0;
    font-size: 28rpx;
    line-height: 36rpx;
    font-weight: bold;
    color: #0455a7;
}
.h4 {
    font-size: 26rpx;
    line-height: 36rpx;
    color: #0455a7;
    padding-bottom: 10rpx;
}
.p {
    padding-left: 46rpx;
    text-align: justify;
    box-sizing: border-box;
    font-size: 26rpx;
}
.bit {
    display: inline-block;
    width: 36rpx;
    height: 36rpx;
    line-height: 36rpx;
    margin-right: 10rpx;
    border-radius: 100%;
    text-align: center;
    font-size: 24rpx;
    color: #fff;
    background-color: #0455a7;
    transform: translateY(-4rpx);
}

.red {
    color: #830d9b;
    font-weight: bold;
}
.pdb-20 {
    padding-bottom: 20rpx;
}
</style>
