<template>
	<div class="deepDigContainer">
		<div class="row">
			<div class="panelButtonList">
				<div
					class="item"
					:class="{ activeItem: activePanelId === item.id }"
					v-for="item in compareCountSan"
					: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 === compareCountSan[0]?.id"></panel1>
			<panel2 v-if="activePanelId === compareCountSan[1]?.id"></panel2>
			<panel3 v-if="activePanelId === compareCountSan[2]?.id"></panel3>
			<panel4 v-if="activePanelId === compareCountSan[3]?.id"></panel4>
		</div>
	</div>
</template>

<script setup>
import { ref, onMounted, shallowRef } 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";
import { getCompareCountSan } from "@/api/exportControl";
import { useRoute } from "vue-router";
const route = useRoute();
const compareCountSan = shallowRef([]);
const activePanelId = ref(null);
onMounted(async () => {
	try {
		const [compareCountSanData] = await Promise.all([getCompareCountSan(route.query.startTime)]);
		// const { countSanNow, countSanLast, countDomainNow, countDomainLast, countTypeNow, countTypeLast } =
		// 	compareCountSanData ?? {};

		const { entityNum, entityChange, listedCompanyNum, listedCompanyChange, domainNum, domainChange, typeNum, typeChange } =
			compareCountSanData ?? {};
		compareCountSan.value = [
			{
				id: 1,
				name: "新增实体数量",
				number: entityNum,
				isUp: entityChange >= 0,
				ComparisonNumber: Math.abs(entityChange)
			},
			{
				id: 2,
				name: "上市企业数量",
				number: listedCompanyNum,
				isUp: listedCompanyChange >= 0,
				ComparisonNumber: Math.abs(listedCompanyChange)
			},
			{
				id: 3,
				name: "涉及领域数量",
				number: domainNum,
				isUp: domainChange >= 0,
				ComparisonNumber: Math.abs(domainChange)
			},
			{
				id: 4,
				name: "实体类别数量",
				number: typeNum,
				isUp: typeChange >= 0,
				ComparisonNumber: Math.abs(typeChange)
			}
		];
		activePanelId.value = compareCountSan.value[0].id;
	} catch (err) {
		console.log(err);
	}
});

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>
