<template>
	<div
		:class="prefixCls"
		@click="$emit('support')">
		<div :class="`${prefixCls}-image`">
			<a-image
				width="100%"
				height="250px"
				:preview="false"
				:src="data.coverUrl" />
		</div>
		<div :class="`${prefixCls}-wrap`">
			<div :class="`${prefixCls}-title`">{{ data.title }}</div>
			<div :class="`${prefixCls}-desc`">{{ data.profile }}</div>
			<a-divider></a-divider>
			<div :class="`${prefixCls}-money`">
				{{ $t('common.money') }}
			</div>
			<a-progress
				track-color="#333"
				size="large"
				:percent="percent">
			</a-progress>
			<div :class="`${prefixCls}-progress`">
				<div :class="`${prefixCls}-progress-left`">
					<span>{{ `USDT ${data.haveAmount || 0}` }}</span>
					{{ `/ USDT ${data.amount}` }}
				</div>
				<!-- <mf-button
					type="primary"
					shape="round"
					size="large"
					@click="$emit('support')"
					v-if="type == 'projects'">
					{{ $t('common.supportProject') }}
				</mf-button> -->
				<div :class="`${prefixCls}-progress-right`">
					{{ $t('common.remainingDay', { total: data.days }) }}
				</div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	name: 'mf-card',
	data() {
		return {
			prefixCls: 'mf-card'
		}
	},
	props: {
		data: {
			type: Object,
			default: () => {}
		},
		type: {
			type: String,
			default: ''
		}
	},
	computed: {
		percent() {
			return parseFloat(
				((this.data.haveAmount || 0) / this.data.amount).toFixed(3)
			)
		}
	}
}
</script>

<style lang="less" scoped>
.mf-card {
	background: #111111;
	border-radius: 20px;
	overflow: hidden;
	height: 500px;
	border: 2px solid transparent;
	background: linear-gradient(#000, #000) padding-box,
		linear-gradient(118deg, #049ceb 0%, #00fff0 100%) border-box;
	cursor: pointer;
	transition: all 0.3s ease;

	:deep(.arco-image-error) {
		background-color: transparent;
	}
	.arco-image {
		transform: scale(1);
		transition: all 1s;
	}
	&:hover {
		transform: translateY(-5px);
		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);

		.arco-image {
			transform: scale(1.2);
		}
	}

	&-image {
		overflow: hidden;
		height: 250px;
	}

	&-title {
		font-size: 20px;
		color: #ffffff;
		margin-bottom: 16px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	&-desc {
		font-size: 14px;
		color: #999999;
		line-height: 24px;
		height: 24px;
	}

	&-money {
		font-size: 14px;
		color: #ffffff;
		line-height: 24px;
		margin-bottom: 20px;
	}

	&-progress {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 16px;
		&-left {
			font-size: 14px;
			line-height: 24px;
			color: #ffffff;
			span {
				color: rgb(var(--primary-6));
			}
		}

		&-right {
			font-size: 14px;
			color: #999999;
			line-height: 24px;
		}
	}

	&-wrap {
		padding: 24px 20px;

		.arco-divider {
			border-bottom-color: rgba(255, 255, 255, 0.1);
		}

		:deep(.arco-progress-line) {
			&-bar {
				background: linear-gradient(84deg, #049ceb 0%, #00fff0 100%);
			}
			&-text {
				color: #999999;
			}
		}
	}
}
</style>
