<template>
  <view class="">
    <view class="ticket-info">
      <view class="ticket-name">{{ ticketdData.TicketName }}</view>
      <view class="ticket-date">门票日期:{{ ticketdData.Date }}</view>
      <view class="ticket-peopleNum">人数:{{ ticketdData.PeopleNumber }}</view>
      <view class="line"></view>
      <view class="tip">
        <image
          class="tip-icon"
          src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/CustomizedCar/tip-icon.png"
          mode="aspectFit"
        ></image>
        即时确认：本产品付款后可快速确认，放心期待您的旅行
      </view>
    </view>
    <view class="people-info">
      <!-- <view class="title">出行人 
			<text class="title-tip">请务必保证填写项与出游所持证件一致</text>
			</view>
			<view class="add-guest">
				<view v-for="(item,index) in GuestList" :key="index">
					<view class="guest-item">
						{{item.Name}}
					</view>
				</view>
				<view class="guest-add" @click="add">
					添加
				</view>
				
			</view> -->
      <view class="title">联系人</view>

      <view class="item-box">
        <view class="item-title"> 姓名 </view>
        <input
          class="input"
          type="text"
          placeholder="请输入联系人姓名"
          v-model="Consignee"
        />
      </view>

      <view class="item-box">
        <view class="item-title"> 手机号 </view>
        <input
          class="input"
          type="number"
          placeholder="请输入手机号"
          v-model="ConsigneeMobile"
        />
      </view>
      <u-popup
        v-model="showAddGuset"
        mode="bottom"
        border-radius="40"
        :closeable="true"
      >
        <guest @confirm="changeGuest"></guest>
      </u-popup>
      <view class="btn-box">
        <view class="left">
          <view class="total-price">
            <text class="price-pre">￥</text>{{ Final_Price }}
          </view>
          <view class="total-peoplenum">
            共计{{ ticketdData.PeopleNumber }}人
          </view>
        </view>
        <view class="right">
          <view class="mx">
            <!-- 明细 -->
          </view>
          <!-- #ifdef MP-WEIXIN -->
          <view class="btn" @click="submitOrder"> 去支付 </view>
          <!-- #endif -->
          <!-- #ifdef MP-ALIPAY -->
          <view class="btn" @click="submitOrderAli"> 去支付 </view>
          <!-- #endif -->
        </view>
      </view>
    </view>
    <!-- #ifdef MP-ALIPAY -->
    <!-- <subscribe-msg /> -->
    <!-- #endif -->
  </view>
</template>

