<template>
<view class="detail-wrap" :class="[`${themeInfo.theme}-theme`]">
	<navBar />
	<view class="container">
		<view class="box1">
			<view class="topBox">
				<view class="info">
					<!-- <view class="span"></view> -->
					<view class="info-left">
						{{ state.orderData.lockerName}}
					</view>
					<view class="info-right">
						<view class="text">{{ $t("detail.store") }}：{{state.orderData.siteName}}</view>
						<view class="text">{{ $t("detail.unit") }}：{{state.orderData.unitTypeName}}</view>
						<template v-if="state.orderData.orderStatus !== 2">
						<view class="text">{{ $t("detail.remain", { days: state.orderData.remainingDays }) }}</view>
						<view class="text" style="color: red;" v-if="!(state.orderData.orderStartStatus == 2 && state.orderData.refundLockerStatus === 0)">
							{{ $t('common.status') }}：
							<template v-if="state.orderData.refundLockerStatus === 0">{{ $t("common.notStarted") }}</template>
							<template v-else-if="state.orderData.refundLockerStatus === 1">{{ $t("unlock.cancelPending") }}</template>
							<template v-else-if="state.orderData.refundLockerStatus === 2">{{ $t("unlock.outComplete") }}</template>
							<template v-else-if="state.orderData.refundLockerStatus === 3">{{ $t("unlock.disapproval") }} {{  state.orderData.orderStatus == 5 ?`(${$t("unlock.overdue")})`:''}}</template>
							<template v-else-if="state.orderData.refundLockerStatus === 4">{{ $t("unlock.overdue") }}</template>
						</view>
						<view v-if="state.orderData.refundLockerStatus == 3" class="text" style="color: red;">
							{{ $t("unlock.disapprovalRemarks") }}：{{ state.orderData.dismissRemarks }}
						</view>
						<view class="text blackBtn">
					<view class='li goodsListBox' @click.stop.prevent="goGoodsList(state.orderData.orderId)">
						{{ $t("common.goodsList") }}
					</view>
					<view class='li goodsListBox' v-show="[0, 3, 4].includes(state.orderData?.refundLockerStatus)" @click.stop.prevent="goAuth(state.orderData)">
						{{ $t("unlock.auth") }}
					</view>
					<view class='li goodsListBox' v-if="state.orderData?.orderStartStatus == 2 && state.orderData?.refundLockerStatus === 0 && state.orderData.canAddFace"   @click.stop.prevent="goAControl(state.orderData.orderId)">
						{{ $t("common.facialData") }}
					</view>
					<view class='li goodsListBox' @click.stop.prevent='showFixedPw' v-show="([0, 3, 4].includes(state.orderData?.refundLockerStatus))&&(state.orderData?.orderStartStatus == 2 && state.orderData?.refundLockerStatus !==4&&state.orderData?.orderStatus!==5)&&state.orderData?.canFixedPw">
						{{ $t("unlock.FixedPassword") }}
					</view>
					<view class='li goodsListBox' @click.stop.prevent='showBindCard(state.orderData,0)' v-show="([0, 3, 4].includes(state.orderData?.refundLockerStatus))&&(state.orderData?.orderStartStatus == 2 && state.orderData?.refundLockerStatus !==4&&state.orderData?.orderStatus!==5)&&state.orderData?.canBindCard">
						{{ $t("unlock.AccessControlCardBinding") }}
					</view>
					<view class='li goodsListBox' @click.stop.prevent='showBindCard(state.orderData,1)' v-show="([0, 3, 4].includes(state.orderData?.refundLockerStatus))&&(state.orderData?.orderStartStatus == 2 && state.orderData?.refundLockerStatus !==4&&state.orderData?.orderStatus!==5)&&state.orderData?.lockerCanBindCard">
						{{ $t("unlock.LockCardUnbinding") }}
					</view> 
					</view>
					</template>
					<template v-else>
						<view class="text" style="color: red;">
						{{ $t('common.status') }}: {{  $t("unlock.unPaid") }}
						</view>
					</template>
					</view>
				</view>
				<view class="box3">
					<view class="select">
						<view class="label">
							* {{ $t("detail.orderNum") }}
						</view>
						<view class="inputBox">
							<text class="value" :selectable='true' :user-select='true'>
								{{state.orderData.orderNo}}
							</text>
						</view>
					</view>
				<view class="select">
					<view class="label">
						* {{ $t("detail.type") }}
					</view>
					<view class="inputBox">
						<view class="value">
						{{state.orderData.unitTypeName}}
						</view>
					</view>
				</view>
				<view class="select">
					<view class="label">
						* {{ $t("detail.period") }}
					</view>
					<view class="inputBox">
						<view class="value">
						{{state.orderData.rentalInitiateDate}} - {{state.orderData.rentalEndDate}}
						</view>
					</view>
				</view>
				<view class="select">
					<view class="label">
						* {{ $t("detail.cSize") }} 
					</view>
					<view class="inputBox">
						<view class="value">
							{{state.orderData.volume}}({{state.orderData.length}}*{{state.orderData.width}}*{{state.orderData.height}})
						</view>
					</view>
				</view>
				<view class="select">
					<view class="label">
						* {{ $t("detail.cValueAdded") }}
					</view>
					<view class="inputBox">
						<view class="value">
							{{ $t("detail.nodemand") }}
						</view>
					</view>
				</view>
				<view class="select">
					<view class="label">
						* {{ $t("detail.valuation") }}
					</view>
					<view class="selectinfo">
						<view class="left">
							{{ $t("detail.rentalFee") }}
						</view>
						<view class="right">
							{{ currency }} {{ state.orderData.originalPrice}}
						</view>
					</view>
					<view class="selectinfo">
						<view class="left">
							{{ $t("detail.deposit") }}
						</view>
						<view class="right">
							{{ currency }} {{ state.orderData.deposit}}
						</view>
					</view>
					<view class="selectinfo">
						<view class="left">
							{{ $t("detail.valueAdded") }}
						</view>
						<view class="right">
							{{ currency }} 0.00
						</view>
					</view>
					<view class="selectinfo">
						<view class="left">
							{{ $t("detail.discount") }}
						</view>
						<view class="right">
							{{ currency }} {{ state.orderData.favorable}} 
						</view>
					</view>
					<view class="selectinfo">
						<view class="left">
							{{ $t("common.tuangouCouponPrice") }}
						</view>
						<view class="right">
							{{ currency }} {{ state.orderData.couponPrice}} 
						</view>
					</view>
					<view class="selectinfo Total">
						<view class="left">
							{{ $t("detail.total") }}
						</view>
						<view class="right">
							{{ currency }} {{ state.orderData.actualPay}}
						</view>
					</view>
				</view>
				<view class="select" v-if="state.orderData?.paymentData?.length">
					<view class="label">
						*  {{$t("detail.RENEWAL")}}
					</view>
					<view class="selectinfo" v-for="(item,index) in state.orderData.paymentData" :key="index">
						<view class="left">
						{{ index+1 }}	{{ item.startTime }} {{ $t("detail.to") }} {{ item.endTime }}
						</view>
						<view class="right">
							{{ currency }} {{ item.money}}
						</view>
					</view>
				</view>
				<template v-if="state.orderData.orderStatus !== 2">
				<view class="btnBox" v-show="state.orderData.refundLockerStatus === 0 || state.orderData.refundLockerStatus === 3 || state.orderData.refundLockerStatus === 4">
					<uv-button 
						:disabled="!(state.orderData.orderStartStatus === 2 && state.orderData.refundLockerStatus !==4 && state.orderData.orderStatus !== 5 && state.orderData.isOpenDoor)"
						class="uv-btn"
						shape="circle"
						@click="goDoor(state.orderData)"
						customStyle="font-size: 20rpx;width: 135.42rpx;
							height: 61.66rpx;
							font-weight: 700;
							white-space: nowrap;"
					>
						{{ $t("unlock.door") }}
					</uv-button>
					<uv-button 
						:disabled="!(state.orderData.orderStartStatus === 2 && state.orderData.refundLockerStatus !== 4 && state.orderData.orderStatus !== 5 && state.orderData.isOpenLock)"
						class="uv-btn"
						shape="circle"
						@click="goLock(state.orderData)"
						customStyle="font-size: 20rpx;width: 135.42rpx;
							height: 61.66rpx;
							font-weight: 700;
							white-space: nowrap;"
					>
					{{ $t("unlock.lock") }}
					</uv-button>
					<uv-button 
						
						class="uv-btn"
						shape="circle"
						customStyle="font-size: 20rpx;width: 135.42rpx;
							height: 61.66rpx;
							font-weight: 700;
							white-space: nowrap;"
							@click="goRenew(state.orderData)"
							:disabled="!((state.orderData.orderStartStatus == 2 || state.orderData.orderStartStatus == 1) && state.orderData.renewal)"
					>
						{{ $t("unlock.renew") }}
					</uv-button>
					<uv-button 
						class="uv-btn"
						shape="circle"
						v-show="state.orderData.refundLockerStatus === 4&&state.orderData.orderStatus!==5"
						customStyle="font-size: 20rpx;width: 135.42rpx;
							height: 61.66rpx;
							font-weight: 700;
							white-space: nowrap;"
						@click="openModal"
					>
						{{ $t("unlock.moveout") }}
					</uv-button>
					<uv-button 
						class="uv-btn"
						shape="circle"
						customStyle="font-size: 20rpx;width: 135.42rpx;
							height: 61.66rpx;
							font-weight: 700;
							white-space: nowrap;"
						@click="goEvaluate"
						>
						{{ $t("unlock.evaluate") }}
					</uv-button>
				</view>
				<view class="btnBox-1" v-show="state.orderData.refundLockerStatus === 1 || state.orderData.refundLockerStatus === 2">
					<button class="pending" v-show="state.orderData.refundLockerStatus === 1" @click="cancelMoveOutRqt">
						{{ $t("unlock.cancelout") }}
					</button>
					<button @click="backTo" class="pending">
						{{ $t("unlock.return") }}
					</button>
					<button @click="goEvaluate" class="pending">
						{{ $t("unlock.evaluate") }}
					</button>
				</view>
				</template>
				<template v-else>
					<view class="btnBox-1">
						<button @click="handlePay" class="pending">
						{{ $t("unlock.goToPay") }}
						</button>
						<button @click="handleCancelOrder(state.orderData)" class="pending">
						{{ $t("unlock.cancelOrder") }}
						</button>
						<button @click="backTo" class="pending">
						{{ $t("unlock.return") }}
						</button>
					</view>
				</template>
			</view>
		</view>
	</view>
		<!-- 上传图片退仓的弹窗 -->
		<uv-popup 
			ref="popup"
			customStyle="width: 80%; height: auto; padding:50rpx 0; border-radius: 32rpx;"
			:closeOnClickOverlay="false"
		>
			<view class="modal-container">
				<view class="modal-title">{{ $t("unlock.moveoutReminder") }}</view>
				<text class="modal-text">
					{{ $t("unlock.moveoutTip") }}
				</text>
				<view class="upload">
					<uv-upload
						:fileList="moveImageList"
						name="1"
						:maxCount="10"
						width="500rpx"
						height="200rpx"
						multiple
						:previewFullImage="false"
						:uploadText="t('unlock.uploadTip')"
						:customStyle="ifRedColor ? 'color: #FF0000;' : 'color: #242E42;'"
						@afterRead="afterRead"
						@delete="deletePic"
					>
					</uv-upload>
				</view>
				<view class="modal-button">
					<view class="modal-button-1" @click="closeModal">{{ $t("unlock.cancel") }}</view>
					<view class="modal-button-2" @click="handleRefundLocker">{{ $t("unlock.confirmOut") }}</view>
				</view>
			</view>
		</uv-popup>
		<!-- 成功退仓弹窗 -->
		<uv-popup 
			ref="popup2"
			customStyle="width: 80%; height: 400rpx; padding:50rpx 0; border-radius: 32rpx;"
			:closeOnClickOverlay="false"
		>
			<view class="modal-container2">
				<view class="modal-title">{{ $t("unlock.moveoutReminder") }}</view>
				<text class="modal-text">
					{{ $t("unlock.moveoutSuccess") }}
				</text>
				<view class="modal-button">
					<!-- <view class="modal-button-2"  @click="goEvaluate">{{ $t("unlock.evaluate") }}</view> -->
					<view class="modal-button-2" @click="closeModal2">{{ $t("unlock.order") }}</view>
				</view>
			</view>
		</uv-popup>

	</view>
	<myModal
        v-model="state.pwModel"
		:title="state.orderData?.lockerName+$t('unlock.FixedPassword')"
		:confirmText="$t('common.close')"
        :cancelShow="false"
      >
        <view class="pwModel">
		  <view class="content">
			<view class="item">
			  <view class="label">{{ $t('common.password') }}:{{ state.orderData?.userPassword || 'none' }}</view>
			</view>
			<uv-input v-model="state.userPassword" :placeholder="$t('unlock.FixedPassword')" maxlength="6" type="number" >
			<template v-slot:suffix>
				<uv-button @click="setFiexdPw" size="mini">{{ $t('unlock.ResetPassword') }}</uv-button>
			</template>
			</uv-input>
		  </view>
        </view>
      </myModal>
	  <myPopup v-model="state.bingZonedCardShow" mode="bottom" :closeable="true" bgColor="transparent" :customStyle="{padding:'0'}">
		 <view class="bingZonedCardBox">
			<view class="img"><view class="bg-img"></view><uv-image mode="widthFix" src="https://elitesoss.oss-cn-guangzhou.aliyuncs.com/0a6e1e12-49be-4ded-a009-d702d5685c33.png" width="140"></uv-image></view>
			<view class="btn">
				<!-- <view>开始配对</view>	 -->
				<uv-button @click="startLockerBindCard">
					<view v-if="state.bingCardState == 0 || state.bingCardState == 3">{{ $t("bingCard.start")}}</view>
					<view v-if="state.bingCardState == 1">
						<view>{{ $t("bingCard.Pairing")}}{{count}}s</view>
						<view>{{ $t("bingCard.panel")}}</view>
					</view>
				</uv-button>
			</view>
			<view class="tip">
				<view>1:{{ $t("bingCard.Click") }}</view>
				<view>2:{{ $t("bingCard.panel") }}</view>
				<view>3:{{ $t("bingCard.single") }}</view>
				<view>4:{{ $t("bingCard.close") }}</view>
			</view>
		 </view>
	  </myPopup>
	  <myModal
        v-model="state.bindCardModel"
		:title="state.bindCardType == 1 ? $t('unlock.LockCardUnbinding') : $t('unlock.AccessControlCardBinding')"
		@confirm="choseBingCardType"
      >
        <view class="pwModel bindCardModel">
		  <view class="content">
			<view class="item">
			  <view class="label">IC/ID卡号 CARD NUMBER</view>
			  <view class="label-input">
				<uv-input v-model="state.cardNo" :placeholder="state.bindCardType == 1 ? '请输入在读卡器刷出的卡号' : '请输入在门禁机刷出的卡号'" ></uv-input>
			  </view>
			  <!-- <view class="tips">
				请输入在门禁机刷出的卡号
			  </view> -->
			</view>
		  </view>
        </view>
      </myModal>
	  <!-- 是否去验证个人信息 -->
	<myModal
        v-model="state.showIsGoAuth"
        :content="$t('common.isGoAuth')"
        :cancelShow="false"
        @confirm="goVaild"
      ></myModal>
	  <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>
        <template #affterBtn>
          <view v-if="state.paySuccessOrfail" class="modal-button-1" @click="goAControl(state.orderData?.orderId)">{{ $t("unlock.FaceEnrollment") }}</view>
        </template>
      </myModal>
