<template>
  <view class="container" :class="[`${themeInfo.theme}-theme`, `${themeInfo.language}`]">
    <view class="selectSite card" @click="goSite">
      <view class="left">
        <image src="/static/home/address.svg" mode="heightFix" class="icon"></image>
        <text class="address fontb">{{ unitTypeData[0]?.city }}·{{ unitTypeData[0]?.district }}</text>
      </view>
      <view class="right">
        <text class="more fontb">更多分店</text><image src="/static/home/jiantou.svg" style="width: 24rpx;height: 24rpx;" class="icon"></image>
      </view>
    </view>
    <template v-if="state.siteId">
      <view class="siteInfo card">
        <!-- 顶部：左中右布局 -->
        <view class="top">
          <view class="left">
            <image src="/static/home/siteicon.svg" class="icon"></image>
            <view class="title-wrap">
              <text class="title font36 fontb">{{ unitTypeData[0]?.sitdName }}</text>
              <!-- <view class="tag font16 fontb">距离最近</view> -->
            </view>
          </view>
          <view class="right" v-if="siteDistance" @click="handleNavigate">
            <text class="distance font28 fontb">{{ siteDistance }}KM</text>
          </view>
        </view>
        <!-- 底部：地址 -->
        <view class="bottom" @click="handleNavigate">
          <image src="/static/home/siteicon2.svg" class="icon"></image>
          <text class="address font26 fontb textGary">{{ unitTypeData[0]?.sitdAddress }}</text>
        </view>
      </view>
      <view class="unitType card" v-if="unitTypeData.length">
        <view class="title font32 fontb mgb20">
          仓型选择
        </view>
        <view class="swiper" >
          <view class="info">
            <view class="left arrow">
              <view class="arrowIcon" @click="prev" v-if="unitTypeData.length > 1">
                <image src="/static/home/jiantouleft.svg" style="width: 64rpx;height: 64rpx;" class="icon"></image>
              </view>
            </view>
            <view class="swiper-container" >
              <swiper class="warehouse-detail"  circular style="height: 300rpx;" :indicator-dots="false"
                :autoplay="false" @change="changeMove" :current="state.active">
                <swiper-item v-for="(item, index) in unitTypeData" :key="index">
                  <view class="warehouse-detail-items">
                    <image class="warehouse-detail-right" @click="showImage(baseImageUrl + item.imgUrl)"
                      :src="baseImageUrl + item.imgUrl" mode="widthFix"></image>
                  </view>
                </swiper-item>
              </swiper>
              
            </view>
            <view class="right arrow">
              <view class="arrowIcon" @click="next" v-if="unitTypeData.length > 1">
                 <image src="/static/home/jiantouright.svg" style="width: 64rpx;height: 64rpx;" class="icon"></image>
              </view>
            </view>
          </view>
        </view>
        <view class="bottom" v-if="unitTypeData.length">
          <view class="font32 fontb name">
            {{ unitTypeData[state.active].name }}
          </view>
          <view class="font26 fontb textGary" style="padding: 0 28rpx;padding-right: 0;">
            {{ unitTypeData[state.active].volumeRange }}
          </view>
          <view class="font26 fontb textGary">({{ unitTypeData[state.active].description }})</view>
        </view>
      </view>
      <view class="full-wrap card"  v-if="!unitTypeData[state.active]?.hasAvailableLocker">
        {{ $t("site.full") }}
      <uv-button :plain="!isApply" @click="postWaitingAppointment" color="#FB322E" >
          {{
            isApply === false
              ? "加入候补"
              : "已候补"
          }}
        </uv-button>
      </view>
      <view class="empt font32 fontb" v-if="unitTypeData.length === 0" style="text-align: center;margin-top: 20rpx;">
              暂无可用仓型，请选择其他门店～
      </view>
      <view class="orderInfo sflist card" v-if="unitTypeData.length && unitTypeData[state.active]?.hasAvailableLocker">
        <ul>
          <li @click="showUnitPopup">
            <view class="left"><text class="font32 fontb">体积</text> 
              <!-- <text style="font-size: 26rpx;margin-left: 10rpx;"
                v-if="state.selectUnitRow?.name">（仓号：{{ state.selectUnitRow?.name }}）</text> -->
              </view>
            <view class="right font26 fontb"><text
                :style="{ color: state.selectUnitRow?.name ? '#000000' : '#FB322E' }">{{
                  state.selectUnitRow?.name ? `${state.selectUnitRow?.volume}m³ ` : "请选择" }} </text>
              <image src="/static/home/jiantou.svg"  style="width: 24rpx;height: 24rpx;" class="icon"></image>
            </view>
          </li>
          <li @click="showMonthPopup" class="zuqi">
            <view class="left"><text class="font32 fontb">租期</text></view>
            <view class="right font26 fontb" :class="{textGary:!state.month}"><text>{{ state.month }}个月</text>
              <image src="/static/home/jiantou.svg" style="width: 24rpx;height: 24rpx;" class="icon"></image>
            </view>
          </li>
          <li @click="openCoupon">
            <view class="left"><text class="font32 fontb">优惠劵</text></view>
            <view class="right font26 fontb">
              <text v-for="(item, index) in state.couponItem" :key="index">{{ couponDesc(item) }}</text>
              <text class="textGary" v-if="!state.couponItem.length &&!state.couponOtherItem.length">{{
                $t("detail.noselect")
              }}</text>
              <image src="/static/home/jiantou.svg" style="width: 24rpx;height: 24rpx;" class="icon"></image>
            </view>
          </li>
          <li>
            <view class="left"><text class="font32 fontb">租金</text></view>
            <view class="right font26 fontb" :class="{textGary:!state.priceData?.price}"><text>{{ state.priceData?.price ? `￥ ${state.priceData?.price}` :
              '--'
            }} </text>
            </view>
          </li>
          <li @click="showCalendar">
            <view class="left"><text class="font32 fontb">开始时间</text></view>
            <view class="right font26 fontb"><text>{{ dayjs(state.startDate).format("YYYY/MM/DD") }}</text>
              <image src="/static/home/jiantou.svg" style="width: 24rpx;height: 24rpx;" class="icon"></image>
            </view>
          </li>
          <li @click="goVaild">
            <view class="left"><text class="font32 fontb">实名验证</text></view>
            <view class="right font26 fontb textGary"><text
                :style="{ color: state.hasVerify ? '#1E9B00' : '#FB322E' }">{{
                  state.hasVerify ? '已验证' : '未验证' }}</text>
                <image src="/static/home/jiantou.svg" v-if="!state.hasVerify" style="width: 24rpx;height: 24rpx;" class="icon"></image>
            </view>
          </li>
        </ul>
      </view>
       <view class="goReserve font28 fontb" @click="goReserve">
          <view class="left"><text>预约</text><text>咨询</text> </view>
            <view class="right">
              填写预约，专员为您估价与讲解。<image src="/static/home/jiantou.svg" style="width: 24rpx;height: 24rpx;" class="icon"></image>
          </view>
        </view>
        <view class="kefu font28 fontb" style="padding: 20rpx 0;color: #A8AAAC;">
          租赁相关问题可联系客服咨询(电话:<text @click="openPopup" style="color: #2E5DB5;">4008181813</text>)
        </view>
        <view class="toOrderBox">
        <view class="agreed" v-if="unitTypeData.length" @click="changeCheck">
        <view class="check-wrap" :class="{ checked: state.checked }">
          <uv-radio-group v-model="state.checked"  activeColor="#fb322e" size="30rpx" inactiveColor="#D8D8D8">
            <uv-radio activeColor="#fb322e" :key="0" :name="true">
            </uv-radio></uv-radio-group>
        </view>
        <view style="display: flex;align-items: center;">
          <text class="stress" @click="openAgreement">阅读并同意<text style="color: #2E5DB5;">《订仓协议》</text></text>
        </view>
      </view>
        <!-- <view class="agreed agreed2"><text class="stress">租赁相关问题可联系客服咨询(电话:4008181813)</text></view> -->
        <view class="toOrder card font28" v-if="unitTypeData.length">
          <view class="left font28">
            <text class="price fontb" :class="{ overMaxFont: String(state.priceData?.discountExpense).length>6 }"><text v-if="state.priceData.expense" style="font-size: 30rpx;">租金￥</text>{{ state.priceData.discountExpense ? `${state.priceData.discountExpense}` : '--'
              }}</text>
              <view class="detail" v-if="state.priceData.expense" @click="showPayPopup"><text class="detail1" :class="{ overMaxFont:String(state.priceData?.lockerExpense).length>6  }" v-if="state.priceData?.expense">￥{{ state.priceData.lockerExpense }}</text>
                <!-- <text class="detail2">明细</text> -->
            <!-- <image src="/static/home/jiantouup.svg" style="height: 10rpx;margin-left: 10rpx;" mode="heightFix" class="icon"></image> -->
          </view>
          </view>
        <!-- <view class="left" >
          <text class="price fontb" :class="{ overMaxFont: String(state.priceData?.expense).length>6 }"> {{ state.priceData.expense ? `￥${state.priceData.expense}` : '￥--'
            }}</text>
            <view class="detail" v-if="state.priceData.expense" @click="showPayPopup"><text class="detail1" :class="{ overMaxFont:String(state.priceData?.expense).length>6  }" v-if="state.priceData?.expense">￥{{ state.priceData.leaseOriginalPrice }}</text><text class="detail2">明细</text>
            <image src="/static/home/jiantouup.svg" style="height: 10rpx;margin-left: 10rpx;" mode="heightFix" class="icon"></image>
          </view>
        </view> -->
        <view class="right">
          <uv-button :customStyle="{
            height: '86rpx',
            color: '#fff',
          }" :textStyle="{
            fontSize: '32rpx',
            fontWeight: 'bold',
          }" shape="circle"  @click="showPayPopup" color="#FB322E" :disabled="!state.lockerId || !state.month" 
            class="goOrder">下单</uv-button>
        </view>
      </view>
        </view>
     
    </template>
    <template v-else>
      <!-- <view style="margin-top: 40vh;" @click="goSite">
        <uv-button :customStyle="{
          height: '86rpx',
          width: '560rpx',
          color: '#2979ff',
          fontSize: '32rpx',
        }" shape="circle">选择门店</uv-button>
      </view> -->
       <view class="empt font32 fontb" @click="goSite" style="text-align: center;margin-top: 20rpx;">
        请选择其他门店～
      </view>
    </template>
    <div class="footer">
      <myCustomtTabBar direction="horizontal" :show-icon="true" :selected="0" @onTabItemTap="onTabItemTap">
      </myCustomtTabBar>
    </div>
    <uv-popup ref="unitPopupRef" mode="bottom" zIndex="999" round="24px">
      <view class="unitPopupBox">
        <view class="title font36 fontb">
          体积选择 <image class="close-icon" style="width: 30rpx;height: 30rpx;" src="/static/home/close2.svg" @click="hideUnitPopup"></image>
        </view>
        <view class="info">
          <uv-radio-group v-model="state.radiovalue" activeColor="#fb322e" size="40rpx" inactiveColor="#D8D8D8">
            <view class="list" v-for="(item, index) in LockerList">
              <view class="left">
                <view class="volume mgb10 font28 fontb">
                  体积: {{ item.volume }}m³
                </view>
                <view class="unit textGary font28 fontb mgb10">
                  仓号: {{ item.name }}
                </view>
                <view class="site textGary font28 fontb mgb10">
                  尺寸: {{ item.length }}m*{{ item.width }}m*{{ item.height }}m
                </view>
              </view>
              <view class="right">
                <view class="radioBox">
                  <uv-radio :key="item.lockerId" :name="item.lockerId" size="40rpx">
                  </uv-radio>
                </view>
                <view class="price mgb10">
                  <text class="font28 textGary fontb" style="text-decoration: line-through;text-decoration-color: rgb(0, 0, 0);padding-right: 20rpx;">￥ {{
                    item.price
                  }}/月</text>
                  <text class="font28 fontb" style="color: #D2021B;">￥ {{ item.currentPrice }}/月</text>
                </view>
              </view>
            </view>
          </uv-radio-group>
        </view>
        <view class="btn" style="display: flex;justify-content: center;">
          <uv-button @click="confirmUnit" :customStyle="{
            height: '86rpx',
            color: '#fff',
            fontSize: '32rpx',
            width: '630rpx',
          }" color="#FB322E" shape="circle">
            确定
          </uv-button>
        </view>
      </view>
    </uv-popup>
    <uv-popup ref="monthPopupRef" mode="bottom" zIndex="999" round="24px">
      <view class="unitPopupBox">
        <view class="title font36 fontb">
          租期选择  <image class="close-icon" style="width: 30rpx;height: 30rpx;" src="/static/home/close2.svg" @click="hideMonthPopup"></image>
        </view>
        <view class="info">
          <uv-radio-group v-model="state.radioMonthvalue" activeColor="#fb322e" size="40rpx" labelWidth="0" inactiveColor="#D8D8D8">
            <view class="list" v-for="item in state.lockData?.discountList">
              <view class="left">
                <view class="volume mgb10 font28 fontb">
                  租期: {{ item.month }}个月
                </view>
                <view class="unit mgb10 textRed font28 fontb">
                  优惠: 享受{{ (item.discount * 100) / 10 }}折优惠
                </view>
              </view>
              <view class="right">
                <view class="radioBox">
                  <uv-radio :key="item.month" :name="item.month">
                  </uv-radio>
                </view>
              </view>
            </view>
            <view class="list">
              <view class="left">
                <view class="volume mgb10 font28 fontb zuqi" style="display: flex;">
                  自定义租期: &nbsp;
                  <!-- <uv-number-box  v-model="state.selfMonth" buttonSize="26" color="#000" bgColor="#EBEBEB"
                   :min="1" :max="24" :step="1" iconStyle="color: #fff"></uv-number-box> -->
                  <uv-number-box v-model="state.selfMonth"  :min="1" :max="24" :step="1">
                <template v-slot:minus>
                  <view class="minus">
                    <uv-icon name="minus" size="20rpx">
                    </uv-icon>
                  </view>
                </template>
                <template v-slot:input>
                  <text style="width: 50px;text-align: center;color: #000;" class="input">
                    {{state.selfMonth}}
                  </text>
                </template>
                <template v-slot:plus>
                  <view class="plus">
                    <uv-icon name="plus" color="#FFFFFF" size="20rpx">
                    </uv-icon>
                  </view>
                </template>
              </uv-number-box>
                   &nbsp;个月
                </view>
                <view class="unit mgb10 textRed font28 fontb" v-if="selfDiscount !== 1">
                  优惠: 享受{{ selfDiscount * 100 / 10 }}折优惠
                </view>
                <view class="unit mgb10 textRed font28 fontb" v-else>
                  优惠: --
                </view>
                <!-- <view class="site textGary mgb10">
                  尺寸: 120cm*100cm*100cm
                </view> -->
              </view>
              <view class="right">
                <view class="radioBox">
                  <uv-radio :key="0" :name="-1">
                  </uv-radio>
                </view>
              </view>
            </view>
          </uv-radio-group>
        </view>
        <view class="btn" @click="confirmMonth" style="display: flex;justify-content: center;" >
          <uv-button :customStyle="{
            height: '86rpx',
            color: '#fff',
            fontSize: '32rpx',
            width: '630rpx',
          }" color="#FB322E" shape="circle">
            确定
          </uv-button>
        </view>
      </view>
    </uv-popup>
    <uv-popup ref="payPopupRef" mode="bottom" zIndex="999" round="24px">
      <view class="unitPopupBox payPopupBox">
        <view class="title font36 fontb">
          租赁费用详情  <image class="close-icon" style="width: 30rpx;height: 30rpx;" src="/static/home/close2.svg" @click="hidePayPopup"></image>
        </view>
        <view class="garyBox font28 card20">
          （体积月费 x 租期 + 押金）- 优惠
        </view>
        <view class="title2 font32 fontb">
          <text>租赁体积</text> <text>{{ `${state.selectUnitRow?.volume}m³` }}</text>
        </view>
        <view class="garyBox font28 card20">
          <view class="mgb10">
            仓号: {{ state.selectUnitRow?.name }}
          </view>
          <view class="">
            尺寸: {{ state.selectUnitRow?.['length'] }}m*{{ state.selectUnitRow?.width }}m*{{ state.selectUnitRow?.height
            }}m
          </view>
        </view>
        <view class="title2 font32 fontb">
          <text>租金总价</text> <text>￥ {{ state.priceData?.lockerExpense }}</text>
        </view>
        <view class="title2 textGary2 fontb font28">
          <text>租金月费</text> <text> ￥ {{ state.priceData?.lockerPrice }}</text>
        </view>
        <view class="title2 textGary2 fontb font28">
          <text>租期时长</text> <text> {{ state.month }}个月</text>
        </view>
        <view class="title2 font32 fontb">
          <text>押金费用</text> <text>￥ {{ state.priceData.securityDeposit }}</text>
        </view>
        <view class="title2 textGary2 fontb font28">
          <text>租赁押金在租期结束后给予归还</text>
        </view>
        <view class="title2 font32 fontb">
          <text>优惠信息</text> <text style="color: #FB322E;">-￥ {{ state.priceData.favorable }}</text>
        </view>
        <view class="title2 textGary2 fontb font28">
					<text>优惠劵优惠</text><text style="color: #FB322E;">-￥ {{
						state.priceData.codeFavorable
					}}</text>
				</view>
        <view class="title2 textGary2 fontb font28">
          <text>租期优惠（{{state.month}}个月长租）</text><text style="color: #FB322E;">-￥ {{ state.priceData.leaseDiscount }}</text>
        </view>
         <view class="agreed" @click="changeCheck">
          <view class="check-wrap" :class="{ checked: state.checked }">
            <uv-radio-group v-model="state.checked" activeColor="#fb322e" size="30rpx" inactiveColor="#D8D8D8">
              <uv-radio activeColor="#fb322e" :key="0" :name="true">
              </uv-radio></uv-radio-group>
          </view>
          <view  style="display: flex;align-items: center;">
            <text class="stress" @click="openAgreement">阅读并同意<text style="color: #2E5DB5;">《订仓协议》</text></text>
          </view>
        </view>
        <!-- <view class="agreed agreed2"><text class="stress">租赁相关问题可联系客服咨询(电话:4008181813)</text></view> -->
        <view class="toOrder card font28">
          <view class="left font28">
            <text class="price fontb" :class="{ overMaxFont: String(state.priceData?.expense).length>6 }"> {{ state.priceData.expense ? `￥${state.priceData.expense}` : '--'
              }}</text>
            <view class="detail" v-if="state.priceData.expense" @click="hidePayPopup"><text class="detail1" :class="{ overMaxFont: String(state.priceData?.expense).length>6  }" v-if="state.priceData?.expense">￥{{ state.priceData.leaseOriginalPrice }}</text><text class="detail2">明细</text>
              <image src="/static/home/jiantouup.svg" style="height: 12rpx;margin-left: 10rpx;" mode="heightFix" class="icon"></image>
            </view>
          </view>
          <view class="right">
            <uv-button :customStyle="{
              height: '86rpx',
              color: '#fff',
            }" :textStyle="{
              fontSize: '32rpx',
              fontWeight: 'bold',
            }" color="#FB322E" :disabled="!state.lockerId || !state.month" @click="goOrder" shape="circle"
              class="goOrder">下单</uv-button>
          </view>
        </view>
        
      </view>
    </uv-popup>
    <uv-popup ref="agreementRef" mode="bottom" :closeOnClickOverlay="false" width="750rpx" zIndex="999" round="24px">
      <view class="agreement-wrap">
        <view class="agreement-top">
          <view>

          </view>
          <view class="name">{{ $t("detail.agreement") }}</view>
          <image class="close-icon" style="width: 30rpx;height: 30rpx;" src="/static/home/close2.svg" @click="closeAgreement"></image>
        </view>
        <scroll-view class="agreement-content" :scroll-top="state.scrollTop" scroll-y="true"
          @scrolltolower="handleScrollBottom" @scroll="handleScroll">
          <!-- themeInfo.language === 'en_lang' ? state.enAgreementContent : state.agreementContent -->
          <uv-parse :content="state.agreementContent" :tag-style="state.tagStyle"></uv-parse>
          <view style="margin-top: 200rpx;">
            <uv-loading-icon v-if="!state.agreementContent" :vertical="true"
              :text="$t('common.loading')"></uv-loading-icon>
          </view>
        </scroll-view>
        <!-- <view class="roll-btn" @click="handleRoll">
          <uv-icon name="arrow-down" size="24" color="#FFFFFF"></uv-icon>
        </view> -->
        <view class="bottom-read agree" v-if="state.isRead" @click="handleAgree">{{ $t("detail.agreeTerm") }}</view>
        <view class="bottom-read" v-else>{{ $t("detail.scrollRead") }}</view>
      </view>
    </uv-popup>
    <myModal v-model="state.showhasOrderModal" :content="$t('common.cantUselocker')"  :cancelShow="false"></myModal>
    <myModal v-model="state.showhasunpaidOrderModal" :content="$t('common.unpaidOrderTips')" @confirm="unpaidOrder"  :cancelShow="false"></myModal>

    <uv-popup ref="openPopupRef" customStyle="width: 620rpx; border-radius: 24rpx;" :safeAreaInsetBottom="false" :closeOnClickOverlay="false"
			zIndex="9999">
			<view class="modal-container-callPhone">
				<view class="modal-title">提示</view>
				<text class="modal-text">
					确定拨打电话 {{ projectInfo.callPhone }} 吗？
				</text>
				<view class="modal-button">
					<!-- <view class="modal-button-2"  @click="goEvaluate">{{ $t("unlock.evaluate") }}</view> -->
					<uv-button @click="closePopup" :customStyle="{
						height: '86rpx',
						lineHeight: '86rpx',
						color: '#000',
						fontSize: '32rpx',
					}" shape="circle">
						关闭
					</uv-button>
					<uv-button :customStyle="{
						height: '86rpx',
						lineHeight: '86rpx',
						color: '#fff',
						fontSize: '32rpx',
					}" color="#FB322E" shape="circle" @click="callPhone">
						拨号
					</uv-button>
				</view>
			</view>
		</uv-popup>
    <uv-calendar
        :safeAreaInsetBottom="false" :closeOnClickOverlay="false"
        ref="calendars"
        :minDate="state.minDate"
        :date = "state.startDate"
        confirmText="确定"
        cancelText="取消"
        title="开始时间"
        :maxDate="state.maxDate"
        :showSubtitle="false"
        @confirm="calendarConfirm"
        color="#FB322E"
      />
  </view>
   <!-- 优惠卷 -->
      <coupon
        ref="couponRef"
        :siteData="state.lockData"
        :couponOtherItem="state.couponOtherItem"
        :couponItem="state.couponItem"
        :priceData="state.priceData"
        :month="state.month"
        v-model="state.couponShow"
        @chooseCoupon="chooseCoupon"
        @chooseOtherCoupon = "chooseOtherCoupon"
        @confirm="confirmCoupon"
        :disabledFunc="disabledFunc"
      ></coupon>
       <myPopup v-model="state.showCoupon" customStyle="background-color: transparent;width: 90%; height: auto;" :closeOnClickOverlay="false" >
      <view>
        <button v-if="state.copuonList.length" class="noCssBtn" style="height: 100%; width: 100%"
          @click="getCouponByCode">
          <uv-image @click="getCouponByCode" width="100%" mode="widthFix"
            :src="baseImageUrl + state.copuonList[0].coverSheet">
          </uv-image>
        </button>
      </view>
      <view style="
          width: 100%;
          display: flex;
          justify-content: center;
          margin-top: 10px;
        ">
        <uv-icon @click="deletCouponList" size="32" color="#FFFFFF" name="close-circle"></uv-icon>
      </view>
    </myPopup>
    <myModal
      v-model="state.showCancelModal"
      :content="$t('site.cancelAppointment')"
      @confirm="cancelAppointment"
    ></myModal>
