<template>
	<view class="container" :class="[`${themeInfo.theme}-theme`]">
        <navBar></navBar>
        <view class="box">
            <view class="top-box">
                <view class="number">
                    {{ lockDetail.lockerName }}
                </view>
                <view class="detail">
                    {{ $t("detail.store") }}： {{ lockDetail.siteName }} <br>
                    {{ $t("detail.unit") }}： {{ lockDetail.unitTypeName }}<br>
                    <view v-if="lockDetail.orderStartStatus == 2 && lockDetail.refundLockerStatus === 0">{{ $t("detail.remain", { days: lockDetail.remainingDays }) }}</view>
					<view style="color: red;" v-else>
						{{ $t('common.status') }}：
						<template v-if="lockDetail.refundLockerStatus === 0">{{ $t("common.notStarted") }}</template>
						<template v-else-if="lockDetail.refundLockerStatus === 1">{{ $t("unlock.cancelPending") }}</template>
						<template v-else-if="lockDetail.refundLockerStatus === 2">{{ $t("unlock.outComplete") }}</template>
						<template v-else-if="lockDetail.refundLockerStatus === 3">{{ $t("unlock.disapproval") }}</template>
					</view>
                </view>
            </view>
            <template v-if="!state.isTTlock || (state.tryPWDCount > tryPWDCountMAX)">
            <view class="paw">
                {{ lockPwd?.password }}{{ lockPwd?.password?'#':'' }}
            </view>
            <view class="tip">
                {{ $t("door.pwd") }} <br>
                {{ $t("door.valid") }}
            </view>
            </template>
            <button class="refresh" @click="RemoteOpen" v-if="state.isTTlock">
                {{ $t("door.Unlock") }}
            </button>
            <button class="refresh" @click="GetLockPwd" v-if="!state.isTTlock || (state.tryPWDCount > tryPWDCountMAX)">
                <uv-icon name="reload" size="24" :color="themeInfo.iconColor"></uv-icon>
                {{ $t("door.refreshPwd") }}
            </button>
        </view>
    </view>
</template>

<script setup>
import {
    reactive,
    ref
} from 'vue';
import navBar from '@/components/navBar.vue'
import { onLoad } from '@dcloudio/uni-app'
import { useOrderApi } from '@/Apis/order.js'
import { useLockApi } from '@/Apis/lock.js'
// 主题色配置
import { useMainStore } from "@/store/index.js";
// 国际化配置
import { useI18n } from "vue-i18n";
const { t } = useI18n();
const { themeInfo } = useMainStore();
const getApi = useOrderApi()
const getLockApi = useLockApi()
const orderId = ref()
const lockMac = ref()
const lockDetail = ref([])
const lockPwd = ref([])
const tryPWDCountMAX = 3
const state = reactive({
    isTTlock: false, // 是否是通通锁 TT锁可以使用远程开门,
    tryPWDCount: 0, // 尝试动态次数,
})

onLoad((params) => {
    orderId.value = params.id
    lockMac.value = params.lockmac
    state.tryPWDCount = 0
    GetOrderDetail()
    
})
// 获取锁的信息
function GetOrderDetail() {
    uni.showLoading()
	getApi.GetOrderById({ orderId: orderId.value }).then(res=>{
		lockDetail.value = res.data
        if([3, 7].includes(Number(lockDetail.value.lockTypeId))){
            state.isTTlock = true
        }else{
            GetLockPwd()
        }
	})
    uni.hideLoading()
}

// 获取锁的密码
function RemoteOpen() {
    uni.showLoading({mask:true})
    getLockApi.RemoteOpen({ lockMac: lockMac.value,input: '',siteId:lockDetail.value.siteId }).then(res => {
        state.tryPWDCount++
        if(res.data.isSuccess) {
             uni.showToast({
                title:t('door.UnlockSuccessful'),
                duration:3000,
                icon:'none'
            })
            uni.hideLoading()
        } else {
            uni.hideLoading()
            uni.showToast({
                title:res.data.message,
                duration:3000,
                icon:'none'
            })
            
        }
    })
}
// 获取锁的密码
function GetLockPwd() {
    uni.showLoading({mask:true})
    getLockApi.GetDyncPwdByMac({ lockMac: lockMac.value,siteId:lockDetail.value.siteId }).then(res => {
        state.tryPWDCount++
        if(!res.data.password ) {
            uni.hideLoading()
            uni.showToast({
                title:res.data.message,
                duration:3000,
                icon:'none'
            })
        } else {
            uni.hideLoading()
            lockPwd.value = res.data
        }
    })
}
</script>

<style scoped  lang="scss">
	@import '@/static/style/theme.scss';
.container {
    height: 100vh;
    background: linear-gradient(0.00deg, var(--left-linear) 0%, var(--right-linear) 94.004%);
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}
.box {
    position: relative;
    width: 680rpx;
    border-image-width: 14rpx;
    border-image-slice: 72;
    border-image-repeat: repeat;
    border-image-outset: 20rpx;
    background: #fff;
    border-radius: 26rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.top-box {
    width: 710rpx;
    background: linear-gradient(180.00deg, var(--left-linear), var(--right-linear) 100%);
    border-radius: 26rpx;
    margin-top: -2rpx;
    display: flex;
    align-items: center;
    padding: 40rpx;
    
    & > .number {
        padding: 0 40rpx;
        color: var(--text-color);
        font-size: 64rpx;
        font-weight: bold;
        width: 50%;
        line-height: 1;
        word-break: break-all;
    }
    & > .detail {
        flex: 1;
        color: var(--text-color);
        display: flex;
        flex-direction: column;
        font-size: 24rpx;
        font-weight: 500;
        line-height: 1.5;
    }

    &::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;
    }
}
.paw {
    width: 556.16rpx;
    height: 128rpx;
    margin-top: 78rpx;
    background: var(--active-color);
    border-radius: 64rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    letter-spacing: 8px;
    font-size: 65rpx;
    font-weight: 700;
    color: var(--text-color);
}
.tip {
    margin-top: 80rpx;
    font-size: 27rpx;
    font-weight: 500;
    text-align: center;
    color: var(--blackOrWhite);
    letter-spacing: 1px;
}
.refresh {
    width: 520rpx;
    position: relative;
    background: var(--btn-color1);
    border-radius: 12rpx;
    padding: 14rpx 0;
    margin: 50rpx 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28rpx;
    font-weight: 700;
    color: var(--text-color);

    ::v-deep .uv-icon {
        margin-right: 30rpx;
    }
}
.container.golden-theme {
    background: #FFFFFF;

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

    .box {
        background: var(--bg-color);
    }

    .top-box::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>