<template>
  <view>
    <view class="hotel-order">
      <view class="o-head">
        <view class="room-name">{{ orderData.MealName }}</view>
        <view class="Meal-date">
          {{ orderData.date }}
        </view>
        <view class="room-remark">
          <text v-if="orderData.MakeDay === 0">可预约当天</text>
          <text v-if="orderData.MakeDay > 0"
            >提前{{ orderData.MakeDay }}天预约</text
          >
        </view>
        <view class="big-title">
          <text class="f12">订餐必知</text>
        </view>
        <view class="rule">
          <text class="king" v-if="orderData.IsHoliday === 0"
            >此套餐节假日不可用</text
          >
          <!-- <text>需要提前预约，餐厅营业时间为：周一至周日 09:00-21:00，请您提前安排好行程时间</text> -->
          <rich-text :nodes="orderData.OtherTag"></rich-text>
        </view>
      </view>
      <view class="form">
        <view class="form-items">
          <view class="label">就餐人数</view>
          <view class="val">
            <u-number-box
              size="28"
              :min="1"
              :max="100"
              v-model="order.PeopleNumber"
              @change="PeopleNumberChange"
            ></u-number-box>
          </view>
        </view>
        <view class="form-items">
          <view class="label">套餐份数</view>
          <view class="val">
            <u-number-box
              size="28"
              :min="1"
              :max="100"
              v-model="order.BuyNum"
              @change="BuyNumChange"
            ></u-number-box>
          </view>
        </view>
        <view class="form-items">
          <view class="label">联系人</view>
          <view class="val">
            <input
              type="text"
              v-model="order.Consignee"
              placeholder="若是多人,输入代表人员即可"
            />
          </view>
        </view>
        <view class="form-items">
          <view class="label">联系电话</view>
          <view class="val">
            <input
              type="number"
              v-model="order.ConsigneeMobile"
              placeholder="输入电话号码"
            />
          </view>
        </view>
        <view class="form-items">
          <view class="label">备注</view>
          <view class="val">
            <input
              type="text"
              v-model="order.BuyerMessage"
              placeholder="您的特殊要求，我们会尽量安排"
            />
          </view>
        </view>
      </view>
      <view class="empty-block"></view>
      <view style="padding: 50rpx 40rpx">
        <view class="big-title">
          <text>费用明细</text>
        </view>
        <view class="form" style="margin: 40rpx 0; padding: 0">
          <view class="form-items">
            <view class="label"> 在线支付 </view>
            <view class="val f14 regular" style="text-align: right">
              <text style="margin-right: 30rpx">{{ order.BuyNum }}份套餐</text>
              <text class="red"
                >￥{{ orderData.Unit_Price * order.BuyNum }}</text
              >
            </view>
          </view>
          <view class="form-items" style="border-bottom: none">
            <view class="label"> 套餐明细 </view>
          </view>
          <view class="flex f12 grey">
            <view style="flex: 1">
              <text style="margin-right: 30rpx">{{ orderData.MealName }}</text>
            </view>
            <view style="text-align: right"
              >{{ order.BuyNum }}份 × ¥{{ orderData.Unit_Price }}</view
            >
          </view>
        </view>
      </view>
      <view class="empty-block"></view>
    </view>
    <view class="opera-box">
      <view class="box flex">
        <view class="price">
          <text class="f11">￥</text>
          <text>{{ orderData.Unit_Price * order.BuyNum }}</text>
        </view>
        <view class="sum-detail">共计 {{ order.BuyNum }}份</view>
        <u-button
          :ripple="true"
          :hair-line="false"
          :custom-style="btnStyle"
          @click="buy"
          >立即购买</u-button
        >
      </view>
    </view>
  </view>
</template>