</template>

<script setup>
import { ref, computed, nextTick, watch } from "vue";
import { onTabItemTap, getDistance, makePhoneCall, mergeFiveGoatStores, parseUrlParams } from "/utils/common.js";
import myCustomtTabBar from "@/components/myCustomtTabBar.vue";
// import wxNavbar from "@/components/wxNavbar.vue";
// import siteDetail from '@/components/siteDetail.vue';
import { onLoad, onShow, onShareAppMessage, onUnload } from "@dcloudio/uni-app";
import { baseImageUrl, projectInfo, isKingKong, setOrderDays } from "@/config/index.js";
import { useLoginApi } from "/Apis/home.js";
import myPopup from "@/components/myPopup.vue";
import { navigateTo } from '@/utils/navigateTo';
// 主题色配置
import { useMainStore } from "@/store/index.js";
import { navbarHeightAndStatusBarHeight, shareParam } from "@/utils/common.js";
import coupon from "@/components/coupon.vue";
import myModal from "@/components/myModal.vue";
import { couponApi } from "@/Apis/coupon.js";
import { useLocation } from "@/hooks/useLocation";
import { useLoginApi as useLoginApi2 } from "@/Apis/login";
import { useSiteApi } from "@/Apis/site.js";
import { authInfoApi } from "@/Apis/validInfo.js";
import { ClientSite } from "@/Apis/book.js";
import { useLockApi } from '@/Apis/lock.js';
import { useOrderApi } from "@/Apis/order.js";
import { useI18n } from "vue-i18n";
import dayjs from 'dayjs';
import { driver } from "driver.js";
import "driver.js/dist/driver.css";
const getOrderApi = useOrderApi();
const getAuthApi = authInfoApi();
const getCouponApi = couponApi();
const { themeInfo, storeState, getUserInfo } = useMainStore();
// 国际化配置
const { t, locale } = useI18n();
const getApi = useLoginApi();
const { getLocation, locationState } = useLocation();
const getLockApi = useLockApi()
const getSiteApi = useSiteApi();
const getApi2 = useLoginApi2();
const getClientSiteApi = ClientSite();

