<template>
  <div class="home">
    <nav-bar />
    <div class="bj"></div>
    <div class="zstj_tc_detail">
      <div class="lxr" v-if="jzrList.length > 0">
        <div
          class="lxrr"
          v-for="(item, index) in jzrList"
          :key="index"
          @click="handleJzr()"
        >
          <h2>
            {{ item.name }}
            <p>卡号：{{ item.cardNo }}</p>
          </h2>
          <h3><i class="van-icon van-icon-arrow van-cell__right-icon"></i></h3>
        </div>
      </div>
      <div class="lxr" v-else @click="handleJzr()">
        <div class="lxrr">
          <h2>
            请选择就诊人
            <!-- <p>卡号：{{ item.card }}</p> -->
          </h2>
          <h3><i class="van-icon van-icon-arrow van-cell__right-icon"></i></h3>
        </div>
      </div>

      <div class="box">
        <div class="container">
          <h2>
            套餐项目
            <p>{{ detail.name }}</p>
          </h2>
          <h3>¥{{ detail.price }}</h3>
        </div>
      </div>
      <van-tabs type="card" @click="onClickTabs">
        <van-tab title="上午">
          <div class="box2">
            <van-calendar
              v-model="show"
              :value="selectTime"
              type="single"
              :poppable="false"
              :show-confirm="false"
              :style="{ height: '500px' }"
              :round="false"
              :formatter="formatter"
              :min-date="minDate"
              :max-date="maxDate"
              color="##46C3B0"
              @select="handleSelectDate"
            />
          </div>
        </van-tab>
        <van-tab title="下午">
          <div class="box2">
            <van-calendar
              v-model="show"
              :value="selectTime"
              type="single"
              :poppable="false"
              :show-confirm="false"
              :style="{ height: '500px' }"
              :round="false"
              :formatter="formatter"
              :min-date="minDate"
              :max-date="maxDate"
              color="##46C3B0"
              @select="handleSelectDate"
            />
          </div>
        </van-tab>
      </van-tabs>

      <div class="gao"></div>
    </div>

    <div class="zstj_tc_detail_ljyy">
      <div @click="addPay()">确定</div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import {
  apiGetInspectInfo,
  apiGetInspectMon,
  apiUserCardList,
  apiGetInspectYyPay,
} from "@/request/api.js";
import { Toast } from "vant";
export default {
  components: {},

  data() {
    return {
      title: "",
      timeTab: 1,
      detail: {},
      month: "",
      nextMonth: "",
      time: "",
      selectTime: "",
      nextTime: "",
      monthData: [],
      nextMonthData: [],
      flag: false,
      show: false,
      minDate: new Date(),
      maxDate: null,
      //   就诊人信息
      jzrList: [],
    };
  },
  created() {
    const curDate = new Date();
    this.year = curDate.getFullYear();
    var tMonth = curDate.getMonth();
    var m = tMonth + 1;
    var nm = tMonth + 2;
    this.month = m;
    this.nextMonth = nm;
    if (m.toString().length == 1) {
      m = "0" + m;
    }
    if (nm.toString().length == 1) {
      nm = "0" + nm;
    }
    this.time = this.year + "-" + m;
    this.nextTime = this.year + "-" + nm;
    // console.log(this.time, this.nextTime);
    curDate.setMonth(nm, 0);
    let days = curDate.getDate();
    // console.log(days);
    this.maxDate = new Date(this.year, m, days);
    // console.log(this.maxDate);
  },
  mounted() {
    this.title = this.$route.meta.title;
    this.selectTime = this.formatDate(new Date());
    console.log(this.selectTime);
    console.log(JSON.parse(sessionStorage.getItem("card")))
    this.jzrList = [JSON.parse(sessionStorage.getItem("card"))];
    if (this.jzrList.length == 0 || JSON.parse(sessionStorage.getItem("card"))==null) {
      this.getUserCardList();
    }
    this.getData();
    this.getMonYY();
    this.getNextMonYY();
    console.log([JSON.parse(sessionStorage.getItem("card"))]);
  },
  methods: {
    doHandleDate() {
      var myDate = new Date();

      console.log(this.time);
    },
    onClickTabs(name, title) {
      if (title == "上午") {
        this.timeTab = 1;
      } else {
        this.timeTab = 2;
      }
    },
    handleSelectDate(value) {
      this.selectTime = this.formatDate(value);
    },
    formatDate(dateData) {
      let date = new Date(dateData);
      let y = date.getFullYear();
      let m = date.getMonth() + 1;
      m = m < 10 ? "0" + m : m;
      let d = date.getDate();
      d = d < 10 ? "0" + d : d;
      const time = y + "-" + m + "-" + d;

      return time;
    },
    // 获取详情
    getData() {
      apiGetInspectInfo({
        id: this.$route.query.id,
      }).then((res) => {
        this.detail = res.data;
      });
    },
    // 按月份查询预约时间
    getMonYY() {
      apiGetInspectMon({
        id: this.$route.query.id,
        time: this.time,
      }).then((res) => {
        this.monthData = res.data;
        // console.log(res);
      });
    },
    // 查询下个月预约时间
    getNextMonYY() {
      apiGetInspectMon({
        id: this.$route.query.id,
        time: this.nextTime,
      }).then((res) => {
        // this.detail = res.data;
        this.nextMonthData = res.data;
        console.log(res);
      });
    },

    formatter(day) {
      const month = day.date.getMonth() + 1;
      const date = day.date.getDate();
      // const nextmon =  day.date.getMonth() +2;
      // const date = day.date.getDate();
      if (month === this.month && this.timeTab == 1) {
        this.monthData.forEach((item, i) => {
          // this.$set(item, 'selectIndex', null);
          // this.$set(item, 'select', '');
          if (date == item.day) {
            if (item.state == 0 || item.state == 1) {
              day.bottomInfo = "可约";
            } else {
              day.bottomInfo = "约满";
            }
          } else {
          }
        });
      } else if (month === this.nextMonth && this.timeTab == 1) {
        this.nextMonthData.forEach((item, i) => {
          // this.$set(item, 'selectIndex', null);
          // this.$set(item, 'select', '');
          if (date == item.day) {
            if (item.state == 0 || item.state == 1) {
              day.bottomInfo = "可约";
            } else {
              day.bottomInfo = "约满";
            }
          } else {
          }
        });
      } else if (month === this.month && this.timeTab == 2) {
        this.monthData.forEach((item, i) => {
          // this.$set(item, 'selectIndex', null);
          // this.$set(item, 'select', '');
          if (date == item.day) {
            if (item.state == 0 || item.state == 2) {
              day.bottomInfo = "可约";
            } else {
              day.bottomInfo = "约满";
            }
          } else {
          }
        });
      } else if (month === this.nextMonth && this.timeTab == 2) {
        this.nextMonthData.forEach((item, i) => {
          // this.$set(item, 'selectIndex', null);
          // this.$set(item, 'select', '');
          if (date == item.day) {
            if (item.state == 0 || item.state == 2) {
              day.bottomInfo = "可约";
            } else {
              day.bottomInfo = "约满";
            }
          } else {
          }
        });
      }
      //   console.log(day);
      return day;
    },
    // 获取默认就诊卡
    getUserCardList() {
      let _this = this;
      apiUserCardList({ isYes: 0 }).then((res) => {
        _this.jzrList = res.data;
      });
    },
    // 选择就诊人
    handleJzr() {
      this.$router.push({ path: "/Member_jzr", query: { f: 1 } });
    },
    // 预约体检支付
    addPay() {
       let that = this;
      if (this.jzrList.length == 0) {
        Toast("请先选择就诊人");
        return;
      }
      if (this.selectTime == "") {
        Toast("请选择体检时间");
        return;
      }

      apiGetInspectYyPay({
       
        id: this.$route.query.id,
        cid: this.jzrList[0].id,
        isap: this.timeTab == 1 ? "上午" : "下午",
        time: this.selectTime,
      }).then((res) => {
        if(res.code==200){
         
          // window.location.href="http://192.168.0.119/pay.jsp?id="+res.data;
          // window.location.href="http://yuanbaoshanfy.com:9081/pay.jsp?id="+res.data;
          window.location.href=this.httpurl+"/pay.jsp?id="+res.data;

          //  window.open(this.httpurl + "/pay.jsp?id="+res.data, "_blank");

          // setTimeout(function() {
					// 	that.$router.push({ path: "/Zstj_wd" });
					// }, 2000);
          
        }
      });
    },
  },
};
</script>


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

