<template>
  <div class="home">
    <nav-bar/>
    <div class="bj"></div>
    <div class="lxr" @click="handleCardSelect">
      <div class="lxrr" v-if="card && card.id">
        <h2>
          {{ card.name }}
          <p>卡号：{{ card.cardNo }}</p>
        </h2>
        <h3>
          <i class="van-icon van-icon-arrow van-cell__right-icon"></i>
        </h3>
      </div>
      <van-contact-card type="add" add-text="请选择就诊人" v-else/>
    </div>

    <!--div class="ts_box">
      <h2>武警宁夏总队医院核酸检测公告</h2>
      <p class="p1">&nbsp;&nbsp;&nbsp;&nbsp;鉴于当前发生的新型冠状病毒肺炎的疫情形势，为了防止疫情进一步扩散，最大限度地保障患者家属、医务人员和全社会群众的安全，请认真阅读以下内容，若您隐瞒事实，造成感染传播，疫情扩散等情况发生，依据相关法律规定，您除了承担民事赔偿责任外，还将被“追究危害公共安全罪”的刑事责任。</p>
      <p class="p1">若您及家属中存在有以下情形者，请预约到发热门诊进行排查。</p>
      <p class="p1">1、本人有发热和/或呼吸道症状及乏力、皮肤出血等症状。</p>
      <p class="p1">2、近期内有到过疫区或有病例报告社区的旅行史或居住史。</p>
      <p class="p1">3、来院前14天是否有过境外(韩国、意大利、伊朗、日本)旅行或居住史。</p>
      <p class="p1">4、接触来自疫区或有病例报告社区的发热或有呼吸道症状的患者。</p>
      <p class="p1">5、聚集性发病。</p>
      <p class="p1">6、与新型冠状病毒感染者有接触史。</p>
    </div-->

    <div class="in_box">
      <div class="bt">
        <img class="img" src="../assets/label.png"/>选择预约日期
      </div>
    </div>
    <ul class="timeSlelct">
      <li
          v-for="(item, index) in same_week"
          :class="{ active: same_day == item.date }"
          @click="timeSlelct(item)"
          :key="index"
      >
        <div>{{ item.week }}</div>
        <div>{{ item.name }}</div>
        <span></span>
      </li>
    </ul>
    <div class="in_box">
      <van-radio-group v-model="radio">
        <van-radio name="AM" icon-size="24px" :disabled="amdisabled"
        >上午 08:00-11:50
        </van-radio>
        <van-radio name="PM" icon-size="24px" :disabled="pmdisabled"
        >下午 14:30-17:20
        </van-radio>
        <!--van-radio name="NT" icon-size="24px" :disabled="ntdisabled"
          >夜间 18:00-08:00</van-radio-->
      </van-radio-group>
    </div>
    <div class="qrxx">
      <div class="in_box">
        <div class="bt">
          <img class="img" src="../assets/label.png"/>新冠核酸检测
        </div>
      </div>
      <ul>
        <li>
          <h2>医院名称</h2>
          <h3>武警宁夏总队医院</h3>
        </li>
        <li>
          <h2>项目名称</h2>
          <h3>核酸检测</h3>
        </li>
      </ul>
    </div>
    <van-button
        class="btn"
        color="#166bcc"
        :loading="loading" type="primary"
        loading-text="请稍后..."
        @click="onConfirm">预约
    </van-button>
  </div>
</template>

<script>
// @ is an alias to /src
import {
  apiUserCardList,
  apiOpAppAppoint,
  apiOpAppRegist,
  apiopHsjc,
  apiopDjcx,
} from "@/request/api.js";
import {Toast, Dialog} from "vant";

