<template>
	<view >
		<view class="bg-img boxsingForCard  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>
					<text style="margin-left: 15rpx;padding: 10rpx 15rpx;border-radius: 15rpx;color: #FF6700;background-color: #FFFFFF;font-size: 20rpx;">{{card.companyType|companyType}}</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 class="inCard" v-if="card.oilCardType==3" @tap='gotocard'>
					 <text>转卡</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			card: {
				type: Object,
				default () {}
			}
		},
		data() {
			return {
				imgURL: this.global.imgURL,
			}
		},
		methods: {
			gotocard(){
				if(this.card.oilCardType==3&&this.card.shareCompanyQuota==0){
									let card = JSON.stringify(this.card)
									uni.redirectTo({
										 url:'../../pages/oilCards/oliout?card='+card
									})
								}else{
										uni.showToast({
											title: '当前油卡为共享企业余额，不能进行此操作！',
											icon: "none"
										})
								}
			}
		},
		filters:{
			companyType(e){
				if(e) e=Number(e)
				switch(e){
					case 0:
					return '柴油账户'
					break;
					case 1:
					return '汽油账户'
					break;
					case 2:
					return 'LNG账户'
					break;
					case 3:
					return '尿素'
					break;
				}
			},
			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>
	.boxsingForCard{
		position: relative;
	}
	.inCard{
		  position: absolute;
		  right: 11%;
		  bottom: 17%;
		  width: 140rpx;
		  height: 55rpx;
		  background-color: #FFFFFF;
		  border-radius: 20rpx;
		  color: red; 
		  display: flex;
		  justify-content: center;
		  align-items: center;
	}
	.bg-img {
		background-position: inherit;
		background-size: cover;
	}
	.hidden-2{
		opacity: 0;
	}
</style>
