<template>
	<view class="expense_card">
		<view class="expense_card_header">
			{{month}}
		</view>
		<view class="expense_card_content">
			<view class="" v-for="( personExpense, index) in personExpenseList" :key="index" @click="viewDetailInfo(personExpense.id)">
				<view class="expense_card_date">
					{{formatDate(personExpense.costDate)}}
				</view>
				<view class="flex_center flex_sb">
					<view class="">
						{{personExpense.costTypeLabel || ''}}
					</view>
					<view class="flex_center">
						<view style="font-size: 36rpx; font-weight: bolder;">
							{{personExpense.amount || 0}}
						</view>
						<view style="margin-left: 8rpx;">
							元
						</view>
					</view>
				</view>
				<u-line margin="40rpx 0" v-if="index !== personExpenseList.length-1" color="#F0F0F0"></u-line>
			</view>
		</view>


	</view>
</template>

<script>
	import {
		formatGMT
	} from '../../utils/util.js'
	export default {
		name: "expenseCard",
		data() {
			return {

			};
		},
		props: {
			personExpenseList: {
				default: []
			},
			month: {
				default: ''
			}
		},
		methods: {
			formatDate(date) {
				const weekDay = ['日', '一', '二', '三', '四', '五', '六']
				return formatGMT(date, 'D') + ' ' + '周' + weekDay[new Date(date).getDay()] + ' ' + formatGMT(date, 'H')
			},
			viewDetailInfo(id){
				uni.navigateTo({
					url: `/subpkg/personExpenseDetail/personExpenseDetail?id=${id}`
				})
			}
		}
	}
</script>

<style lang="scss">
	.expense_card {
		.expense_card_header {
			color: #262626;
			font-weight: bolder;
			font-size: 32rpx;
			padding-left: 24rpx;
			padding-top: 32rpx;
			padding-bottom: 16rpx;
			background-color: #FAFAFA;
		}
		.expense_card_date{
			color: #8C8C8C;
			font-size: 28rpx;
			margin-bottom: 14rpx;
		}
		.expense_card_content {
			padding: 42rpx 24rpx;
			color: #434343;
			font-size: 28rpx;
			background-color: #FFFFFF;
		}
	}
</style>