const openPopupRef = ref(null);
const unitPopupRef = ref(null);
const monthPopupRef = ref(null);
const payPopupRef = ref(null);
const calendars = ref(null);


const couponRef = ref();
// 导航栏高度
const navHeight = ref(0);
const language = ref("");
const agreementRef = ref();
const today = dayjs()
  .set("hour", 0)
  .set("minute", 0)
  .set("second", 0)
  .set("millisecond", 0);
// 生成当天一个月后的日期
let oneMonthLater = today.add(setOrderDays, "day");
const state = ref({
  active: 0,
  id: "",
  radiovalue: 0,
  radioMonthvalue: -1,
  checkAgreementUrlTime: 0,
  agreementContent: "无",
  enAgreementContent: "无",
  scrollTop: 0,
  oldScrollTop: 0,
  isRead: false,
  checked: false,
  siteId: "",
  unitTypeId: "",
  lockerId: "",
  selectUnitRow: {},
  month: 1,
  selfMonth: 1,
  lockData: {
    discountList: []
  },
  startDate: today.format("YYYY/MM/DD"),
  minDate: today.format("YYYY/MM/DD"),
  maxDate: oneMonthLater.format("YYYY/MM/DD"), // 日期选择器最大日期
  zhuangxiuzhong: false,
  priceData: {},
  hasVerify: false,
  showhasOrderModal:false,
  showhasunpaidOrderModal:false,
  tagStyle: {
    p: 'margin: 0.8rem 0;',
  },
  startDriverTime: 0,
  couponItem: [], // 优惠卷
  couponOtherItem:[],
  couponShow: false,
  showCoupon: false, // 优惠卷弹窗
  copuonList: [], // 待领取的优惠卷列表
  loading: false,
  showCancelModal: false,
});

const deletCouponList = () => {
  state.value.copuonList.shift();
  state.value.showCoupon = false;
  // 如果列表还有弹窗 继续显示
  setTimeout(() => {
    if (state.value.copuonList.length) {
      state.value.showCoupon = true;
    } else {
      const token = uni.getStorageSync("token");
      if (token) {
        const date = new Date();
        uni.setStorageSync("getCouponCodeTime", date.getTime());
      }

    }
  }, 600);
};
// 优惠卷弹窗列表
const GetNewUserCouponCode = async () => {
  // state.value.showCoupon = false;
  getCouponApi.GetNewUserCouponCode().then((res) => {
    if (res.code === 200) {
      state.value.copuonList = res.data
      if (state.value.copuonList.length) {
        nextTick(() => {
         setTimeout(() => {
            state.value.showCoupon = true;
          }, 500);
        });
      }
    }
  });
};

const showNewUserCouponCode = () => {
  if(!state.value.startDriverTime) return
    const getCouponCodeTime = uni.getStorageSync("getCouponCodeTime") || 0;

    const now = Date.now(); // 当前时间戳
    const diff = now - getCouponCodeTime; // 时间差 (毫秒)

    const eightMinutes = 6 * 60 * 1000; // 8分钟

    if (diff > eightMinutes) {
      // 超过8分钟才请求
      GetNewUserCouponCode();
    }
};
// 领取优惠卷