</view>
</template>

<script setup>
	import {
		ref, createApp 
	} from 'vue';
	import navBar from '@/components/navBar.vue'
	import { currency } from '@/config/index.js'
	import { onLoad,onShow,onHide } from '@dcloudio/uni-app'
	import { useOrderApi } from '@/Apis/order.js'
	import dayjs from 'dayjs'
	import myModal from '@/components/myModal.vue';
	import myPopup from '@/components/myPopup.vue';
	import { useCountDown } from "@/hooks/index";
	// import { baseImageUrl } from '@/config/index.js'
	import { navigateBack } from '@/utils/common.js'
	import { useGoodsApi } from "@/Apis/goodsList.js";
	const { count, countDown,cancelCout } = useCountDown();
	import { useLockApi } from '@/Apis/lock.js';
	// 主题色配置
	import { useMainStore } from "@/store/index.js";
	const { themeInfo, getUserInfo, storeState, getHasVerify} = useMainStore(); 
	const getGoodsApi = useGoodsApi();
	const getLockApi = useLockApi();
	// 国际化配置
	import { useI18n } from 'vue-i18n';
	const { t } = useI18n();
	const getApi = useOrderApi()
	const checked = ref(true)
	const columns  =  Array.from({ length: 36 }, (v, i) => ({
	text: `${i + 1} month${i + 1 > 1 ? 's' : ''}`,
	value: i + 1
	}));
	const today  = dayjs().set('hour', 0).set('minute', 0).set('second', 0).set('millisecond', 0);
	// 生成当天一个月后的日期
	let oneMonthLater = today.add(1, 'month');
	const state = ref({
		checked:true,
		orderId:'',
		startDate:today,
		month:24,
		orderData:{},
		pwModel:false,
		userPassword:'',
		bindCardModel:false,
		cardNo:'',
		refundLoading: false,
		bindCardType:'',  //0:门禁 1: 锁
		bingZonedCardShow:false, // 绑定zoned卡
		showPayAfterMoadl: false, //打开支付窗口
  		paySuccessOrfail: false, // 支付状态
		showIsGoAuth: false, // 是否去验证个人信息
		bingCardState:0, // 绑定卡状态 0未开始 1绑定中 2绑定成功 3绑定失败
	})
	onLoad((params)=>{
		state.value.orderId = params.id
		
	})
	onShow((params)=>{
		GetOrderById()
	})


