<template>
	<view class="card-box" :style="getMath">
		<view class="">
			<view class="card-box_title">{{data.name}}</view>
			<view class="card-box_title_label">{{data.bankName}}</view>
		</view>
		<view class="card-box_number"> **** **** **** {{data.account.substr(data.account.length-4) }}</view>
	</view>
</template>

<script>
	export default {
		props: {
			data: {
				default: () => {},
				type: Object
			},
index: {
				default: null,
				type: Number
			},
		},
		data() {
			return {
				bgColor: [
					['1668D6', '5899EB'],
					['F74942', 'FE856E'],
					['028EAF', '5899EB'],
					['99A98F', 'C1D0B5'],
				]
			}
		},
		computed: {
			getMath() {
				const index = this.index? 0:  Math.floor(Math.random() * 4);
				const c = `;`
				return {
					background: `linear-gradient(295deg, #${this.bgColor[index][0]} 0%, #${this.bgColor[index][1]} 100%)`
				}
			}

		},
		methods: {


		},
		components: {

		},
	}
</script>

<style lang="scss">
	@import "@/font.css";

	.card-box {
		border-radius: 20upx;
		font-family: 'Product-Sans-Bold';
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding: 20upx;
		margin: 20upx;
		font-weight: 500;
		color: #fff;

		height: 240upx;

		&_title {
			font-size: 42upx;
			font-weight: 600;
			color: #dbe3e8;
		}

		&_title_label {
			font-size: 28upx;
			font-weight: 400;
		}

		&_number {
			text-align: center;
			font-size: 66upx;
			font-weight: 600;
			vertical-align: bottom;
		}
	}
</style>