const getCouponByCode = (item) => {
  const { couponCode } = state.value.copuonList[0];
  uni.showLoading();
  getCouponApi
    .DrawDownCoupon({ couponCode: couponCode })
    .then((res) => {
      if (res.code == 200) {
        uni.showToast({
          title: t("coupon.redemptionuccessful"),
          icon: "none",
        });
        deletCouponList();
      } else {
        uni.showToast({
          title: res.msg,
          icon: "none",
        });
      }
    })
    .finally(() => {
      uni.hideLoading();
    });
};


const openCoupon = () => {
  if(!state.value.lockData?.siteId){
    return uni.showToast({
      title: '请选择体积',
      icon: 'none',
      duration: 3000
    })
  }

  couponRef.value.open();
};
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;
    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;
    const canAdd = canAddValue(state.value.couponItem.map(x=>x.couponType),item.couponType)
  return !(isSite && isUnit && isPrice && isDate&& canAdd);
};

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

// 根据优惠卷类型 返回优惠卷 作用范围 优惠多少钱 打多少折 首页多少钱
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}`
	}
  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 chooseCoupon = (item) => {
  // 可以叠加就添加
  if(item.couponType == 5){
    if(state.value.month<item.fullMonth){
      uni.showToast({
        title: `月数不足${item.fullMonth}个月,无法此优惠卷！`,
        icon: "none",
        duration: 2000,
      });
      return 
    }
  }
  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 chooseOtherCoupon= (item) => {
  const isE = state.value.couponOtherItem.find(x=>x.number == item.number);
  if (!isE) {
    state.value.couponOtherItem.push(item);
  }
  getLockerExpense();
}
const steps =  [
    {
      element: '.selectSite',
      popover: {
        // title: '切换门店',
        description: '可根据不同地区，切换对应门店'
      },
      onHighlighted: (el) => scrollToElement(el)
    },
    {
      element: '.unitType',
      popover: {
        // title: '切换不同仓型',
        description: '左右滑动,选择不同仓型体积',
        side: "bottom",
      },
      onHighlighted: (el) => scrollToElement(el)
    },
    // {
    //   element: '.swiper .left',
    //   popover: {
    //     // title: '切换不同仓型',
    //     description: '向左滑动。'
    //   },
    //   onHighlighted: (el) => scrollToElement(el)
    // },
    // {
    //   element: '.swiper .right',
    //   popover: {
    //     // title: '切换不同仓型',
    //     description: '向右滑动。'
    //   },
    //   onHighlighted: (el) => scrollToElement(el)
    // },
    {
      element: '.orderInfo',
      side: "bottom",
      popover: {
        // title: '选择基本需求',
        description: '选择仓型后，根据需求选择体积,租期。<br/> <span style="color: #FF8A00;">租期越长，优惠越多。</span>'
      },
      onHighlighted: (el) => scrollToElement(el)
    },
    //   {
    //   element: '.zuqi',
    //   popover: {
    //     // title: '租期',
    //     description: '租期越长，优惠越多。'
    //   },
    //   onHighlighted: (el) => scrollToElement(el)
    // },
    {
      element: '.kefu',
      popover: {
        // title: '联系客服',
        description: '如有疑问，欢迎致电客服。'
      },
      onHighlighted: (el) => scrollToElement(el)
    }
  ]

const driverObj = driver({
  showProgress: false,
  doneBtnText: "完成",
  closeBtnText: "跳过",
  nextBtnText: "下一步",
  prevBtnText: "上一步",
  popoverClass: 'driverjs-theme',

   // 关键：点击遮罩层不关闭
  overlayClickBehavior: 'none',
  // 结束后回到顶部
   onDestroyStarted: () => {
    // 这里只做UI收尾，不记录完成
    window.scrollTo({
      top: 0,
      behavior: "smooth"
    })
    driverObj.destroy();
    showNewUserCouponCode()
  },
  // ⭐ 关键：只有点击完成才执行
  onNextClick: (element, step) => {
      // ⭐ 必须手动下一步
    driverObj.moveNext();
      const isLast = step.element === steps[steps.length - 1].element;
    if (isLast) {
      uni.setStorageSync('driver_finished', 1)
    }
  },
  steps,
});

// 滚动方法（单独写）
function scrollToElement(element) {
  if (!element) return

  const top =
    element.getBoundingClientRect().top +
    window.pageYOffset -
    120; // 偏移量 可调

  window.scrollTo({
    top,
    behavior: "smooth"
  });
}
const startDriver = () => {
    state.value.startDriverTime++;
    if (state.value.startDriverTime > 1) {
      return;
    }
    const driver_finished = uni.getStorageSync('driver_finished')
     if(driver_finished){
      if(state.value.startDriverTime == 1){
        showNewUserCouponCode()
      }
      return
    }
    driverObj.drive();
}

// 点击路线跳转
const handleNavigate =  (item) => {
  // const { latitude, longitude } = wgs84ToGcj02(item.latitude, item.longitude);
  wx.openLocation({
        latitude:Number(unitTypeData.value[0]?.latitude),
        longitude:Number(unitTypeData.value[0]?.longitude),
        name:  unitTypeData.value[0]?.sitdName,
        address: unitTypeData.value[0]?.sitdAddress,
    })
};

const showCalendar = () => {
  calendars.value.open();
};
const calendarConfirm = (e) => {
  const fullDate = dayjs(e[0]); // 保持 dayjs 对象

  if (state.value.zhuangxiuzhong) {
    const limitDate = dayjs(state.value.lockData.preSaleTime);

    if (fullDate.isBefore(limitDate)) {
      uni.showModal({
        title: t("common.title"),
        content: t("storeRenovationNotice", {
          limitDate: limitDate.format("YYYY/MM/DD")
        }),
        showCancel: false,
      });
      return;
    } else {
      state.value.startDate = fullDate.format("YYYY/MM/DD");
    }
  } else {
    state.value.startDate = fullDate.format("YYYY/MM/DD");
  }
};

const closePopup = () => {
	openPopupRef.value.close();
}
const openPopup = () => {
	openPopupRef.value.open();
}

const callPhone = ()=>{
  window.location.href = `tel:${projectInfo.callPhone}`;
  closePopup();
}





const goOrder = async () => {
  if (!state.value.lockerId) {
    return uni.showToast({
      title: '请选择体积',
      icon: 'none',
      duration: 3000
    })
  }
  if (!state.value.month) {
    return uni.showToast({
      title: '租期',
      icon: 'none',
      duration: 3000
    }
    )
  } 
    uni.showLoading({mask: true})
    await getVerifyStatus()
    uni.hideLoading();
  
  if (!state.value.hasVerify) {
    return uni.showToast({
      title: '请先验证实名信息!',
      icon: 'none',
      duration: 3000
    })
  }
  if (!state.value.checked) {
    openAgreement();
    return uni.showToast({
      title: '请勾选协议!',
      icon: 'none',
      duration: 3000
    })
  }
  let source = window.sf.isSfApp() ? 2 : 1;
  let startTime = dayjs(state.value.startDate).format("YYYY-MM-DDTHH:mm:ssZ");
  uni.showLoading({
    title: '支付中',
    mask: true
  })
  getOrderApi
    .AddOrder2({
      lockerId: state.value.lockerId,
      startTime,
      month: state.value.month,
      source,
      couponIds: state.value.couponItem.map((item) => item.couponDispositionId),
      serialNumber: state.value.couponOtherItem.map(x => {
        return {
          dealGroupId: x.dealGroupId,
          number: x.number,
          marketPrice: x.marketPrice,
          purchasePrice: x.price
        }
      }),
      sfId: uni.getStorageSync("sfId"),
    })
    .then((res) => {
      uni.hideLoading();
      if (res.code === 200) {
        let path = window.location.pathname;
          if (!path.endsWith('/')) {
            path = path + '/';
          }
          const returnUrl = `${window.location.origin}${path}#/pages/unlock/index`;
          const failUrl = `${window.location.origin}${path}#/pages/index/index`;
        if (window.sf.isSfApp()) {
          window.sf.goPay({
            partnerId: res.data.partnerId, //商户id
            prepayId: res.data.package, // 预支付id
            nonceStr: res.data.nonceStr, //随机字符串
            timeStamp: res.data.timeStamp, //时间戳
            sign: res.data.paySign, //签名
            package: `prepay_id=${res.data.package}`,
            payChannel: 'payByWeChat' // app微信支付
          }).then(res => {
            const { channelType, status, message, channelResult } = res && res.result || {}
            if (status === 0) {
              uni.showToast({
                title: '支付成功',
                icon: 'none',
                duration: 3000
              })
              reset();
              goUnlock();
            } else {
              uni.showToast({
                title: '支付失败',
                icon: 'none',
                duration: 3000
              })
            }
          }).catch(err => console.log(err))
        } else {
          window.sf.goPay({
            timeStamp: res.data.timeStamp, // 从服务器获取的时间戳
            nonceStr: res.data.nonceStr, // 从服务器获取的随机字符串
            package: `prepay_id=${res.data.package}`, // 从服务器获取的预支付交易会话标识
            signType: res.data.signType, // 签名方式
            paySign: res.data.paySign, // 从服务器获取的签名
            successUrl: returnUrl,
            failUrl: failUrl
          }).then(res => { }).catch(err => console.log(err))
        }
      } else {
        if(res.code === 206){
          reset();
          // uni.showToast({
          //       title: '仓位已出租，请重新选择其他仓位！',
          //       icon: 'none',
          //       duration: 5000
          //     })
          state.value.showhasOrderModal = true;
          
          // uni.showModal({
          //   title: t('common.title'),
          //   content: "仓位已出租，请重新选择",
          //   showCancel: false,
          //   success: function () {
          //      reset();
          //   },
          // })
        }
        if (res.code === 1001) {
          state.value.showhasunpaidOrderModal = true;
          return
        }
      }
    });
}
const unpaidOrder = async () => {
  getApp().globalData.tabParams = { type: 'unpaid' }
   uni.switchTab({
        url: '/pages/unlock/index',
    })
}
const reset = () => {
  state.value.lockerId = null;
  state.value.priceData = {};
  state.value.selectUnitRow = {};
  state.value.lockData = {
    discountList: []
  }
  state.value.couponItem = [];
  state.value.couponOtherItem = [];
  clearCoupon();

}
const clearCoupon = () => {
  state.value.couponItem = [];
  state.value.couponOtherItem = [];
};


