<template>
  <div class="home">
    <nav-bar url="/"></nav-bar>
    
    <div class="container">
      <div class="bt">{{info.title}}</div>
      <span class="nr" v-html="info.body"></span>
    </div>
    <div class="di_nav">
      <van-checkbox v-model="checked" checked-color="#46C3B0">我已阅读并同意</van-checkbox>
      <div class="btn">
        <a @click="selectTime()">确认</a>
        <!-- <h2>
          <router-link to="Member_ghjl">预约列表</router-link>
        </h2>-->
        <!-- <h3>
          <a @click="selectTime(1)">今日挂号</a>
          <a @click="selectTime(2)">预约挂号</a>
          <van-calendar v-model="flag" @confirm="onConfirm" />
        </h3>-->
      </div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import { Toast } from "vant";
import { apiGetReservePresent } from "@/request/api.js";
export default {
  data() {
    return {
      title: "",
      flag: false,

      info: {},
      checked: false,
      yuyue: {
        t: "",
        d: "",
        k: ""
      },

      
    };
  },
  mounted() {

    // console.log(this.$route.meta.title);
    this.title = this.$route.meta.title;
    // apiGetReservePresent().then(res => {
    //   this.info = res.data;
    // });
  },
  methods: {
    
    
    selectTime(type) {
      if (!this.checked) {
        Toast("请先阅读并同意挂号须知");
        return;
      }
      this.$router.push({ path: "/Xzks" });
      return
      this.yuyue.z = type; //挂号类型
      if (type == 1) {
        var aData = new Date();
        let value =
          aData.getFullYear() +
          "-" +
          (aData.getMonth() + 1) +
          "-" +
          aData.getDate();
        this.yuyue.t = value;
        sessionStorage.setItem("yuyue", JSON.stringify(this.yuyue));
        this.$router.push({ path: "/Xzks" });
        return;
      }
      this.flag = true;
    },
    onConfirm(date) {
      this.flag = false;
      this.yuyue.t = this.formatDate(date);
      sessionStorage.setItem("yuyue", JSON.stringify(this.yuyue));
      this.$router.push({ path: "/Xzks" });
    },
    formatDate(date) {
      return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
    }
  }
};
</script>


<style scoped lang="scss">

.bt {
  font-size: 32px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #333333;
  text-align: center;
  padding-top: 50px;
  padding-bottom: 30px;
}
.nr {
  font-size: 28px;
  color: #333333;
  line-height: 42px;
}
.di_nav {
  position: fixed;
  bottom: 0px;
  left: 0px;
  box-sizing: border-box;
  padding: 0 20px;
  width: 100%;
  height: 110px;
  background: #ffffff;
  box-shadow: 0px -3px 10px 0px rgba(0, 0, 0, 0.04);
  display: flex;
  justify-content: space-between;
  align-items: center;
  ::v-deep .van-checkbox__label {
    font-size: 26px;
  }
  ::v-deep .van-checkbox__icon {
    width: 35px;
  }
  ::v-deep .van-checkbox__icon .van-icon {
    width: 35px;
    height: 35px;
  }
  .btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    a{
      width: 190px;
      height: 65px;
      line-height: 65px;
      border: 2px solid #46c3b0;
      border-radius: 12px;
      display: block;
      color: #46c3b0;
      font-size: 32px;
      text-align: center;
    }
    h2 a {
      width: 190px;
      height: 65px;
      line-height: 65px;
      border: 2px solid #46c3b0;
      border-radius: 12px;
      display: block;
      color: #46c3b0;
      font-size: 32px;
      text-align: center;
    }
    h3 a {
      width: 190px;
      height: 65px;
      line-height: 65px;
      text-align: center;
      background: linear-gradient(270deg, #1ce27d, #05c6af);
      border-radius: 12px;
      display: inline-block;
      font-size: 32px;
      color: #ffffff;
    }
    h3 a:nth-last-child(1) {
      background: linear-gradient(270deg, #25c1f2, #2e82ef);
      margin-left: 15px;
    }
  }
}
</style>
