<template>
	<view class=" item">
		<view class="u-flex ">
			<view class="color-333 u-flex font-bold ">
				<view class="u-font-40">{{to2(props.data.price) }}</view>
				<view>元</view>
			</view>
			<view class="u-font-24 u-m-l-20 color-999 id">
				id:{{props.data.id}}
			</view>
		</view>

		<view class="u-m-t-32 u-p-22 desc">
			<text class="color-999">充值赠送</text>
			<text class="u-m-l-16 color-333">{{props.data.desc}}</text>
		</view>
		<view class="u-flex u-row-right u-m-t-32 gap-20">
			<view class="" style="width: 140rpx;">
				<my-button plain height="56" type="cancel" shape="circle" @tap="del">删除</my-button>
			</view>
			<view class="" style="width: 140rpx;">
				<my-button height="56" shape="circle" @tap="toEdit">编辑</my-button>
			</view>

		</view>

	</view>
</template>

<script setup>
	import go from '@/commons/utils/go.js';
	import myButton from '@/components/my-components/my-button.vue'
	const props = defineProps({
		index:{
			type:Number,
			default:-1
		},
		data: {
			type: Object,
			default: () => {
				return {}
			}
		}
	})
	const emits=defineEmits(['del'])
	function del(){
		emits('del',{
			index:props.index,
			data:props.data
		})
	}
	function toEdit(){
		go.to('PAGES_USER_DEPOSIT_ADD_RECHARGE',{...props.data})
	}
	function to2(n) {
		return Number(n).toFixed(2)
	}
</script>

<style lang="scss" scoped>
	.item {
		padding: 32rpx 24rpx;
		background: #FFFFFF;
		border-radius: 18rpx 18rpx 18rpx 18rpx;
		overflow: hidden;

		.desc {
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			background-color: #F9F9F9;
		}

		.id {
			background: #F7F7FA;
			border-radius: 4rpx 4rpx 4rpx 4rpx;
			padding: 4prx 10rpx;
			overflow: hidden;
		}
	}
</style>