const handleCancelOrder = (item) => {
    uni.showModal({
		title: t('common.cancelOrder'),
		content: t('common.cancelOrderTips'),
		success: (res) => {
			if (res.confirm) {
				cancelOrder(item);
			}
		},
	});
}

const payAfterconfirm = () => {
};


const handlePay = () => {
	uni.showLoading({
		mask: true,
	});
    getApi
    .ContinueOrderPay({
      orderId:state.value.orderData.orderId,
    })
    .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);
			GetOrderById()
          },
          fail(err) {
             uni.hideLoading();
            state.value.paySuccessOrfail = false;
            state.value.showPayAfterMoadl = true;
			GetOrderById()
            console.error("支付失败", err);
          },
        });
      } else {
      }
    });
}


const cancelOrder = (item) => {
	uni.showLoading({
		mark: true,
	})
	getApi.OrderCountdownTime({ orderId: item.orderId }).then(res=>{
		uni.hideLoading()
		if(res.code === 200){
			backTo()
		}else{
			uni.showToast({
				title: res.msg,
				icon: "none",
			});
		}
	})
}

const goVaild = () => {
  uni.navigateTo({
    url: "/pagesb/validationInfo/index",
  });
};
// 是否已经验证过了
const canUseByHasVerify = async ( item )=>{
	const hasVerify = await getHasVerify()
	const isTodayOrder = dayjs().isSame(dayjs(item.paymentTime), "day"); // 判断是否是今天的订单
	// 验证通过  或者是当天的订单 可以直接进入
	if(hasVerify || isTodayOrder){
		return true
	}else{
		state.value.showIsGoAuth = true
		return
	}
    return  hasVerify
}

