<!--预约单-->
<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="Data.HeadImg"
            class="doctorAvatar"
          >
            <template v-slot:loading>
              <van-loading
                type="spinner"
                size="20"
              />
            </template>
          </van-image>

          <div>
            <h3>
              {{Data.DoctorName || '未设置'}}
              <span>{{Data.PositionalTitles | filterDoctorTitles}}</span>
            </h3>
            <p>{{Data.HospitalDepartments || '未设置'}}</p>
            <p>{{Data.HospitalName || '未设置'}}</p>
          </div>
        </div>

        <div class="seekInfo">
          <div>
            <span>就诊地点</span>
            <p>{{Data.CityAddress || '未知' }}</p>
          </div>
          <div>
            <span>就诊日期</span>
            <p>{{(Data.VisitDay || '未知') | getTime}} {{Data.VisitDay | getWeek}}</p>
          </div>
          <div>
            <span>就诊时段</span>
            <p>{{Data.TimeSlot || '未知'}}</p>
          </div>
          <div>
            <span>预约费用</span>
            <p style="color: #ff0000;">{{Data.Price == 0?'免费':'￥'+(Data.Price/100).toFixed(2)}}</p>
          </div>
        </div>
      </div>
      <router-link
        :to="'/familyMember?pageType=1'"
        class="patient"
      >
        <span>就诊人</span>
        <p>
          {{FamilyMemberData.FamilyMemberName || '请选择就诊人'}}
          <van-tag
            round
            type="primary"
            style="vertical-align: middle;margin: 0 .1rem;"
            v-if="FamilyMemberData.UserRelationship"
          >{{FamilyMemberData.UserRelationship | filterRelation}}</van-tag>
          <van-icon name="arrow" />
        </p>
      </router-link>
      <p
        class="hint"
        v-if="Data.OrderStatus  == 1"
      >*当前已有{{Data.TotalCount }}人报名，还差{{Data.PeopleCounting  - Data.TotalCount }}人报名，医生即可成行坐诊。如不能成行，预约费用将会原路退回。</p>

      <button
        type="button"
        class="button button1"
        @click="AddOrder"
      >提交</button>
    </main>
  </div>
</template>

<script>
export default {
  name: "join",
  data() {
    return {
      AddOrders: {}, // 用来获取初始化数据 由上级页面存本地获取到
      Data: {}, //预约坐诊初始化数据
      FamilyMemberData: {} // 用户选择就诊人的数据
    };
  },
  created() {
    this.AddOrders = JSON.parse(sessionStorage.getItem("AddOrders")) || {};
    this.FamilyMemberData =
      JSON.parse(sessionStorage.getItem("FamilyMemberData")) || {};
    this.GetOrdersDTO();
  },
  methods: {
    AddOrder() {
      if (JSON.stringify(this.FamilyMemberData) == "{}") {
        this.$toast("请选择就诊人");
        return;
      }

      var obj = {
        DoctorID: this.Data.DoctorID, //医生id ,
        DoctorName: this.Data.DoctorName, //医生名称 ,
        BegionTime:
          this.Data.VisitDay.split("T")[0] +
          " (" +
          this.getWeek(this.Data.VisitDay) +
          ") " +
          this.Data.TimeSlot, //2019年9月4日(周三)9:00~10:00 ,
        AppointmentsEndTime: this.Data.AppointmentsEndTime, //报名结束时间 ,
        DissertationID: this.Data.DissertationID, //专题id ,
        Price: this.Data.Price, //预约价格 ,
        DissertationDetailID: this.Data.DissertationDetailID, //对应那一天的主键id ,
        DissertationDateID: this.Data.DissertationDateID, //对应哪个时段的主键id ,
        FamilyMemberID: this.FamilyMemberData.ID, //对应看诊的人是谁 ,
        FamilyMemberName: this.FamilyMemberData.FamilyMemberName, //看诊人姓名 ,
        OrderStatus: this.Data.OrderStatus, //订单模式 0，义诊 1，付费
        DissertationName: this.Data.DissertationName, // 坐诊专题名称
        Address: this.Data.CityAddress // 坐诊专题地址
      };

      for (var x in obj) {
        if (obj[x] === '') {
          this.$toast("发生错误" + x + "字段必填");
          return;
        }
      }

      this.$toast({
        message: "提交中...",
        type: "loading",
        duration: 0,
        forbidClick: true,
      });

      // 普通坐诊创建订单后跳转支付页面
      if (this.Data.OrderStatus == 1) {
        this.$http.AddOrders2(obj).then(res => {
          // console.log(res);
          this.$toast.clear();
          if (res.data.IsSuccess) {
            this.$router.replace({
              path: "/confirmPay",
              query: { ordercode: res.data.ResultObject, price: this.Data.Price }
            });
          } else {
            this.$toast({
              message: res.data.ResultMsg,
              type: "fail",
              duration: 2000
            });
          }
        });
      } else if (this.Data.OrderStatus == 2) {
        // 义诊创建订单后跳转预约详情
        this.$http.AddOrders(obj).then(res => {
          // console.log(res);
          this.$toast.clear();
          if (res.data.IsSuccess) {
            this.$router.replace({
              path: "/reservationDetail",
              query: { id: res.data.ResultObject }
            });
          } else {
            this.$toast({
              message: res.data.ResultMsg,
              type: "fail",
              duration: 2000
            });
          }
        });
      }


    },

    // 根据专场，医生，天数，时段生预约初始化记录
    GetOrdersDTO() {
      var obj = this.AddOrders;

      Object.keys(obj).forEach(key => {
        if (!obj[key]) {
          this.$toast("发生错误");
          return;
        }
      });

      this.$http.GetOrdersDTO(obj).then(res => {
        if (res.data.IsSuccess) {
          this.Data = res.data.ResultObject;
        } else {
          this.$toast(res.data.ResultMsg);
        }
      });
    },
    getWeek(value) {
      if (value) {
        var arr = [
          "星期日",
          "星期一",
          "星期二",
          "星期三",
          "星期四",
          "星期五",
          "星期六"
        ];
        return arr[new Date(value).getDay()];
      }
    }
  }
};
</script>

<style scoped lang="less">
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;
      }
      > p {
        font-size: 0.28rem;
        color: #333333;
        width: 4.5rem;
        text-align: right;
      }
    }
  }
}
.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>
