<template>
	<div class="wrapper">
		<div class="left">
			<div class="box1">
				<div class="box-header">
					<div class="icon"></div>
					<div class="title">{{ "主要议员" }}</div>
					<div class="btn-box">
						<div class="btn" :class="{ btnActive: activeBtnIndex === 0 }">{{ "参议院" }}</div>
						<div class="btn" :class="{ btnActive: activeBtnIndex === 1 }">{{ "众议院" }}</div>
					</div>
					<div class="header-right">
						<div class="right-icon">
							<img src="@/assets/icons/box-header-icon2.png" alt="" />
						</div>
						<div class="right-icon">
							<img src="@/assets/icons/box-header-icon3.png" alt="" />
						</div>
					</div>
				</div>
				<div class="box1-main">
					<div class="box1-main-top">
						<div class="top-item" v-for="(item, index) in majorList[activeBtnIndex].data1" :key="index">
							<div class="icon">
								<img :src="item.img" alt="" />
							</div>
							<div class="name">{{ item.name }}</div>
							<div class="line" :class="{ line1: index === 0, line2: index === 1 }"></div>
							<div class="num" :class="{ num1: index === 0, num2: index === 1 }">{{ item.num }}</div>
						</div>
					</div>
					<div class="box1-main-main">
						<div
							class="item"
							:class="{ itemActive: itemActiveIndex === index }"
							v-for="(item, index) in majorList[activeBtnIndex].data2"
							:key="index"
						>
							<div class="item-left">
								<img :src="item.img" alt="" />
							</div>
							<div class="item-center">
								<div class="center-top">
									<div class="name">{{ item.name }}</div>
									<div class="icon1">
										<img :src="item.dangpai" alt="" />
									</div>
									<div class="icon2">
										<img :src="item.yuanbie" alt="" />
									</div>
								</div>
								<div class="center-footer">
									{{ item.zhiwei }}
								</div>
							</div>
							<div class="item-right">
								{{ item.num }}
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="right">
			<div class="box2">
				<div class="box-header">
					<div class="icon"></div>
					<div class="title">{{ "政治献金流向" }}</div>
					<div class="header-right">
						<div class="right-icon">
							<img src="@/assets/icons/box-header-icon1.png" alt="" />
						</div>
						<div class="right-icon">
							<img src="@/assets/icons/box-header-icon2.png" alt="" />
						</div>
						<div class="right-icon">
							<img src="@/assets/icons/box-header-icon3.png" alt="" />
						</div>
					</div>
				</div>
				<div class="box2-main" id="chart1"></div>
				<div class="box-footer">
					<div class="box-footer-left">
						<img src="@/assets/icons/box-footer-left-icon.png" alt="" />
					</div>
					<div class="box-footer-center">
						{{
							"马尔科·卢比奥的政治资金主要依赖于一个由亿万富翁、特定行业利益集团及通过​“超级政治行动委员会”​​ 运作的大额捐款网络。"
						}}
					</div>
					<div class="box-footer-right">
						<img src="@/assets/icons/box-footer-right-icon.png" alt="" />
					</div>
				</div>
			</div>
			<div class="box3">
				<div class="box-header">
					<div class="icon"></div>
					<div class="title">{{ "政治献金领域分布" }}</div>
					<div class="header-right">
						<div class="right-icon">
							<img src="@/assets/icons/box-header-icon1.png" alt="" />
						</div>
						<div class="right-icon">
							<img src="@/assets/icons/box-header-icon2.png" alt="" />
						</div>
						<div class="right-icon">
							<img src="@/assets/icons/box-header-icon3.png" alt="" />
						</div>
					</div>
				</div>
				<div class="box3-main">
					<div class="box3-main-left" id="chart2"></div>
					<div class="box3-main-right">
						<div class="box3-main-right-item" v-for="(item, index) in areaList" :key="index">
							<div class="id">{{ index + 1 }}</div>
							<div class="name">{{ item.name }}</div>
							<div class="line">
								<div class="inner-line" :style="{width: (item.num / areaList[0].num)* 100 + '%' }"></div>
							</div>
							<div class="num">{{ item.numtext }}</div>
							<div class="more">{{ `${item.insNum}家机构 >` }}</div>
						</div>
					</div>
				</div>
				<div class="box-footer">
					<div class="box-footer-left">
						<img src="@/assets/icons/box-footer-left-icon.png" alt="" />
					</div>
					<div class="box-footer-center">
						{{
							"马尔科·卢比奥的政治资金主要依赖于一个由亿万富翁、特定行业利益集团及通过​“超级政治行动委员会”​​ 运作的大额捐款网络。"
						}}
					</div>
					<div class="box-footer-right">
						<img src="@/assets/icons/box-footer-right-icon.png" alt="" />
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { ref, onMounted } from "vue";

