<template>
  <view class="order-wrap" :class="[`${themeInfo.theme}-theme`]">
    <navBar></navBar>
    <view class="container">
      <view class="box1">
        <view class="topBox">
          <view class="info">
            <!-- <view class="span"></view> -->
            <view class="info-left">
              {{ state.lockData.name }}
            </view>
            <view class="info-right">
              <view class="text"
                >{{ $t("detail.store") }}：{{ state.lockData.siteName }}</view
              >
              <view class="text"
                >{{ $t("detail.unit") }}：{{
                  state.lockData.unitTypeName
                }}</view
              >
              <view class="text"
                >{{ $t("detail.spec") }}：{{ removeTrailingZeros(state.lockData.length) }}m *
                {{ removeTrailingZeros(state.lockData.width) }}m * {{ removeTrailingZeros(state.lockData.height) }}m</view
              >
              <view class="text"
                >{{ $t("detail.size") }}：{{ state.lockData.volume }} m³.</view>
            </view>
          </view>
          <view class="pirce">
            <view class="left"> {{ currency }} {{ state.priceData.originalPrice }} </view>
            <view class="right">
              <!-- $ {{state.lockData.currentPrice}} -->
              {{ currency }} {{ state.priceData.price }}
            </view>
          </view>
        </view>
      </view>
      <view class="box2">
        <view class="left">
          <view class="left1">
            {{ $t("detail.sitemap") }}
          </view>
          <view class="left2">
            {{ $t("detail.selected") }}
          </view>
        </view>
        <view class="right">
          <uv-image
            class="right-image"
            width="406rpx"
            height="342rpx"
            @click="showImage(baseImageUrl + state.lockData.lockerImageUrl)"
            :src="baseImageUrl + state.lockData.lockerImageUrl"
            altr="no img"
            mode=""
          ></uv-image>
        </view>
      </view>
      <view class="box3">
        <view class="select">
          <view class="label"> * {{ $t("detail.cUnit") }} </view>
          <view class="inputBox">
            <view class="value">
              {{ state.lockData.unitTypeName }}
            </view>
            <view class="arrow"> </view>
          </view>
        </view>
        <view class="select">
          <view class="label"> * {{ $t("detail.startDate") }} </view>
          <view class="inputBox">
            <view class="value">
              {{ dayjs(state.rentalEndDate).format("YYYY/MM/DD") }}
            </view>
            <view class="arrow">
            </view>
          </view>
        </view>
        <view class="select">
          <view class="label"> * {{ $t("detail.lease") }} </view>
          <view class="inputBox" @click="showMonthPicker">
            <view class="value">
              {{ state.month }}
            </view>
            <view class="arrow">
              <button>
                {{ $t("common.more") }} <image style="margin-left: 20rpx;" src="/static/setOrder/selectArrow.png" mode=""></image>
              </button>
            </view>
          </view>
        </view>
        <view class="monthSelect" v-if="state.lockData.discountList">
          <view
            v-for="(item, index) in state.lockData.discountList"
            class="month"
            :key="index"
            :class="index == selectMonthIndex ? 'active' : ''"
            @click="monthChange(item.month, index)"
          >
            {{
              $t("detail.discountOff", {
                month: item.month,
                percent: 100 - (item.discount * 100),
                discount: item.discount * 100 / 10,
              })
            }}
            <image src="../../static/setOrder/fire.png" v-if="index == 0"></image>
          </view>
        </view>
        <view class="fee">
          <view class="info">
            <view class="left">
              {{ $t("detail.rentalFee") }}
            </view>
            <view class="right"> {{ currency }} {{ state.priceData.discountExpense }} </view>
          </view>
          <view class="info">
            <view class="left">
              {{ $t("detail.cDeposit") }}
            </view>
            <view class="right"> {{ currency }} {{ state.priceData.securityDeposit }} </view>
          </view>
        </view>
        <!-- 额外需求 -->
        <!-- <view class="select">
          <view class="label"> * {{ $t("detail.cValueAdded") }} </view>
          <view class="inputBox">
            <view class="value">
              {{ $t("detail.nodata") }}
            </view>
            <view class="arrow">
              <image src="/static/setOrder/selectArrow.png" mode=""></image>
            </view>
          </view>
        </view> -->
        <view class="select" @click="openCoupon">
          <view class="label"> * {{ $t("detail.coupon") }} </view>
          <view class="inputBox">
            <view class="value">
              <template v-if="state.couponOtherItem.length">
                <template v-for="(item, index) in state.couponOtherItem" :key="index">
                  <!-- {{ item.platform }} {{ item.marketPrice }}   -->
                    {{ item.title }}
                </template>
                <template v-if="!state.couponItem.length &&!state.couponOtherItem.length">,</template>
              </template>
              <template v-for="(item, index) in state.couponItem" :key="index">{{item.couponCode }}  {{ couponDesc(item) }} &nbsp;&nbsp;</template>
              <!-- {{$t("detail.noselect") }} -->
              <template v-if="!state.couponItem.length &&!state.couponOtherItem.length">{{
                $t("detail.noselect")
              }}</template>
            </view>
            <view class="arrow">
              <view  @click.stop.prevent="clearCoupon" style="padding: 0rpx 10rpx;"><uv-icon name="close-circle"></uv-icon></view>
              <button>
                {{ $t("common.more") }} <image style="margin-left: 20rpx;" src="/static/setOrder/selectArrow.png" mode=""></image>
              </button>
            </view>
          </view>
        </view>
        <view class="select points" v-if="state.priceData?.maxPoint>0">
            <view class="label" style="color: black;"> * {{ $t("detail.PointsRedemption") }} <text style="font-size: 22rpx;">({{ $t('detail.AvailablePoints') }}:{{ state.priceData?.maxPoint }})</text></view>
            <view class="inputBox" style="display: block;">
              <view class="value">
                <!-- <uv-slider customStyle="width: 100%;" :show-value="true" v-model="state.point" :min="0" :max="state.priceData?.maxPoint" @change="pointsChange"></uv-slider> -->
                <!-- <uv-number-box :inputWidth="60" :integer="true" :min="0"></uv-number-box><text>当前拥有:10076</text>  -->
              <uv-number-box :inputWidth="60" :integer="true" :min="0"  v-model="state.point" :max="state.priceData?.maxPoint" @change="pointsChange"></uv-number-box>
              </view>
              <view style="text-align: center;color: red;">
               {{$t('detail.DeductionAmount')}}：{{ currency }} {{ state.priceData?.deductionMoney }}
              </view>
              <!-- <view class="arrow">
                <button>
                {{ $t("common.reset") }}
              </button>
               <button>
                {{ $t("common.Max") }}
              </button>
              </view> -->
            </view>
        </view>
        <view class="select" v-if="state.priceData.isExpansion">
				<view class="info">
            <view class="left">
              {{ $t("giftMonth",{count:state.priceData.giveExtraMonth})}}
            </view>
          </view>
			</view>
        <!-- 项目估值 -->
        <!-- <view class="select">
				<view class="label">
					* {{ $t("detail.valuation") }}
				</view>
				<view class="garyBox">
					<view class="left">
						¥ 200
					</view>
					<view class="right">
						{{ $t("detail.currency") }}
					</view>
				</view>
			</view> 
			<view class="tips">
				{{ $t("detail.extraTip") }}
			</view>-->
        <view class="select">
          <view class="label"> * {{ $t("detail.feeDetail") }} </view>
          <view class="info">
            <view class="left">
              {{ $t("detail.rentalFee") }}
            </view>
            <view class="right"> {{ currency }} {{ state.priceData.lockerExpense }} </view>
          </view>
          <view class="info">
            <view class="left">
              {{ $t("detail.deposit") }}
            </view>
            <view class="right"> {{ currency }} {{ state.priceData.securityDeposit }} </view>
          </view>
          <view class="info">
            <view class="left">
              {{ $t("detail.valueAdded") }}
            </view>
            <view class="right"> {{ currency }} 0.00 </view>
          </view>
          <view class="info">
            <view class="left">
              {{ $t("detail.discount") }}
            </view>
            <view class="right"> {{ currency }} {{ state.priceData.favorable }} </view>
          </view>
          <view class="info" v-if="state.priceData.couponPrice>0">
            <view class="left">
              {{ $t("common.tuangouCouponPrice") }}
            </view>
            <view class="right"> {{ currency }} {{ state.priceData.couponPrice }} </view>
          </view>
          <view class="info Total">
            <view class="left">
              {{ $t("detail.total") }}
            </view>
            <view class="right"> {{ currency }} {{ state.priceData.expense }} </view>
          </view>
        </view>
        <view class="bth">
          <button class="next-btn" @click="next">
            {{ $t("unlock.renew") }}
          </button>
        </view>
        <!-- <view class="agreed" >
				<view class="check-wrap" @click="changeCheck" :class="{ checked: state.checked }"></view>
				<view>
					<text class="read">{{ $t("detail.read") }}</text>
					<text class="stress" @click="openFile">{{ $t("detail.agreement") }}</text>
				</view>
			</view> -->
      </view>
      <uv-picker
        ref="picker"
        :confirmText="$t('common.confirm')"
        :cancelText="$t('common.cancel')"
        :columns="columns"
        keyName="label"
        @confirm="onMonthConfirm"
      ></uv-picker>
      <uv-calendars
        ref="calendars"
        :start-date="state.minDate"
        :confirmText="$t('common.confirm')"
        :cancelText="$t('common.cancel')"
        :end-date="state.maxDate"
        @confirm="calendarConfirm"
      />

      <uv-popup
        ref="popup"
        customStyle="width: 80%; height: 400rpx; padding:50rpx 0; border-radius: 32rpx; display: flex; flex-direction: column; justify-content: center; align-items: center;"
      >
        <text>{{ $t("common.bindPhone") }}</text>
        <text style="padding: 0 40rpx; margin-top: 20rpx; text-align: center;">{{ $t('common.bindPhoneAfter') }}</text>
        <!-- #ifdef MP-WEIXIN -->
        <button
          style="width: 80%; margin-top: 20px; background: #5BBC6B; color: #FFFFFF; line-height: 80rpx;"
          open-type="getPhoneNumber"
          @getphonenumber="getPhoneNumber"
        >
        {{ $t("common.QuickBind") }}
        </button>
        <!-- #endif -->
      </uv-popup>
      <myModal
        v-model="state.showPayAfterMoadl"
        :cancelShow="false"
        @confirm="payAfterconfirm"
      >
        <view class="payAfter">
          <view class="payAfterIcon" style="display: flex;justify-content: center;">
            <uv-icon
              :name="
                state.paySuccessOrfail
                  ? 'checkmark-circle-fill'
                  : 'close-circle-fill'
              "
              :color="state.paySuccessOrfail ? '#14b51a' : '#f10526'"
              size="60"
            ></uv-icon>
          </view>
          <view class="payAfterText">
            {{
              state.paySuccessOrfail
                ? $t("common.paySuccess")
                : $t("common.payFail")
            }}
          </view>
        </view>
      </myModal>
      <!-- 优惠卷 -->
		<coupon 
      ref="couponRef"
      v-model="state.couponShow" 
      :priceData="state.priceData"
      :month="state.month" 
      :couponItem="state.couponItem" 
      :couponOtherItem="state.couponOtherItem" 
      :isRenew="true" 
      :siteData="state.lockData" 
      :disabledFunc="disabledFunc" 
      @chooseOtherCoupon="chooseOtherCoupon" 
      @chooseCoupon="chooseCoupon"
      @confirm="confirmCoupon"
      ></coupon>
    </view>
  </view>