const selfDiscount = computed(() =>
  state.value.lockData.discountList
    .sort((a, b) => b.month - a.month)
    .find(item => state.value.selfMonth >= item.month)?.discount ?? 1
)


const siteDistance = computed(() => {
  if (storeState.location.latitude && storeState.location.longitude && unitTypeData.value[0]?.latitude && unitTypeData.value[0]?.longitude) {
    return getDistance(storeState.location.latitude,
      storeState.location.longitude, unitTypeData.value[0]?.latitude, unitTypeData.value[0]?.longitude).distance;
  } else {
    return 0
  }

})

const changeCheck = () => {
  if (state.value.checkAgreementUrlTime == 0) {
    uni.showToast({
      title: t("common.checkAgreementUrl"),
      icon: "none",
      duration: 2000,
    })
    openAgreement();
    return
  }
  state.value.checked = !state.value.checked;
};

const showPayPopup = () => {
   if (!state.value.lockerId) {
    return uni.showToast({
      title: '请选择体积',
      icon: 'none',
      duration: 3000
    })
  }
  if (!state.value.month) {
    return uni.showToast({
      title: '租期',
      icon: 'none',
      duration: 3000
    }
    )
  } 
  payPopupRef.value.open();
};
const hidePayPopup = () => {
  payPopupRef.value.close();
}

const showMonthPopup = () => {
  if (state.value.lockerId) {
    getLockerById();
    monthPopupRef.value.open();
  } else {
    uni.showToast({
      title: "请选择体积",
      icon: "none",
      duration: 2000,
    })
  }
};
const hideMonthPopup = () => {
  monthPopupRef.value.close();
};
const showUnitPopup = () => {
  unitPopupRef.value.open();
  getLockerBySiteId();

};
const hideUnitPopup = () => {
  unitPopupRef.value.close();
  state.value.radiovalue = null;
};

// 合同下拉
const handleRoll = () => {
  state.value.oldScrollTop += 4000;
  state.value.scrollTop = state.value.oldScrollTop;
}

// 滑动到底部了
const handleScrollBottom = () => {
  state.value.isRead = true;
}

const handleScroll = (e) => {
  state.value.oldScrollTop = e.detail.scrollTop;
}

const handleAgree = () => {
  state.value.checked = true;
  closeAgreement();
}

const openAgreement = () => {
  if (!state.value.lockerId) {
    uni.showToast({
      title: "请选择体积",
      icon: "none",
      duration: 2000,
    })
    return
  }

  GetLockerAgreementHTMLById()
  state.value.scrollTop = state.value.oldScrollTop;
  agreementRef?.value.open();
};

const closeAgreement = () => {
  agreementRef?.value.close();
};

const confirmUnit = () => {
  if (!state.value.radiovalue) {
    return uni.showToast({
      title: "请选择体积",
      icon: "none",
      duration: 2000,
    })
  }
  state.value.lockerId = state.value.radiovalue;
  state.value.selectUnitRow = LockerList.value.find(item => item.lockerId == state.value.lockerId);
  getLockerById();
  clearCoupon();
  getLockerExpense();
  hideUnitPopup();
}

const confirmMonth = () => {
  if (state.value.radioMonthvalue === -1) {
    state.value.month = state.value.selfMonth;
  } else {
    state.value.month = state.value.radioMonthvalue;
  }
  clearCoupon();
  getLockerExpense();
  hideMonthPopup();
}


// 切换到上一张
const prev = () => {
  if (state.value.active > 0) {
    state.value.active -= 1;
  } else {
    state.value.active = unitTypeData.value.length - 1; // 如果是第一张，跳到最后一张
  }
   state.value.unitTypeId = unitTypeData.value[state.value.active].id;
}
// 切换到下一张
const next = () => {
  if (state.value.active < unitTypeData.value.length - 1) {
    state.value.active += 1;
  } else {
    state.value.active = 0; // 如果是最后一张，跳到第一张
  }
   state.value.unitTypeId = unitTypeData.value[state.value.active].id;
}

onShareAppMessage((res) => {
  if (res.from === "button") {
    // 来自页面内分享按钮
    console.log(res.target);
  }
  return shareParam;
});

const goSite = () => {
  uni.navigateTo({
    url: "/pages/site/index",
  });
};

const goReserve= () => {
    uni.navigateTo({
    url: "/pagesb/reserve/index",
  });
}

const isApply = ref(false);
async function postWaitingAppointment() {
  if (isApply.value) return (state.value.showCancelModal = true);
  // 微信就判断 用户是否有手机号  H5就直接预约

  uni.showLoading();
  const unitTypeId = state.value.unitTypeId;
  if (state.value.siteId && unitTypeId) {
    const res = await getUserInfo();
    if (res?.data?.code === 401) {
      AlternateReservation();
    }
    uni.hideLoading();
    if (res.code === 200) {
      if (!res.data.phone) {
        popup.value.open();
      } else {
        AlternateReservation();
      }
    }
  }
}
// 预约
const AlternateReservation = () => {
  const unitTypeId = state.value.unitTypeId;
  uni.showLoading({mask:true})
  getSiteApi
    .AlternateReservation({
      siteId: state.value.siteId,
      unitTypeId: unitTypeId,
      comeFrom: "WeChat",
    })
    .then((res) => {
      uni.hideLoading();
      if (res.code === 200) {
        setTimeout(() => {
          state.value.showAppointmentSuccess = true;
        }, 500);
      }
      isWaitingAppointment();
      uni.hideLoading();
    });
};

// 取消预约
const cancelAppointment = () => {
  uni.showLoading();
  const unitTypeId = state.value.unitTypeId;
  getSiteApi
    .CancelReservation({
      siteId: state.value.siteId,
      unitTypeId: unitTypeId,
    })
    .then((res) => {
      uni.hideLoading();
      if (res.code === 200) {
        isWaitingAppointment();
      }
      uni.hideLoading();
    });
};
// 查看是否预约过
function isWaitingAppointment(showLoadi) {
  if (!showLoadi) {
    uni.showLoading();
  }
  const unitTypeId =  state.value.unitTypeId;
  if (state.value.siteId && unitTypeId) {
    getSiteApi
      .GetReserveIsEnable({
        siteId: state.value.siteId,
        unitTypeId: unitTypeId,
      })
      .then((res) => {
        if (res.code === 200) {
          isApply.value = res.data;
        }
        if (!showLoadi) {
          uni.hideLoading();
        }
      });
  }
}

const goUnlock = () => {
  getApp().globalData.tabParams = { type: 'paid' }
  uni.navigateTo({
    url: "/pages/unlock/index",
  });
};
const LockerList = ref([]);
// 获取仓位
const getLockerBySiteId = () => {
  LockerList.value = [];
  if (state.value.siteId && state.value.unitTypeId) {
    uni.showLoading({
      mask: true
    })
    getSiteApi
      .GetLockerBySiteId({ siteId: state.value.siteId, unitTypeId: state.value.unitTypeId,month: state.value.month })
      .then((res) => {
        if (res.code == 200) {
          LockerList.value = res.data;
        }
      }).finally(() => {
        uni.hideLoading()
      })
      ;
  }
};

