<template>
	<div class="page-content">
		<!-- 公司导航栏 -->
		<div class="company-nav">
			<div class="company-logo-title">
				<img :src="data.company.logo" alt="华为logo" class="logo-img" />
				<div class="title-group">
					<h1 class="company-name">{{ data.company.name }}</h1>
					<p class="company-english">{{ data.company.englishName }}</p>
				</div>
			</div>
			<div class="main-tabs">
				<div
					v-for="(tab, index) in tabList"
					:key="index"
					:class="activeTab === tab.title ? 'tab-active' : 'tab'"
					@click="activeTab = tab.title"
				>
					<img :src="activeTab === tab.title ? tab.activeIcon : tab.icon" alt="" />
					{{ tab.title }}
				</div>
			</div>
		</div>
		<!-- 基础信息主体内容区 -->
		<div class="main-content" v-if="activeTab === '基础信息'">
			<!-- 左侧信息栏 -->
			<div class="left-sidebar">
				<img :src="data.company.logo" alt="华为logo" class="sidebar-logo" />
				<h2 class="sidebar-company-name">{{ data.company.name }}</h2>

				<div class="contact-list">
					<div class="contact-item">
						<img src="../../assets/icons/shutter.svg" alt="网址" class="contact-icon" />
						<span>{{ data.contactInfo.website }}</span>
					</div>
					<div class="contact-item">
						<img src="../../assets/icons/location.svg" alt="地址" class="contact-icon" />
						<span>{{ data.contactInfo.address }}</span>
					</div>
					<div class="contact-item">
						<img src="../../assets/icons/call.svg" alt="电话" class="contact-icon" />
						<span>{{ data.contactInfo.phone }}</span>
					</div>
					<div class="contact-item">
						<img src="../../assets/icons/mail.svg" alt="邮箱" class="contact-icon" />
						<span>{{ data.contactInfo.email }}</span>
					</div>
				</div>

				<div class="financial-list">
					<div class="financial-item" v-for="(item, idx) in data.financialData" :key="idx">
						<p class="financial-value">{{ item.value }}</p>
						<p class="financial-label">{{ item.label }}</p>
					</div>
				</div>
			</div>

			<!-- 右侧内容区 -->
			<div class="right-content">
				<!-- 子标签栏 -->
				<div class="sub-tabs">
					<span
						v-for="(tab, idx) in tabListSmall"
						:key="idx"
						:class="['sub-tab', activeTabSmall === tab ? 'active' : '']"
						@click="activeTabSmall = tab"
					>
						{{ tab }}
					</span>
					<div class="action-icons">
						<img src="../../assets/icons/download.png" alt="下载" class="action-icon" />
						<img src="../../assets/icons/shoucang.png" alt="收藏" class="action-icon" />
					</div>
				</div>
				<!-- 企业概况内容 -->
				<div v-if="activeTabSmall === '企业概况'">
					<div class="overview-content">
						<!-- 类别分布与经营信息 -->
						<div class="info-grid">
							<div class="info-card">
								<h3 class="section-title">类别分布</h3>
								<ul class="info-list">
									<li
										v-for="(value, key) in data.categoryDist"
										:key="key"
										style="display: flex; align-items: center"
									>
										<div class="li-icon"></div>
										<span class="info-key">{{ key }}</span>
										<span class="info-value">{{ value }}</span>
									</li>
								</ul>
							</div>
							<div class="info-card">
								<h3 class="section-title">经营信息</h3>
								<ul class="info-list">
									<li
										v-for="(value, key) in data.businessInfo"
										:key="key"
										style="display: flex; align-items: center"
									>
										<div class="li-icon"></div>
										<span class="info-key">{{ key }}</span>
										<span class="info-value">{{ value }}</span>
									</li>
								</ul>
							</div>
						</div>
					</div>
					<!-- 主要人员 -->
					<div class="section">
						<div class="section-header" style="margin-top: 24px">
							<div class="section-icon"></div>
							<h3 class="section-title">主要人员</h3>
						</div>

						<div class="personnel-grid">
							<div class="personnel-card" v-for="(person, idx) in data.mainPersonnel" :key="idx">
								<div class="personnel-card-header">
									<img :src="person.avatar" alt="头像" class="person-avatar" />
									<div class="person-info">
										<h4 class="person-name">{{ person.name }}</h4>
										<p class="person-position">{{ person.position }}</p>
									</div>
								</div>
								<p class="person-desc">{{ person.desc }}</p>
							</div>
						</div>
					</div>
					<!-- 分支机构 -->
					<div class="section">
						<div class="section-header">
							<div class="section-icon"></div>
							<h3 class="section-title">分支机构</h3>
						</div>
						<div class="branches-grid">
							<div class="branch-item" v-for="(branch, idx) in data.branches" :key="idx">
								<span>{{ branch }}</span>
								<img src="../../assets/icons/open.png" alt="箭头" class="branch-arrow" />
							</div>
						</div>
					</div>
				</div>
				<div v-if="activeTabSmall === '企业动态'">
					<div class="timeline-box">
						<Timeline :data="movementData" text-key="title" id-key="seq" />
					</div>
				</div>
			</div>
		</div>
		<!-- '研发实力', '被制裁情况', '供应链情况'主体内容区 -->
		<div class="main-content" v-if="activeTab === '研发实力'">
			<Capability />
		</div>
		<SanctionsSituation‌ v-if="activeTab === '被制裁情况'" />
		<SupplyChain v-if="activeTab === '供应链情况'" />
	</div>
