<template>
	<view class="item">
		<view class="u-flex">
			<view class="color-333 u-flex font-bold">
				<view class="u-font-40">{{ to2(data.amount) }}</view>
				<view>元</view>
			</view>
			<view class="u-font-24 u-m-l-20 color-999 id">ID:{{ data.id }}</view>
		</view>
		<view class="u-m-t-32 u-p-22 desc" v-if="returnSendStr.length">
			<text class="color-999">充值赠送</text>
			<text class="u-m-l-16 color-333">
				{{ returnSendStr.join('、') }}
			</text>
		</view>
		<view class="u-flex u-row-right u-m-t-32 gap-20" v-if="isCanEdit">
			<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 { reactive, ref, computed, watch, onMounted, onUnmounted } from 'vue'
import myButton from '@/components/my-components/my-button.vue'
const props = defineProps({
	index: {
		type: Number,
		default: -1
	},
	data: {
		type: Object,
		default: () => {
			return {}
		}
	},
	isCanEdit: {
		type: Boolean,
		default: false
	}
})
const emits = defineEmits(['del']);
function del() {
	emits('del', {
		index: props.index,
		data: props.data
	});
}
function toEdit() {
	uni.setStorageSync('rechargeCouponInfoListDetail', props.data);
	go.to('PAGES_RECHARGE_ADD_RECHARGE');
}
function to2(n) {
	return Number(n).toFixed(2);
}

// 返回赠送优惠券总数
function returnCouponCount() {
	let num = 0;
	props.data.couponInfoList.map((item) => {
		num += item.num;
	});
	return num;
}

const returnSendStr = computed(() => {
	let arr = [];
	if (props.data.rewardAmount > 0) {
		arr.push(`${props.data.rewardAmount}元`);
	}
	if (props.data.couponInfoList.length > 0) {
		arr.push(`${returnCouponCount()}张券`);
	}
	return arr;
});
</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>
