<template>
	<div class="influencePanel2">
		<CardCustom title="涉及行业" :style="{ width: '480px', height: '860px' }">
			<div class="subPanel1">
				<div class="chartsWrap">
					<Echarts :option="horizontalBarOptions" height="100%"></Echarts>
				</div>
				<div class="buttonWrap">
					<ButtonList :list="buttonList" :active-id="activeButtonId" @click="setActiveButtonId"></ButtonList>
				</div>
				<div class="listWrap">
					<div class="item" v-for="(item, index) in listData" :key="index">
						<div class="index" :class="{ isTopTen: index < 10 }">{{ index + 1 }}</div>
						<div class="name">{{ item.name }}</div>
						<div class="icon" :class="{ iconUp: item.isUp, iconDown: !item.isUp }"></div>
					</div>
				</div>
			</div>
		</CardCustom>
		<CardCustom title="产业链分析" :style="{ width: '1240px', height: '860px' }">
			<div class="subPanel2">
				<Hint
					text="法案核心意图在于通过税收优惠吸引制造业回流美国​，并在关键科技领域对中国进行遏制，限制中国获取先进技术、资本和市场渠道，从而延缓中国科技产业的发展速度。给半导体、新能源、人工智能等相关科技行业带来不小的短期压力。"
				></Hint>
				<div class="chartsWrap">
					<div class="right-main-content">
						<div class="right-main-content-main">
							<Fishbone />
						</div>
						<div class="right-main-content-footer">
							<div class="footer-item1">
								<div class="footer-item1-bottom">
									<div class="icon">
										<img src="../../assets/images/warning.png" alt="" />
									</div>
									<div class="text">
										{{ "中国企业45家（51.00%），受制裁3家（7.00%）" }}
									</div>
								</div>
								<div class="footer-item1-top">{{ "基础支撑" }}</div>
							</div>
							<div class="footer-item2">
								<div class="footer-item2-bottom">
									<div class="icon">
										<img src="../../assets/images/warning.png" alt="" />
									</div>
									<div class="text">
										{{ "中国企业45家（51.00%），受制裁3家（7.00%）" }}
									</div>
								</div>
								<div class="footer-item2-top">{{ "软件算法" }}</div>
							</div>
							<div class="footer-item3">
								<div class="footer-item3-bottom">
									<div class="icon">
										<img src="../../assets/images/warning.png" alt="" />
									</div>
									<div class="text">
										{{ "中国企业45家（51.00%），受制裁3家（7.00%）" }}
									</div>
								</div>
								<div class="footer-item3-top">{{ "行业应用" }}</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</CardCustom>
	</div>
</template>

<script setup>
import { ref, onMounted, shallowReactive, shallowRef } from "vue";
import CardCustom from "../../components/CardCustom.vue";
import Echarts from "@/components/Chart/index.vue";
import Hint from "./hint.vue";
import ButtonList from "@/components/buttonList/buttonList.vue";
import Fishbone from "./fishbone.vue";
import college1 from "../../assets/images/college1.png";
import college2 from "../../assets/images/college2.png";
import college3 from "../../assets/images/college3.png";
import college4 from "../../assets/images/college4.png";
import college5 from "../../assets/images/college5.png";
import college6 from "../../assets/images/college6.png";
import college7 from "../../assets/images/college7.png";
import college8 from "../../assets/images/college8.png";
import college9 from "../../assets/images/college9.png";
import college10 from "../../assets/images/college10.png";
import college11 from "../../assets/images/college11.png";
import { getHorizontalBarChart2 } from "../../utils/charts";
const buttonList = [
	{ id: 1, text: "新能源" },
	{ id: 2, text: "半导体" },
	{ id: 3, text: "跨境电商" },
	{ id: 4, text: "金融业" },
	{ id: 5, text: "军工" },
	{ id: 6, text: "贸易" }
];
const activeButtonId = ref(buttonList[0].id);
const setActiveButtonId = id => {
	activeButtonId.value = id;
};
const listData = [
	{
		name: "宁德时代新能源科技股份有限公司",
		isUp: false
	},
	{
		name: "比亚迪股份有限公司",
		isUp: false
	},
	{
		name: "隆基绿能科技股份有限公司",
		isUp: false
	},
	{
		name: "晶科能源控股有限公司",
		isUp: false
	},
	{
		name: "厦门海辰储能科技股份有限公司",
		isUp: false
	},
	{
		name: "国轩高科股份有限公司",
		isUp: true
	},
	{
		name: "远景科技集团",
		isUp: false
	},
	{
		name: "惠州亿纬锂能股份有限公司",
		isUp: false
	},
	{
		name: "天合光能股份有限公司",
		isUp: false
	},
	{
		name: "晶澳太阳能科技股份有限公司",
		isUp: true
	},
	{
		name: "通威股份有限公司",
		isUp: true
	},
	{
		name: "北京海博思创科技股份有限公司",
		isUp: true
	},
	{
		name: "上海派能能源科技股份有限公司",
		isUp: false
	}
];
const horizontalBarOptions = shallowRef({});
onMounted(() => {
	horizontalBarOptions.value = getHorizontalBarChart2(
		["贸易", "军工", "金融业", "跨境电商", "半导体", "新能源"],
		[10, 21, 25, 79, 95, 109],
		false
	);
});
</script>

