<template>
  <!-- 确认订单页面 -->
  <view class="confirm-order-pages">
    <wd-popup
      v-model="showpopup"
      position="bottom"
      custom-style="height: 50%;border-radius: 16rpx 16rpx 0 0 ;box-sizing:border-box;padding:20rpx;"
      @close="handleClose"
      :safe-area-inset-bottom="true"
      custom-class="popup"
    >
      <view class="title-box">
        <text class="title">选择优惠券</text>
        <wd-icon
          @click="showpopup = false"
          color="#D8D8D8"
          name="close-bold"
          size="30rpx"
        ></wd-icon>
      </view>
      <view class="popup-content">
        <view
          class="ticket-item"
          :class="activeCouponId === item.couponId ? 'active-ticket' : ''"
          v-for="(item, index) in orderInfo.shopCoupon"
          :key="index"
          @click.stop="selectShopCoupon(item)"
        >
          <view class="ticket-box">
            <view class="normal ticket-left">
              <view class="ticket-box">
                <view class="ticket-price">
                  <text class="price">￥</text>
                  <text class="num">{{ item.reduceAmount }}</text>
                </view>
                <view class="ticket-desc">
                  <text class="desc">满{{ item.cashCondition }}元可用</text>
                  <text class="desc">数量：{{ item.count }}</text>
                </view>
              </view>
            </view>

            <view class="ticket-right">
              <view class="head">
                <text class="title">{{ item.couponName }}</text>
                <view class="headbox">
                  <text class="time">{{ item.userEndTime }}过期</text>

                  <!-- <view v-if="item.numState === 0" class="btn" @click="getCoupon(item)">
                    立即领取
                  </view>
                  <i
                    v-else
                    class="iconfont icon-lianhe40"
                    style="font-size: 120rpx; color: #efefef"
                  ></i> -->
                </view>
              </view>
              <!-- 展开优惠券 -->
              <!-- <view class="foot">
                <view class="line"></view>
                <view class="footbox" @click.stop="showDetailFn(item)">
                  <text class="desc">优惠券规则</text>
                  <text class="more">展开</text>
                  <wd-icon
                    :name="item.showDetail ? 'chevron-down' : 'chevron-right'"
                    size="15px"
                    color="#9d9d9d"
                  ></wd-icon>
                </view>
              </view> -->
            </view>
          </view>

          <view class="detail" v-if="item.showDetail">
            <view class="line"></view>
            <view class="detail-box" style="font-size: 16rpx">
              {{ item.activityNotes }}
            </view>
          </view>
        </view>
        <wd-status-tip v-if="orderInfo.shopCoupon.length === 0" image="content" tip="暂无优惠券" />
      </view>
    </wd-popup>
    <Header title="确认订单"></Header>
    <!-- 商品卡 -->
    <view class="order-detail-card">
      <view class="title">{{ orderInfo.shopName }}</view>
      <view class="detail">
        <view class="group-buying-list">
          <view class="group-buying-item">
            <image class="goods-picture" :src="orderInfo.orderItems[0].pic"></image>
            <view class="goods-info-detail">
              <text class="goods-title multi-line">{{ orderInfo.orderItems[0].prodName }}</text>
              <!-- <text class="yh-time multi-line">周一至周日</text> -->
              <text class="yh-time multi-line">数量x1</text>
              <!-- <text class="yh-fl multi-line">蔬菜免费，米饭免费</text> -->
            </view>
            <view class="pay">
              <text class="sold-shares">￥{{ orderInfo.orderItems[0].price }}</text>
            </view>
          </view>
        </view>
      </view>
      <view class="card-bottom">
        <view class="notice" v-if="orderInfo.shopCoupon.length > 0">
          <i class="iconfont icon-tongzhi icon"></i>
          每桌限用1张劵
        </view>
        <view class="quan">
          <view class="quan-icon">券</view>
          商家优惠券
          <view class="view-coupons" @click="showpopup = true">
            <text v-if="activeCouponInfo.reduceAmount">￥{{ activeCouponInfo.reduceAmount }}</text>
            <wd-icon color="#696969" name="chevron-right" size="22px"></wd-icon>
          </view>
        </view>
        <view class="price">
          已优惠￥{{ orderInfo.reduceAmount }} 小计
          <text>￥{{ orderInfo.actualTotal }}</text>
        </view>
      </view>
    </view>
    <!-- 商品卡-end -->
    <view class="pay-card">
      <radio-group style="width: 100%" @change="radioChange">
        <view class="pay-item">
          <view class="icon">
            <image src="@/static/shop/wx-icon.png"></image>
            微信
          </view>
          <radio class="radio" color="#F12A2A" value="TENPAY" :checked="'TENPAY' == selectType" />
        </view>
        <view class="pay-item">
          <view class="icon">
            <image src="@/static/shop/yzf-icon.png"></image>
            翼支付
          </view>
          <radio class="radio" color="#F12A2A" value="BESTPAY" :checked="'BESTPAY' == selectType" />
        </view>
      </radio-group>
    </view>
    <!-- 支付方式-end -->
    <!-- 底部 -->
    <view class="footsubmit-order-box">
      <view class="left">
        <view class="jq">
          <text class="hj">合计:</text>
          <text class="jg-price">￥{{ orderInfo.actualTotal }}</text>
        </view>
        <view class="yh">
          <text class="zgyh">总共优惠</text>
          <text class="zgyh-name">￥{{ orderInfo.reduceAmount }}</text>
        </view>
      </view>
      <view class="btn" @tap="submitOrder">提交订单</view>
    </view>
    <!-- 底部-end -->
  </view>