<script>
// #ifdef MP-ALIPAY
import { SubscribeMsgAli } from "../../plugin/utils";
// #endif
import guest from "./components/guestList.vue";
export default {
  components: {
    guest,
  },
  data() {
    return {
      ticketdData: {},
      GuestList: [],
      showAddGuset: false,
      Final_Price: 0, //总价
      Consignee: "",
      ConsigneeMobile: "",
      BuyerMessage: "",
      orderInfo: {},
    };
  },
  onLoad(options) {
    let obj = JSON.parse(decodeURIComponent(options.data));
    this.ticketdData = obj;
    this.Final_Price =
      this.ticketdData.PeopleNumber * this.ticketdData.Unit_Price;
  },

  created() {
    uni.setNavigationBarTitle({
      title: "订单填写",
    });
  },
  methods: {
    add() {
      this.showAddGuset = true;
    },
    changeGuest(val) {
      this.showAddGuset = false;
      this.GuestList = val;
      this.ticketdData.PeopleNumber = this.GuestList.length;
      this.Final_Price =
        this.ticketdData.PeopleNumber * this.ticketdData.Unit_Price;
    },
    // #ifdef MP-WEIXIN
    submitOrder() {
      if (!this.Consignee) {
        uni.showToast({
          title: "请输入联系人姓名",
          icon: "none",
        });
        return;
      }
      if (!this.ConsigneeMobile) {
        uni.showToast({
          title: "请输入手机号",
          icon: "none",
        });
        return;
      }
      uni.showLoading({
        title: "支付中...",
      });
      this.request2(
        {
          url: "/api/AppletDining/SetAppletTicketOrderInfo",
          data: {
            ...this.ticketdData,
            Final_Price: this.Final_Price,
            Consignee: this.Consignee,
            ConsigneeMobile: this.ConsigneeMobile,
            GuestList: this.GuestList,
          },
        },

        (res) => {
          uni.hideLoading();
          if (res.resultCode === 1) {
            let that = this;
            console.log(res.data.template_message_list);
            uni.requestSubscribeMessage({
              tmplIds: res.data.template_message_list,
              success: (res) => {
                console.log("订阅成功", res);
              },
              fail: (err) => {
                console.log("订阅失败", err);
              },
              complete(_res) {
                if (that.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.ticketdData.TicketName;
      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);
          console.log(171, this.orderInfo);
          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(() => {
            uni.redirectTo({
              url: "/pages/jiuzhai/paysuccess?PreferPrice=" + that.Final_Price,
            });
          }, 100);
        },
        fail: function (err) {
          console.log("fail:", err);
          uni.showToast({
            title: "支付失败",
            icon: "none",
          });
          setTimeout(() => {
            uni.redirectTo({
              url: "/pages/jiuzhai/allorderList",
            });
          }, 100);
        },
      });
    },
    // #endif
    // #ifdef MP-ALIPAY
    submitOrderAli() {
      if (!this.Consignee) {
        uni.showToast({
          title: "请输入联系人姓名",
          icon: "none",
        });
        return;
      }
      if (!this.ConsigneeMobile) {
        uni.showToast({
          title: "请输入手机号",
          icon: "none",
        });
        return;
      }
      uni.showLoading({
        title: "支付中...",
      });
      this.request2(
        {
          url: "/api/AppletDining/SetAppletTicketOrderInfo",
          data: {
            ...this.ticketdData,
            Final_Price: this.Final_Price,
            Consignee: this.Consignee,
            ConsigneeMobile: this.ConsigneeMobile,
            GuestList: this.GuestList,
          },
        },

        (res) => {
          uni.hideLoading();
          if (res.resultCode === 1) {
            let that = this;
            console.log(res.data.template_message_list);
            SubscribeMsgAli(res.data.template_message_list, () => {
              if (that.Final_Price === 0) {
                uni.redirectTo({
                  url: "/pages/jiuzhai/allorderList",
                });
                return;
              }
              that.querenAli(res.data.OrderId);
            });
            // uni.requestSubscribeMessage({
            //   tmplIds: res.data.template_message_list,
            //   success: (res) => {
            //     console.log("订阅成功", res);
            //   },
            //   fail: (err) => {
            //     console.log("订阅失败", err);
            //   },
            //   complete(_res) {
            //     if (that.Final_Price === 0) {
            //       uni.redirectTo({
            //         url: "/pages/jiuzhai/allorderList",
            //       });
            //       return;
            //     }
            //     that.queren(res.data.OrderId);
            //   },
            // });
          }
        },
        (err) => {
          uni.hideLoading();
        }
      );
    },
    querenAli(OrderId) {
      let url = "/api/WeChatPay/GetDmcPayInfo";
      let GoodsName = this.ticketdData.TicketName;
      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);
          console.log(171, this.orderInfo);
          this.Pay();
        }
      );
    },
    PayAli() {
      let that = this;
      uni.requestPayment({
        provider: "alipay",
        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(() => {
            uni.redirectTo({
              url: "/pages/jiuzhai/paysuccess?PreferPrice=" + that.Final_Price,
            });
          }, 100);
        },
        fail: function (err) {
          console.log("fail:", err);
          uni.showToast({
            title: "支付失败",
            icon: "none",
          });
          setTimeout(() => {
            uni.redirectTo({
              url: "/pages/jiuzhai/allorderList",
            });
          }, 100);
        },
      });
    },
    // #endif
  },
};
</script>

