 <template>
	<div class="summary-cards-panel" :style="{ width: panelWidth }" v-loading="loading">
		<div class="date-box">
			<div class="date-icon" v-if="tipIcon">
				<img :src="tipIcon" alt="" />
			</div>
			<div class="date-text">{{ descriptionText }}</div>
			<TimeTabPane @time-click="onTimeClick" :activeTime="activeTime" />
		</div>

		<div class="cards-box" v-if="cards.length">
			<div class="summary-item" v-for="item in cards" :key="item.id || item.name">
				<div class="item-left">
					<img :src="item.avatar || defaultAvatar" alt="" />
				</div>
				<div class="item-center" @click="emit('name-click', item)">
					<div class="item-name one-line-ellipsis">{{ item.name }}</div>
					<div v-if="item.subText" class="item-sub-text one-line-ellipsis">{{ item.subText }}</div>
				</div>
				<el-popover content="跳转至数据资源库" placement="top">
					<template #reference>
						<div class="item-total" @click="emit('count-click', item)">{{ item.count }}{{ countSuffix }}</div>
					</template>
				</el-popover>
				<el-icon color="var(--color-primary-100)">
					<ArrowRightBold />
				</el-icon>
				<div class="item-dot" v-if="item.delta">+{{ item.delta }}</div>
			</div>

			<div v-if="shouldShowMoreCard" class="summary-item" @click="emit('more-click')">
				<div class="item-more">{{ moreText }} ({{ totalCount }}家)</div>
				<el-icon color="var(--color-primary-100)">
					<ArrowRightBold />
				</el-icon>
			</div>
		</div>

		<div v-else class="cards-empty">
			<el-empty :description="emptyText" :image-size="80" />
		</div>
	</div>
</template>

<script setup>
import TimeTabPane from "@/components/base/TimeTabPane/index.vue";
import { ArrowRightBold } from "@element-plus/icons-vue";

import { computed } from "vue";

const props = defineProps({
	descriptionText: {
		type: String,
		default: ""
	},
	cards: {
		type: Array,
		default: () => []
	},
	totalCount: {
		type: Number,
		default: 0
	},
	showMoreCard: {
		type: Boolean,
		default: true
	},
	moreCardMinCount: {
		type: Number,
		default: 8
	},
	emptyText: {
		type: String,
		default: "暂无数据"
	},
	activeTime: {
		type: String,
		default: "近一年"
	},
	tipIcon: {
		type: String,
		default: ""
	},
	defaultAvatar: {
		type: String,
		default: ""
	},
	countSuffix: {
		type: String,
		default: "项"
	},
	moreText: {
		type: String,
		default: "查看全部机构"
	},
	panelWidth: {
		type: String,
		default: "1600px"
	},
	loading: {
		type: Boolean,
		default: false
	}
});

const emit = defineEmits(["time-click", "name-click", "count-click", "more-click"]);

const shouldShowMoreCard = computed(() => {
	if (!props.showMoreCard) return false;
	if (props.moreCardMinCount <= 0) return true;
	return (props.cards?.length || 0) >= props.moreCardMinCount;
});

const onTimeClick = event => {
	emit("time-click", event);
};
</script>

<style scoped lang="scss">
.summary-cards-panel {
	margin: 48px auto 0;

	.date-box {
		display: flex;
		align-items: center;

		.date-icon {
			width: 16px;
			height: 16px;
			font-size: 0;
			margin-right: 6px;

			img {
				width: 100%;
				height: 100%;
			}
		}

		.date-text {
			width: 20px;
			flex: auto;
			font-size: 18px;
			line-height: 18px;
			font-family: Source Han Sans CN;
			color: var(--text-primary-80-color);
		}
	}

	.cards-box {
		margin: 20px 0 64px;
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		grid-auto-rows: 80px;
		gap: 16px;
		font-family: Microsoft YaHei;

		.summary-item {
			padding: 0 16px;
			display: flex;
			box-sizing: border-box;
			background: rgba(255, 255, 255, 0.65);
			border: 1px solid rgba(255, 255, 255, 1);
			border-radius: 10px;
			box-shadow: 0 0 20px 0 rgba(25, 69, 130, 0.1);
			align-items: center;
			justify-content: center;
			cursor: pointer;
			transition: transform 0.3s ease, box-shadow 0.3s ease;
			position: relative;

			&:hover {
				transform: translateY(-3px);
				box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
			}

			.item-left {
				width: 48px;
				height: 48px;
				font-size: 0;

				img {
					width: 100%;
					height: 100%;
				}
			}

			.item-center {
				width: 20px;
				flex: auto;
				margin: 0 16px;
				cursor: pointer;
			}

			.item-name {
				color: rgba(59, 65, 75, 1);
				font-size: 20px;
				font-weight: 700;
				line-height: 20px;

				&:hover {
					color: var(--color-primary-100);
					text-decoration: underline;
				}
			}

			.item-sub-text {
				margin-top: 6px;
				color: var(--text-primary-50-color);
				font-size: 14px;
				line-height: 18px;
			}

			.item-total {
				font-size: 20px;
				margin-right: 2px;
				white-space: nowrap;
				font-weight: 700;
				line-height: 20px;
				color: var(--color-primary-100);

				&:hover {
					text-decoration: underline;
				}
			}

			.item-more {
				font-size: 16px;
				margin-right: 12px;
				white-space: nowrap;
				font-weight: 700;
				line-height: 16px;
				color: var(--color-primary-100);
			}

			.item-dot {
				position: absolute;
				right: -13px;
				top: -10px;
				padding: 0 8px;
				height: 26px;
				background-color: #ff4d4f;
				color: white;
				font-size: 16px;
				line-height: 26px;
				font-family: Source Han Sans CN;
				border-radius: 14px;
				letter-spacing: 1px;
			}
		}
	}

	.cards-empty {
		margin: 20px 0 64px;
		height: 120px;
		display: flex;
		align-items: center;
		justify-content: center;
		background: rgba(255, 255, 255, 0.65);
		border: 1px solid rgba(255, 255, 255, 1);
		border-radius: 10px;
		box-shadow: 0 0 20px 0 rgba(25, 69, 130, 0.1);
	}
}
</style>