</template>

<script setup>
import { ref, watchEffect,watch  } from "vue";
import navBar from "@/components/navBar.vue";
import { onLoad, onShow } from "@dcloudio/uni-app";
import { useSiteApi } from "@/Apis/site.js";
import { useOrderApi } from "@/Apis/order.js";
import { useLoginApi } from "@/Apis/login.js";
import { removeTrailingZeros } from "@/utils/common.js";
import coupon from '@/components/coupon.vue';
import dayjs from "dayjs";
import { baseImageUrl,setOrderDays,currency } from "@/config/index.js";
// 主题色配置
import { useMainStore } from "@/store/index.js";
import { useI18n } from "vue-i18n";
import myModal from "@/components/myModal.vue";
const { themeInfo, getUserInfo } = useMainStore();
const { t } = useI18n();
const picker = ref();
const calendars = ref();
const getApi = useSiteApi();
const getLoginApi = useLoginApi();
const getOrderApi = useOrderApi();
const checked = ref(true);
const couponRef = ref();
const popup = ref();
const columns = ref([]);
columns.value[0] = Array.from({ length: 36 }, (v, i) => ({
  label: t(i + 1 > 1 ? "months" : "month", { count: i + 1 }),
  id: i + 1,
}));
const showImage = (url) => {
  uni.previewImage({
    urls: [url],
  });
};
const payAfterconfirm = () => {
  if (state.value.paySuccessOrfail) {
    uni.reLaunch({
      url: "/pages/unlock/index",
    });
  }
};
const clearCoupon = () => {
  state.value.couponItem = [];
  state.value.couponOtherItem = [];
  state.value.point = 0;
  getLockerExpense();
};