.lxr {
  .van-cell--center {
    background: url(../assets/in_bgbj.png) no-repeat;
    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: 15px;
    padding: 20px ; 
    background: url(../assets/lxrbj.png) no-repeat;
    background-size: 100% 100%;
    background-position: center center;
    color: #fff;
    padding: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    h2 {
      font-size: 32px;
      p {
        font-size: 28px;
        padding-top: 10px;
      }
    }
    h3 .van-cell__right-icon {
      color: #fff;
    }
  }
}
.zstj_tc_detail .box {
  background: #fff;
  padding: 40px 0px;
  margin-bottom: 10px;
}

.zstj_tc_detail .box .container {
  display: flex;
  justify-content: space-between;
}

.zstj_tc_detail .box .container h2 {
  font-size: 32px;
  color: #333;
}

.zstj_tc_detail .box .container h3 {
  color: #d62e25;
  font-size: 36px;
}

.zstj_tc_detail .box1 {
  background: #fff;
  padding: 40px 0px;
  margin-bottom: 10px;
}

.zstj_tc_detail .box1 h2 {
  font-size: 32px;
  color: #333;
  padding-bottom: 20px;
}

.zstj_tc_detail .box1 p {
  color: #333;
  font-size: 28px;
}

.zstj_tc_detail .box2 {
  margin-bottom: 10px;
}

.box3 {
  background: #fff;
  box-sizing: border-box;
  padding: 30px;
  position: relative;
  margin-bottom: 10px;
}

.box3 .bt {
  display: flex;
  justify-content: space-between;
  color: #333;
  font-size: 32px;
}

.box3 .bt p a {
  font-size: 26px;
  color: #39c5ba;
}

.box3 .info {
  overflow: hidden;
  margin-top: 20px;
}

.box3 .info p {
  font-size: 28px;
  line-height: 45px;
}

.zstj_tc_detail_ljyy {
  position: fixed;
  left: 0px;
  bottom: 0px;
  text-align: center;
  font-size: 32px;
  width: 100%;
  height: 90px;
  line-height: 90px;
  background: linear-gradient(270deg, #1ce27d, #05c6af);
}

.zstj_tc_detail_ljyy div {
  color: #fff;
}

::v-deep .van-calendar__selected-day {
  background: #46c3b0;
}
::v-deep .van-tabs__nav--card {
  border: 0.02667rem solid #46c3b0;
}
::v-deep .van-tabs__nav--card .van-tab {
  color: #46c3b0;
  border-right: 0.02667rem solid #46c3b0;
}
::v-deep .van-tabs__nav--card .van-tab.van-tab--active {
  color: #fff;
  background-color: #46c3b0;
}
.gao {
  height: 90px;
}
</style>
