<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" :class="activeTab === tab ? 'tab-active' : 'tab'" @click="activeTab = tab">
          <img :src="'src/assets/icons/company' + (index + 1) + '.svg'" alt="邮件" class="icon mail-icon" />
          {{ tab }}
        </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';
const tabList = ref(['基础信息', '研发实力', '被制裁情况', '供应链情况'])
const activeTab = ref('基础信息')
const tabListSmall = ref(['企业概况', '企业动态'])
const activeTabSmall = ref('企业概况')

</script>

<style 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;

  .tab {
    color: rgba(59, 65, 75, 1);
    height: 48px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    border-bottom: 0px solid rgba(5, 95, 194, 1);
    margin: 6px 30px 0 0;
  }

  .tab-active {
    /* 导航/Tabs标签页/亮色/带图标-选中 */
    color: rgba(5, 95, 194, 1);
    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;
  }

}

.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 {
  font-size: 15px;
  color: #1d2129;
  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>