<script>
// #ifdef MP-ALIPAY
import parseHtml from "../../plugin/htmlparse.js";
// #endif
export default {
  data() {
    return {
      order: {
        PeopleNumber: 1,
        BuyNum: 1,
        Consignee: "",
        ConsigneeMobile: "",
        BuyerMessage: "",
        Sex: 1,
      },
      btnStyle: {
        height: "80rpx",
        lineHeight: "80rpx",
        borderRadius: "16rpx",
        background: "#111",
        color: "#FFF",
        fontSize: "28rpx",
        fontWeight: "600",
        width: "193rpx",
      },
      orderData: {},
      orderInfo: {},
    };
  },
  created() {
    uni.setNavigationBarTitle({
      title: "订单填写",
    });
  },
  methods: {
    PeopleNumberChange(val) {
      this.order.PeopleNumber = val.value;
    },
    BuyNumChange(val) {
      this.order.BuyNum = val.value;
    },
    buy() {
      if (!this.order.Consignee) {
        uni.showToast({
          title: "请填写联系人",
          icon: "none",
        });
        return;
      }
      if (!this.order.ConsigneeMobile) {
        uni.showToast({
          title: "请填写联系人电话",
          icon: "none",
        });
        return;
      }
      let data = {
        MealId: this.orderData.MealId,
        DiningId: this.orderData.DiningId,
        Unit_Price: this.orderData.Unit_Price,
        Date: this.orderData.date,
        PeopleNumber: this.order.PeopleNumber,
        Final_Price: this.orderData.Unit_Price * this.order.BuyNum,
        BuyerMessage: this.order.BuyerMessage,
        Consignee: this.order.Consignee,
        ConsigneeMobile: this.order.ConsigneeMobile,
        Sex: this.order.Sex,
        BuyNum: this.order.BuyNum,
      };
      uni.showLoading({
        title: "支付中...",
      });
      this.request2(
        {
          url: "/api/AppletDining/SetAppletDiningOrderInfo",
          data: data,
        },
        (res) => {
          uni.hideLoading();
          if (res.resultCode === 1) {
            let that = this;
            uni.requestSubscribeMessage({
              tmplIds: res.data.template_message_list,
              success: (res) => {
                console.log("订阅成功", res);
              },
              fail: (err) => {
                console.log("订阅失败", err);
              },
              complete(_res) {
                if (data.Final_Price === 0) {
                  uni.redirectTo({
                    url: "/pages/jiuzhai/allorderList",
                  });
                  return;
                }
                that.queren(res.data.OrderId);
              },
            });
          }
        },
        (err) => {
          uni.hideLoading();
        }
      );
    },
    queren(OrderId) {
      let url = "/api/WeChatPay/GetDmcPayInfo";
      let GoodsName = this.orderData.MealName;
      GoodsName = GoodsName.slice(0, 10);
      this.request2(
        {
          url: url,
          data: {
            OrderId: OrderId,
            GoodsName: GoodsName,
            OrderPayType: 1,
            OpenId: uni.getStorageSync("mall_UserInfo").OpenId,
          },
        },
        (res) => {
          this.orderInfo = JSON.parse(res.data);
          this.Pay();
        }
      );
    },
    Pay() {
      let that = this;
      uni.requestPayment({
        provider: "wxpay",
        timeStamp: this.orderInfo.timeStamp,
        nonceStr: this.orderInfo.nonceStr,
        package: this.orderInfo.package,
        signType: this.orderInfo.signType,
        paySign: this.orderInfo.sign,
        success: function (res) {
          console.log("success", res);
          uni.showToast({
            title: "支付成功",
          });
          setTimeout(() => {
            let total = that.orderData.Unit_Price * that.order.BuyNum;
            uni.redirectTo({
              url: "/pages/jiuzhai/paysuccess?PreferPrice=" + total,
            });
          }, 100);
        },
        fail: function (err) {
          console.log("fail:", err);
          uni.showToast({
            title: "支付失败",
            icon: "none",
          });
          // setTimeout(()=>{
          // 	uni.redirectTo({
          // 	    url: '/pages/jiuzhai/allorderList'
          // 	});
          // }, 100 )
        },
      });
    },
  },
  onLoad(options) {
    let obj = JSON.parse(decodeURIComponent(options.data));
    this.orderData = obj;
    // #ifdef MP-ALIPAY
    this.orderData.OtherTag = parseHtml(this.orderData.OtherTag);
    //#endif
    console.log("order", this.orderData);
    // this.Final_Price=this.ticketdData.PeopleNumber*this.ticketdData.Unit_Price
  },
};
</script>

<style>
.hotel-order {
  color: #111111;
  margin-bottom: 160rpx;
}

.opera-box {
  background-color: #fff;
  padding: 20rpx 45rpx 40rpx 45rpx;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 5;
}

.opera-box .box {
  height: 100rpx;
  background: #ffffff;
  box-shadow: 0px 10rpx 30rpx 0px rgba(36, 36, 36, 0.2);
  border-radius: 16rpx;
  display: flex;
  align-items: center;
  padding: 0 10rpx 0 36rpx;
}