const confirmCoupon = (data)=>{
  const { couponItem, couponOtherItem } = data;
  state.value.couponItem = couponItem;
  state.value.couponOtherItem = couponOtherItem;
  getLockerExpense();
  couponRef.value.close();
}

const chooseCoupon = (item)=>{
  // 可以叠加就添加
  if(item.isSuperposition){
    if(state.value.couponItem.every((x)=>item.couponDispositionId != x.couponDispositionId)){
      if(state.value.couponItem.every(x=>item.couponType != x.couponType)){
        state.value.couponItem.push(item);
      }else{
        uni.showToast({
          title: `相同优惠卷类型不能叠加使用！`,
          icon: "none",
          duration: 2000,
        })
      }
    }
  }else{
    state.value.couponItem = [item]
  }
  getLockerExpense()
	}
const openFile = () => {
  if (state.value.lockData.agreementUrl) {
    // #ifdef MP-WEIXIN
    // 下载 打开文件
    uni.downloadFile({
      url: state.value.lockData.agreementUrl,
      success: (res) => {
        if (res.statusCode === 200) {
          uni.openDocument({
            filePath: res.tempFilePath,
            success: function (res) {
              console.log("打开文档成功");
            },
          });
        }
      },
    });
    // #endif
    // #ifdef H5
    uni.navigateTo({
      url:
        "/pages/webview/web?url=" +
        encodeURIComponent(state.value.lockData.agreementUrl),
    });
    // #endif
  } else {
    uni.showToast({
      title: "暂无协议",
      icon: "none",
    });
  }
};
const today = dayjs()
  .set("hour", 0)
  .set("minute", 0)
  .set("second", 0)
  .set("millisecond", 0);
