<!-- 预约下次 -->
<template>
    <div>
        <div class="bg"></div>
        <main>
            <div class="container">
                <div class="doctorInfo">
                    <van-image
                        round
                        fit="cover"
                        width="1.3rem"
                        height="1.3rem"
                        :src="DoctorData.HeadImg?DoctorData.HeadImg:require('@/assets/images/doctor.png')"
                        class="doctorAvatar"
                    >
                        <template v-slot:loading>
                            <van-loading type="spinner" size="20" />
                        </template>
                    </van-image>

                    <div>
                        <h3>
                            {{DoctorData.DoctorName}}
                            <span>{{DoctorData.PositionalTitles | filterDoctorTitles}}</span>
                        </h3>
                        <p>{{DoctorData.HospitalDepartments}}</p>
                        <p>{{DoctorData.HospitalName}}</p>
                    </div>
                </div>

                <div class="seekInfo">
                    <div @click="$router.push('/chooseCity')">
                        <span>就诊城市</span>
                        <p>
                            {{NextData.areaCodeCn?NextData.areaCodeCn:'选择城市'}}
                            <van-icon style="vertical-align: top;" name="arrow" />
                        </p>
                    </div>
                    <div @click="GetCityHospital">
                        <span>出诊医院</span>
                        <p>
                            {{NextData.hospital?NextData.hospital:'选择医院'}}
                            <van-icon style="vertical-align: top;" name="arrow" />
                        </p>
                    </div>
                    <div @click="DateShow = true;">
                        <span>期望日期</span>
                        <p v-if="NextData.orderTime">
                            {{NextData.orderTime | filterTime}}
                            <van-icon style="vertical-align: top;" name="arrow" />
                        </p>
                        <p v-if="!NextData.orderTime">
                            选择日期
                            <van-icon style="vertical-align: top;" name="arrow" />
                        </p>
                    </div>
                    <div class="SMS">
                        <span>手机号码&nbsp;</span>
                        <input
                            v-if="!DoctorData.Mobile"
                            v-model="NextData.phone"
                            type="number"
                            placeholder="请输入手机号码"
                        />
                        <input
                            v-if="DoctorData.Mobile"
                            readonly
                            v-model="DoctorData.Mobile"
                            type="number"
                            placeholder="请输入手机号码"
                        />
                        <span style="opacity: 0;"></span>
                    </div>
                    <div class="SMS" v-if="!DoctorData.Mobile">
                        <span>短信验证码</span>
                        <input
                            v-model="NextData.verificationCode"
                            type="number"
                            placeholder="请输入短信验证码"
                        />
                        <span v-if="!DownTimeStatus" @click="SendSMS()">获取验证码</span>
                        <span v-if="DownTimeStatus">{{DownTimeNum}}s后获取</span>
                    </div>
                </div>
            </div>
            <button type="button" class="button button1" @click="NextOrder">提交</button>
        </main>

        <!--选择就诊日期-->
        <van-popup
            v-model="DateShow"
            position="bottom"
            round
            safe-area-inset-bottom
            :style="{ height: '40%' }"
        >
            <van-datetime-picker
                v-model="currentDate"
                type="date"
                :formatter="formatterDate"
                :min-date="minDate"
                @confirm="confirm"
                @cancel="DateShow = false"
            />
        </van-popup>

        <!--选择就诊医院-->
        <van-popup
            v-model="HospitalShow"
            position="bottom"
            round
            safe-area-inset-bottom
            :close-on-popstate="true"
            :style="{ height: '40%' }"
        >
            <van-picker
                show-toolbar
                :columns="HospitalList"
                value-key="HospitalName"
                @cancel="HospitalShow = false;"
                @confirm="ActiveHospital"
            />
        </van-popup>
    </div>
</template>