.opera-box .box .price {
  font-size: 40rpx;
  font-weight: 500;
  color: #d91818;
  margin-right: 20rpx;
  line-height: 86rpx;
  height: 100%;
}

.opera-box .box .sum-detail {
  font-size: 24rpx;
  flex: 1;
  font-weight: 500;
  color: #6e6e6e;
}

.hotel-order .red {
  color: #d91818 !important;
}

.hotel-order .grey {
  color: #6e6e6e !important;
}

.hotel-order .form {
  margin-top: 60rpx;
  padding: 0 45rpx;
}

.hotel-order .form .form-items {
  margin-bottom: 40rpx;
  display: flex;
  align-items: center;
  padding-bottom: 36rpx;
  border-bottom: 1px solid #f5f5f5;
  font-size: 28px;
  font-weight: 500;
}

.hotel-order .form .form-items:last-child {
  border-bottom: none;
}

.hotel-order .form .form-items .label {
  white-space: nowrap;
  text-align: justify;
  text-align-last: justify;
  width: 115rpx;
  font-size: 28rpx;
  font-weight: 600;
  margin-right: 20rpx;
  /* flex-shrink: 0; */
}

.hotel-order .form .form-items .val {
  flex: 1;
}

.hotel-order .sheshi {
  margin-top: 50rpx;
}

.hotel-order .sheshi .she-title {
  font-size: 28rpx;
  font-weight: 800;
}

.hotel-order .sheshi .she-content {
  margin-top: 24rpx;
}

.hotel-order .sheshi .she-content text {
  font-size: 24rpx;
  font-weight: 500;
  color: #4a4a4a;
  line-height: 40rpx;
  margin-right: 24rpx;
}

.hotel-order .form .form-items .val input {
  border: none;
  padding: 0;
  margin: 0;
  outline: none;
  height: 38rpx;
  line-height: 38rpx;
  font-size: 28rpx;
  font-weight: 500;
  width: 100%;
}

.hotel-order .king {
  color: #dfbe6e !important;
}

.hotel-order .f12 {
  font-size: 24rpx !important;
}

.f11 {
  font-size: 22rpx !important;
}

.hotel-order .f14 {
  font-size: 28rpx !important;
}

.hotel-order .regular {
  font-weight: 500 !important;
}

.hotel-order .flex {
  display: flex;
  align-items: center;
}

.hotel-order .empty-block {
  height: 20rpx;
  background: #ecf1f4;
}

.hotel-order .flex-wrap {
  flex-wrap: wrap;
}

.hotel-order .o-head {
  padding: 45rpx;
  background: #ffffff;
  box-shadow: 0px 2rpx 15rpx 0px rgba(76, 76, 76, 0.13);
  border-radius: 0px 0px 60rpx 60rpx;
}

.hotel-order .o-head .o-timer {
  height: 100rpx;
  background: #ecf1f4;
  border-radius: 20rpx;
  padding: 0 40rpx;
}

.hotel-order .o-head .o-timer .time-item {
  font-size: 32rpx;
  font-weight: 800;
  flex: 1;
}

.hotel-order .o-head .o-timer .time-item:last-child {
  text-align: right;
}

.hotel-order .o-head .o-timer .time-split {
  font-size: 24rpx;
  font-weight: 400;
  text-align: center;
}

.hotel-order .o-head .room-name {
  font-size: 32rpx;
  font-weight: bold;
  margin-top: 40rpx;
  margin-bottom: 10rpx;
}

.hotel-order .o-head .room-remark {
  font-size: 28rpx;
  font-weight: 500;
  padding-bottom: 30rpx;
  margin-bottom: 30rpx;
  border-bottom: 1px solid #e7e7e7;
}

.hotel-order .o-head .rule {
  font-size: 22rpx;
  font-weight: 500;
  color: #6e6e6e;
  margin-top: 18rpx;
}

.hotel-order .big-title {
  position: relative;
}

.hotel-order .big-title::before {
  display: block;
  width: 71rpx;
  height: 12rpx;
  background: #dfbe6e;
  border-radius: 4rpx;
  content: " ";

  position: absolute;
  left: 0;
  bottom: 6rpx;
  z-index: 1;
}

.hotel-order .big-title text {
  font-size: 34rpx;
  font-weight: bold;
  color: #1f1f1f;
  position: relative;
  z-index: 2;
}
.Meal-date {
  font-size: 24rpx;
  font-family: PingFang SC;
  color: #999999;
}
</style>
