<template>
	<view class="" v-if="items.length>0">
		<navigator v-for="(item, index) in items" :key="index" hover-class="none"
			:url="'/pages/item/detail?id='+item.id">
			<view class="bg-[#2C326B] rounded-lg mb-[30rpx] overflow-hidden">
				<view class="p-[20rpx] rounded-lg overflow-hidden">
					<u-image width="100%" mode="widthFix" :src="item.image" alt="" />
				</view>

				<view class="p-[20rpx] pt-0">
					<view class="font-bold truncate">
						{{ item.title }}
					</view>
					<view class="flex justify-between items-center">
						<view class="">
							<view class="mt-[20rpx]">
								<text class="mr-[10rpx] text-[#00D2E0]">{{t('item.cycle')}}:</text><text
									class="mr-[10rpx] ">{{ item.cycle }}</text>
								<text v-if="item.type==1 || item.type==2" class="">{{t('item.days')}}</text>
								<text v-if="item.type==3 || item.type==4" class="">{{t('item.hour')}}</text>
							</view>
							<view class="mt-[10rpx]">
								<text class="mr-[10rpx] text-[#00D2E0]">
									<text v-if="item.type==1">{{t('item.dailyRate')}}:</text>
									<text v-if="item.type==4">{{t('item.hourRate')}}:</text>
									<text v-if="item.type==2 || item.type==3">{{t('item.totalRate')}}:</text>
								</text>

								<text class="">{{ item.rate }}%</text>
							</view>
							<view class="mt-[10rpx]">
								<text class="mr-[10rpx] text-[#00D2E0]">{{t('item.limitVip')}}:</text>
								<text class="">{{ item.vip_name }}</text>
							</view>
							<!-- <view class="mt-[10rpx]">
								{{t("item.type" + item.type)}}
							</view> -->
						</view>
						<view class="mt-[20rpx]">
							<u-circle-progress width="180" bg-color="#2C326B" active-color="#4E55AF"
								:percent="item.progress">
								<view class="u-progress-content">
									<view class="u-progress-dot"></view>
									<text class='u-progress-info'>{{item.progress}}%</text>
								</view>
							</u-circle-progress>
						</view>
					</view>
				</view>
			</view>
		</navigator>
	</view>
</template>

<script setup lang="ts">
	import { useAppStore } from '@/stores/app'
	import { t } from '@/utils/util'

	const props = defineProps({
		items: {
			type: Object,
			default: () => ({})
		},
	})
</script>

<style></style>