const showFixedPw = async ()=>{
	const hasVerify = await canUseByHasVerify(item)
	if(!hasVerify) return
	state.value.pwModel = true
	state.value.userPassword = ''
}
const setFiexdPw = ()=>{
	const data = {
		lockMac:state.value.orderData.lockMac,
		input:state.value.userPassword,
		siteId:state.value.orderData.siteId,
		orderId:state.value.orderData.orderId
	}
	if(!data.lockMac){
		uni.showToast({
			title:'lcokMac is null',
			icon:'none'
		})
		return
	}
	// 校验input 为6位数字
	if(!/^\d{6}$/.test(data.input)){
		uni.showToast({
			title:'请输入6位数字',
			icon:'none'
		})
		return
	}
	uni.showLoading()
	getLockApi.SetUserFixedPassword(data).then(res=>{
		uni.hideLoading()
		if(res.data?.isSuccess){
			state.value.orderData.userPassword = data.input
			state.value.userPassword = ''
			uni.showToast({
				title:'success',
				icon:'none'
			})
		}else{
			uni.showToast({
				title:res.data?.message || res.msg,
				icon:'none'
			})
		}
	})
}


const showBindCard = async (item,type)=>{
	const hasVerify = await canUseByHasVerify(item)
	if(!hasVerify) return
	if(type!=0 && !item.lockMac){
		uni.showToast({
			title:'lockMac is null',
			icon:'none'
		})
		return
	}
	if(type == 1 && (item.lockTypeId == 1 || item.lockTypeId == 4)){
	    state.value.bingZonedCardShow = true
	}else{
		state.value.bindCardModel = true
	}

	state.value.cardNo = ''
	state.value.selectItem = item
	state.value.bindCardType = type
	state.value.bingCardState = 0
}