const getVerifyStatus = async () => {
  if (uni.getStorageSync('token')) {
    // uni.showLoading();
    await getAuthApi.GetIsCertification().then(res => {
      // uni.hideLoading();
      if (res.code == 200) state.value.hasVerify = res.data?.isPass;
    });
  }
}
// 获取门店信息
const getSiteDetail = () => {
  let list = []
  uni.showLoading();
  let city = "";
  let district = "";
  list = []
  getClientSiteApi.getSiteDetailsAll({
    city,
    district,
  }).then(res => {
    if (res.code === 200) {
      list = mergeFiveGoatStores(res.data.filter(item => !item.isSoldOut && item.city.indexOf("广州") !== -1));
      if (locationState?.latitude && locationState?.longitude) {
        const { latitude, longitude } = locationState;
        list.forEach(item => {
          const { distance, number } = getDistance(latitude, longitude, item.latitude, item.longitude);
          item.distance = distance;
          item.distanceNumber = number;
        });
        list.sort((a, b) => a.distanceNumber - b.distanceNumber);
        // 优先冼村店
        const xiancundian = list.find(item => item.id == "2030892603720994816")
        if (list[0]?.id) {
          state.value.siteId =xiancundian?xiancundian.id:list[0]?.id
          reset();
          getUnitTypeBySiteId();
        }
      } else {
         // 优先冼村店
        const xiancundian = list.find(item => item.id == "2030892603720994816")
        state.value.siteId = xiancundian?xiancundian.id:list[0]?.id
        reset();
        getUnitTypeBySiteId();
      }

    }
  }).catch(err => {

  }).finally(() => {
    setTimeout(() => {
      uni.hideLoading();
    }, 300);
  })
    ;
}
onLoad(async (params) => {

  // 二、分享小程序原生页面到微信：
const shareParams = {
    title: '欢迎使用城市迷你仓',
    imageUrl: 'data:image/png;base64,6oG0tMIsZRVyzpV7z3tpQWw2SPDKKN0wYRB0ea0Ng3B6GlGCfj3lqAy16qhsalsGqvaB9uVd17jWZkQeTk6eJrBg2dMlRbBs2Yo8FmFRsQcx2PvvMykuR8TV06QKpmbe7TNyGoYuiWvIVEskJTHqMIyec0GVUcTxTsNxQQOoiYChjAnzXYpLqHxWLI4pgMhqe1Bi/L5s2dp5HK+tt6h/l9yRGoPmilCy3FzzS+XC6+/IhUrponGNI14AiDqSx3siKgiBwL9ldMMiUXt79nbyxX5phxwygpFWRHI/l6K3Oh+Obu1ZyuSyuuKfgibcgs1pikX1h5jOhszL4rnW2AAmoNH30EU0AvSOjO6tbBzItkwvc0Iby7FQpXsHb0qIBJLmLCA1znT2jag9jt0dmTRhiEwMYXOXgQjbrlC+Xwt97H6ggb3emvG6rfz+UFjdhw7Xuz3CJzhLXBpZ2z9KU6n5+hPP4duAxgXHOMCjB2+539g1KX5kRRDUTUje3Ui2A8OB2Ik7fPYA2MPXHbDfgm4n3H/4HjACQ/2BO21J/jq11/D09dew7tv/xCHOzbqAaNdlV7GBnQZuidgnABcgJispo9os5/866d6BRr8+T+GL3/xf4b3f/g27o8XwB440ynYmnrMzUIkhUR1MHmespIjEP0E355kcAMd/rxh2zZ0GG6Q7+9hbK0TuHs48HB/4O7uHh/e3eH9uxd4uH/AM3fESz9+7NxiP3lSPq39ZQZAeKUhGxsvF1dp+qBDQ5TCT3rPT7mon7kcLtEOBIy7KhcBRW2STDNOckavAK/vrF6cJSy+KNNA0hJ1LZVhjZhVtCwsHWQU/o0KC2azUhFLkU8SFgWxaBBU5ArtJ03RpkKr0YhKmVEtM0tKmiJRqVlg1nAsBman4tSzSvH48OyBUoZYoG/bBIVUkGHOPK8UoKOSZqUstory1VitpyG2AKJGD5eHsYKgQCBQZaVBmk9mWxGgk87nSSsIAIcDp9iwjzRWptpMxRTbRiWbeWgdWYq3wRAtcLq9gTsrF40T4nyG7zvCRxoYArgxam4z/zjD7PmvVOjujvvLwNM9cLff4Xz/AH8B7O0G9x++hb/x1/8K/vPW8YVXXsYXP/cKvvj5l/DaK6/gtZdfwStPb/D0ZsPNtuG0GZp5Rrd84PJwwf2LB9zdfYD7+3vslwPhQO8ntPMtbp4+wbPnz/H1X/5T+FP/2J/Fzc0N+rYBpsa0wMORIfygMu5tnr+KZhmyqTRI+7MJngNtKtowbCzHHir1bp2GSK6xvL9qB5D2x6Kkub5XR6288DREwGjYYpQVLZiee+GT7JnHPJBI7z4vegUQGwF3lvsV8LPagwle1Hw1oGqOdR/urd6nkTipjxOcaHYNgHpn1fihPT7rwen96SDRecoW4C2CesBKVkzqY8zcVV7Q2lJsBDP6YTYQ2AA7wXDh2LPK5EQ/wXVcDMG6ts4Do2FXIt0K8T1mEFzRibheov6VAcZ3s+x7lGK0FkCVFW6VOwSumtYuHt1nzqNsmGUdQC9vOHcZq7gtTjrtnUmnmrk4Ybp33QwyFt0PoOUZmjld2ffPTHlFC9A1mbgyjvg+kPmK3mmkZLW2wUqWUWvOXE5IhwHAhono2RQRDiYvcu8qeuxTFxx5X91D57WLZQFc5UltXU3Sk+6WkbA0rN7/4AOcz2cgApd9x8N+QW8NNzc3GVuMpMr3iurjKrKSkRGV/08De2j+GWkP6ZZlv6WhwX5b4Yz2ydlDiiQBuBxPc19EgX+Zz8ny6DU+ja1YJDErDsuoHmMaUc06Zun8SQOVXvXFibK+sscl14XRxDGYQ01aZ9/OsNaYq+VX+173brbV/eVoUf+tNGZVJTVwPp/qHGntNaczyi/8ogqGqa/cD/QqFmZ1fiiBuEa2XHtBNcGeiwHE8QA/Wjb87g47DXjLKritnWF2QtueoJ0CuKHn1R02DoxxgR3ZuDs8KW9+HDgGIzRx5BnxAEau88kMJwPidMITbPC+wVvD/XHgvQ9e4Ls/ehfx8IDxZEuDMwLwHR4PgO08RA3AA2AOnAYQN/MML895JS8fw9/48W99opdtGC//GfgrX8Pt8y+hxz1wIcZxtWhIxkdriYZgumvqg2YN1pNy16whtl5Fx5Qfd4EKZOy47Afu9wOXyw7fHcc+sF8ueHhxwfHwgPFwn7lxHwP7DR/Z+khZSt3/aefj8SsMMFaRDMeUj5jWngXEQgNpmB8zyJ/+Wr+z6Oernz/m/c9cDtfqfSwhUwp3/j7pHKkMfFH261dENaneFvyuF6CZFcfKUwaBrlg8bVPoqQDHKG8+CmwahdEahUqgNCNuWDx2+VqSwyNBGTDQex5wBz1NETSIOjojJI2e0X0c2NpWcwigko9FuVFz5RWkZpEOlALMqmLpjczOSim0K3cNebCzT1PMyTYgYh5yZ0nl6gKVWJhgUgAIjAAHrMusYuEQzxyz5kYAnwZCIwjP0bIXBZuDNhO8BuAbvGeoHMMQW08DKhFRgcPeewmA3hoam/dWyl8MDM+eV8cRGDjwYgAvdsPd/Zfx8OIOD/f3eHH3Ah+++w5+/w/fxN/7u38f+/0H6L6jxcC5pWF8urnFs2e3eOWll/DGF76IL33pK/jil38Rn/vcq7hlg2UBiuHXSagJFq4Bg/akFJ4MB8JCKtlUiqp+5gDCjHuXFL6mXjak1zDvTBXmICPAR1YgiwlOxX0XoJnneAIVa/P+PMUrlqo9up4xM1S/Ol0/Pa46RysIYTK6tuKjsaxne3regWrq22Zz9Py7wGJZjTWfzWYvrrWAhuhXFbqIiRnnWCSnSBuzoXoN/Pz0yitqszqgRDGatB6DEoMFkjLKzBL5QM15Hr01F0NnUaCRydcEjCO85kfRi6tIyLLQCZ...',
    url: `/pages/index/index?siteId=${state.value.siteId}&lockerId=${state.value.lockerId}`,
    supportShare: 'YES'
} 
setTimeout(() => {
  console.log(Object.keys(SFUIP))
   window.sf = sf
  // SFUIP.shareToWx(shareParams) 
  console.log(SFUIP)
  console.log(window.sf)
  console.log("分享参数",shareParams,SFUIP.shareToWx,window.sf.shareToWx);
  console.log(window.sf.share(shareParams))
},3000)

  if (params.q) {
    let urlParams = decodeURIComponent(params.q);
  } else {
  }
  if (params.Pre_ID) {
    uni.setStorageSync('Pre_ID', params.Pre_ID)
  }
  if (params.mediatorId) {
    uni.setStorageSync('mediatorId', params.mediatorId);
  }
  if (params.q) {
    const parseUrlRes = parseUrlParams(decodeURIComponent(params.q));
    if (parseUrlRes.mediatorId) uni.setStorageSync('mediatorId', parseUrlRes.mediatorId);
  }
  //如果链接带了lockerId 则直接跳转到订单详情
  let url = window.location.href;
 if(parseUrlParams(url).lockerId){



 }
  uni.$on('homeSiteId', (data) => {
    if (data.id) {
      state.value.siteId = data.id
      reset();
      getUnitTypeBySiteId();
    }
  });
   uni.showLoading({
        mask: true,
      })
  getLocation().then(() => {
    // getSiteDetail()
  });
  getSiteDetail()

});
onUnload(() => {
  uni.$off('homeSiteId');
  if(driverObj){
   driverObj.destroy();
  }

})
onShow(() => {
  uni.hideTabBar();
  getVerifyStatus();
  showNewUserCouponCode()
});

const goVaild = () => {
  navigateTo('/pagesb/validationInfo/index');
}


const getLockerById = () => {
  uni.showLoading();
  getSiteApi.GetLockerById({ lockerId: state.value.lockerId }).then((res) => {
    if (res.code === 200) {
      state.value.lockData = res.data;
      console.log(state.value.lockData,"siteData");
      if (state.value.lockData.isPreSale) {
        // 订单可以租用
        state.value.zhuangxiuzhong = true;
        const limitDate = dayjs(state.value.lockData.preSaleTime).format("YYYY/MM/DD");
        if (today.isBefore(limitDate)) {
          if (dayjs(state.value.startDate, "YYYY/MM/DD").isBefore(limitDate)) {
            state.value.startDate = limitDate;
          }
          state.value.minDate = limitDate;
          uni.showModal({
            title: t("common.title"),
            content: t("storeRenovationNotice", { limitDate }),
            showCancel: false,
            success: function () { },
          });
        }
      } else {
        state.value.startDate = today.format("YYYY/MM/DD");
        state.value.zhuangxiuzhong = false;
      }
      // res.data == null 找不到订单 isPlaceOrder 等于订单不可以租用
      if (!res.data || !res.data?.isPlaceOrder) {
        // 支付回调 会触发onshow 这个会优先出来 所有  支付成功就不弹窗 会有一个支付成功的弹窗显示
        state.value.showhasOrderModal = true
        reset();
        // uni.showModal({
        //   title: t("common.title"),
        //   content: t("common.cantUselocker"),
        //   showCancel: false,
        //   success: function () {
        //     reset();
        //   },
        // });
        uni.hideLoading();
        return;
      }
      getLockerExpense();
    } else {
      // uni.reLaunch({
      //   url: "/pages/index/index",
      // });
    }
  }).finally(() => {
    uni.hideLoading();
  });
  ;
};