<style lang="scss" scoped>
.influencePanel2 {
	display: flex;
	gap: 16px;
}
.subPanel2 {
	height: 100%;
	display: flex;
	flex-direction: column;
	padding: 17px 18px 12px 18px;
	.chartsWrap {
		flex: 1;
		.right-main-content {
			height: 100%;
			display: flex;
			flex-direction: column;
			.right-main-content-main {
				flex: 1;
			}
			.right-main-content-footer {
				height: 84px;
				margin-left: 14px;
				margin-top: 16px;
				// background: orange;
				display: flex;
				.footer-item1 {
					width: 408px;
					.footer-item1-top {
						position: relative;
						z-index: 3;
						height: 28px;
						text-align: center;
						line-height: 28px;
						background: url("../../assets/images/bg3.png");
						background-size: 100% 100%;
						color: rgba(22, 119, 255, 1);
						font-family: Microsoft YaHei;
						font-size: 16px;
						font-weight: 700;
						line-height: 28px;
						margin-top: 15px;
					}
					.footer-item1-bottom {
						display: flex;
						justify-content: center;
						.icon {
							margin-top: 9px;
							width: 16px;
							height: 16px;
							img {
								width: 100%;
								height: 100%;
							}
						}
						.text {
							margin-top: 7px;
							margin-left: 8px;
							height: 22px;
							color: rgba(206, 79, 81, 1);
							font-family: Microsoft YaHei;
							font-size: 14px;
							font-weight: 400;
							line-height: 22px;
						}
					}
				}
				.footer-item2 {
					margin-left: -8px;
					width: 408px;
					.footer-item2-top {
						position: relative;
						z-index: 2;
						height: 28px;
						text-align: center;
						line-height: 28px;
						background: url("../../assets/images/bg2.png");
						background-size: 100% 100%;
						color: rgba(19, 168, 168, 1);
						font-family: Microsoft YaHei;
						font-size: 16px;
						font-weight: 700;
						line-height: 28px;
						margin-top: 15px;
					}
					.footer-item2-bottom {
						display: flex;
						justify-content: center;
						.icon {
							margin-top: 9px;
							width: 16px;
							height: 16px;
							img {
								width: 100%;
								height: 100%;
							}
						}
						.text {
							margin-top: 7px;
							margin-left: 8px;
							height: 22px;
							color: rgba(206, 79, 81, 1);
							font-family: Microsoft YaHei;
							font-size: 14px;
							font-weight: 400;
							line-height: 22px;
						}
					}
				}
				.footer-item3 {
					margin-left: -8px;
					width: 408px;
					.footer-item3-top {
						position: relative;
						z-index: 1;
						height: 28px;
						text-align: center;
						line-height: 28px;
						background: url("../../assets/images/bg1.png");
						background-size: 100% 100%;
						color: rgba(146, 84, 222, 1);
						font-family: Microsoft YaHei;
						font-size: 16px;
						font-weight: 700;
						line-height: 28px;
						margin-top: 15px;
					}
					.footer-item3-bottom {
						display: flex;
						justify-content: center;
						.icon {
							margin-top: 9px;
							width: 16px;
							height: 16px;
							img {
								width: 100%;
								height: 100%;
							}
						}
						.text {
							margin-top: 7px;
							margin-left: 8px;
							height: 22px;
							color: rgba(206, 79, 81, 1);
							font-family: Microsoft YaHei;
							font-size: 14px;
							font-weight: 400;
							line-height: 22px;
						}
					}
				}
			}

			// background: orange;
		}
	}
}
.subPanel1 {
	padding: 0 17px;
	height: 100%;
	display: flex;
	flex-direction: column;
	.chartsWrap {
		height: 200px;
		border: 1px solid rgba(234, 236, 238, 1);
		border-radius: 4px;
		background: rgba(247, 248, 249, 1);
	}
	.buttonWrap {
		margin-top: 12px;
		margin-bottom: 8px;
	}
	.listWrap {
		flex: 1;
		min-height: 0;
		overflow: auto;
		display: flex;
		flex-direction: column;
		.item {
			display: flex;
			align-items: center;
			height: 42px;
			border-bottom: 1px solid rgba(234, 236, 238, 1);
			overflow: hidden;
			.index {
				width: 24px;
				height: 24px;
				border-radius: 12px;
				color: rgb(5, 95, 194);
				font-size: 14px;
				font-weight: 400;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-left: 12px;
				margin-right: 10px;
				flex-shrink: 0;
			}
			.isTopTen {
				background-color: rgba(231, 243, 255, 1);
			}
			.name {
				color: rgb(59, 65, 75);
				font-size: 16px;
				font-weight: 400;
				line-height: 24px;
				height: 24px;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
			.icon {
				width: 8px;
				height: 6px;
				background-size: 100% 100%;
				margin-left: 10px;
				flex-shrink: 0;
			}
			.iconUp {
				background-image: url("../../assets/images/iconUp.png");
			}
			.iconDown {
				background-image: url("../../assets/images/iconDown.png");
			}
		}
	}
}
</style>
