<template>
    <view :style="themeColor()" class="bg-[var(--page-bg-color)] min-h-[100vh] overflow-hidden">
        <block v-if="!loading && verifyInfo && verifyInfo.value">
			<view class="p-[30rpx] bg-[#fff]">
				<view class="text-[var(--primary-color)] fixed top-[40rpx] right-[30rpx] flex items-center" @click="redirect({url:'/app/pages/verify/record'})">
					<text class="nc-iconfont nc-icon-lishijiluV6xx !text-[28rpx] -mb-[2rpx]"></text>
					<text class="text-[26rpx] ml-[8rpx]">核销记录</text>
				</view>
				<view class="flex items-center mt-[60rpx] justify-center">
					<view class="flex justify-center items-center flex-col pr-[30rpx]">
						<image class="w-[100rpx] h-[100rpx]" :src="img('static/resource/images/verify/yanzhenghexiaoma.png')"/>
						<view class="text-[26rpx] mt-[14rpx] h-[36rpx] leading-[36rpx] flex-shrink-0">验证核销码</view>
					</view>
					<image class="w-[74rpx] h-[12rpx] mb-[50rpx]" :src="img('static/resource/images/verify/youjiantou.png')"/>
					<view class="flex justify-center items-center flex-col pl-[30rpx]">
						<image class="w-[100rpx] h-[100rpx]" :src="img('static/resource/images/verify/hexiao.png')"/>
						<view class="text-[26rpx] mt-[14rpx] h-[36rpx] leading-[36rpx] flex-shrink-0">确定核销</view>
					</view>
				</view>
			</view>
			<view class="card-template mt-[var(--top-m)] sidebar-margin">
				<view class="flex" :class="{'mb-[var(--top-m)]': (verifyInfo.value.list.length - 1 != index)}" v-for="(item,index) in verifyInfo.value.list" :key="index">
					<image class="w-[150rpx] h-[150rpx] rounded-[var(--goods-rounded-big)]" mode="aspectFill" v-if="item.cover" :src="img(item.cover)"></image>
					<image class="w-[150rpx] h-[150rpx] rounded-[var(--goods-rounded-big)]" mode="aspectFill" v-else :src="img('addon/tourism/tourism/member/hotel.png')"></image>
					<view class="flex flex-col flex-1 ml-[20rpx] py-[4rpx]">
						<view class="leading-[1]">
							<view class="leading-[40rpx] truncate max-w-[490rpx] text-[28rpx]">{{item.name}}</view>
							<view class="mt-[14rpx] truncate text-[24rpx] text-[var(--text-color-light9)] leading-[28rpx] max-w-[490rpx]" v-if="item.sub_name">
								{{ item.sub_name }}
                            </view>
						</view>
						<view class="text-[var(--text-color-light6)] text-[28rpx] mt-[20rpx]">x1</view>
					</view>
				</view>
			</view>

			<view class="card-template mt-[var(--top-m)] sidebar-margin">
				<view class="title">核销信息</view>
				<view class="card-template-item justify-between">
					<text class="text-[28rpx] text-[#333]">核销类型</text>
					<view class="text-[28rpx] text-[#333]">{{verifyInfo.type_name}}</view>
				</view>
				<view class="card-template-item justify-between" v-for="(item,index) in verifyInfo.value.content.fixed">
					<text class="text-[28rpx] text-[#333]">{{item.title}}</text>
					<view class="text-[28rpx] text-[#333]">{{item.value}}</view>
				</view>
			</view>

			<view v-for="(item,index) in verifyInfo.value.content.diy" :key="index" class="card-template mt-[var(--top-m)] sidebar-margin">
				<view class="title">{{item.title}}</view>
				<view class="card-template-item justify-between"  v-for="(subItem,subIndex) in item.list" :key="subIndex">
					<text class="text-[28rpx] text-[#333]">{{subItem.title}}</text>
					<text class="text-[28rpx] text-[#333]">{{ subItem.value }}</text>
				</view>
			</view>

			<view class="fixed bottom-[30rpx] primary-btn-bg text-[#fff] flex-center !text-[26rpx] rounded-[50rpx] h-[80rpx] left-[20rpx] right-[20rpx] font-500" @click="verifyFn">确定</view>
        </block>
		<loading-page :loading="loading"></loading-page>
    </view>
</template>

<script setup lang="ts">
    import { ref } from 'vue';
    import { onLoad ,onShow} from '@dcloudio/uni-app'
	import { img,redirect, getToken } from '@/utils/common';
    import { getVerifierInfo, getCheckVerifier, verify } from '@/app/api/verify'
    import { t } from '@/locale'

    const loading = ref(true)
	const code = ref('');
    onLoad((option:any)=> {
	    if (option.code) code.value = option.code;
	    // 小程序扫码进入
	    if (option.scene) {
		    let sceneParams: any = decodeURIComponent(option.scene).split('&');
		    if (sceneParams.length) {
			    sceneParams.forEach((item: any) => {
				    if (item.indexOf('code') != -1) code.value = item.split('-')[1];
			    });
		    }
	    }
    })

	onShow(() => {
		if(getToken()){
			checkIsVerifier();
			getVerifierInfoFn();
		}
	})

	// 检测是否是核销员
	const checkIsVerifier = () => {
		getCheckVerifier().then((res:any) =>{
			if(!res.data){
				uni.showToast({
					title: '非核销员无此权限',
					icon: 'none'
				});
				setTimeout(() => {
					if(getCurrentPages().length > 1){
                        uni.navigateBack({
                            delta: 1
                        });
                    }else{
                        redirect({
                            url: '/app/pages/member/index',
                            mode: 'reLaunch'
                        });
                    }
				}, 1000);
			}else{
				loading.value = false;
			}
		})
	}

	const verifyInfo = ref({})
	const getVerifierInfoFn = ()=>{
		loading.value = true;
		getVerifierInfo({ code : code.value }).then((res:any) =>{
			verifyInfo.value = res.data;
			loading.value = false;
		}).catch(() => {
            setTimeout(() => {
            	loading.value = false;
            	redirect({ url: '/app/pages/verify/index', param: {}, mode: 'redirectTo' })
            }, 1000);
        })
	}
	let isLoading = false;
	const verifyFn = ()=>{
		if(isLoading) return false;
		isLoading = true;

		verify(code.value).then((res:any) =>{
			uni.showToast({
				title: '核销成功',
				icon: 'none'
			});
			setTimeout(() => {
				isLoading = false;
				redirect({ url: '/app/pages/verify/index', param: {}, mode: 'redirectTo' })
			}, 1000);
		}).catch(() => {
            isLoading = false;
        })
	}
</script>

<style lang="scss" scoped>
</style>