// 生成当天一个月后的日期
let oneMonthLater = today.add(setOrderDays, "day");

const chooseOtherCoupon= (item) => {
  state.value.couponOtherItem = [item];
  getLockerExpense();
}
const state = ref({
  checked: true,
  lockerId: "",
  orderId: "",
  rentalEndDate: today.format("YYYY/MM/DD"),
  minDate: today.format("YYYY/MM/DD"),
  maxDate: oneMonthLater.format("YYYY/MM/DD"),
  month: 24,
  lockData: {},
  orderData: {},
  priceData: {},
  showPayAfterMoadl: false, //打开支付窗口
  paySuccessOrfail: false, // 支付状态
  couponShow:false, // 优惠卷窗口
  couponItem:[], // 优惠卷
  couponOtherItem:[],
  point: 0,

});

// 如果当前最多使用积分 大于所选的置零
watch(()=>state.value.priceData?.maxPoint,()=>{
  if(state.value.priceData?.maxPoint>state.value.point){
    state.value.point = 0
    getLockerExpense()
  }
})


function canAddValue(arr, value) {
    // 定义可以共存的数字
    const allowedNumbers = new Set([1, 3, 4]);

    // 如果数组为空，可以添加任意值
    if (arr.length === 0) {
        return true;
    }

    // 检查数组中是否已经存在非1、3、4的值
    const hasInvalidNumber = arr.some(num => !allowedNumbers.has(num));
    if (hasInvalidNumber) {
        return false; // 如果数组中已经有非1、3、4的值，不能添加任何值
    }

    // 如果要添加的值是1、3、4，且没有重复，则可以添加
    if (allowedNumbers.has(value) && !arr.includes(value)) {
        return true;
    }

    // 其他情况不能添加
    return false;
}
const disabledFunc = (item)=>{
  if(!item) {return true}
  // item.siteIds 空的时候 包括全部
  const isSite = item.siteIds.length?item.siteIds.includes(state.value.lockData.siteId):true
  const isUnit = item.unitTypeIds.length?item.unitTypeIds.includes(state.value.lockData.unitTypeId):true
  let isPrice = item.satisfyAmount?state.value.priceData.expense>=item.satisfyAmount:true
  const canAdd = canAddValue(state.value.couponItem.map(x=>x.couponType),item.couponType)
    if([3,4,5,6].includes(item.couponType)){
     isPrice =  state.value.month>=item.fullMonth
    }

  // 将日期字符串转换为 Date 对象
const start = new Date(item.startDate);
const end = new Date(item.endDate);
// 获取当前日期和时间
const now = new Date();
// 判断当前日期是否在开始日期和结束日期之间
const isDate = now >= start && now <= end;
  return !(isSite&&isUnit&&isPrice&&item.renewUsable&&isDate&&canAdd)
}
const openCoupon = ()=>{
  couponRef.value.open();
}
const showMonthPicker = () => {
  picker.value.open();
};
const showCalendar = () => {
  calendars.value.open();
};
const changeCheck = () => {
  state.value.checked = !state.value.checked;
};
const calendarConfirm = (e) => {
  state.value.startDate = dayjs(e.fulldate).format("YYYY/MM/DD");
};
const onMonthConfirm = (e) => {
  state.value.month = e.value[0].id;
  clearCoupon();
};
const selectMonthIndex = ref(0);
const monthChange = (num, index) => {
  state.value.month = num;
  selectMonthIndex.value = index;
  clearCoupon();
};

