<template>
  <view class="subscribeTicket">
    <view class="title">
      选择日期和人数
      <u-icon name="cross" size="28" class="close-icon" @click="close"></u-icon>
    </view>
    <view>
      <z-calendar
        ref="calendar"
        :datePrice.sync="datePrice"
        :curryear="curryear"
        :currmonth="currmonth"
        howManyMonth="6"
        mode="2"
        @changeDate="changeDate"
        @changeMonth="changeMonth"
        :defaultSelect="defaultSelect"
      ></z-calendar>
    </view>
    <view class="chooseTicketAndNum">
      <view class="chooseTicket">
        <view class="TicketName">
          {{ TicketName }}
        </view>
        <view class="">
          <u-number-box v-model="peopleNum" @change="valChange"></u-number-box>
        </view>
      </view>
      <view class="chooseBtn-box">
        <view class="btn-TicketName-box">
          {{ defaultSelect }}
          <text class="btn-TicketName">
            {{ TicketName }}
          </text>
        </view>
        <view class="btn-box">
          <view class="icon-box">
            <view class="kefu-iocn">
              <u-icon name="service-o" color="#111111" size="24rpx"></u-icon>
            </view>

            <view class=""> 客服 </view>
            <button
              open-type="contact"
              :send-message-title="TicketName"
              :send-message-path="msgPath"
              :send-message-img="TicketImg"
              :show-message-card="true"
            ></button>
          </view>

          <view class="subscribe-btn" @click="nextStep"> 立即预订 </view>
        </view>
      </view>
    </view>
    <auth
      v-if="showAuth"
      @changeuserinfo="reloadUserinfo"
      @gbAuth="goback"
    ></auth>
  </view>
</template>

<script>
import zCalendar from "./njzz-calendar/njzz-calendar.vue";
import auth from "../../../components/auth/index.vue";
export default {
  components: {
    zCalendar,
    auth,
  },
  props: {
    dateStr: {
      type: String,
      default: "",
    },
    TicketID: {
      type: Number,
      default: 0,
    },
    TitekCounponId: {
      type: Number,
      default: 0,
    },
    TicketName: {
      type: String,
      default: "",
    },
    TicketImg: {
      type: String,
      default: "",
    },
    msgPath: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      curryear: 0,
      currmonth: 0,
      defaultSelect: "",
      datePrice: [],
      price: "",
      peopleNum: 1,
      showAuth: false,
      u: {},
    };
  },
  watch: {
    dateStr(val, oldVal) {
      this.defaultSelect = val;
      let newMonth = val.split("-")[1];
      let oldMonth = oldVal.split("-")[1];
      if (newMonth != oldMonth && oldMonth != undefined) {
        this.getGoodsDateList(val);
      }
      let list = this.datePrice.filter((item) => item.date == this.dateStr);
      console.log(119, list);
      if (list.length > 0) {
        this.price = list[0].price;
      }
    },
    TicketID(val) {
      if (val) {
        this.getGoodsDateList(this.dateStr);
      }
    },
  },
  mounted() {
    let year = new Date().getFullYear(); //年
    let month = new Date().getMonth() + 1; //月
    if (month < 10) {
      month = "0" + month;
    }
    this.curryear = year;
    this.currmonth = month;
    // #ifdef MP-ALIPAY
    this.getGoodsDateList(this.curryear + "-" + this.currmonth);
    uni.setNavigationBarTitle({
      title: "",
    });
    // #endif
  },
  methods: {
    valChange(e) {
      this.peopleNum = e.value;
    },
    getGoodsDateList(date) {
      this.request2(
        {
          url: "/api/AppletDining/GetMonthTicketList",
          data: {
            TicketID: this.TicketID,
            BuyDate: date,
          },
        },

        (res) => {
          let data = res.data;
          let datePrice = [];
          data.forEach((x) => {
            let obj = {};
            obj.date = x.Year + "-" + x.Month + "-" + x.Day;
            if (x.IsHavePrice == 1) {
              let p = this.$utils.getretailer() == true ? x.HPriceB : x.HPriceC;
              obj.price = p;
            } else {
              obj.price = "";
            }
            datePrice.push(obj);
          });
          this.datePrice = datePrice;
          let list = this.datePrice.filter((item) => item.date == this.dateStr);
          if (list.length > 0) {
            this.price = list[0].price;
          }
        }
      );
    },
    changeDate(data) {
      //选择日期事件  可以将data绑定到此页面以用来提交等操作
      this.defaultSelect = data.date;
      this.price = data.price;
      this.$forceUpdate();
    },

    changeMonth(nowMonth) {
      let Month = nowMonth.year + "-" + nowMonth.month + "-01";
      this.getGoodsDateList(Month);
    },
    nextStep() {
      this.u = uni.getStorageSync("mall_UserInfo");
      if (!this.u) {
        this.u = {
          nickName: "未登录",
          avatarUrl: "",
        };
        this.showAuth = true;
      } else {
        if (!this.price && this.price !== 0) {
          uni.showToast({
            title: "请选择日期",
            icon: "none",
          });
          return;
        }
        let data = {
          TicketId: this.TicketID,
          TitekCounponId: this.TitekCounponId,
          Unit_Price: this.price,
          Date: this.defaultSelect,
          TicketName: this.TicketName,
          PeopleNumber: this.peopleNum,
        };
        uni.navigateTo({
          url:
            "/pages/ticketCoupons/fillOrder?data=" +
            encodeURIComponent(JSON.stringify(data)),
        });
      }
    },
    reloadUserinfo() {
      this.u = uni.getStorageSync("mall_UserInfo");
      // this.getOrderStatus();
    },
    goback() {
      uni.navigateBack();
    },
    close() {
      this.$emit("close");
    },
  },
};
</script>