<style lang="scss" scoped>
.ticket-info {
  width: 750rpx;
  // height: 300rpx;
  padding: 60rpx 45rpx 0;
  background-color: #ffffff;
  box-shadow: 0rpx 2rpx 15rpx 0rpx rgba(76, 76, 76, 0.13);
  border-radius: 0rpx 0rpx 60rpx 60rpx;
  .ticket-name {
    font-size: 36rpx;
    font-family: PingFang SC;
    font-weight: 800;
    color: #111111;
    margin-bottom: 20rpx;
  }
  .ticket-date {
    font-size: 24rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #999999;
    margin-bottom: 20rpx;
  }
  .ticket-peopleNum {
    font-size: 24rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #999999;
    margin-bottom: 30rpx;
  }
  .line {
    // width: 657px;
    height: 1rpx;
    background-color: #e7e7e7;
  }
  .tip {
    display: flex;
    align-items: center;
    height: 85rpx;
    font-size: 24rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #dfbe6e;
    .tip-icon {
      width: 24rpx;
      margin-right: 10rpx;
    }
  }
}
.people-info {
  padding: 60rpx 45rpx 0;
  .title {
    // height: 32rpx;
    font-size: 34rpx;
    font-family: PingFang SC;
    font-weight: bold;
    color: #1f1f1f;
    .title-tip {
      font-size: 24rpx;
      margin-left: 10rpx;
    }
  }
  .add-guest {
    padding: 40rpx 0rpx;
    // height: 150rpx;
    border-bottom: 1rpx solid #e7e7e7;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 50rpx;
    .guest-item {
      width: 145rpx;
      height: 70rpx;
      background-color: #111111;
      // border: 1rpx solid #111111;
      border-radius: 20rpx;
      font-size: 28rpx;
      font-family: PingFang SC;
      font-weight: 500;
      text-align: center;
      line-height: 68rpx;
      color: #ffffff;
      margin-right: 25rpx;
      margin-bottom: 25rpx;
    }
    .guest-add {
      width: 145rpx;
      height: 70rpx;
      background-color: #ffffff;
      border: 1rpx solid #111111;
      border-radius: 20rpx;
      font-size: 28rpx;
      font-family: PingFang SC;
      font-weight: 500;
      text-align: center;
      line-height: 68rpx;
      color: #111111;
    }
  }
  .item-box {
    height: 105rpx;
    position: relative;
    border-bottom: 1rpx solid #e7e7e7;
    display: flex;
    align-items: center;
    .item-title {
      width: 150rpx;
      font-size: 28rpx;
      font-family: PingFang SC;
      font-weight: 400;
      color: #999999;
    }
    .input {
		box-sizing: border-box;
      height: 100%;
      // padding-left: 270rpx;
    }
  }
  .btn-box {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 100rpx;
    width: 670rpx;
    height: 100rpx;
    background-color: #ffffff;
    box-shadow: 0rpx 10rpx 30rpx 0rpx rgba(36, 36, 36, 0.2);
    border-radius: 16rpx;
    padding: 0 10rpx 0 35rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .left {
      display: flex;
      // align-items: flex-end;
      .total-price {
        // height: 80rpx;
        font-size: 40rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #d91818;
        margin-right: 20rpx;
        line-height: 40rpx;
        .price-pre {
          font-size: 22rpx;
        }
      }
      .total-peoplenum {
        // height: 80rpx;
        line-height: 50rpx;
        font-size: 24rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #6e6e6e;
      }
    }
    .right {
      display: flex;
      .mx {
        font-size: 24rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #6e6e6e;
        line-height: 78rpx;
      }
      .btn {
        width: 193rpx;
        height: 80rpx;
        background-color: #111111;
        border-radius: 16rpx;
        font-size: 28rpx;
        font-family: PingFang SC;
        font-weight: bold;
        color: #ffffff;
        text-align: center;
        line-height: 78rpx;
        margin-left: 35rpx;
      }
    }
  }
}
</style>