// 1) 防抖定时器 + 请求序号（只认最后一次）
let pointDebounceTimer = null
// 2) change 回调：拿到最新值，先写回，再防抖触发计算
const pointsChange = (e) => {
  // 兼容：e 可能是 number，也可能是 { value: number }
  const newPoint = typeof e.value === 'number' ? e : (e?.value ?? state.value.point)

  // 确保 state 里是最新值（避免 change 时 v-model 还没同步完）
  state.value.point = newPoint

  clearTimeout(pointDebounceTimer)
  pointDebounceTimer = setTimeout(() => {
    getLockerExpense()
  }, 250) // 200~400ms 都可以
}


watchEffect(() => {
  let discountList = state.value.lockData.discountList;
  if (!discountList?.length) return;
  let firstIndex = discountList.findIndex(item => state.value.month >= item.month);
  selectMonthIndex.value = firstIndex;
});
onLoad((params) => {
  state.value.lockerId = params.lockerId;
  state.value.orderId = params.orderId;
});
onShow(() => {
  getLockerById();
});
// 根据优惠卷类型 返回优惠卷 作用范围 优惠多少钱 打多少折 首页多少钱
const couponDesc = (item)=>{
	let detail = ''
	switch(item.couponType){
			case 1:
			detail = `${t('discountMomey',{discount:item.discountLimit})}`  
		break
			case 2:
			detail = `${t('couponDiscount',{percent: 100 - item.discountRange * 100,discount: (item.discountRange * 100) / 10,})}`
		break
		case 3:
			detail = `${t('firstMonthRent',{discount:item.firstMonthAmount})}`
			break
		case 4:
			detail = `${t('couponDiscount',{percent: 100 - item.monthDiscount * 100,discount: (item.monthDiscount * 100) / 10})}`
			break
		case 5:
			detail = `${t('freeMonth',{discount:item.freeMonth})}`
			break
    case 6:
			detail = `${t('BonusMonth',{discount:item.freeMonth})}`
			break
		default:
			detail = `${t('discountMomey',{discount:item.discountLimit})}`
		break
	}
	return `${detail}`
	}