</template>

<script setup>
import { ref } from "vue";
import data from "./data/huaweiData.json";
import movementData from "./data/movement.json";
import Timeline from "./component/Timeline.vue";
import Capability from "./component/Capability.vue";
import SanctionsSituation‌ from "./component/SanctionsSituation‌.vue";
import SupplyChain from "./component/SupplyChain.vue";

import TabIcon1 from "./images/tab-icon1.png";
import TabIcon2 from "./images/tab-icon2.png";
import TabIcon3 from "./images/tab-icon3.png";
import TabIcon4 from "./images/tab-icon4.png";
import TabIcon1Active from "./images/tab-icon1-active.png";
import TabIcon2Active from "./images/tab-icon2-active.png";
import TabIcon3Active from "./images/tab-icon3-active.png";
import TabIcon4Active from "./images/tab-icon4-active.png";

const tabList = ref([
	{
		title: "基础信息",
		icon: TabIcon1,
		activeIcon: TabIcon1Active
	},
	{
		title: "研发实力",
		icon: TabIcon2,
		activeIcon: TabIcon2Active
	},
	{
		title: "被制裁情况",
		icon: TabIcon3,
		activeIcon: TabIcon3Active
	},
	{
		title: "供应链情况",
		icon: TabIcon4,
		activeIcon: TabIcon4Active
	}
]);
const activeTab = ref("基础信息");
const tabListSmall = ref(["企业概况", "企业动态"]);
const activeTabSmall = ref("企业概况");
</script>

<style lang="scss" scoped>
/* 基础样式 */
.page-content {
	font-family: "Microsoft Yahei", "PingFang SC", sans-serif;
	background-color: #f5f7fa;
}

/* 公司导航栏 */
.company-nav {
	height: 124px;

	align-items: center;
	padding: 0 160px;
	box-shadow: 0px 4px 4px 0px rgba(129, 128, 128, 0.25);
	background: rgba(255, 255, 255, 1);
}

.company-logo-title {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 5px;
}

.logo-img {
	width: 60px;
	height: 60px;
	object-fit: contain;
}

.title-group {
	display: flex;
	flex-direction: column;
}

.company-name {
	font-size: 18px;
	color: #1d2129;
	margin: 0;
}

.company-english {
	font-size: 12px;
	color: #86909c;
	margin: 0;
}