const getLockerExpense = () => {
  if (!state.value.lockerId || !state.value.month) {
    return;
  }
  uni.showLoading();
  getSiteApi
    .GetLockerExpense({
      lockerId: state.value.lockerId,
      month: state.value.month,
      couponIds: state.value.couponItem.map((item) => item.couponDispositionId),
      serialNumber: state.value.couponOtherItem.map(x => {
        return {
          dealGroupId: x.dealGroupId,
          number: x.number,
          marketPrice: x.marketPrice,
          purchasePrice: x.price
        }
      }),
      // couponIds: state.value.couponItem
      //   .map((item) => item.couponDispositionId),
      // isShortTerm: false,
      // 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 () {
            reset();
          },
        });

      }
    });
};
const GetLockerAgreementHTMLById = () => {
  uni.showLoading(
    {
      mask: true
    }
  );
  getSiteApi.GetLockerAgreementHTMLById({ lockerId: state.value.lockerId }).then((res) => {
    uni.hideLoading();
    if (res.code === 200) {
      state.value.agreementContent = res.data;
    }
  });
};
// 获取可用仓型
const getUnitTypeBySiteId = () => {
  // barNameList.value = [];
  if (state.value.siteId) {
    uni.showLoading();
    getSiteApi.GetUnitTypeBySiteId({ siteId: state.value.siteId }).then((res) => {
      if (res.code == 200) {
        unitTypeData.value = res.data
        // .filter(item => item.hasAvailableLocker);
        state.value.active = 0
        state.value.unitTypeId = unitTypeData.value[0]?.id;
        // barNameList.value = res.data;
        // if (state.value.getDataTime <= 1 && state.value.unitTypeId) {
        //   tabIndex.value =
        //     barNameList.value.findIndex(
        //       (item) => item.id == state.value.unitTypeId
        //     ) || 0;
        // }
        // 	if(state.value.getDataTime <= 1 && !state.value.unitTypeId){
        //   const index1 = barNameList.value.findIndex(item => item.id == state.value.unitTypeId);
        //   const index2 = barNameList.value.findIndex(item => item.hasAvailableLocker);
        //   tabIndex.value = index1 !== -1 ? index1 : (index2 !== -1 ? index2 : 0);
        // }
        // getLockerBySiteId();
        // state.value.address = res.data[0]?.sitdAddress;
        // state.value.name = res.data[0]?.sitdName;
        // state.value.latitude = res.data[0]?.latitude;
        // state.value.longitude = res.data[0]?.longitude;
        // state.value.tags = res.data[0]?.tags ?? [];
        startDriver();
        isWaitingAppointment(true);
      }
    }).finally(() => {
      uni.hideLoading();
    })
      ;
  }
};

const showImage = (url) => {
  uni.previewImage({
    urls: [url],
  });
};
const gotoPage = (url) => {
  uni.navigateTo({
    url: `/${url}`,
  });
}

// tab
const current = ref(0);
const unitTypeData = ref([]);

function changeMove(event) {
  state.value.active = event.detail.current;
  state.value.unitTypeId = unitTypeData.value[state.value.active].id;
  isWaitingAppointment();
}

// watch(() => storeState.hasTrytoLogin, () => {
//   if (storeState.hasTrytoLogin) {
//     showNewUserCouponCode()
//   }
// })

</script>
<style scoped lang="scss">
@import "@/static/style/theme.scss";

:deep(.driverjs-theme) {
  &.driver-popover {
    border-radius: 8px;
    padding: 20rpx;
    min-width: 240px;
    max-width: unset;
    width: 710rpx;
    background: #ffffff;
    border: 1px solid #eee;
    box-shadow: 0 4px 16px rgba(0,0,0,.08);
  }

  .driver-popover-title {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
  }

  .driver-popover-description {
    font-size: 29rpx;
    // font-weight: 600;
    color: #000;
    line-height: 1.5;
  }

  .driver-popover-footer {
    margin-top: 12px;

    button {
      height: 32px;
      font-size: 14px;
      padding: 0 14px;
      border-radius: 4px;
    }
  }

  .driver-popover-next-btn {
    background: #E60012;
    color: #fff;
    border: none;
    font-size: 28rpx;
    padding: 8rpx 14rpx;
  }

  .driver-popover-prev-btn {
    background: #fff;
    color: #E60012;
    border: 1px solid #E60012;
  }

  .driver-popover-done-btn {
    background: #E60012;
    color: #fff;
  }

  .driver-popover-close-btn {
    color: #999;
  }

  .driver-popover-arrow {
    &.driver-popover-arrow-side-top {
      border-top-color: #fff;
    }

    &.driver-popover-arrow-side-bottom {
      border-bottom-color: #fff;
    }
  }
}

.full-wrap{
  display: flex;
  width: 100%;
  margin-bottom: 20rpx;
  font-size: 26rpx;
  justify-content: space-around;
  align-items: center;
  :deep(.uv-button){
    width: 150rpx;
    height: 60rpx;
    font-size: 26rpx;
    padding: 10rpx;
  }
}

.toOrderBox{
  width: 100%;
  background-color: #FFFFFF;
  position: fixed;
  bottom: 156upx;
  padding: 16rpx 20rpx 12rpx 20rpx;
  box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.05);
}
.modal-container-callPhone {
	// height: 700rpx;
	// background: #000;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	flex-direction: column;
	padding: 32rpx;

	.modal-title {
		width: 100%;
		text-align: center;
		font-weight: bold;
		font-size: 36rpx;
		color: #000000;
	}

	:deep(.uv-upload__wrap) {
		display: flex;
	}

	.modal-text {
		width: 100%;
		margin-top: 20rpx;
    padding: 20rpx;
		font-size: 32rpx;
		font-weight: 600;
		text-align: center;
		line-height: 32rpx;
	}

	.upload {
		margin-top: 30rpx;
		height: 250rpx;
		width: 100%;
		// background: #000;
		display: flex;
		justify-content: center;
		// overflow-x: scroll;
		overflow-y: scroll;
		// white-space: nowrap;
		flex-wrap: nowrap;
		// overflow: hidden;
	}

	.modal-button {
		margin-top: 20rpx;
		width: 100%;
		min-height: 86rpx;
		display: flex;
		gap: 20rpx;

		:deep(.uv-button-wrapper) {
			flex: 1;
		}
	}
}

.payPopupBox {
  .garyBox {
    border: 3rpx solid #F6F6F7;
    background-color: #F8F9FB;
    padding: 20rpx 26rpx;
    margin-bottom: 30rpx;
		border-radius: 12rpx;
		color: #808386;
		font-weight: 600;
  }

  .title2 {
    margin-bottom: 30rpx;
    display: flex;
    justify-content: space-between;
  }

  .toOrder {
    min-height: 88rpx;
    padding: 0;
    padding-left: 28rpx;
    border-radius: 999rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #0D1118;
    color: #FFFFFF;

    .left {
    color: #E9CBA1;
    display: flex;
    align-items: center;
    font-size: 38rpx;
    .price {
      font-size: 38rpx;
      &::first-letter{
        font-size: 30rpx;
      }

      &.overMaxFont{
        font-size: 30rpx;
        &::first-letter{
        font-size: 28rpx;
        font-weight: normal;
      }
      }
    }
    .detail {
      display: flex;
      align-items: center;
      color: #d0d1d2;
      margin-left: 16rpx;
      font-size: 28rpx;
      font-weight: normal;
    //   .overMaxFont{
    //   font-size: 24rpx;
    // }
    .detail1{
      font-size: 28rpx;
    }
    .detail2{
      padding-left: 10rpx;
      font-size: 26rpx;
      display: flex;
      align-items: center;
      // border-left:1px solid #4a4d51;
      &::before{
        content: '';
        display: block;
        width: 1px;
        height: 30rpx;
        border-radius: 50%;
        background-color: #4a4d51;
        margin-right: 10rpx;
      }
    }
      image{
        margin-left: 10rpx;
        transform: rotate(180deg);
      }
    }

  }

    .right {
      display: flex;
      align-items: center;
      margin-right: -1px;

      text {
        display: flex;
        align-items: center;
      }

      .goOrder {
        height: 86rpx;
        width: 250rpx;
        background-color: #FFFFFF;
        border-radius: 999rpx;
        letter-spacing: 4rpx;
        :deep(.uv-button) {
          font-size: 28rpx;
          border: none;
          font-weight: 600;
        }

      }
    }
  }

}

.goReserve{
  width: 100%;
  background-color: #F8ECE0;
  border-radius: 12rpx;
  padding: 20rpx 40rpx;
  font-size: 26rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  &:hover{
    opacity: 0.7;
  }
  .left{
    text{
      color: #D1001B;
      font-size: 28rpx;
      &:nth-child(2){
        color: #000;
      }
    }
  }
  .right{
    color: #94673C;
    font-size: 27rpx;
    display: flex;
    align-items: center;
  }
}

