<template>
  <div class="hero-section flex-col justify-end" :style="{ backgroundColor: backgroundColor, backgroundImage: `url(${backgroundImage})` }">
    <!-- Tabs导航 (可选) -->
    <div v-if="showTabNav" class="tab-navigation flex-row">
      <div
        v-for="(tab, index) in tabs"
        :key="index"
        class="tab-item flex-row"
        :class="{ active: activeTab === index }"
        @click="switchTab(index)"
      >
        <div
          v-if="index === activeTab"
          class="tab-active-bg flex-col"
          :style="{ backgroundImage: `url(${activeTabBg})` }"
        >
          <span class="tab-text">{{ tab }}</span>
        </div>
        <span v-else class="tab-text">{{ tab }}</span>
        
        <img
          v-if="index < tabs.length - 1"
          class="tab-divider"
          :src="tabDivider"
          alt=""
        />
      </div>
    </div>
    
    <!-- 主要内容区域 -->
    <div class="hero-content">
      <!-- 标题区域 -->
      <div v-if="title" class="title-section">
        <h1 class="hero-title" v-if="title">{{ title }}</h1>
        <h2 class="hero-subtitle" v-if="subtitle">{{ subtitle }}</h2>
        <img
          v-if="titleIcon"
          class="title-icon"
          :src="titleIcon"
          alt=""
        />
      </div>
      
      <!-- 面包屑导航 (可选) -->
      <div v-if="showBreadcrumb" class="breadcrumb-container flex-row">
        <div class="breadcrumb-bg flex-col" :style="{ backgroundImage: `url(${breadcrumbBg})` }">
          <span class="breadcrumb-text">{{ currentPage }}</span>
        </div>
        
        <img v-if="showHomeIcon" class="home-icon" :src="homeIcon" alt="HOME" />
        <span v-if="showHomeIcon" class="home-text">HOME</span>
        <img v-if="showHomeIcon" class="home-arrow" :src="homeArrow" alt="" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HeroSection',
  props: {
    // 背景相关
    backgroundColor: {
      type: String,
      default: ''
    },
    backgroundImage: {
      type: String,
      default: ''
    },
    
    // 标题相关
    title: {
      type: String,
      default: ''
    },
    subtitle: {
      type: String,
      default: ''
    },
    titleIcon: {
      type: String,
      default: ''
    },
    
    // Tab导航相关
    showTabNav: {
      type: Boolean,
      default: false
    },
    tabs: {
      type: Array,
      default: () => []
    },
    activeTab: {
      type: Number,
      default: 0
    },
    activeTabBg: {
      type: String,
      default: ''
    },
    tabDivider: {
      type: String,
      default: ''
    },
    
    // 面包屑相关
    showBreadcrumb: {
      type: Boolean,
      default: true
    },
    currentPage: {
      type: String,
      default: ''
    },
    showHomeIcon: {
      type: Boolean,
      default: false
    },
    breadcrumbBg: {
      type: String,
      default: ''
    },
    homeIcon: {
      type: String,
      default: ''
    },
    homeArrow: {
      type: String,
      default: ''
    }
  },
  
  methods: {
    switchTab(index) {
      this.$emit('tab-change', index)
    }
  }
}
</script>

<style scoped>
.hero-section {
  height: 51.05vw;
  background-size: 100% 100%;
  width: 100vw;
  position: relative;
}

.tab-navigation {
  width: 86.46vw;
  height: 5.21vw;
  margin: 12.44vw 0 0 13.54vw;
  background-size: 100% 100%;
}

.tab-item {
  height: 5.21vw;
  align-items: center;
}

.tab-text {
  color: rgba(255, 255, 255, 1);
  font-size: 1.56vw;
  font-family: OPPOSans-R;
  font-weight: normal;
  text-align: center;
  white-space: nowrap;
  line-height: 2.19vw;
  margin: 1.82vw 1vw 0;
}

.tab-active-bg {
  height: 5.21vw;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.tab-divider {
  width: 0.06vw;
  height: 2.3vw;
  margin: 1.45vw 0;
}

.title-section {
  position: absolute;
  top: 2.86vw;
  left: 13.54vw;
}

.hero-title {
  width: auto;
  height: 3.03vw;
  font-size: 4.16vw;
  font-family: Gilroy-Bold;
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
  line-height: 3.75vw;
  margin-bottom: 1.72vw;
  color: rgba(255, 255, 255, 1);
}

.hero-subtitle {
  width: auto;
  height: 1.83vw;
  font-size: 1.87vw;
  font-family: OPPOSans-R;
  font-weight: normal;
  text-align: left;
  white-space: nowrap;
  line-height: 2.19vw;
  margin-bottom: 1.56vw;
  color: rgba(255, 255, 255, 1);
}

.title-icon {
  width: 0.27vw;
  height: 3.08vw;
}

.breadcrumb-container {
  width: 86.46vw;
  height: 5.21vw;
  margin: 0;
}

.breadcrumb-bg {
  height: 5.21vw;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 18.23vw;
}

.breadcrumb-text {
  width: 6.15vw;
  height: 1.57vw;
  color: rgba(255, 255, 255, 1);
  font-size: 1.56vw;
  font-family: OPPOSans-R;
  font-weight: normal;
  text-align: center;
  white-space: nowrap;
  line-height: 2.19vw;
  margin: 1.82vw 0 0 6.04vw;
}

.home-icon {
  width: 0.94vw;
  height: 1.05vw;
  margin: 2.03vw 2.6vw 0 2.6vw;
}

.home-text {
  width: 2.56vw;
  height: 0.73vw;
  color: rgba(255, 255, 255, 1);
  font-size: 0.93vw;
  font-family: Gilroy-Medium;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  line-height: 2.19vw;
  margin-top: 0.21vw;
}

.home-arrow {
  width: 0.94vw;
  height: 1.05vw;
  margin-left: 2.6vw;
}
</style>