import setChart from "@/utils/setChart";

import getPieChart from "./utils/piechart";
import getSankeyChart from "./utils/sankey"

import Img1 from "./assets/images/1.png";
import Img2 from "./assets/images/2.png";
import Img3 from "./assets/images/3.png";
import Img4 from "./assets/images/4.png";
import Img5 from "./assets/images/5.png";
import Img6 from "./assets/images/6.png";
import Img7 from "./assets/images/7.png";
import Img8 from "./assets/images/8.png";
import Img9 from "./assets/images/9.png";
import Img10 from "./assets/images/10.png";

import Cyy from "@/assets/icons/cyy.png";
import Zyy from "@/assets/icons/zyy.png";
import Ghd from "@/assets/icons/ghd.png";
import Mzd from "@/assets/icons/mzd.png";

const activeBtnIndex = ref(0);
const itemActiveIndex = ref(0);

const majorList = ref([
	{
		name: "参议院",
		data1: [
			{
				name: "共和党",
				img: Ghd,
				num: "$1,550,000"
			},
			{
				name: "民主党",
				img: Mzd,
				num: "$298,000"
			}
		],
		data2: [
			{
				img: Img1,
				name: "马尔科·卢比奥",
				dangpai: Ghd,
				yuanbie: Cyy,
				zhiwei: "众议院预算委员会主席",
				num: "$1,550,000"
			},
			{
				img: Img2,
				name: "史蒂夫·戴恩斯",
				dangpai: Ghd,
				yuanbie: Cyy,
				zhiwei: "众议院预算委员会主席",
				num: "$820,000"
			},
			{
				img: Img3,
				name: "伯尼·莫雷诺",
				dangpai: Ghd,
				yuanbie: Cyy,
				zhiwei: "众议院预算委员会主席",
				num: "$50,000"
			},
			{
				img: Img4,
				name: "戴夫·麦考密克",
				dangpai: Ghd,
				yuanbie: Cyy,
				zhiwei: "众议院预算委员会主席",
				num: "$50,000"
			},
			{
				img: Img5,
				name: "蒂姆·希伊",
				dangpai: Ghd,
				yuanbie: Cyy,
				zhiwei: "众议院预算委员会主席",
				num: "$35,000"
			},
			{
				img: Img6,
				name: "史蒂夫·戴恩斯",
				dangpai: Ghd,
				yuanbie: Cyy,
				zhiwei: "众议院预算委员会主席",
				num: "$35,000"
			},
			{
				img: Img7,
				name: "皮特·赫格塞思",
				dangpai: Ghd,
				yuanbie: Cyy,
				zhiwei: "众议院预算委员会主席",
				num: "$35,000"
			},
			{
				img: Img8,
				name: "安妮·海瑟薇",
				dangpai: Ghd,
				yuanbie: Cyy,
				zhiwei: "众议院预算委员会主席",
				num: "$35,000"
			},
			{
				img: Img9,
				name: "贾米森·格里尔",
				dangpai: Ghd,
				yuanbie: Cyy,
				zhiwei: "众议院预算委员会主席",
				num: "$35,000"
			},
			{
				img: Img10,
				name: "迈克·华尔兹",
				dangpai: Ghd,
				yuanbie: Cyy,
				zhiwei: "众议院预算委员会主席",
				num: "$35,000"
			}
		]
	}
]);

const chart1Data = ref(

)

const areaList = ref([
	{
		name: "半导体",
		num: 186000,
		numtext: "$186,000",
		insNum: 8
	},
	{
		name: "电子设备",
		num: 180000,
		numtext: "$180,000",
		insNum: 5
	},
	{
		name: "显示技术",
		num: 171000,
		numtext: "$171,000",
		insNum: 2
	},
	{
		name: "新能源",
		num: 75000,
		numtext: "$75,000",
		insNum: 3
	},
	{
		name: "通信设备",
		num: 70000,
		numtext: "$70,000",
		insNum: 2
	},
	{
		name: "汽车",
		num: 52000,
		numtext: "$52,000",
		insNum: 2
	},
	{
		name: "其他",
		num: 36000,
		numtext: "$36,000",
		insNum: 1
	}
]);

const chart2Data = ref([
	{
		name: "半导体",
		value: 50
	},
	{
		name: "电子设备",
		value: 46
	},
	{
		name: "显示技术",
		value: 40
	},
	{
		name: "新能源",
		value: 32
	},
	{
		name: "通信设备",
		value: 31
	},
	{
		name: "汽车",
		value: 30
	},
	{
		name: "其他",
		value: 24
	}
]);