const phoneNumber = ref("");
function getPhoneNumber(e) {
  uni.showLoading();
  phoneNumber.value = e.detail.code;
  if (e.detail.code) {
    getLoginApi.GetPhoneNumber({code:e.detail.code}).then((res) => {
      if (res.code == 200) {
        uni.hideLoading();
        uni.showToast({
          title: "获取手机号成功",
          icon: "none",
          duration: 2000,
        });
        popup.value.close();
      }
    });
  } else {
    uni.hideLoading();
    uni.showToast({
      title: "获取手机号失败",
      icon: "none",
      duration: 2000,
    });
  }
}
const GetOrderById = () => {
  getOrderApi.GetOrderById({ orderId: state.value.orderId }).then((res) => {
    uni.hideLoading();
    if (res.code === 200) {
      state.value.rentalEndDate = res.data.rentalEndDate;
    }
  });
};
const getLockerById = () => {
  uni.showLoading();
  getApi.GetLockerById({ lockerId: state.value.lockerId }).then((res) => {
    if (res.code === 200) {
      state.value.lockData = res.data;
      state.value.lockData.orderId = state.value.orderId;
      GetOrderById();
      getLockerExpense();
    }
  });
};
const getLockerExpense = () => {
  uni.showLoading({
    mask: true,
  });
  getOrderApi
    .ContinuationOrderPricePost({
      orderId: state.value.orderId,
      month: state.value.month,
      couponIds: state.value.couponItem.map((item) => item.couponDispositionId),
      point:state.value.point,
      serialNumber: state.value.couponOtherItem.map(x => {
        return {
          dealGroupId: x.dealGroupId,
          number: x.number,
          marketPrice: x.marketPrice,
          purchasePrice: x.price
        }
      })
    })
    .then((res) => {
      uni.hideLoading();
      if (res.code === 200) {
        state.value.priceData = res.data;
      }
        if(res.code === 1002){
        uni.showModal({
          title: t('common.title'),
          content: t('common.ORDER_AMOUNT_ERROR'),
          showCancel: false,
          success: function () {
            clearCoupon();
            state.value.point = 0;
          },
        });
      }
    });
};
const next = async () => {
  uni.showLoading({
    mask: true,
  });
  // if (!state.value.checked) {
  // 	uni.showToast({
  // 		title: t("detail.agreeTip"),
  // 		icon: "none",
  // 		duration: 2000
  // 	});
  // 	return;
  // }
  // 微信就判断 用户是否有手机号  H5就直接下单
  //	#ifdef MP-WEIXIN
  const res = await getUserInfo();
  if (res.code === 200) {
    if (!res.data.phone) {
      uni.hideLoading();
      popup.value.open();
      return;
    }
  }
  getOrderApi
    .ContinuationOrder({
	    orderId: state.value.orderId,
      month: state.value.month,
      couponIds: state.value.couponItem.map((item) => item.couponDispositionId),
      point:state.value.point,
      serialNumber: state.value.couponOtherItem.map(x => {
        return {
          dealGroupId: x.dealGroupId,
          number: x.number,
          marketPrice: x.marketPrice,
          purchasePrice: x.price
        }
      })
    })
    .then((res) => {
      uni.hideLoading();
      if (res.code === 200) {
        uni.requestPayment({
          provider: "wxpay",
          timeStamp: res.data.timeStamp, // 从服务器获取的时间戳
          nonceStr: res.data.nonceStr, // 从服务器获取的随机字符串
          package: `prepay_id=${res.data.package}`, // 从服务器获取的预支付交易会话标识
          signType: res.data.signType, // 签名方式
          paySign: res.data.paySign, // 从服务器获取的签名
          success(res) {
            // 支付成功
            state.value.paySuccessOrfail = true;
            state.value.showPayAfterMoadl = true;
            console.log("支付成功", res);
          },
          fail(err) {
        // 关闭订单
        getOrderApi.CloseWeChatPayment({out_trade_no:res.data.nonceStr});
              // 支付失败
            state.value.paySuccessOrfail = false;
            state.value.showPayAfterMoadl = true;
            console.error("支付失败", err);
          },
        });
      }
       if(res.code === 1002){
        uni.showModal({
          title: t('common.title'),
          content: t('common.ORDER_AMOUNT_ERROR'),
          showCancel: false,
          success: function () {
            clearCoupon();
            state.value.point = 0;
          },
        });
      }
    });
  // #endif
  //	#ifndef MP-WEIXIN
  // let startTime = data.toISOString()
  uni.showLoading();
  getOrderApi
    .ContinuationOrderH5({
      orderId: state.value.orderId,
      month: state.value.month,
      couponIds: state.value.couponItem.map((item) => item.couponDispositionId),
    })
    .then((res) => {
      uni.hideLoading();
      if (res.code === 200) {
        // 支付成功
        state.value.paySuccessOrfail = true;
        state.value.showPayAfterMoadl = true;
      } else {
        // 支付失败
            state.value.paySuccessOrfail = false;
            state.value.showPayAfterMoadl = true;
      }
    });
  // #endif
};
</script>