export default {
  data() {
    return {
      title: "",
      list: [],
      httpurl: this.httpurl,
      yuyue: {},
      hesuan: {},
      card: {},
      today: "",
      week: [],
      same_week: [], //保存当前最新的时间
      same_day: "", //当天的时间,
      radio: "AM",
      amdisabled: false,
      pmdisabled: false,
      ntdisabled: false,
      loading: false,
    };
  },
  mounted() {
    console.log(this.$route.meta.title);
    this.getWeek();
    this.title = this.$route.meta.title;
    this.yuyue = JSON.parse(sessionStorage.getItem("yuyue"));
    this.card = JSON.parse(sessionStorage.getItem("card"));
    this.getradiostate();
  },
  methods: {
    getradiostate() {
      let date = new Date();
      let hour = date.getHours();
      let min = date.getMinutes();
      if (hour * 60 + min > 720 && hour * 60 + min < 1040) {
        this.amdisabled = true;
        this.radio = "PM";
      } else if (hour * 60 + min > 1040) {
        this.amdisabled = true;
        this.pmdisabled = true;
        this.radio = "";
      } else {
      }
    },
    timeSlelct(item) {
      this.same_day = item.date;
      this.hesuan.t = item.date2;
      console.log(this.hesuan.t);
      if (item.date == this.today) {
        this.hesuan.z = 1;
        this.getradiostate();
      } else {
        this.hesuan.z = 2;
        (this.amdisabled = false),
            (this.pmdisabled = false),
            (this.radio = "AM");
      }
    },

    getWeek() {
      // 默认显示当天前一周的数据
      let data = [];
      this.start = this.getDay(+7);
      this.end = this.getDay();
      for (let i = 6; i >= 0; i--) {
        data.push(this.getDay(+i));
      }
      var date = data.reverse(); //得出一周的日期进行排序
      this.week = date;
      var date = this.week;
      var pkc = []; /* 用于存储展示的日期数据 */
      var weekday = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
      date.forEach((item, index) => {
        //循坏日期
        var f = new Date(item);
        var week = f.getDay(); //计算出星期几
        var str1 = item.split("/");
        var strs =
            (str1[1] >= 10 ? str1[1] : "0" + str1[1]) +
            "." +
            (str1[2] >= 10 ? str1[2] : "0" + str1[2]);
        var yyyyddmmdate =
            str1[0] +
            "-" +
            (str1[1] >= 10 ? str1[1] : "0" + str1[1]) +
            "-" +
            (str1[2] >= 10 ? str1[2] : "0" + str1[2]);
        var weeks = weekday[week]; /* 将计算出来的时间带入数字得出中文 */
        var time = Math.round(new Date(item) / 1000); //时间戳转换
        var s = {}; //用于存储每个日期对象
        s.date = item;
        s.date2 = yyyyddmmdate;
        s.name = strs;
        s.week = weeks;
        s.times = time;
        pkc.push(s);
      });
      this.same_week = pkc;
      // console.log(this.same_week)
      //pkc存储着今天的年月日星期几，时间戳等
      this.same_day = this.today = pkc[0].date; //今天的数据
      this.hesuan.t = pkc[0].date2;
    },
    getDay(day) {
      var today = new Date();
      var targetday_milliseconds = today.getTime() + 1000 * 60 * 60 * 24 * day;
      today.setTime(targetday_milliseconds);
      var tYear = today.getFullYear();
      var tMonth = today.getMonth();
      var tDate = today.getDate();
      tMonth = this.doHandleMonth(tMonth + 1);
      tDate = this.doHandleMonth(tDate);
      return tYear + "/" + tMonth + "/" + tDate;
    },
    doHandleMonth(month) {
      var m = month;
      if (month.toString().length == 1) {
        m = month;
      }
      return m;
    },

    onConfirm() {
      let _this = this;
      // console.log(_this.card)
      if (!_this.card) {
        Toast("请确认是否已选择就诊人");
        return;
      }
      if (!_this.radio) {
        Toast("今天已过预约时间，请预约其他时间");
        return;
      }
      // console.log(this.yuyue)
      // console.log(this.card)
      //let { h, k, e, d, n, t, i, c, g, r,z,m } = _this.yuyue;
      let AppointmentTime = "";

      function pad2(n) {
        return n < 10 ? "0" + n : n;
      }

      if (this.radio == "AM") {
        AppointmentTime = this.hesuan.t + " 08:30:00";
      } else if (this.radio == "PM") {
        AppointmentTime = this.hesuan.t + " 14:30:00";
      }/*else {
        AppointmentTime = this.hesuan.t + " 19:00:00";
      }*/
      let date = new Date();
      let locationtime =
          date.getFullYear().toString() +
          "-" +
          pad2(date.getMonth() + 1) +
          "-" +
          pad2(date.getDate()) +
          " " +
          pad2(date.getHours()) +
          ":" +
          pad2(date.getMinutes()) +
          ":" +
          pad2(date.getSeconds());
      let formData = {
        locktype: "1",
        idtype: "0",
        creatitemname: "新型冠状病毒抗体检测",
        patientid: _this.card.cardNo,
        appointmenttime: AppointmentTime,
        creatdate: locationtime,
      };
      let formData1 = {
        PatientId: _this.card.cardNo,
        QueryType: "0",
        OrderNo: "2021092230350",
      };
      console.log(formData1);
      Dialog.confirm({
        title: "提示",
        message: "请确认就诊人：" + _this.card.name + "！是否提交预约",
      })
          .then(() => {
            // on confirm

            _this.loading = true;

            apiopHsjc(formData).then((res) => {
              _this.loading = false;
              console.log(res);
              console.log(res.data);
              if (res.data.id == 888) {
                Toast("所选时间段已达限号，请更换时间预约");
                return;
              } else if (res.code == 200) {
                this.$router.push({path: "/Member_wdzd"});
                // window.location.href =_this.httpurl + "/pay.jsp?id=" + res.data.result;
              }
              setTimeout(() => {
                sessionStorage.removeItem("yuyue");
                //sessionStorage.removeItem("card"); //joy
              }, 300);
            }).catch(err => {
              _this.loading = false;
              Toast("通讯异常，请稍后重试");
            });
          })
          .catch(() => {
            // on cancel
          });
    },
    handleCardSelect() {
      this.$router.push({path: "/Member_jzr", query: {f: 1}});
    },
  },
};
</script>


