<template>
	<view class="expenseReceiptCard" @click="viewDetailInfo">
		<view class=" flex_center flex_sb">
			<view class="expenseReceiptCard_date">
				{{insertDate}}
			</view>
			<view class="expenseReceiptCard_label"
				:style="expenseReceiptInfo.statusLabel === '已通过'?'color: rgba(39, 196, 136, 1); background-color: rgba(39, 196, 136, .1)':(expenseReceiptInfo.statusLabel === '未通过'?'color: rgba(235, 47, 72, 1); background-color: rgba(235, 47, 72, .1)':(expenseReceiptInfo.statusLabel === '审核中'?'color: rgba(247, 166, 74, 1); background-color: rgba(247, 166, 74, .1)':''))">
				{{expenseReceiptInfo.statusLabel}}
			</view>
		</view>
		<u-line margin="18rpx 0 7rpx 0" color="#E5E5E5"></u-line>
		<view class="flex_center">
			<image src="../../static/img/icon/money.png" style="width: 80rpx; height: 80rpx; margin-left: -16rpx;">
			</image>
			<view style="margin-right: 8rpx; font-size: 36rpx; color: #434343; font-weight: bolder;">
				{{expenseReceiptInfo.amount || 0}}
			</view>
			元
		</view>
		<view class="expenseReceiptCard_billNo">
			报销单号：{{expenseReceiptInfo.billNo}}
		</view>

	</view>
</template>

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

			};
		},
		props: {
			expenseReceiptInfo: {
				default: {}
			}
		},
		computed: {
			insertDate() {
				const weekDay = ['日', '一', '二', '三', '四', '五', '六']

				return formatGMT(this.expenseReceiptInfo.insertDate, 'D') + ' ' + '周' + weekDay[new Date(this
					.expenseReceiptInfo.insertDate).getDay()] + ' ' + formatGMT(this.expenseReceiptInfo.insertDate,
					'H')
			}
		},
		methods:{
		viewDetailInfo(){
			uni.navigateTo({
				url: `/subpkg/personExpenseReceiptDetail/personExpenseReceiptDetail?id=${this.expenseReceiptInfo.id}`
			})
		}
			
		}
	}
</script>

<style lang="scss">
	.expenseReceiptCard {
		height: 268rpx;
		border-radius: 24rpx;
		box-shadow: 3rpx 1rpx 12rpx 0 rgba(0, 0, 0, 0.04);
		padding: 28rpx 24rpx;
		margin: 12rpx 24rpx;
		background-color: #FFFFFF;

		.expenseReceiptCard_date {
			color: #8C8C8C;
			font-size: 28rpx;

		}

		.expenseReceiptCard_label {
			padding: 5rpx 24rpx;
			border-radius: 8rpx;
			color: #2E75E6;
			background-color: rgba(46, 117, 230, .1);
		}

		.expenseReceiptCard_billNo {
			margin-top: 14rpx;
			color: #434343;
			font-size: 28rpx;
		}
	}
</style>
