<template>
  <div class="analysis-container">
    <div class="main-title-container">
      <h2 class="main-title">传播意见领袖分析</h2>
    </div>

    <div class="charts-wrapper">
      <div v-for="(chart, index) in chartData" :key="index" class="chart-section">
        <h3 class="chart-title">{{ chart.title }}</h3>
        
        <div class="chart-area">
          <div class="x-axis">
            <div class="axis-labels">
                <span v-for="n in 6" :key="n">{{ (n - 1) * 2 }}</span>
            </div>
            <span class="unit">{{ chart.unit }}</span>
          </div>

          <div class="chart-body">
            <div v-for="item in chart.series" :key="item.name" class="bar-row">
              <span class="row-label">{{ item.name }}</span>
              <div class="bar-wrapper">
                <div class="bar-container">
                  <div 
                    class="bar" 
                    :class="item.name === '所有用户' ? 'bar-user' : 'bar-leader'" 
                    :style="{ width: (item.value / chart.max) * 100 + '%' }"
                  ></div>
                  <span 
                    class="value" 
                    :class="item.name === '所有用户' ? 'value-user' : 'value-leader'" 
                    :style="{ left: `calc(${(item.value / chart.max) * 100}% + 8px)` }"
                  >{{ item.value }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const chartData = ref([
  {
    title: '平均发帖数',
    unit: '数量',
    max: 10,
    series: [
      { name: '领袖', value: 6.4 },
      { name: '所有用户', value: 0.46 }
    ]
  },
  {
    title: '帖子平均生存周期',
    unit: '天数',
    max: 10,
    series: [
      { name: '领袖', value: 2.19 },
      { name: '所有用户', value: 0.46 }
    ]
  },
  {
    title: '平均粉丝数',
    // NOTE: The unit in the original image is '天数' (Days), which is likely a typo.
    // It has been replicated here to match the source image.
    unit: '天数',
    max: 10,
    series: [
      { name: '领袖', value: 2.19 },
      { name: '所有用户', value: 0.46 }
    ]
  }
]);
</script>

<style scoped>
.analysis-container {
  background-color: #0d1b38;
  padding: 20px;
  border-radius: 8px;
  font-family: 'Microsoft YaHei', 'PingFang SC', sans-serif;
  color: #a7c5d4;
  width: 100%;
  max-width: 550px;
  box-sizing: border-box;
}

.main-title-container {
  position: relative;
  border-bottom: 1px solid rgba(62, 115, 171, 0.3);
  margin-bottom: 25px;
  padding-bottom: 10px;
}

.main-title {
  font-size: 18px;
  color: #e0f7ff;
  font-weight: 600;
  text-align: left;
  margin: 0;
  padding-left: 10px;
}

/* Decorative vertical bar for the title */
.main-title-container::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 18px;
    background-color: #4d9fdf;
}

/* Decorative chevrons for the title */
.main-title-container::after {
    content: '////';
    letter-spacing: -2px;
    position: absolute;
    top: 50%;
    right: 10px;
    color: rgba(77, 159, 223, 0.6);
    font-weight: bold;
    transform: translateY(-50%) skewX(-20deg);
}

.charts-wrapper {
  display: flex;
  flex-direction: column;
  gap: 35px;
}

.chart-title {
  font-size: 16px;
  color: #cdeeff;
  margin: 0 0 25px 0;
  position: relative;
  padding-left: 15px;
}

/* Decorative square bullet for chart titles */
.chart-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  background-color: #4da0e0;
}

.chart-area {
  position: relative;
}

.x-axis {
  position: absolute;
  top: -15px;
  left: 65px; /* Aligns with the start of the bars */
  right: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: #8bacc8;
}

.axis-labels {
  display: flex;
  justify-content: space-between;
  width: calc(100% - 25px); /* Leave space for unit */
}

.unit {
  position: absolute;
  right: -15px;
}

.chart-body {
  position: relative;
  /* Vertical grid lines */
  background-image:
    linear-gradient(to right, rgba(139, 172, 200, 0.2) 1px, transparent 1px),
    linear-gradient(to right, rgba(139, 172, 200, 0.2) 1px, transparent 1px),
    linear-gradient(to right, rgba(139, 172, 200, 0.2) 1px, transparent 1px),
    linear-gradient(to right, rgba(139, 172, 200, 0.2) 1px, transparent 1px),
    linear-gradient(to right, rgba(139, 172, 200, 0.2) 1px, transparent 1px);
  background-repeat: no-repeat;
  background-size: 20% 100%;
  background-position: 20% 0, 40% 0, 60% 0, 80% 0, 100% 0;
  padding: 10px 0;
}

.bar-row {
  display: flex;
  align-items: center;
  margin-bottom: 25px;
}

.bar-row:last-child {
  margin-bottom: 0;
}

.row-label {
  width: 65px;
  flex-shrink: 0;
  text-align: left;
  font-size: 14px;
  padding-right: 5px;
  color: #cdeeff;
}

.bar-wrapper {
  flex-grow: 1;
}

.bar-container {
  position: relative;
  width: 100%;
  height: 14px;
}

.bar {
  height: 100%;
  border-radius: 7px;
  transition: width 0.5s ease-in-out;
}

.bar-leader {
  background-color: #3d8dcb;
}
.bar-user {
  background-color: #27c1a8;
}

.value {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  white-space: nowrap;
}

.value-leader {
  color: #3d8dcb;
}
.value-user {
  color: #27c1a8;
}
</style>