<style scoped lang="scss">
@import "@/static/style/theme.scss";
.order-wrap {
  background: linear-gradient(0deg, var(--left-linear), var(--right-linear));
}

.container {
  padding: 0 30rpx 40rpx;
  font-size: 14px;
  line-height: 24px;

  .payAfter {
    width: 100%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    .payAfterIcon {
      width: 100%;
      display: flex;
      justify-content: center;
      padding: 20px;
    }
    .payAfterText {
      font-size: 28rpx;
    }
  }

  .agreed {
    display: flex;
    margin: 0 20rpx 20rpx;
    font-weight: bold;

    .check-wrap {
      min-width: 40rpx;
      height: 40rpx;
      border: 6rpx solid #242a37;
      border-radius: 50%;
      margin: 4rpx 20rpx 0 0;
      &.checked {
        background-color: var(--active-color);
      }
    }
    .read {
      color: #323233;
    }
    .stress {
      color: var(--active-color);
    }
  }

  .box3 {
    position: relative;
    margin-top: 20rpx;
    padding: 20rpx;
    background-color: rgba(255, 255, 255, 0.95);
    border-radius: 18rpx;
    .bth {
      padding: 0 20rpx;
      margin: 40rpx 0;
      button {
        padding: 4px 0;
        font-size: 28rpx;
        font-weight: bold;
        color: var(--text-color);
        background: var(--active-color);
        border-radius: 16rpx;
      }
    }
    .tips {
      color: #2a3447;
      font-size: 22rpx;
      font-weight: bold;
    }
    .fee {
      margin: 10rpx 0;
      .info {
        display: flex;
        justify-content: space-between;
        font-size: 28rpx;
        color: #242a37;
        font-weight: bold;
        .left {
          display: flex;
          align-items: center;
          &::before {
            content: " ";
            display: block;
            background: var(--main-color);
            height: 24rpx;
            width: 6rpx;
            border-radius: 4rpx;
            margin-right: 10rpx;
          }
        }
      }
    }
    .monthSelect {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      .month {
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        margin-bottom: 10rpx;
        width: 49%;
        font-size: 22rpx;
        background-color: #f2f0e9;
        border: 1px solid #242e42;
        padding: 4rpx 8rpx;
        font-weight: bold;
        border-radius: 8rpx;
        image {
          width: 21rpx;
          height: 28rpx;
          margin-left: 4rpx;
        }
        &.active {
          background-color: var(--active-color);
        }
      }
    }
    .select {
      font-size: 28rpx;
      border-bottom: 1px dashed #d8d8d857;
      .label {
        font-weight: bold;
        margin-top: 10rpx;
        color: #b5b4b4;
      }
      .info {
        color: #323233;
        display: flex;
        justify-content: space-between;
        font-weight: bold;
        padding: 0 18rpx;
        opacity: 0.7;
        &.Total {
          margin-top: 10rpx;
          color: #242e42;
          opacity: 1;
        }
      }
      .garyBox {
        background-color: rgba(216, 216, 216, 0.3);
        border-radius: 8rpx;
        padding: 2rpx 10rpx;
        font-size: 20rpx;
        font-weight: bold;
        color: rgb(36, 46, 66);
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 10rpx 4rpx;
      }
      .inputBox {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 16rpx 20rpx;
        .value {
          flex: 1;
          display: flex;
          flex-wrap: wrap;
          color: #242e42;
          font-size: 28rpx;
          font-weight: bold;
        }
        .arrow {
          display:flex;
          align-items: center;
          justify-content: space-between;
          // width: 80rpx;
          button {
            height: 54rpx;
            display: flex;
            align-items: center;
            padding: 4rpx 20rpx;
            font-size: 28rpx;
            font-weight: bold;
            color: var(--text-color);
            background: var(--active-color);
            border-radius: 16rpx;
          }
        }
        image {
          width: 20rpx;
          height: 12rpx;
        }
      }
    }
    &::after {
      content: "";
      position: absolute;
      bottom: -7px;
      left: 0;
      width: 100%;
      height: 14px;
      background: radial-gradient( var(--left-linear) 0px,  var(--left-linear) 5px, transparent 5px, transparent);
      background-size: 14px 14px;
      z-index: 9;
    }
  }
  .box2 {
    margin-top: 20rpx;
    display: flex;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 18rpx;
    padding: 20rpx;
    .left {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      font-size: 28rpx;
      font-weight: bold;
      .left1 {
        padding: 10rpx 0;
      }
      .left2 {
        display: flex;
        align-items: center;
        padding: 10rpx 0;
        &::before {
          content: " ";
          display: block;
          width: 22rpx;
          height: 22rpx;
          background-color: #212938;
          margin-right: 20rpx;
        }
      }
    }
    .right {
      .right-image {
        width: 406rpx;
        height: 342rpx;
      }
    }
  }
  .topBox {
    border-radius: 32rpx;

    .pirce {
      position: relative;
      display: flex;
      justify-content: space-between;
      padding: 70rpx 7% 20rpx;
      margin-top: -30rpx;
      color: #242a37;
      font-size: 44rpx;
      font-weight: bold;
      background: #FFFFFF;
      opacity: 0.95;
      border-radius: 16rpx;

      .left {
        position: relative;
        &:after {
          content: " ";
          display: block;
          width: 120%;
          height: 2px;
          background-color: var(--btn-color3);
          transform: rotate(9deg);
          position: absolute;
          top: 50%;
          left: -5px;
        }
      }

      &::after {
        content: "";
        position: absolute;
        bottom: -7px;
        left: 0;
        width: 100%;
        height: 14px;
        background: radial-gradient( var(--right-linear) 0px,  var(--right-linear) 5px, transparent 5px, transparent);
        background-size: 14px 14px;
        z-index: 9;
      }
    }

    .info {
      background: linear-gradient(180deg, var(--bg-color), var(--bg-color2));
      position: relative;
      border-radius: 20rpx;
      padding: 40rpx;
      color: #ffffff;
      display: flex;
      align-items: center;
      line-height: 1.4;
      font-weight: bold;
      z-index: 1;

      .info-left {
        padding: 0 40rpx;
        font-size: 80rpx;
        line-height: 1;
        word-break: break-all;
      }

      .info-right {
        flex: 1;
        font-size: 24rpx;
      }

    &::before {
			content: "";
			position: absolute;
			top: -7px;
			left: 4px;
			width: 100%;
			height: 14px;
			background: radial-gradient(var(--right-linear) 0px,  var(--right-linear) 5px, transparent 5px, transparent);
			background-size: 14px 14px;
			z-index: 9;
		}

      // .span {
      //   position: absolute;
      //   inset: 0;
      //   rotate: 180deg;
      //   border-radius: 18rpx;
      //   &::before{
      // 	    content: "";
      // 	    position: absolute;
      // 	    bottom: 0;
      // 	    width: 100%;
      // 	    background-repeat: repeat;
      // 	    height: 4.5px;
      // 	    background-image: radial-gradient(
      // 	      circle at 2.5px 3.75px,
      // 	      #0a84b8 3px,
      // 	      transparent 3.5px
      // 	    );
      // 	    background-size: 10px 5px;
      // 	    /* 让波浪边框不会执行动画 */

      //   }
      //   &::after {
      //     content: "";
      //     position: absolute;
      //     bottom: 0;
      //     width: 100%;
      //     background-repeat: repeat;
      //     height: 0px;
      //     background-image: radial-gradient(
      //       circle at 2.5px -1.45px,
      //       transparent 6px,
      //       #0a84b8 3.75px
      //     );
      //     background-size: 5px 5px;
      //   }
      // }
    }
  }
}
</style>