<style scoped lang="scss">
.bj {
  background: #f5f5f5;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
}

.lxr {
  .van-cell--center {
    border-radius: 0.25rem;
    padding: 0.25rem;
    background: url(../assets/lxrbj.png) no-repeat;
    background-size: 100% 100%;
    background-position: center center;
    color: #fff;

    .van-cell__value--alone {
      color: #fff;
    }

    .van-cell__right-icon {
      color: #fff;
    }
  }

  .van-contact-card::before {
    background: none;
  }

  ::v-deep .van-contact-card--add .van-cell__left-icon {
    color: #fff;
    opacity: 0.6;
  }

  .lxrr {
    border-radius: 0.25rem;
    background: url(../assets/lxrbj.png) no-repeat;
    background-size: 100% 100%;
    background-position: center center;
    color: #fff;
    padding: 0.4rem;
    display: flex;
    align-items: center;
    justify-content: space-between;

    h2 {
      font-size: 0.5rem;

      p {
        font-size: 0.4rem;
        padding-top: 0.15rem;
      }
    }

    h3 .van-cell__right-icon {
      color: #fff;
    }
  }
}

.qrxx ul li {
  border-bottom: 1px solid #f5f5f5;
  padding: 0.4rem;
  background: #fff;
  display: flex;
  color: #333;

  h2 {
    font-size: 0.375rem;
    width: 2.5rem;
  }

  h3 {
    width: calc(100% - 2.5rem);
    font-size: 0.375rem;
  }
}

.btn {
  width: 90%;
  position: relative;
  margin: 5%;
  border-radius: 0.375rem;
}

ul.timeSlelct {
  display: flex;
  justify-content: space-between;
  left: 0;
  z-index: 10;
  width: 100%;
  height: 1.375rem;

  li {
    padding: 0.2rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    background-color: rgba(22, 104, 204, 0.2);
    position: relative;
    border-radius: 0.125rem;
    margin: 0.05rem;
  }

  li:nth-child(1) {
    border-left: 0;
  }

  .active {
    background-color: #166bcc;
    color: #fff;
  }
}

.in_box {
  padding: 0.375rem 0;

  .van-radio {
    padding: 0.375rem;
  }
}

.bt {
  font-size: 0.375rem;
  color: #000;
}

.img {
  height: 0.3rem;
  padding: 0 0.1rem;
}

.ts_box {
  padding: 0.375rem;
  color: #000;

  .p1 {
    padding-top: 0.25rem;
    text-indent: 0.5rem;
    line-height: 1.5;
  }

  h2 {
    font-size: 0.375rem;
    font-weight: 600;
    text-align: center;
  }
}
</style>
