<template>
	<view class="balance-list-container">
		<view>
			<view v-for="item in props.list" :key="item.name" class="balance-item"
				:class="{ 'flex-align-center': isBalance }">
				<image class="img" :src="item.imgUrl" mode="aspectFill"></image>
				<view class="balance-item-text-container">
					<view class="balance-item-text">
						<view>
							<text class="name">{{ item.name }}</text>
						</view>
						<view v-if="item.classification">
							<text class="time secondary">{{ item.classification }}</text>
						</view>
						<view>
							<text class="time secondary">{{ item.time }}</text>
						</view>

					</view>
					<view class="balance-item-text text-right" :class="{ 'flex-between': isBalance }">
						<view class="money alipay-font"
							:class="item.isAdd ? (isBalance ? 'add-color' : 'red-add-color') : 'minus-color'">
							{{ item.isAdd ? '+' : '-' }}{{ Number(item.money).toFixed(2) }}
						</view>
						<view v-if="item.isRefund" class="refund">已全额退款</view>
						<view v-if="isBalance" class="balance secondary">余额 <text class="balance-text">{{
                            Number(item.balance).toFixed(2)
                                }}</text>元</view>
					</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script setup>
	import {
		defineProps,
		defineEmits,
		onMounted,
		reactive
	} from 'vue'

	// 定义组件属性
	const props = defineProps({
		list: {
			type: Array,
			default: () => []
		},
		isBalance: {
			type: Boolean,
			default: true
		}
	})

	// 定义事件
	const emit = defineEmits(['onBill'])

	const data = reactive({})

	onMounted(() => {})
</script>

<style>
	/* @import '../../common/main.css'; */
</style>

<style lang="less">
	.balance-list-container {
		width: 100%;
	}

	.balance-item {
		display: flex;
		width: 100%;
		flex-direction: row;
		padding: 0;

		.balance-item-text-container {
			flex: 1;
			display: flex;
			justify-content: space-between;
			margin-left: 12px;
			box-shadow: 0 0.3px 0 0 #F0F0EE;
			padding: 12px 12px 12px 0;
		}

		.img {
			margin: 12px 0;
			width: 30px;
			height: 30px;
			border-radius: 50%;
			margin-left: 12px;
		}

		.balance-item-text {
			display: flex;
			flex-direction: column;
			// justify-content: space-between;

			.name {
				color: #343434;
			}

			.secondary {
				color: var(--text-secondary);
				font-size: 12px;
			}

			.money {
				font-size: 17px;
				font-weight: 500;
			}

			.add-color {
				color: #F6610F;
			}

			.red-add-color {
				color: #F53646;
			}

			.minus-color {
				color: #333333;
			}


			.balance-text {
				margin-right: 2px;
			}
		}


		.refund {
			color: #EA6B48;
			font-size: 12px;
		}

		.text-right {
			align-items: flex-end;
		}
	}
</style>