const choseBingCardType = ()=>{
	// 通通锁绑卡
    if(state.value.bindCardType == 1){
		BindCardByWifiSmartLock()
	}else{
		// 门禁
		bindCard()
	}
}
onHide(()=>{
    cancelCout()
	state.value.bingZonedCardShow = false
	state.value.bindCardModel = false
	state.value.pwModel = false
})
const SetRFIDCard = ()=>{
	state.value.bingCardState = 1
	getLockApi.SetRFIDCard({ lockMac: state.value.selectItem.lockMac, input: '1',siteId:state.value.selectItem.siteId,orderId:state.value.selectItem.orderId}).then(res=>{
		if(res.data.isSuccess){
			state.value.bingCardState = 1
			GetBindingCardResult()
		}else{
			state.value.bingCardState = 3
		}
	})
}
const GetBindingCardResult = ()=>{
	getLockApi.GetBindingCardResult({ lockMac: state.value.selectItem.lockMac,siteId:state.value.selectItem.siteId,orderId:state.value.selectItem.orderId }).then(res=>{
		if (res.data === 'Waiting') {
			if(state.value.bingZonedCardShow){
				setTimeout(()=>{
				    GetBindingCardResult()
				},1000)
			}
            } else if (res.data === 'OK') {
				state.value.bingCardState = 2
				cancelCout()
            } else if (res.data === 'TimeOut') {
				state.value.bingCardState = 3
				cancelCout()
             
            }
	})
}
// 通通锁绑卡
 const BindCardByWifiSmartLock = async()=>{
	uni.showLoading()
	const data = {
		lockMac:state.value.selectItem.lockMac,
		input:state.value.cardNo.trim(),
		orderId:state.value.selectItem.orderId,
		siteId:state.value.selectItem.siteId,
	}
	if(!data.lockMac){
		uni.showToast({
			title:'lockMac is null',
			icon:'none'
		})
		return
	}
	if(data.input == ''){
		uni.showToast({
			title:'卡号不能为空',
			icon:'none'
		})
		return
	}
	getLockApi.BindCardByWifiSmartLock(data).then(res=>{
	 	if(res.code == 200&& res.data?.isSuccess){
			setTimeout(()=>{
			uni.hideLoading()
	 		state.value.cardNo = ''
			state.value.bindCardModel = false
	 		uni.showToast({
	 			title:'success',
	 			icon:'none'
	 		})
			},2000)
	 	}else{
			uni.hideLoading()
	 		uni.showToast({
	 			title:res.data?.message || res.msg,
	 			icon:'none'
	 		})
		}
	 })
 }
const startLockerBindCard = ()=>{
    countDown(30,()=>{
		SetRFIDCard()
	})
}