.unitPopupBox {
  :deep(.uv-radio__label-wrap){
      display: none;
    }
  min-height: 50%;
  padding: 32rpx;
  // padding-bottom: calc(32rpx + constant(safe-area-inset-bottom));
  // padding-bottom: calc(32rpx + env(safe-area-inset-bottom));

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


  }

  :deep(.uv-radio-group) {
    width: 100%;
  }

  .info {
    display: flex;
    font-size: 28rpx;
    max-height: 60vh;
    overflow-y: auto;

    .list {
      display: flex;
      width: 100%;
      padding-bottom: 20rpx;
      border-bottom: 1px dashed #787B7E10;
      margin-bottom: 20rpx;

      .left {
        flex: 1;
        font-size: 28rpx;

        .zuqi{
          display: flex;
          align-items: center;
          .minus {
          width: 40rpx;
          height: 40rpx;
          border-width: 1px;
          border-color: #E6E6E6;
          border-style: solid;
          border-top-left-radius: 100px;
          border-top-right-radius: 100px;
          border-bottom-left-radius: 100px;
          border-bottom-right-radius: 100px;
          /* #ifndef APP-NVUE */
          display: flex;
          /* #endif */
          justify-content: center;
          align-items: center;
          line-height: 1;
        }
        .input {
          padding: 10rpx;
          background-color: #EBEBEB;
          border-radius: 8rpx;
          margin: 0 10rpx;
          font-weight: 600;
        }
        .plus {
          width: 40rpx;
          height: 40rpx;
          background-color: #FF0000;
          border-radius: 50%;
          /* #ifndef APP-NVUE */
          display: flex;
          /* #endif */
          justify-content: center;
          align-items: center;
          line-height: 1;
        }
        }
      }

      .right {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }

      .radioBox {
        display: flex;
        justify-content: end;
      }
    }
  }
}

.container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 500rpx;
}

.agreement-wrap {
  position: relative;
  height: 70vh;
  padding: 20rpx 40rpx;
  // padding-bottom: 100rpx;
  border-radius: 28rpx 28rpx 0 0;
  background: #FFFFFF;

  .agreement-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx 0rpx;
    margin-bottom: 20rpx;
    font-size:36rpx;
    font-weight: 600;
    .name {
      font-size: 40rpx;
      font-weight: 600;
    }
  }

  .agreement-content {
    height: calc(100% - 200rpx);
    overflow: auto;
  }

  .roll-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 40rpx;
    bottom: 140rpx;
    width: 80rpx;
    height: 80rpx;
    border-radius: 10rpx;
    background: #FB322E;
  }

  .bottom-read {
    width: 100%;
    // margin: 30rpx 0;
    padding: 20rpx 0;
    color: var(--text-color);
    border-radius: 99rpx;
    text-align: center;
    background: #FB322E;
    opacity: 0.4;

    &.agree {
      opacity: 1;
    }
  }
}

.agreed {
  display: flex;
  width: 100%;
  padding-bottom: 16rpx;
  padding-left: 36rpx;
  
  .check-wrap {
    pointer-events: none;
    margin-right: 8rpx;
    :deep(.uv-radio-group){
      flex-direction: column-reverse;
    }
    :deep(.uv-radio__label-wrap){
      display: none;
    }
    // min-width: 40rpx;
    // height: 40rpx;
    // border: 6rpx solid #242a37;
    // border-radius: 50%;
    // margin: 4rpx 20rpx 0 0;
    // font-size: 26rpx;
    // color: #A8AAAC;
    // text-align: center;
    // line-height: 40rpx;
    // background-color: #242a37;
    // &.checked {
    //   background-color: var(--active-color);
    // }
  }

  .read {
    color: #323233;
  }

  .stress {
    font-size: 24rpx;
    color: #9D9FA2;
  }
}
.agreed2{
  padding-bottom: 20rpx;
  .stress {
    padding-left: 48rpx;    
  }
  }

.agreed {
  .check-wrap {
    display: flex;
    align-items: center;
    margin-right: 10rpx;
     :deep(.uv-radio__label-wrap){
      display: none;
    }
    // :deep(.uv-radio){
    //   zoom: 1.0;
    // }
    // min-width: 30rpx;
    // height: 30rpx;
    // border: 4rpx solid #242a37;
    // border-radius: 50%;
    // margin: 4rpx 20rpx 0 0;
    // font-size: 26rpx;
    // color: #A8AAAC;
    // &.checked {
    //   background-color: var(--active-color);
    // }
  }

  .read {
    color: #A8AAAC;
    font-size: 26rpx;
  }

  .stress {
    font-size: 24rpx;
    color: #9D9FA2;
  }
}

.toOrder {
  padding: 0;
  padding-left: 28rpx;
  border-radius: 999rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #0D1118;
  color: #FFFFFF;
  padding-bottom: 0;
  margin-bottom: 0;
  .left {
    color: #E9CBA1;
    display: flex;
    align-items: center;
    font-size: 38rpx;
    .price {
      font-size: 38rpx;
      &::first-letter{
        font-size: 30rpx;
      }

      &.overMaxFont{
        font-size: 30rpx;
        &::first-letter{
        font-size: 28rpx;
        font-weight: normal;
      }
      }
    }
    .detail {
      display: flex;
      align-items: center;
      color: #d0d1d2;
      margin-left: 16rpx;
      font-size: 28rpx;
      font-weight: normal;
    //   .overMaxFont{
    //   font-size: 24rpx;
    // }
    .detail1{
      font-size: 28rpx;
    }
    .detail2{
      padding-left: 10rpx;
      font-size: 26rpx;
      display: flex;
      align-items: center;
      // border-left:1px solid #4a4d51;
      &::before{
        content: '';
        display: block;
        width: 1px;
        height: 30rpx;
        border-radius: 50%;
        background-color: #4a4d51;
        margin-right: 10rpx;
      }
    }
      image{
        margin-left: 10rpx;
        transform: rotate(180deg);
      }
    }

  }

  .right {
    display: flex;
    align-items: center;
    margin-right: -1px;
    

    text {
      display: flex;
      align-items: center;
    }

    .goOrder {
      height: 86rpx;
      width: 250rpx;
      background-color: #FFFFFF;
      border-radius: 999rpx;
      letter-spacing: 4rpx;
      :deep(.uv-button) {
        font-size: 28rpx;
        border: none;
        font-weight: 600;
      }

    }
  }
}

.orderInfo {
  padding: 0;

  ul {
    list-style: none;
    padding: 8rpx 40rpx;

    li {
      display: flex;
      align-items: center;
      padding: 32rpx 0;
      justify-content: space-between;
      border-bottom: 1px solid #a8aaac20;
      // padding-left: 10rpx;
      //  &:first-child {
      //   padding-top: 0;
      // }
      // &:last-child {
      //   padding-bottom: 0;
      // }

      &:active {
        background-color: #f5f5f5;
      }

      &:last-child {
        border: none;
      }

      .right {
        display: flex;
        align-items: center;

        text {
          padding-right: 20rpx;
        }
      }
    }
  }
}

.selectSite {
  height: 75rpx; // 整体高度
  display: flex;
  justify-content: space-between; // 左右分布
  align-items: center; // 垂直居中
  background: linear-gradient(90deg, #FFE8C4 0%, #FFFFFF 100%);
  width: 100%;
  font-size: 30rpx;
}

.selectSite .left {
  display: flex;
  align-items: center; // 左侧垂直居中
}

.selectSite .left .icon {
  width: 30rpx; // 图片大小，可根据实际调整
  height: 30rpx;
  margin-right: 20rpx; // 图片和文字间距
}

.selectSite .left .address {
  font-size: 28rpx;
  word-wrap: break-word;
  word-break: break-all;
}

.selectSite .right {
  display: flex;
  align-items: center; // 右侧垂直居中
}

.selectSite .right .more {
  font-size: 28rpx;
  color: #000;
  margin-right: 8rpx; // text 和 icon 间距
}

.siteInfo {
  display: flex;
  flex-direction: column;

  image {
    width: 32rpx;
    height: 32rpx;
    margin-right: 8rpx;
  }

  /* 顶部行 */
  .top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20rpx;

    image {
      // margin-top: 6rpx;
    }

    .left {
      display: flex;
      align-items: center;
      .title-wrap {
        display: flex;
        flex-direction: row;
        align-items: center;

        .title {}
        .tag {
          background-color: $sfgrayBgColor;
          margin-left: 8rpx;
          border-radius: 8px;
          height: 35rpx;
          line-height: 35rpx;
          padding: 0 8rpx;
        }
      }
    }

    .right {
      display: flex;
      .distance {}
    }
  }

  /* 底部地址行 */
  .bottom {
    display: flex;
    image {
    }
    .address {
      word-wrap: break-word;
    	word-break: break-all;
      flex: 1;
      line-height: 32rpx;
    }
  }
}

.info {
  display: flex;
  .right.arrow {
    justify-content: end;
    transform: translateX(20rpx);
  }
  .left.arrow{
     transform: translateX(-20rpx);
  }
  .arrow {
    width: 100rpx;
    display: flex;
    align-items: center;
    
    .arrowIcon {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 64rpx;
      height: 64rpx;
      text-align: center;
      opacity: 0.4;
    }
  }

  .swiper-container {
    flex: 1;
  }
}

.swiper-container {
  height: 320rpx;
  margin-bottom: 20rpx;

  .warehouse-detail-items {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;

    .warehouse-detail-right {
      // width: 250rpx;
      height: 100% !important;
      width: 100% !important;

      image {
        width: 300rpx;
      }
    }
  }
}

uni-swiper-item {
  display: flex;
  justify-content: center;
  align-items: center;
}

.unitType {
  padding: 40rpx;
  .title {
    // padding-left: 10rpx;
  }
  .bottom {
    .name{
      // padding-left: 10rpx;
    }
    display: flex;
    align-items: baseline;
  }
}
</style>
