<template>
	<div class="deepDigContainer">
		<div class="row">
			<div class="panelButtonList">
				<div
					class="item"
					:class="{ activeItem: activePanelId === item.id }"
					v-for="item in panelListData"
					:key="item.id"
					@click="setActivePanelId(item.id)"
				>
					<div
						class="line"
						:class="{
							lineActive: activePanelId === item.id,
							lineUp: activePanelId !== item.id && item.isUp,
							lineDown: activePanelId !== item.id && !item.isUp
						}"
					></div>
					<div class="infoWrap">
						<div
							class="number"
							:class="{
								numberActive: activePanelId === item.id,
								numberUp: activePanelId !== item.id && item.isUp,
								numberDown: activePanelId !== item.id && !item.isUp
							}"
						>
							{{ item.number }}
						</div>
						<div class="name">{{ item.name }}</div>
					</div>
					<div class="text">较上次{{ item.isUp ? "增加" : "减少" }}{{ item.ComparisonNumber }}个</div>
					<div
						class="icon"
						:class="{
							iconActiveUp: activePanelId === item.id && item.isUp,
							iconActiveDown: activePanelId === item.id && !item.isUp,
							iconUp: activePanelId !== item.id && item.isUp,
							iconDown: activePanelId !== item.id && !item.isUp
						}"
					></div>
				</div>
			</div>
		</div>
		<div class="row">
			<panel1 v-if="activePanelId === panelListData[0].id"></panel1>
			<panel2 v-if="activePanelId === panelListData[1].id"></panel2>
			<panel3 v-if="activePanelId === panelListData[2].id"></panel3>
			<panel4 v-if="activePanelId === panelListData[3].id"></panel4>
		</div>
	</div>
</template>

<script setup>
import { ref } from "vue";
import Panel1 from "../components/panel1.vue";
import Panel2 from "../components/panel2.vue";
import Panel3 from "../components/panel3.vue";
import Panel4 from "../components/panel4.vue";
const panelListData = [
	{
		id: 1,
		name: "新增实体数量",
		number: "37",
		isUp: true,
		ComparisonNumber: "31"
	},
	{
		id: 2,
		name: "上市企业数量",
		number: "6",
		isUp: true,
		ComparisonNumber: "2"
	},
	{
		id: 3,
		name: "涉及领域数量",
		number: "2",
		isUp: false,
		ComparisonNumber: "1"
	},
	{
		id: 4,
		name: "实体类别数量",
		number: "4",
		isUp: true,
		ComparisonNumber: "1"
	}
];
const activePanelId = ref(panelListData[0].id);
const setActivePanelId = id => {
	activePanelId.value = id;
};
</script>

<style lang="scss" scoped>
.deepDigContainer {
	width: 1600px;
	margin: 0px auto 0 auto;
	padding-bottom: 20px;
}
.row {
	display: flex;
	flex-direction: row;
	gap: 16px;
	margin-top: 15px;
}
.panelButtonList {
	display: flex;
	justify-content: center;
	gap: 16px;
	.item {
		width: 388px;
		height: 80px;
		border-radius: 4px;
		box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
		background: rgba(255, 255, 255, 1);
		display: flex;
		align-items: center;
		cursor: pointer;
		.line {
			width: 4px;
			height: 49px;
			margin-right: 26px;
		}
		.lineActive {
			background-color: rgba(255, 255, 255, 1);
		}
		.lineUp {
			background-color: rgba(206, 79, 81, 1);
		}
		.lineDown {
			background-color: rgba(33, 129, 57, 1);
		}
		.infoWrap {
			flex: 1;
			display: flex;
			flex-direction: column;
			.number {
				font-size: 30px;
				font-weight: 700;
				line-height: 24px;
			}
			.numberActive {
				color: rgba(255, 255, 255, 1);
			}
			.numberUp {
				color: rgba(206, 79, 81, 1);
			}
			.numberDown {
				color: rgba(33, 129, 57, 1);
			}
			.name {
				color: rgba(34, 41, 52, 1);
				font-size: 16px;
				font-weight: 400;
				line-height: 24px;
			}
		}
		.text {
			color: rgba(34, 41, 52, 1);
			font-size: 14px;
			font-weight: 400;
			line-height: 22px;
		}
		.icon {
			width: 32px;
			height: 32px;
			margin-right: 15px;
			margin-left: 8px;
			background-size: 100% 100%;
		}
		.iconActiveUp {
			background-image: url("../../assets/images/activeUp.png");
		}
		.iconActiveDown {
			background-image: url("../../assets/images/activeDown.png");
		}
		.iconUp {
			background-image: url("../../assets/images/UnActiveUp.png");
		}
		.iconDown {
			background-image: url("../../assets/images/UnActiveDown.png");
		}
	}
	.activeItem {
		background-color: rgba(5, 95, 194, 1);
		.infoWrap {
			.name {
				color: rgba(255, 255, 255, 1);
			}
		}
		.text {
			color: rgba(255, 255, 255, 1);
		}
	}
}
</style>