const bindCard = async()=>{
	let customerId = storeState.userInfo?.id
	if(!customerId){
		const { data: userInfo } = await getUserInfo();
		customerId = userInfo?.id
	}
	const data = {
		customerId,
		siteId:state.value.orderData.siteId,
		cardNumber:state.value.cardNo.trim()
	}
	if(!data.siteId){
		uni.showToast({
			title:'siteId is null',
			icon:'none'
		})
		return
	}
	if(!data.cardNumber){
		uni.showToast({
			title:'卡号不能为空',
			icon:'none'
		})
		return
	}
	uni.showLoading()
	 getLockApi.AddCardNumber(data).then(res=>{
	 	if(res.code == 200){
			setTimeout(()=>{
			uni.hideLoading()
	 		state.value.cardNo = ''
			state.value.bindCardModel = false
	 		uni.showToast({
	 			title:'success',
	 			icon:'none'
	 		})
			},2000)
	 	}else{
			uni.hideLoading()
	 		uni.showToast({
	 			title:res.data?.message || res.msg,
	 			icon:'none'
	 		})
		}
	 })
}
	const goAuth = async (item)=>{
	const hasVerify = await canUseByHasVerify(item)
	if(!hasVerify) return
	uni.navigateTo({
		url:`/pagesb/houseKey/index?Order_ID=${item.orderId}`
	})
	}
	const goRenew = (item)=>{
		if(item.renewal){
		uni.navigateTo({
			url:`/pages/renewOrder/index?siteId=${state.value.siteId}&lockerId=${item.lockerId}&orderId=${item.orderId}`
		})
	}
	}
	const backTo = ()=>{
		navigateBack()
	}
	const GetOrderById = ()=>{
		uni.showLoading()
		getApi.GetOrderById({orderId:state.value.orderId}).then(res=>{
			uni.hideLoading()
			if(res.code===200){
				state.value.orderData = res.data
			}
		})
	}
	function goDoor(item) {
		if (!item.isOpenDoor) return;
		uni.navigateTo({
			url: `/pages/orderdetail/door?id=${item.orderId}&siteId=${item.siteId}`
		})
	}
	const goAControl = (id) =>{
	uni.navigateTo({
		url:`/pagesb/AControl/index?id=${id}`
	})
	}
	const  goGoodsList = (id)=>{
	uni.navigateTo({
		url: `/pages/goodsList/index?orderId=${id}`
	})
}

const hasGoodsList = async (id)=>{
	uni.showLoading()
	let res
	try {
		res = await getGoodsApi.GetSubmitGoodsList(id)
	} catch (error) {
		uni.hideLoading()
	}
	return res?.data
}

async function goLock(item) {
	if (!item.isOpenLock) return;
	const hasVerify = await canUseByHasVerify(item)
	if(!hasVerify) return
	// 判断有没有物品清单
	const hasGoods= await hasGoodsList(item.orderId)
	if (!hasGoods?.length) {
		uni.showToast({
			title: t('unlock.fillInventory'),
			icon: 'none',
			duration: 1000
		});
		setTimeout(() => {
			goGoodsList(item.orderId);
		}, 1000);
		return;
	}
		uni.navigateTo({
			url: `/pages/orderdetail/lock?id=${item.orderId}&lockmac=${item.lockMac}`
		})
	}
	// 退仓弹出框
	const popup = ref()
	const popup2 = ref()
	// CSS变颜色
	const ifRedColor = ref(false)
	function openModal() {
		popup.value.open()
	} 
	function closeModal() {
		popup.value.close()
	}
	// 发起退仓请求后点击我的订单跳到unlock
	function closeModal2() {
		popup2.value.close()
		uni.reLaunch({
			url:'/pages/unlock/index'
		});
	}
	function goEvaluate() {
		uni.navigateTo({
			url: `/pages/evaluate/index?orderId=${state.value.orderData.orderId}&siteId=${state.value.orderData.siteId}`
		});
	}
	const moveImageList = ref([]);
	// 删除图片
	const deletePic = (event) => {
		moveImageList.value.splice(event.index, 1);
	};
	// 新增图片方法
	const afterRead = async (event) => {
		let lists = [].concat(event.file);
		let fileListLen = moveImageList.value.length;
		lists.map(item => {
			moveImageList.value.push({
				...item,
				status: 'uploading'
			});
		});

		for (let i = 0; i < lists.length; i++) {
			const result = await uploadImage(lists[i].url);
			let item = moveImageList.value[fileListLen];
			moveImageList.value.splice(fileListLen, 1, Object.assign(item, {
				status: result ? 'success' : 'failed',
				url: result
			}));
			fileListLen++;
		}
	}
	// 上传图片请求
	const uploadImage = async (url) => {
		let resUrl = '';
		try {
			const res = await getApi.UploaderImage({ filePath: url });
			resUrl = res.data;
			ifRedColor.value = false;
		} catch (error) {
			console.error('UploaderImage error:', error);
		}
		return resUrl;
	}
	// 确认退仓
	const handleRefundLocker = async () => {
		try {
			const hasLoadingImage = moveImageList.value.find(item => item.status === 'uploading');
			if (hasLoadingImage) {
				uni.showToast({
					title: '图片上传中，请稍后（The picture is being uploaded, please wait）',
					icon: 'none'
				});
				return;
			}
			const imageList = moveImageList.value.filter(item => item.status === 'success');
			if (!imageList.length) {
				ifRedColor.value = true;
				uni.showToast({
					title: '请上传图片（Please upload pictures）',
					icon: 'none'
				});
				return;
			}
			if (state.value.refundLoading) return;
			uni.showLoading({ mask:true });
			state.value.refundLoading = true;
			let imageUrls = imageList.map(item => item.url);
			imageUrls = imageUrls.join(',');
			const { code } = await getApi.ApplyForRefundLocker({ orderId: state.value.orderId, imageUrl: imageUrls });
			if (code == 200) {
				popup.value.close();
				popup2.value.open();
			}
			uni.hideLoading();
			state.value.refundLoading = false;
		} catch (error) {
			uni.hideLoading();
			state.value.refundLoading = false;
		}
	}
	// 取消退仓
	const cancelMoveOutRqt = () => {
		uni.showLoading()
		getApi.CancelApplyForRefundLocker( state.value.orderId ).then(res=>{
			if(res.code === 200) {
				GetOrderById()
				uni.hideLoading()
			}
		})
	} 