</template>

<script setup>
import Header from '@/pages/order/components/Header/index.vue';
import { groupBuyConfirm, groupBuyUpdate, groupBuyCreate } from '@/api/confirmOrder';
import { getOrderDetail } from '@/api/order';
import { debounce } from '@/utils/common';
const imgUrl = import.meta.env.VITE_APP_IMG_URL;
const selectType = ref('TENPAY');
const prodId = ref(null);
const skuId = ref(null);
const showpopup = ref(false);
const orderInfo = ref({});
const activeCouponInfo = ref({});
const activeCouponId = ref('');
const outTradeNos = ref(null);
const prodIds = ref(null);
const skuIds = ref(null);
// 商品优惠券
const productCoupons = ref([]);
onLoad((options) => {
  const { prodId, skuId } = options;
  prodIds.value = prodId;
  skuIds.value = skuId;
  groupBuyConfirmFn(prodId, skuId);
});
onShow(() => {
  if (outTradeNos.value) {
    // 查询订单状态决定是否支付
    getOrderDetail({ orderNumber: outTradeNos.value }).then((res) => {
      switch (res.data.baseOrder.subStatus) {
        case '1':
          xma.showToast({
            title: '支付失败',
            icon: 'error',
            duration: 2000,
            success() {
              groupBuyConfirmFn(prodIds.value, skuIds.value);
            },
          });
          break;
        case '2':
          xma.redirectTo({
            url: `/pages/shop/paymentSuccessful?outTradeNos=${outTradeNos.value}`,
          });
          break;
        case '3':
          xma.redirectTo({
            url: `/pages/shop/paymentSuccessful?outTradeNos=${outTradeNos.value}`,
          });
          break;
        default:
          break;
      }
    });
  }
});
function radioChange(evt) {
  const { value } = evt.detail;
  selectType.value = value;
}

function alert() {
  if (productCoupons.value.length > 0) {
    show.value = true;
  }
}
function groupBuyConfirmFn(prodId, skuId) {
  return new Promise((resolve, reject) => {
    groupBuyConfirm({ prodId, skuId }).then((res) => {
      if (res.code === 0) {
        res.data.orderItems[0].pic = imgUrl + res.data.orderItems[0].pic;
        orderInfo.value = res.data;
        resolve(res.data.shopId);
      }
    });
  });
}
function showDetailFn(item) {
  item.showDetail = !item.showDetail;
}
/**
 * 选择优惠券
 */
function selectShopCoupon(item) {
  if (item.cashCondition <= orderInfo.value.orderItems[0].price) {
    activeCouponId.value = item.couponId;
    activeCouponInfo.value = item;
    showpopup.value = false;
    groupBuyUpdateFn(item.couponUserId);
  } else {
    xma.showToast({
      title: '不满足优惠券使用条件',
      icon: 'none',
    });
  }
}
function groupBuyUpdateFn(couponUserId) {
  groupBuyUpdate({ key: orderInfo.value.key, couponUserId }).then((res) => {
    if (res.code === 0) {
      res.data.orderItems[0].pic = imgUrl + res.data.orderItems[0].pic;
      orderInfo.value = res.data;
    }
  });
}
const submitOrder = debounce(() => {
  // TODO: 跳转到确认订单页面，并��带所选的支付方式

  //   id String 是 临时订单的id或key
  // payWayCode String 是 支付方式,，0-翼支付，1-支付宝，2-微信
  // placeOrderWay String 是 爽贵阳传：sgy，人多多传：ma
  // remark String 否 备注
  const params = {
    id: orderInfo.value.key,
    placeOrderWay: 'sgy',
    payWayCode: 5,
    tradeType: selectType.value,
  };
  groupBuyCreate(params).then((res) => {
    if (res.code === 0) {
      const { paymentUrl, outTradeNo } = res.data.result;
      outTradeNos.value = outTradeNo;
      window.location.href = paymentUrl;
      // 设置一个延时器
      const start = Date.now();
      setTimeout(() => {
        const end = Date.now();
        if (end - start < 1200) {
          groupBuyConfirmFn(prodIds.value, skuIds.value);
          // 如果 iframe 加载时间小于 1.2 秒，说明应用没有安装
          xma.showToast({
            title: '未安装App',
            icon: 'error',
          });
          // 这里可以跳转到应用下载页面
        }
      }, 1000);
    } else {
      groupBuyConfirmFn(prodIds.value, skuIds.value);
    }
  });
}, 1000);
</script>