.main-tabs {
	height: 48px;
	height: 48px;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: flex-start;
	gap: 32;
	padding: 0px 16px 0px 0px;
	img {
		width: 16px;
		height: 16px;
    margin-right: 4px;
	}
	.tab {
		color: rgba(59, 65, 75, 1);
		font-family: Microsoft YaHei;
		font-size: 18px;
		font-weight: 400;
		height: 48px;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		box-sizing: border-box;
		border-bottom: 2px solid transparent;
		margin: 6px 30px 0 0;
		cursor: pointer;
	}

	.tab-active {
		color: rgba(5, 95, 194, 1);
		font-family: Microsoft YaHei;
		font-size: 18px;
		font-weight: 700;
		height: 48px;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		box-sizing: border-box;
		border-bottom: 2px solid rgba(5, 95, 194, 1);
		margin: 6px 30px 0 0;
		cursor: pointer;
	}
}

.main-content {
	margin: 16px 160px;
	width: calc(100% - 320px);
	display: flex;
}

/* 左侧信息栏 */
.left-sidebar {
	width: 360px;
	/* height: calc(100vh - 220px); */
	background-color: #fff;
	border-radius: 6px;
	padding: 30px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.sidebar-logo {
	width: 132px;
	height: 124px;

	object-fit: contain;
	margin: 60px 90px 0px;
	display: block;
}

.sidebar-company-name {
	text-align: center;
	color: #1d2129;
	margin: 48px 0 20px;
	padding-bottom: 15px;
	color: rgba(10, 18, 30, 1);
	font-family: Microsoft YaHei;
	font-size: 24px;
	font-weight: 700;
	line-height: 32px;
	letter-spacing: 0px;
	text-align: center;
}

.contact-list {
	margin-bottom: 20px;
}

.contact-item {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: #4e5969;
	margin-bottom: 12px;
	color: rgba(59, 65, 75, 1);

	font-size: 16px;
	font-weight: 400;
	line-height: 30px;
	letter-spacing: 0px;
	text-align: left;
}

.contact-icon {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
}

.financial-list {
	padding-top: 15px;
}

.financial-item {
	text-align: center;
	padding: 12px 0;
}

.financial-item:last-child {
	border-bottom: none;
}

.financial-value {
	font-size: 20px;
	color: #1890ff;
	font-weight: 600;
	margin: 0 0 5px;
}

.financial-label {
	font-size: 12px;
	color: #86909c;
	margin: 0;
}

/* 右侧内容区 */
.right-content {
	/* height: calc(100vh - 220px); */
	width: 100%;
	margin-left: 16px;
	flex: 1;
	background-color: #fff;
	border-radius: 6px;

	border-radius: 4px;
	/* 业务系统/模块阴影 */
	box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
	background: rgba(255, 255, 255, 1);
}

.sub-tabs {
	height: 56px;
	padding: 12px 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.sub-tab {
	/* 切换按钮 */
	width: 80px;
	height: 28px;
	/* 自动布局 */
	color: rgba(59, 65, 75, 1);
	font-size: 16px;
	font-weight: 400;
	line-height: 30px;
	letter-spacing: 0px;
	text-align: left;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	box-sizing: border-box;
	border: 1px solid rgba(59, 65, 75, 1);
	border-radius: 4px;
	background: rgba(246, 250, 255, 1);
}

.sub-tab.active {
	/* 切换按钮 */
	width: 80px;
	height: 28px;
	/* 自动布局 */
	color: rgba(5, 95, 194, 1);
	font-size: 16px;
	font-weight: 400;
	line-height: 30px;
	letter-spacing: 0px;
	text-align: left;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	box-sizing: border-box;
	border: 1px solid rgba(5, 95, 194, 1);
	border-radius: 4px;
	background: rgba(246, 250, 255, 1);
}

.action-icons {
	display: flex;
	gap: 15px;
	margin-left: auto;
}

.action-icon {
	/* 收藏按钮 */
	width: 28px;
	height: 28px;
	cursor: pointer;
}

/* 信息网格 */
.info-grid {
	display: flex;
	gap: 16px;
	padding: 0 24px;
}

.info-card {
	flex: 1;
	background-color: #f9fafb;
	border-radius: 6px;
	padding: 12px 16px;
}

.info-list {
	list-style: none;
	padding: 0;
}

.info-list li {
	font-size: 13px;
	margin-bottom: 12px;
	line-height: 1.5;
}

.li-icon {
	/* 路径 */
	width: 4px;
	height: 4px;
	background: rgba(59, 65, 75, 1);
	border-radius: 50%;
}

.info-key {
	width: 100px;
	color: rgba(59, 65, 75, 1);
	font-size: 16px;
	font-weight: 700;
	line-height: 24px;
	letter-spacing: 1px;
	text-align: left;
	margin-left: 22px;
}

.info-value {
	color: rgba(59, 65, 75, 1);
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	letter-spacing: 0px;
	text-align: justify;
}

/* 主要人员 */
.section {
	/* margin-bottom: 25px; */
}

.section-header {
	display: flex;
	align-items: center;
}

.section-icon {
	width: 7px;
	height: 18px;
	border-radius: 0 4px 4px 0;
	background: rgba(5, 95, 194, 1);
	margin-right: 17px;
}

.section-title {
	margin: 0;
	color: rgba(5, 95, 194, 1);
	font-family: Microsoft YaHei;
	font-size: 16px;
	font-weight: 700;
	line-height: 24px;
	letter-spacing: 1px;
	text-align: left;
}

.personnel-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 15px;
	padding: 15px 23px;
}

.personnel-card {
	height: 150px;
	box-sizing: border-box;
	border: 1px solid rgba(223, 232, 239, 1);
	border-radius: 4px;
	background: rgba(255, 255, 255, 1);
}

.personnel-card-header {
	display: flex;
	height: 78px;
	background: rgba(246, 249, 250, 1);
	padding: 11px 15px;
}

.person-avatar {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
}

.person-info {
	flex: 1;
	margin: 0 16px;
}

.person-name {
	font-size: 14px;

	margin: 0;
	color: rgba(10, 18, 30, 1);
	font-size: 18px;
	font-weight: 700;
	line-height: 24px;
	letter-spacing: 0px;
	text-align: left;
}

.person-position {
	margin: 0;
	color: rgba(10, 18, 30, 1);
	font-size: 14px;
	font-weight: 400;
	line-height: 24px;
	letter-spacing: 0px;
	text-align: left;
}

.person-desc {
	padding: 16px 8px;
	margin: 0;
	color: rgba(95, 101, 108, 1);
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	letter-spacing: 0px;
	text-align: left;
}

/* 分支机构 */
.branches-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0 10px;
	padding: 12px 24px;
}