<script>
    export default {
        name: "nextSpecial",
        data() {
            return {
                DateShow: false,
                HospitalShow: false,
                currentDate: new Date(),
                minDate: new Date(),
                DownTimeNum: 180, // 短信倒计时
                DownTimeStatus: false,
                DoctorData: {},
                NextData: {
                    areaCode: "", // 就诊城市 code,
                    areaCodeCn: "", //  就诊城市名称
                    hospitalID: "", // 出诊医院 id,
                    hospitalCn: "", //出诊医院名称
                    doctorID: "", //医生id ,
                    orderTime: "", // 期望日期 ,
                    phone: "", //手机号码 ,
                    verificationCode: "" // 短信验证码 ，如果获取的到手机号码则不填
                },
                location: {}, // 定位信息
                HospitalList: [] //根据城市code的医院列表
            };
        },
        created() {
            this.NextData.doctorID = this.$route.query.id;
            this.GetNextOrder();
            this.location = JSON.parse(sessionStorage["chooseCity"] || "{}");
            this.NextData.areaCode = this.location.adcode || this.location.AreaCode;
            this.NextData.areaCodeCn = this.location.AreaName || this.location.city;
        },
        destroyed() {
            this.$toast.clear();
        },
        methods: {
            // 预约下次坐诊
            NextOrder() {
                var obj = this.NextData;

                if (!obj.areaCode) {
                    this.$toast("请选择就诊城市");
                    return;
                }

                if (!obj.hospitalID) {
                    this.$toast("请选择出诊医院");
                    return;
                }
                if (!obj.orderTime) {
                    this.$toast("请选择出诊日期");
                    return;
                }

                var MobileReg = /^1([358][0-9]|4[579]|66|7[0135678]|9[89])[0-9]{8}$/;
                var SMSReg = /^[0-9]{6}$/;
                if (!this.DoctorData.Mobile) {
                    if (!obj.phone) {
                        this.$toast("请填写手机号");
                        return;
                    }

                    if (!obj.verificationCode) {
                        this.$toast("请填写短信验证码");
                        return;
                    }

                    if (!MobileReg.test(obj.phone)) {
                        this.$toast("请输入正确的手机号");
                        return;
                    }

                    if (!SMSReg.test(obj.verificationCode)) {
                        this.$toast("请输入正确的短信验证码");
                        return;
                    }
                }

                this.$toast({
                    message: "提交中...",
                    type: "loading",
                    duration: 30000,
                    forbidClick: true
                });
                this.$http.NextOrder(obj).then(res => {
                    console.log(res);
                    this.$toast.clear();
                    if (res.data.IsSuccess) {
                        var self = this;
                        this.$toast({
                            message: res.data.ResultMsg,
                            type: "success",
                            duration: 2000,
                            forbidClick: true
                        });
                        setTimeout(() => {
                            self.$router.go(-1);
                        }, 2000);
                    } else {
                        this.$toast({
                            message: res.data.ResultMsg,
                            type: "fail",
                            duration: 2000,
                            forbidClick: true
                        });
                    }
                });
            },

            // 发送短信验证码
            SendSMS() {
                var MobileReg = /^1([358][0-9]|4[579]|66|7[0135678]|9[89])[0-9]{8}$/;
                var CodeReg = /^[0-9a-zA-Z]{4}$/;
                var SMSReg = /^[0-9]{6}$/;

                if (!MobileReg.test(this.NextData.phone)) {
                    this.$toast("请输入正确的手机号");
                    return;
                }

                var obj = {
                    Mobile: this.NextData.phone,
                    verificationCode: this.NextData.verificationCode
                };
                this.$toast({
                    message: "发送中...",
                    type: "loading",
                    duration: 30000,
                    forbidClick: true
                });
                this.$http.SendModifyPswdSMS(obj).then(res => {
                    this.$toast.clear();
                    if (res.data.IsSuccess) {
                        this.$toast({
                            message: res.data.ResultMsg,
                            type: "success",
                            duration: 2000,
                            forbidClick: true
                        });
                        this.DownTime();
                    } else {
                        this.$toast({
                            message: res.data.ResultMsg,
                            type: "fail",
                            duration: 2000,
                            forbidClick: true
                        });
                    }
                });
            },

            // 短信验证码倒计时
            DownTime() {
                this.DownTimeStatus = true;
                var t = setInterval(() => {
                    this.DownTimeNum--;
                    if (this.DownTimeNum <= 0) {
                        clearInterval(t);
                        t = null;
                        this.DownTimeNum = 180;
                        this.DownTimeStatus = false;
                    }
                }, 1000);
            },

            // 根据医生ID 获取下次预约的基本信息
            GetNextOrder() {
                this.$http.GetNextOrder(this.NextData.doctorID).then(res => {
                    console.log(res);
                    if (res.data.IsSuccess) {
                        this.DoctorData = res.data.ResultObject;
                    } else {
                        this.$toast(res.data.ResultMsg);
                    }
                });
            },

            // 选择期望日期
            confirm(date) {
                this.DateShow = false;
                var str =
                    date.getFullYear() +
                    "/" +
                    (date.getMonth() + 1) +
                    "/" +
                    date.getDate();
                this.$set(this.NextData, "orderTime", str);
            },

            // 根据城市Code 加载合作医院
            GetCityHospital() {
                if (!this.NextData.areaCode) {
                    this.$toast("请先选择就诊城市");
                    return;
                }

                this.$http.GetCityHospital(this.NextData.areaCode).then(res => {
                    if (res.data.IsSuccess) {
                        if (res.data.ResultObject.length == 0) {
                            this.$toast("当前城市暂无合作医院");
                            return;
                        }
                        this.HospitalShow = true;
                        this.HospitalList = res.data.ResultObject;
                    } else {
                        this.$toast(res.data.ResultMsg);
                    }
                });
            },

            // 选择医院
            ActiveHospital(e) {
                console.log(e);
                this.HospitalShow = false;
                this.NextData.hospital = e.HospitalName;
                this.NextData.hospitalID = e.ID;
            },

            // 日期格式化
            formatterDate(type, value) {
                if (type === "year") {
                    return `${value}年`;
                } else if (type === "month") {
                    return `${value}月`;
                }
                return `${value}日`;
            }
        }
    };