<style lang="scss" scoped>
page {
  background: #f2f2f2;
}
.confirm-order-pages {
  display: flex;
  box-sizing: border-box;
  flex-direction: column;
  .title-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    position: relative;
    top: 0;
    width: 100%;
    .title {
      font-size: 15 * 2rpx;
      font-weight: bold;
      color: #3d3d3d;
    }
  }
  .popup-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 20rpx;
    .ticket-item {
      width: 100%;
      background-color: #fff;
      border-radius: 16rpx;
      display: flex;
      flex-direction: column;
      margin-top: 12rpx;
      border: 1 * 2rpx solid #f3f3f3;
      .ticket-box {
        display: flex;

        .normal {
          background: url('../../static/ticket/ticket-normal.png') no-repeat;
          background-size: 100% 100%;
        }

        .past {
          background: url('../../static/ticket/ticket-past.png') no-repeat;
          background-size: 100% 100%;
        }

        .ticket-left {
          width: 200rpx;
          height: 200rpx;

          .ticket-box {
            width: 94%;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 30rpx;

            .ticket-price {
              display: flex;
              align-items: last baseline;

              text {
                font-size: 24rpx;
                line-height: 24rpx;
                font-family: PingFang SC;
                color: #fff;
              }

              .num {
                font-size: 52rpx;
              }
            }

            .ticket-desc {
              display: flex;
              flex-direction: column;
              align-items: center;
              gap: 24rpx;

              .desc {
                font-size: 24rpx;
                line-height: 24rpx;
                font-family: PingFang SC;
                color: #fff;
              }
            }
          }
        }

        .ticket-right {
          display: flex;
          flex-direction: column;
          width: 504rpx;
          position: relative;

          .img {
            width: 126rpx;
            height: 94rpx;
            position: absolute;
            right: 28rpx;
            top: 26rpx;
          }

          .head {
            display: flex;
            flex-direction: column;
            padding: 30rpx 22rpx 26rpx 32rpx;
            gap: 4rpx;

            .title {
              font-family: PingFang SC Heavy-Regular;
              font-size: 32rpx;
              color: #333333;
              line-height: 32rpx;
            }

            .headbox {
              display: flex;
              justify-content: space-between;
              align-items: end;
              height: 50rpx;

              .time {
                font-family: PingFang SC Heavy-Regular;
                font-size: 20rpx;
                color: #999999;
                line-height: 20rpx;
              }

              .btn {
                padding: 20rpx;
                box-sizing: border-box;
                border-radius: 26rpx;
                display: flex;
                align-items: center;
                justify-content: center;
                background: linear-gradient(90deg, #ff7051 0%, #ff382e 100%);
                color: #fff;
                font-size: 24rpx;
                line-height: 24rpx;
              }
            }
          }

          .foot {
            display: flex;
            flex-direction: column;
            padding: 0 22rpx 14rpx 32rpx;
            gap: 14rpx;

            .line {
              border-top: 2rpx solid #f2f2f2;
            }

            .footbox {
              display: flex;
              align-items: center;
              justify-content: space-between;
              .more {
                margin-left: auto;
                font-size: 8 * 2rpx;
                color: #abaaaa;
              }

              .desc {
                font-family: PingFang SC Heavy-Regular;
                font-size: 20rpx;
                color: #999999;
                line-height: 20rpx;
              }
            }
          }
        }
      }

      .detail {
        display: flex;
        flex-direction: column;
        padding: 24rpx 0rpx 56rpx 0rpx;
        gap: 30rpx;

        .line {
          border-top: 2rpx solid #e7e7e7;
        }

        .detail-box {
          display: flex;
          flex-direction: column;
          gap: 40rpx;
          padding: 0 40rpx 0 22rpx;

          .rowbox {
            display: flex;
            flex-direction: row;
            gap: 48rpx;

            text {
              font-family: PingFang SC Regular;
              font-size: 28rpx;
              color: #666666;
              line-height: 28rpx;
            }

            .desc {
              width: 476rpx;
            }
          }
        }
      }
    }
    .active-ticket {
      width: 100%;
      background-color: #fff;
      border-radius: 16rpx;
      display: flex;
      flex-direction: column;
      margin-top: 12rpx;
      border: 1 * 2rpx solid #fa5151;
    }
  }
  .order-detail-card {
    width: 720rpx;
    border-radius: 16 * 2rpx;
    margin: 0 auto;
    box-sizing: border-box;
    margin-top: 108rpx;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    .title {
      font-size: 28rpx;
      width: 100%;
      padding: 34rpx 40rpx;
      position: relative;
      color: #333333;
      border-bottom: 2rpx solid #f2f2f2;
    }
    .detail {
      .group-buying-list {
        width: 100%;
        box-sizing: border-box;
        padding: 40rpx 38rpx;
        .group-buying-item {
          border-bottom: 2rpx solid #efefef;
          display: flex;
          align-items: flex-start;
          padding-bottom: 40rpx;
          width: 100%;
          image {
            width: 60 * 2rpx;
            height: 60 * 2rpx;
            border-radius: 8 * 2rpx;
            flex-shrink: 0;
          }
          .goods-info-detail {
            box-sizing: border-box;
            display: flex;
            margin-left: 20rpx;
            flex-direction: column;
            .goods-title {
              font-size: 12 * 2rpx;
              font-weight: bold;
              color: #3d3d3d;
              margin-top: 8rpx;
            }
            .yh-fl,
            .yh-time {
              font-size: 8 * 2rpx;
              margin-top: 8rpx;
              color: #abaaaa;
            }
          }
          .pay {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            box-sizing: border-box;
            margin-left: auto;
            .sold-shares {
              font-size: 32rpx;
              color: #333333;
            }
            .my-button-qg {
              background: #fa5151;
              margin-top: 8rpx;
              width: 52 * 2rpx;
              height: 24 * 2rpx;
              border-radius: 12 * 2rpx;
              text-align: center;
              line-height: 24 * 2rpx;
              font-size: 12 * 2rpx;
              color: #fff;
            }
          }
        }
        .group-buying-item:last-child {
          border: none;
        }
      }
    }
    .card-bottom {
      width: 100%;
      box-sizing: border-box;
      padding: 0 38rpx;
      display: flex;
      flex-direction: column;
      .notice {
        display: flex;
        align-items: center;
        font-size: 24rpx;
        color: #f23737;
        .icon {
          color: #f23737;
          font-weight: bold;
          font-size: 34rpx;
          margin-right: 6rpx;
        }
      }
      .quan {
        display: flex;
        align-items: center;
        font-weight: bold;
        font-size: 24rpx;
        margin-top: 24rpx;
        .quan-icon {
          border-radius: 5 * 2rpx;
          padding: 8rpx;
          background: #fc2828;
          opacity: 1;
          font-size: 8 * 2rpx;
          color: #ffffff;
          margin-right: 6px;
        }
        .view-coupons {
          margin-left: auto;
          display: flex;
          align-items: center;
          font-size: 24rpx;
          color: #333333;
        }
      }
      .price {
        font-size: 28rpx;
        color: #333333;
        display: flex;
        align-items: center;
        margin-left: auto;
        margin-top: 56rpx;
        margin-bottom: 39rpx;
        text {
          color: #f12a2a;
          font-size: 28rpx;
        }
      }
    }
  }
  .pay-card {
    display: flex;
    width: 710rpx;
    background: #fff;
    border-radius: 16rpx;
    padding: 84rpx 38rpx;
    box-sizing: border-box;
    margin: 0 auto;
    margin-top: 20rpx;
    .pay-item {
      display: flex;
      align-items: center;
      width: 100%;
      justify-content: space-between;
      .icon {
        display: flex;
        align-items: center;
        font-weight: bold;
        font-size: 32rpx;
        color: #333333;
        image {
          width: 45rpx;
          height: 45rpx;
          margin-right: 12rpx;
        }
      }
      .radio {
        margin-left: auto;
      }
    }
    .pay-item:nth-child(2) {
      margin-top: 68rpx;
    }
  }
  .footsubmit-order-box {
    width: 100%;
    box-sizing: border-box;
    padding: 17rpx 20rpx 60rpx 20rpx;
    display: flex;
    justify-content: space-between;
    background: #fff;
    position: fixed;
    bottom: 0;
    .left {
      .yh.jq {
        display: flex;
        align-items: center;
        .hj {
          font-weight: 400;
          font-size: 24rpx;
          color: #333;
        }
        .g-price {
          font-weight: 400;
          font-size: 32rpx;
          color: #f12a2a;
        }
      }
      .yh {
        .zgyh {
          font-size: 24rpx;
          color: #999999;
        }
        .zgyh-name {
          font-size: 24rpx;
          color: #999999;
        }
      }
    }
    .btn {
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 28rpx;
      color: #ffffff;
      width: 188rpx;
      height: 75rpx;
      border-radius: 40rpx;
      background: linear-gradient(90deg, #f73f3f 1%, #ec1a1a 98%);
    }
  }
}
</style>
