<template>
  <div class="huawei-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>
      <nav class="main-nav">
        <span v-for="(item, idx) in data.company.navItems" :key="idx"
          :class="['nav-item', data.company.activeNav === item ? 'active' : '']">
          {{ item }}
        </span>
      </nav>
    </div>

    <!-- 主体内容区 -->
    <div class="main-content">
      <!-- 左侧信息栏 -->
      <aside 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/arrow-0.png" alt="网址" class="contact-icon">
            <span>{{ data.contactInfo.website }}</span>
          </div>
          <div class="contact-item">
            <img src="../../assets/icons/arrow-0.png" alt="地址" class="contact-icon">
            <span>{{ data.contactInfo.address }}</span>
          </div>
          <div class="contact-item">
            <img src="../../assets/icons/arrow-0.png" alt="电话" class="contact-icon">
            <span>{{ data.contactInfo.phone }}</span>
          </div>
          <div class="contact-item">
            <img src="../../assets/icons/arrow-0.png" 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>
      </aside>

      <!-- 右侧内容区 -->
      <div class="right-content">
        <!-- 子标签栏 -->
        <div class="sub-tabs">
          <span v-for="(tab, idx) in data.company.subTabs" :key="idx"
            :class="['sub-tab', data.company.activeSubTab === tab ? 'active' : '']">
            {{ tab }}
          </span>
          <div class="action-icons">
            <img src="../../assets/icons/arrow-0.png" alt="分享" class="action-icon">
            <img src="../../assets/icons/arrow-0.png" alt="收藏" class="action-icon">
          </div>
        </div>

        <!-- 企业概况内容 -->
        <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">
                  <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">
                  <span class="info-key">{{ key }}</span>
                  <span class="info-value">{{ value }}</span>
                </li>
              </ul>
            </div>
          </div>

          <!-- 主要人员 -->
          <div class="section">
            <h3 class="section-title">主要人员</h3>
            <div class="personnel-grid">
              <div class="personnel-card" v-for="(person, idx) in data.mainPersonnel" :key="idx">
                <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>
                  <p class="person-desc">{{ person.desc }}</p>
                </div>
              </div>
            </div>
          </div>

          <!-- 分支机构 -->
          <div class="section">
            <h3 class="section-title">分支机构</h3>
            <div class="branches-grid">
              <div class="branch-item" v-for="(branch, idx) in data.branches" :key="idx">
                <span>{{ branch }}</span>
                <img src="../../assets/icons/arrow-0.png" alt="箭头" class="branch-arrow">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import data from './data/huaweiData.json'

export default {
  name: 'HuaweiContent',
  data() {
    return {
      data
    }
  }
}
</script>

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

}

/* 公司导航栏 */
.company-nav {
  display: flex;
  align-items: center;
  padding: 15px 0;
  border-bottom: 1px solid #e5e7eb;
  margin-bottom: 20px;
}

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

.logo-img {
  width: 50px;
  height: 50px;
  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-nav {
  display: flex;
  gap: 25px;
  margin-left: 30px;
}

.nav-item {
  font-size: 14px;
  color: #4e5969;
  cursor: pointer;
  padding: 5px 0;
  position: relative;
}

.nav-item.active {
  color: #1890ff;
  font-weight: 500;
}

.nav-item.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #1890ff;
}

/* 主体内容区 */
.main-content {
  display: flex;
  gap: 16px;
}

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

.sidebar-logo {
  width: 120px;
  height: 120px;
  object-fit: contain;
  margin: 0 auto 15px;
  display: block;
}

.sidebar-company-name {
  text-align: center;
  font-size: 16px;
  color: #1d2129;
  margin: 0 0 20px;
  padding-bottom: 15px;
  border-bottom: 1px dashed #e5e7eb;
}

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

.contact-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #4e5969;
  margin-bottom: 12px;
}

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

.financial-list {
  border-top: 1px dashed #e5e7eb;
  padding-top: 15px;
}

.financial-item {
  text-align: center;
  padding: 12px 0;
  border-bottom: 1px dashed #e5e7eb;
}

.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 {
  flex: 1;
  background-color: #fff;
  border-radius: 6px;
  padding: 20px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.sub-tabs {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e5e7eb;
}

.sub-tab {
  font-size: 14px;
  color: #4e5969;
  cursor: pointer;
  margin-right: 20px;
  padding: 5px 0;
  position: relative;
}

.sub-tab.active {
  color: #1890ff;
  font-weight: 500;
}

.sub-tab.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #1890ff;
}

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

.action-icon {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

/* 信息网格 */
.info-grid {
  display: flex;
  gap: 20px;
  margin-bottom: 25px;
}

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

.section-title {
  font-size: 15px;
  color: #1d2129;
  margin: 0 0 15px;
  padding-left: 8px;
  border-left: 2px solid #1890ff;
}

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

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

.info-key {
  display: inline-block;
  width: 80px;
  color: #86909c;
}

.info-value {
  color: #4e5969;
}

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

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

.personnel-card {
  background-color: #f9fafb;
  border-radius: 6px;
  padding: 15px;
  display: flex;
  gap: 12px;
}

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

.person-info {
  flex: 1;
}

.person-name {
  font-size: 14px;
  color: #1d2129;
  margin: 0 0 5px;
  font-weight: 500;
}

.person-position {
  font-size: 12px;
  color: #1890ff;
  margin: 0 0 5px;
}

.person-desc {
  font-size: 12px;
  color: #86909c;
  margin: 0;
  line-height: 1.4;
}

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

.branch-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  color: #4e5969;
  padding: 8px 10px;
  background-color: #f9fafb;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s;
}

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

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

/* 响应式适配 */
@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>