<template>
	<div :class="['clickable-card', { disabled: disabled }]" @click="handleClick">
		<span class="card-text">{{ text }}</span>
		<!-- <span class="arrow-icon">→</span> -->
		<div class="icon">
			<el-icon><ArrowRightBold /></el-icon>
		</div>
	</div>
</template>

<script setup>
import { ArrowRight, ArrowRightBold } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";

const router = useRouter();

const props = defineProps({
	text: {
		type: String,
		default: "点击跳转"
	},
	link: {
		type: String,
		default: ""
	},
	target: {
		type: String,
		default: "_self"
	},
	disabled: {
		type: Boolean,
		default: false
	}
});

const emit = defineEmits(["click"]);

const handleClick = () => {
	if (props.disabled) return;

	emit("click");

	if (props.link) {
		if (props.link.startsWith("http") || props.link.startsWith("//")) {
			// 外部链接
			window.open(props.link, props.target);
		} else {
			router.push(props.link);
			console.log(`跳转到: ${props.link}`);
		}
	}
};
</script>

<style lang="scss" scoped>
.clickable-card {
	width: 160px;
	height: 48px;
	border-radius: 32px;
	border: 1px solid rgba(174, 214, 255, 1);
	background-color: rgba(231, 243, 255, 1);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	/* padding: 0 16px; */
	cursor: pointer;
	transition: all 0.3s ease;
	color: rgba(5, 95, 194, 1);
	font-size: 20px;
	font-weight: 500;
	box-sizing: border-box;
	position: relative;
	.icon{
		position: absolute;
		top: 14px;
		right: 12px;
	}
}

.clickable-card:hover {
	background-color: rgba(231, 243, 255, 0.5);
	box-shadow: 0 2px 8px rgba(5, 95, 194, 0.1);
	transform: translateY(-2px);
}

.clickable-card:active {
	transform: translateY(0);
	box-shadow: 0 1px 4px rgba(5, 95, 194, 0.1);
}

.clickable-card.disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.clickable-card.disabled:hover {
	background-color: white;
	box-shadow: none;
	transform: none;
}

.arrow-icon {
	font-weight: bold;
	font-size: 16px;
}
</style>