.branch-item {
	height: 54px;
	display: flex;
	align-items: center;
	color: rgba(59, 65, 75, 1);
	font-size: 16px;
	font-weight: 400;
	line-height: 30px;
	letter-spacing: 0px;
	text-align: left;
	cursor: pointer;
	padding: 12px 16px;
	box-sizing: border-box;
	border-top: 1px solid rgba(234, 236, 238, 1);
	border-bottom: 1px solid rgba(234, 236, 238, 1);
	margin-bottom: -1px;
	border-radius: 4px;
	background: rgba(255, 255, 255, 1);
}

.branch-item:hover {
	background-color: #f0f2f5;
}

.branch-arrow {
	width: 12px;
	height: 12px;
	margin-left: auto;
}

/* 企业动态 */
.timeline-box {
	display: flex;
	height: calc(100vh - 220px);
}

/* 响应式适配 */
@media (max-width: 1200px) {
	.personnel-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.branches-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 768px) {
	.main-content {
		flex-direction: column;
	}

	.left-sidebar {
		width: 100%;
	}

	.info-grid {
		flex-direction: column;
	}

	.personnel-grid {
		grid-template-columns: 1fr;
	}

	.branches-grid {
		grid-template-columns: 1fr;
	}

	.company-nav {
		flex-direction: column;
		align-items: flex-start;
		gap: 15px;
	}

	.main-nav {
		margin-left: 0;
		width: 100%;
		overflow-x: auto;
		padding-bottom: 5px;
	}
}
</style>