</script>

<style scoped  lang="scss">
	@import '@/static/style/theme.scss';
// 解决H5转微信小程序使用v-show不生效的问题
	[hidden] {
		display: none !important;
	}
	:deep(.modal-button-1) {
    width: 260rpx;
		height: 72rpx;
		background: #F4F3F3;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
		font-weight: 700;
		border-radius: 14rpx;
		margin-left: 20upx;
		&:active {
		  background: #888;
		}
	  }
	  .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;
    }
  }
	.pwModel{
	.content{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		.item{
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 40rpx 0;
			.label{
				font-size: 36rpx;
				color: #242A37;
				font-weight: bold;
				margin-right: 20rpx;
			}
		}
	}
}
.bindCardModel{
	width: 90%;
	.content{
	.item{
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		.label{
		text-align: center;
		font-size: 26rpx;
		margin-bottom: 10rpx;
		width: 100%
		}
		.label-input{
			width: 100%;
		}
		.tips{
			font-size: 24rpx;
			font-weight: bold;
			color: red;
			margin-top: 10rpx;
		}
		
	}
}
}
.bingZonedCardBox{
	width: 98%;
	margin: 0 1%;
	background-color: #FFFFFF;
	border-radius: 18rpx 18rpx 0 0;
	padding: 20rpx;
	.img{
		display: flex;
		justify-content: center;
		margin-bottom: 20rpx;
		position: relative;
		.bg-img{
			position: absolute;
			top: 50px;
			width: 120px;
			height: 120px;
			border-radius: 50%;
			background-color: gold;
			filter: blur(110px);
			z-index: 0;
		}
	}
	.btn{
		::v-deep .uv-button {
			color: var(--text-color);
			background-color: var(--btn-color1);
			border: none;
			font-size: 32rpx;
			height: auto;
			font-weight: bold;
			text-justify: 20rpx;
			padding: 16rpx 0 ;
			.uv-button__loading-text {
				font-size: 32rpx!important;
				font-weight: bold;
				text-justify: 20rpx;
			}
		}
	}
	.tip{
		margin: 20rpx 0;
		view{
			margin:20rpx 0;
			font-weight: 500;
		}
	}
}
	.detail-wrap {
		min-height: 100%;
		background: linear-gradient(0.00deg, var(--left-linear), var(--right-linear));
		overflow: auto;
	}

	.container {
		padding: 0 30rpx 40rpx;
		font-size: 14px;
		line-height: 24px;
	
		
		.myCheckbox{
			::v-deep .van-icon{
				border: 2px solid #242A37;
				background-color: #D8D8D8;
			}
			::v-deep .van-icon-success:before{
				opacity: 0;
			}
			::v-deep .van-checkbox__icon--checked{
				.van-icon{
					background-color: var(--main-color);
				}
			}
		}
		.select{
			border-bottom: 1px dashed #d8d8d857;
			.label{
				font-weight: bold;
				color: #BEC2CE;
				font-size: 24rpx;
			}
			.selectinfo{
				color: #242E42;
				font-size: 22rpx;
				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: 10rpx;
			.value{
				color:#242E42;
				font-size: 24rpx;
				font-weight: bold;
			}
			image{
				width: 20rpx;
				height: 12rpx;
			}
			}
		}
		
		.box3{
			margin-top: 40rpx;
			padding: 40rpx;
			background-color:rgba(255, 255, 255,0.9);
			border-radius: 18rpx;
			
			.btnBox{
				display: flex;
				justify-content: space-evenly;
				flex-wrap: wrap;
				margin-top: 20rpx;
				.uv-btn {
					width: 135.42rpx;
					height: 61.66rpx;
					font-weight: 700;
					white-space: nowrap;
				}
				.pending {
					width: 100%;
					height: 61.66rpx;
					background: var(--btn-color1);
					font-size: 20rpx;
					font-weight: 700;
					text-align: center;
					line-height: 61rpx;
					color: #FFF;
					border-radius: 30rpx;
					margin-bottom: 20rpx;
					letter-spacing: 0.39px;
				}
				::v-deep .uv-button {
					color: var(--text-color);
					background-color: var(--btn-color1);
				}
			}
			.btnBox-1 {
				@extend .btnBox;
				flex-direction: column;
			}
			.agreed{
				font-size: 24rpx;
				font-weight: bold;
				display: flex;
				flex-wrap: wrap;
				.text{
					display: flex;
					flex-wrap: wrap;
				}
				text{
					color: var(--active-color);
				}
			}
			.bth{
				margin-top: 60rpx;
				margin-bottom: 20rpx;
				button{
					color: #FFF;
					background: var(--active-color);
					border-radius: 14rpx;
					box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.13);
				}
				
			}
			.tips{
				color: #2A3447;
				font-size: 22rpx;
				font-weight: bold;
			}
			.fee{
				margin: 10rpx 0;
				.info{
					display: flex;
					justify-content: space-between;
					font-size: 24rpx;
					color: #242A37;
					font-weight: bold;
					.left{
						display: flex;
						align-items: center;
						&::before{
							content: ' ';
							display: block;
							background: var(--active-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;
					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);
					}
				}
				
			}
			
		}
		.topBox {
			position: relative;
			background-color: #FFFFFF;
			border-radius: 32rpx;

			.pirce {
				display: flex;
				justify-content: space-between;
				padding: 20rpx 40rpx;
				color: #242A37;
				font-size: 36rpx;
				font-weight: bold;
				.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;
						
					}
				}
			}

			.info {
				background: linear-gradient(180.00deg, var(--left-linear), var(--right-linear));
				position: relative;
				border-radius: 32rpx;
				padding: 40rpx;
				color: var(--text-color);
				display: flex;
				align-items: center;

				.info-left {
					padding: 0 40rpx;
					width: 240rpx;
					font-size: 64rpx;
					font-weight: bold;
					line-height: 1;
					word-break: break-all;
				}

				.info-right {
					flex: 1;
					font-size: 24rpx;
					.blackBtn{
						display: flex;
						flex-wrap: wrap;
					}
					.text{
						.li{
							padding: 4rpx 8rpx;
							width: fit-content;
							background-color: #242A37;
							color: #f5f5f5;
							font-size: 20rpx;
							border-radius: 999rpx;
							text-align: center;
							margin-top: 10rpx;
							margin-right: 10rpx;
						}
					}
				}

				// .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;
				//   }
				// }
			}

			&::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;
			}
		}
		.modal-container {
			// height: 700rpx;
			// background: #000;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			flex-direction: column;
			
			.modal-title {
				width: 486rpx;
				height: 42rpx;
				text-align: center;
				font-weight: bold;
				font-size: 36rpx;
				color: #000000;
				position: relative;
				// display: inline-block; 
				z-index: 1;
				&::before{
					position: absolute;
					content: ' ';
					width: 100%;
					height: 14rpx;
					background-color: var(--main-color);
					border-radius: 100px;
					display: block;
					bottom: 0;
					z-index: -1;
				}
			}
			.modal-text {
				width: 486rpx;
				margin-top: 38rpx;
				font-size: 26rpx;
				font-weight: 600;
				text-align: left;
				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: 80rpx;
				width: 527.22rpx;
				height: 72rpx;
				display: flex;
				justify-content: center;
				// justify-content: space-between;
				align-items: center;
				& > .modal-button-1 {
					width: 260rpx;
					height: 72rpx;
					background: #F4F3F3;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 30rpx;
					font-weight: 700;
					border-radius: 14rpx;
					&:active {
						background: #888;
					}
				}
				& > .modal-button-2 {
					width: 260rpx;
					height: 72rpx;
					background: var(--main-color);
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 30rpx;
					font-weight: 700;
					color: #FBFBFB;
					border-radius: 14rpx;
					&:active {
						background: #888;
					}
				}
			}
		}
		.modal-container2 {
			height: 400rpx;

			@extend .modal-container
		}
	}
	::v-deep .uv-upload__wrap {
		display: flex;
		justify-content: center;		
	}
	::v-deep .uv-upload__button {
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 26rpx;
		// padding-top: 20rpx;
		border: 1px dashed #C4C4C4;
		position: relative;
	}
	::v-deep.uvicon-camera-fill {
		position: absolute !important; 
		left: 20rpx;
		margin-top: 20rpx;
	}
	::v-deep .uv-upload__button__text[data-v-822c46b5] {
		width: 370rpx;
		text-align: left;
		font-size: 21rpx;
		font-weight: 600;
		margin-left: 40rpx;
		// opacity: 0.52;
		line-height: 26rpx;
		color: var(--color);
	}
	// ::V-deep .uv-upload__wrap {
	// 	flex-wrap:nowrap;
	// }
	.detail-wrap.golden-theme {
		background: #FFFFFF;

		.topBox,
		.box3 {
			background: var(--bg-color);

			.inputBox .value,
			.selectinfo {
				color: #FFFFFF;
			}
		}

		::v-deep .back .left span,
		::v-deep .back .left text {
			color: var(--bg-color) !important;
		}

		.container .topBox::before {
			content: "";
			position: absolute;
			top: -7px;
			left: 4px;
			width: 100%;
			height: 14px;
			background: radial-gradient(#FFFFFF 0px, #FFFFFF 5px, transparent 5px, transparent);
			background-size: 14px 14px;
			z-index: 9;
			
		}
	}
</style>