</script>

<style scoped lang="less">
    .HospitalShowCtn {
        box-sizing: border-box;
        width: 100%;
        margin-top: 0.6rem;
    }
    main {
        text-align: left;
    }
    .bg {
        width: 7.5rem;
        height: 3.13rem;
        background: url("../../../assets/images/doctor-bg.png") no-repeat 0 0;
        -webkit-background-size: 7.5rem 3.13rem;
        background-size: 7.5rem 3.13rem;
    }
    .container {
        width: 7.1rem;
        margin: -1.85rem auto 0;
        border-radius: 5px;
        background-color: #fff;
        box-sizing: border-box;
        padding: 0.2rem 0.3rem;
        box-shadow: 0px 2px 3px 2px #f1f1f2;
        .doctorInfo {
            display: flex;
            align-items: center;
            margin-bottom: 1rem;
            .doctorAvatar {
                margin-right: 0.2rem;
            }
            h3 {
                font-size: 0.34rem;
                color: #333333;
                margin-bottom: 0.1rem;
                span {
                    font-size: 0.26rem;
                    margin-left: 0.2rem;
                }
            }
            p {
                font-size: 0.26rem;
                color: #333333;
                margin-bottom: 0.1rem;
            }
        }
        .seekInfo {
            > div {
                display: flex;
                justify-content: space-between;
                align-items: center;
                height: 1rem;
                > span {
                    font-size: 0.26rem;
                    color: #666666;
                }
                > span:nth-of-type(1) {
                    min-width: 1.6rem;
                    display: inline-block;
                }
                > p {
                    font-size: 0.28rem;
                    color: #333333;
                    width: 4.5rem;
                    text-align: right;
                }
            }
            .SMS {
                > input {
                    height: 50%;
                    font-size: 0.24rem;
                    color: #333333;
                    line-height: normal;
                }
                span:nth-of-type(2) {
                    display: inline-block;
                    font-size: 0.24rem;
                    color: #ffffff;
                    border-radius: 25px;
                    text-align: center;
                    padding: 0.15rem 0.2rem;
                    background-color: #2a94ff;
                    min-width: 1.6rem;
                }
            }
        }
    }
    .patient {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 1rem;
        box-sizing: border-box;
        padding: 0 0.3rem;
        box-shadow: 0px 2px 3px 2px #f1f1f2;
        width: 7.1rem;
        margin: 0.2rem auto 0;
        border-radius: 5px;
        > span {
            font-size: 0.26rem;
            color: #666666;
        }
        > p {
            font-size: 0.28rem;
            color: #333333;
            display: flex;
            align-items: center;
        }
        i {
            font-size: 0.32rem;
        }
    }
    .hint {
        font-size: 0.22rem;
        color: #666666;
        padding: 0 0.3rem;
        margin: 0.2rem auto;
        line-height: 1.2;
    }
    .button1 {
        background-color: #4ca0ff;
        margin: 0.4rem auto;
        display: block;
        width: 6rem;
    }
</style>
