<template>
	<view>
		<view class="bg-img  flex align-center"
			:style="'background-image: url('+imgURL+ (card.oilCardType==2?'card-zs.png':'card-other.png')+');'">
			<view class="padding-xl text-white">
				<view class="padding-xs  text-bold">
				<!-- 	<text v-show="card.oilCardType==2">
						直属油卡
					</text>
					<text v-show="card.oilCardType==3">
						外请油卡
					</text>
					<text v-show="card.oilCardType==1">
						个人油卡
					</text> -->
					油豆
				</view>
				<view class="padding-xs padding-top-lg padding-bottom text-xxl">
					{{card.accountCardCode|cardNoFormat}}
				</view>
				<view class="padding-xs" v-if="card.companyId">
					{{card.companyName}}
				</view>
				
				<view class="padding-xs text-lg">
					<text class="text-df">账户余额:</text>
					<text class="text-xl text-bold padding-left-xs" v-if="card.shareCompanyQuota==1">
						共享余额
					</text>
					<text class="text-xl text-bold padding-left-xs" v-else>
						{{card.balance|moneyFormat}} 个
					</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			card: {
				type: Object,
				default () {}
			}
		},
		data() {
			return {
				imgURL: this.global.imgURL,
			}
		},
		methods: {

		},
		filters:{
			moneyFormat(value) {
				if (value) {
					return value.toFixed(2)
				} else {
					return '0.00'
				}
			},
			cardNoFormat(value) {
				if (value) {
					return value.replace(/(.{4})/g,'$1 ')
				}
			}
		}
	}
</script>

<style scoped>
	.bg-img {
		background-position: inherit;
		background-size: cover;
	}
	.hidden-2{
		opacity: 0;
	}
</style>