const chart2ColorList = ref(["#4096FF", "#FFA39E", "#ADC6FF", "#FFC069", "#B5F5EC", "#B37FEB", "#D6E4FF"]);

onMounted(() => {
  let chart1 = getSankeyChart()
  setChart(chart1, 'chart1')

	let chart2 = getPieChart(chart2Data.value, chart2ColorList.value);
	setChart(chart2, "chart2");


});
</script>

<style lang="scss" scoped>
.wrapper {
	display: flex;
	gap: 16px;
	.box-header {
		height: 51px;
		width: 100%;
		display: flex;
		position: relative;
		.icon {
			width: 8px;
			height: 20px;
			margin-top: 18px;
			border-radius: 0 4px 4px 0;
			background: rgba(5, 95, 194, 1);
		}
		.title {
			margin-left: 14px;
			margin-top: 14px;
			height: 26px;
			color: rgba(5, 95, 194, 1);
			font-family: Microsoft YaHei;
			font-size: 20px;
			font-weight: 700;
			line-height: 26px;
		}
		.btn-box {
			display: flex;
			gap: 8px;
			position: absolute;
			right: 84px;
			top: 15px;
			.btn {
				height: 28px;
				padding: 0 8px;
				box-sizing: border-box;
				color: var(--btn-plain-text-color);
				font-family: Microsoft YaHei;
				font-size: 16px;
				font-weight: 400;
				line-height: 28px;
				border-radius: 4px;
				background: var(--btn-plain-bg-color);
				border: 1px solid var(--btn-plain-border-color);
			}
			.btnActive {
				color: var(--btn-active-text-color);
				background: var(--btn-active-bg-color);
				border: 1px solid var(--btn-active-border-color);
			}
		}
		.header-right {
			position: absolute;
			right: 12px;
			top: 14px;
			display: flex;
			gap: 4px;
			.right-icon {
				width: 28px;
				height: 28px;
				img {
					width: 100%;
					height: 100%;
				}
			}
		}
	}
	.box-footer {
		margin: 0 auto;
		display: flex;
		width: 1034px;
		height: 40px;
		box-sizing: border-box;
		border: 1px solid rgba(231, 243, 255, 1);
		border-radius: 4px;
		background: rgba(246, 250, 255, 1);
		.box-footer-left {
			width: 19px;
			height: 20px;
			margin-top: 10px;
			margin-left: 12px;
			img {
				width: 100%;
				height: 100%;
			}
		}
		.box-footer-center {
			margin-left: 13px;
			width: 941px;
			height: 40px;
			line-height: 40px;
			color: rgba(5, 95, 194, 1);
			font-family: Microsoft YaHei;
			font-size: 16px;
			font-weight: 400;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
		.box-footer-right {
			margin-left: 13px;
			margin-top: 8px;
			width: 24px;
			height: 24px;
			img {
				width: 100%;
				height: 100%;
			}
		}
	}
	.left {
		margin-top: 16px;
		width: 520px;
		height: 846px;
		.box1 {
			width: 520px;
			height: 846px;
			border: 1px solid rgba(234, 236, 238, 1);
			border-radius: 10px;
			box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
			background: rgba(255, 255, 255, 1);
			.box1-main {
				.box1-main-top {
					width: 486px;
					height: 110px;
					box-sizing: border-box;
					border: 1px solid rgba(234, 236, 238, 1);
					border-radius: 4px;
					background: rgba(247, 248, 249, 1);
					margin: 8px auto;
					.top-item {
						display: flex;
						align-items: center;
						width: 450px;
						height: 30px;
						margin: 15px auto;

						.icon {
							width: 30px;
							height: 30px;
							img {
								width: 100%;
								height: 100%;
							}
						}
						.name {
							height: 30px;
							margin-left: 10px;
							color: rgba(59, 65, 75, 1);
							font-family: Microsoft YaHei;
							font-size: 18px;
							font-weight: 700;
							line-height: 30px;
						}
						.line {
							margin-left: 10px;
							width: 202px;
							height: 8px;
							border-radius: 0px 4px 4px 0px;
						}
						.line1 {
							background: linear-gradient(270deg, rgba(206, 79, 81, 1), rgba(206, 79, 81, 0) 100%);
						}
						.line2 {
							background: linear-gradient(270deg, rgba(5, 95, 194, 1), rgba(5, 95, 194, 0) 100%);
						}

						.num {
							margin-left: 10px;
							width: 120px;
							height: 24px;
							text-align: right;
							font-family: Microsoft YaHei;
							font-size: 18px;
							font-weight: 700;
							line-height: 24px;
						}
						.num1 {
							color: rgba(206, 79, 81, 1);
						}
						.num2 {
							color: rgba(5, 95, 194, 1);
						}
					}
				}
				.box1-main-main {
					margin: 0 auto;
					margin-top: 6px;
					width: 498px;
					height: 640px;
					.item {
						display: flex;
						position: relative;
						height: 64px;
						box-sizing: border-box;
						border-radius: 4px;
						border: 1px soild transparent;
						border-bottom: 1px solid rgba(234, 236, 238, 1);
						.item-left {
							width: 40px;
							height: 40px;
							margin-top: 11px;
							margin-left: 14px;
							img {
								width: 100%;
								height: 100%;
							}
						}
						.item-center {
							margin-left: 11px;
							.center-top {
								display: flex;
								.name {
									height: 24px;
									margin-top: 7px;
									color: rgba(59, 65, 75, 1);
									font-family: Microsoft YaHei;
									font-size: 16px;
									font-weight: 700;
									line-height: 24px;
								}
								.icon1 {
									width: 16px;
									height: 16px;
									margin-left: 7px;
									margin-top: 11px;
									img {
										width: 100%;
										height: 100%;
									}
								}
								.icon2 {
									width: 16px;
									height: 16px;
									margin-left: 2px;
									margin-top: 11px;
									img {
										width: 100%;
										height: 100%;
									}
								}
							}
							.center-footer {
								height: 24px;
								color: rgba(95, 101, 108, 1);
								font-family: Microsoft YaHei;
								font-size: 14px;
								font-weight: 400;
								line-height: 24px;
							}
						}
						.item-right {
							position: absolute;
							right: 16px;
							top: 19px;
							height: 24px;
							text-align: right;
							color: rgba(206, 79, 81, 1);
							font-family: Microsoft YaHei;
							font-size: 16px;
							font-weight: 700;
							line-height: 24px;
						}
					}
					.itemActive {
						background: rgba(246, 250, 255, 1);
						border: 1px solid rgba(174, 214, 255, 1);
					}
				}
			}
		}
	}
	.right {
		margin-top: 16px;
		width: 1064px;
		height: 846px;
		.box2 {
			width: 1064px;
			height: 415px;
			border: 1px solid rgba(234, 236, 238, 1);
			border-radius: 10px;
			box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
			background: rgba(255, 255, 255, 1);
			.box2-main {
				width: 1020px;
				height: 302px;
				margin: 0 auto;
				margin-bottom: 9px;
			}
		}
		.box3 {
			margin-top: 16px;
			width: 1064px;
			height: 415px;
			border: 1px solid rgba(234, 236, 238, 1);
			border-radius: 10px;
			box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
			background: rgba(255, 255, 255, 1);
			.box3-main {
				width: 1020px;
				height: 300px;
				margin: 0 auto;
				margin-top: 3px;
				margin-bottom: 9px;
				display: flex;
				.box3-main-left {
					width: 492px;
				}
				.box3-main-right {
					width: 518px;
					margin-left: 10px;
					overflow: hidden;
					.box3-main-right-item {
						height: 60px;
						width: 518px;
						box-sizing: border-box;
						display: flex;
						align-items: center;
						.id {
							margin-left: 15px;
							width: 24px;
							height: 24px;
							background: #e7f3ff;
							border-radius: 12px;
							color: rgba(5, 95, 194, 1);
							font-family: Microsoft YaHei;
							font-size: 12px;
							font-weight: 400;
							line-height: 24px;
							text-align: center;
						}
						.name {
							margin-left: 13px;
							width: 80px;
							height: 24px;
							color: rgba(59, 65, 75, 1);
							font-family: Microsoft YaHei;
							font-size: 16px;
							font-weight: 700;
							line-height: 24px;
						}
						.line {
							margin-left: 25px;
							width: 166px;
							height: 8px;
							.inner-line {
                height: 8px;
								border-radius: 0px 4px 4px 0px;
								background: linear-gradient(270deg, rgba(5, 95, 194, 1), rgba(5, 95, 194, 0) 100%);
							}
						}
						.num {
							margin-left: 17px;
							width: 75px;
							height: 30px;
							color: rgba(59, 65, 75, 1);
							font-family: Microsoft YaHei;
							font-size: 16px;
							font-weight: 400;
							line-height: 30px;
						}
						.more {
							margin-left: 25px;
							width: 80px;
							height: 30px;
							color: rgba(5, 95, 194, 1);
							font-family: Microsoft YaHei;
							font-size: 16px;
							font-weight: 400;
							line-height: 30px;
						}
						&:nth-child(2n-1) {
							border-top: 1px solid rgba(234, 236, 238, 1);
							border-radius: 4px;
							background: rgba(247, 248, 249, 1);
						}
					}
				}
			}
		}
	}
}
</style>