<style lang="scss" scoped>
.subscribeTicket {
  // height: 70vh;
  margin-top: 45rpx;
  overflow-y: scroll;
  overflow-x: hidden;

  .title {
    text-align: center;
    font-size: 32rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #111111;
    margin-bottom: 10rpx;
    position: relative;

    .close-icon {
      position: absolute;
      right: 30rpx;
      top: 0;
    }
  }

  .chooseTicketAndNum {
    // height: 335rpx;
    padding: 30rpx;

    .chooseTicket {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 100rpx;

      .TicketName {
        width: auto;
        height: 60rpx;
        padding: 0rpx 30rpx;
        background-color: #111111;
        text-align: center;
        line-height: 58rpx;
        border-radius: 10rpx;
        font-size: 26rpx;
        font-family: PingFang SC;
        color: #ffffff;
      }
    }

    .chooseBtn-box {
      // width: 670px;
      height: 100rpx;
      background-color: #ffffff;
      box-shadow: 0rpx 10rpx 30rpx 0rpx rgba(36, 36, 36, 0.2);
      border-radius: 16rpx;
      padding: 0 20rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .btn-TicketName-box {
        font-size: 24rpx;
        font-family: PingFang SC;
        font-weight: bold;
        color: #111111;

        .btn-TicketName {
          margin-left: 10rpx;
        }
      }

      .btn-box {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .icon-box {
          width: 44rpx;
          height: 52rpx;
          font-size: 22rpx;
          font-family: PingFang SC;
          font-weight: 500;
          color: #111111;
          position: relative;

          .kefu-iocn {
            width: 44rpx;

            display: flex;
            justify-content: center;
          }

          button {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            opacity: 0;
          }
        }

        .subscribe-btn {
          width: 190rpx;
          height: 80rpx;
          margin-left: 20rpx;
          background-color: #111111;
          border-radius: 16rpx;
          font-size: 28rpx;
          font-family: PingFang SC;
          font-weight: bold;
          color: #ffffff;
          text-align: center;
          line-height: 78rpx;
        }
      }
    }
  }
}
</style>
