<template>
  <div class="business-report-page">
    <!-- 筛选条件 -->
    <div class="search-box-container">
      <el-card shadow="never">
        <el-form @submit.native.prevent :inline="true" class="search-form">
          <el-form-item label="时间范围">
            <el-date-picker 
              v-model="query.startTime" 
              type="datetime" 
              value-format="yyyy-MM-dd HH:mm:ss" 
              format="yyyy-MM-dd HH:mm:ss" 
              placeholder="开始时间"
              style="width: 180px;"
            />
            <span style="margin: 0 10px;">-</span>
            <el-date-picker 
              v-model="query.endTime" 
              type="datetime" 
              value-format="yyyy-MM-dd HH:mm:ss" 
              format="yyyy-MM-dd HH:mm:ss" 
              placeholder="结束时间"
              style="width: 180px;"
            />
          </el-form-item>
          <el-form-item label="门店">
            <el-select
              v-model="query.storeIds"
              multiple
              collapse-tags
              placeholder="全部门店"
              filterable
              style="width: 300px;">
              <el-option
                v-for="store in storeOptions"
                :key="store.id"
                :label="store.dm"
                :value="store.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="search()">查询</el-button>
            <!-- <el-button icon="el-icon-refresh-right" @click="reset()">重置</el-button> -->
          </el-form-item>
        </el-form>
      </el-card>
    </div>

    <!-- 第一个报表：业务统计仪表盘 -->
    <el-card shadow="never" class="report-card" v-loading="loading1">
      <div slot="header" class="card-header">
        <i class="el-icon-data-analysis"></i>
        <span>业务统计</span>
      </div>
      <div class="gauge-dashboard" v-if="businessData">
        <div class="gauge-item-wrapper" v-for="(item, index) in gaugeItems" :key="index">
          <div class="gauge-item">
            <div class="gauge-chart-container">
              <div :id="`gaugeChart${index + 1}`" class="gauge-chart"></div>
              <div class="gauge-value-overlay">
                <div class="gauge-value-large">{{ item.displayValue }}</div>
                <div class="gauge-label-text">{{ item.title }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-card>

    <!-- 第二个报表：客户类型统计 -->
    <el-card shadow="never" class="report-card" v-loading="loading2">
      <div slot="header" class="card-header">
        <i class="el-icon-user"></i>
        <span>客户类型统计</span>
      </div>
      <div class="customer-stats-container" v-if="customerData">
        <div class="stats-grid">
          <div class="stat-card stat-card-purple">
            <div class="stat-icon">
              <i class="el-icon-star-on"></i>
            </div>
            <div class="stat-content">
              <div class="stat-label">新客</div>
              <div class="stat-value">{{ customerData.TotalInviteCount || 0 }}</div>
              <!-- <div class="stat-progress">
                <div class="progress-bar" :style="{width: getProgressWidth(customerData.NewCustomerCount)}"></div>
              </div> -->
            </div>
          </div>
          <div class="stat-card stat-card-blue">
            <div class="stat-icon">
              <i class="el-icon-s-custom"></i>
            </div>
            <div class="stat-content">
              <div class="stat-label">客人</div>
              <div class="stat-value">{{ customerData.ConsumeCount || 0 }}</div>
              <!-- <div class="stat-progress">
                <div class="progress-bar" :style="{width: getProgressWidth(customerData.CasualCustomerCount)}"></div>
              </div> -->
            </div>
          </div>
          <div class="stat-card stat-card-green">
            <div class="stat-icon">
              <i class="el-icon-user-solid"></i>
            </div>
            <div class="stat-content">
              <div class="stat-label">会员</div>
              <div class="stat-value">{{ customerData.MemberCount || 0 }}</div>
              <!-- <div class="stat-progress">
                <div class="progress-bar" :style="{width: getProgressWidth(customerData.MemberCount)}"></div>
              </div> -->
            </div>
          </div>
          <div class="conversion-rate-card">
           
            <div class="donut-wrapper">
              <div class="donut-chart" :style="getDonutStyle(customerData.ConversionRate)">
                <div class="donut-center">
                  <div class="conversion-title">新客转化率</div>
                  <div class="percentage">{{ formatPercent(customerData.ConversionRate) }}%</div>
                </div>
              </div>
            </div>
            <!-- <div class="conversion-desc">转化表现优秀</div> -->
          </div>
        </div>
      </div>
    </el-card>

    <!-- 第三个报表：门店业绩对比（柱状图） -->
    <el-card shadow="never" class="report-card" v-loading="loading3">
      <div slot="header" class="card-header">
        <i class="el-icon-trophy"></i>
        <span>门店业绩对比</span>
      </div>
      <div 
        id="storePerformanceChart" 
        class="chart-container" 
        v-if="performanceData && performanceData.length > 0">
      </div>
    </el-card>

    <!-- 第四个报表：品项统计对比（蝴蝶图） -->
    <el-card shadow="never" class="report-card" v-loading="loading4">
      <div slot="header" class="card-header">
        <i class="el-icon-goods"></i>
        <span>品项统计对比</span>
      </div>
      <div class="butterfly-chart-container" v-if="itemStatisticsData && itemStatisticsData.length > 0">
        <!-- 图例 -->
        <div class="chart-legend">
          <div class="legend-item">
            <span class="legend-color legend-purple"></span>
            <span class="legend-text">开单金额</span>
          </div>
          <div class="legend-item">
            <span class="legend-color legend-orange"></span>
            <span class="legend-text">消耗金额</span>
          </div>
        </div>
        
        <!-- 图表内容 -->
        <div class="butterfly-chart-content">
          <div class="chart-left">
            <div 
              v-for="(item, index) in sortedItemData" 
              :key="index" 
              class="chart-row">
              <div 
                class="bar-left" 
                :style="{width: getButterflyBarWidth(item.BillingAmount, maxValue) + '%'}">
                <span class="bar-value">{{ item.BillingAmount || 0 }}</span>
              </div>
            </div>
          </div>
          
          <div class="chart-center">
            <div 
              v-for="(item, index) in sortedItemData" 
              :key="index" 
              class="category-name">
              {{ item.ItemName || item.ItemId }}
            </div>
          </div>
          
          <div class="chart-right">
            <div 
              v-for="(item, index) in sortedItemData" 
              :key="index" 
              class="chart-row">
              <div 
                class="bar-right" 
                :style="{width: getButterflyBarWidth(item.ConsumeAmount, maxValue) + '%'}">
                <span class="bar-value">{{ item.ConsumeAmount || 0 }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import request from '@/utils/request'
import * as echarts from 'echarts'

export default {
  name: 'BusinessReport',
  data() {
    return {
      query: {
        startTime: undefined,
        endTime: undefined,
        storeIds: []
      },
      storeOptions: [],
      businessData: null,
      customerData: null,
      performanceData: [],
      itemStatisticsData: [],
      loading1: false,
      loading2: false,
      loading3: false,
      loading4: false,
      gaugeItems: []
    }
  },
  computed: {
    sortedItemData() {
      if (!this.itemStatisticsData || this.itemStatisticsData.length === 0) return []
      return [...this.itemStatisticsData]
        .sort((a, b) => (b.BillingAmount || 0) - (a.BillingAmount || 0))
        .slice(0, 10)
    },
    maxValue() {
      if (!this.itemStatisticsData || this.itemStatisticsData.length === 0) return 1
      const maxBilling = Math.max(...this.itemStatisticsData.map(item => item.BillingAmount || 0))
      const maxConsume = Math.max(...this.itemStatisticsData.map(item => item.ConsumeAmount || 0))
      return Math.max(maxBilling, maxConsume)
    }
  },
  created() {
    this.setDefaultTimeRange()
    this.initStoreOptions()
    this.$nextTick(() => {
      this.search()
    })
  },
  methods: {
    // 设置默认时间范围（本月1号到现在）
    setDefaultTimeRange() {
      const now = new Date()
      const firstDayOfMonth = new Date(now.getFullYear(), now.getMonth(), 1)
      
      this.query.startTime = this.formatDateTime(firstDayOfMonth.getTime())
      this.query.endTime = this.formatDateTime(now.getTime())
    },

    // 初始化门店选项
    initStoreOptions() {
      request({
        url: '/api/Extend/LqMdxx',
        method: 'GET',
        data: {
          currentPage: 1,
          pageSize: 1000
        }
      }).then(res => {
        this.storeOptions = res.data.list || []
      }).catch(err => {
        console.error('获取门店列表失败:', err)
      })
    },

    // 查询所有数据
    search() {
      this.loadBusinessStatistics()
      this.loadCustomerTypeStatistics()
      this.loadStorePerformanceComparison()
    },

    // 获取业务统计数据
    loadBusinessStatistics() {
      this.loading1 = true
      const params = {
        startTime: this.query.startTime,
        endTime: this.query.endTime,
        storeIds: this.query.storeIds || []
      }
      
      request({
        url: '/api/Extend/lqreport/get-business-statistics',
        method: 'POST',
        data: params
      }).then(res => {
        this.businessData = res.data || null
        if (this.businessData) {
          this.initGaugeItems()
          this.$nextTick(() => {
            this.initGaugeCharts()
          })
        }
        this.loading1 = false
      }).catch(err => {
        console.error('获取业务统计数据失败:', err)
        this.$message.error('获取业务统计数据失败')
        this.loading1 = false
      })
    },

    // 初始化仪表盘数据
    initGaugeItems() {
      const billingValue = this.businessData.TotalBillingAmount || 0
      const countValue = this.businessData.BillingCount || 0
      const consumeValue = this.businessData.TotalConsumeAmount || 0
      const targetValue = this.businessData.TotalTargetAmount || 0
      const completionRate = this.businessData.TotalCompletionRate || 0

      this.gaugeItems = [
        {
          title: '现金业绩',
          icon: 'el-icon-wallet',
          displayValue: `¥${this.formatMoney(billingValue)}`,
          value: billingValue,
          max: billingValue > 0 ? Math.floor(billingValue * 0.87) : 100000,
          isAmount: true
        },
        {
          title: '人头',
          icon: 'el-icon-s-custom',
          displayValue: countValue || 0,
          value: countValue,
          max: countValue > 0 ? Math.floor(countValue * 0.84) : 100,
          isAmount: false
        },
        {
          title: '消耗业绩',
          icon: 'el-icon-coin',
          displayValue: `¥${this.formatMoney(consumeValue)}`,
          value: consumeValue,
          max: consumeValue > 0 ? Math.floor(consumeValue * 0.85) : 50000,
          isAmount: true
        },
        {
          title: '目标值',
          icon: 'el-icon-coin',
          displayValue: `¥${this.formatMoney(targetValue)}`,
          value: targetValue,
          max: targetValue > 0 ? Math.floor(targetValue * 0.85) : 50000,
          isAmount: true
        },
        {
          title: '完成率',
          icon: 'el-icon-coin',
          displayValue: `${this.formatMoney(completionRate)}%`,
          value: completionRate,
          max: completionRate > 0 ? Math.floor(completionRate * 0.85) : 50000,
          isAmount: true
        }
      ]
    },

    // 初始化仪表盘图表
    initGaugeCharts() {
      if (!this.businessData || this.gaugeItems.length === 0) return
      
      this.gaugeItems.forEach((item, index) => {
        this.initGaugeChart(`gaugeChart${index + 1}`, item, `range${index + 1}`)
      })
    },

    // 初始化单个仪表盘
    initGaugeChart(chartId, item, rangeId) {
      const chartDom = document.getElementById(chartId)
      if (!chartDom) return
      
      const myChart = echarts.init(chartDom)
      
      const percentage = item.max > 0 ? (item.value / item.max) : 1
      const displayPercentage = percentage > 1 ? 1 : percentage
      
      const option = {
        series: [
          {
            name: item.title,
            type: 'gauge',
            startAngle: 180,
            endAngle: 0,
            radius: '88%',
            min: 0,
            max: item.max || 1,
            splitNumber: 0,
            center: ['50%', '60%'],
            axisLine: {
              lineStyle: {
                width: 22,
                color: [[displayPercentage, '#FF6B35'], [1, '#E5E7EB']]
              }
            },
            pointer: {
              show: false
            },
            axisLabel: {
              show: false
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            title: {
              show: false
            },
            detail: {
              show: false
            }
          }
        ]
      }
      
      myChart.setOption(option)
      
      // 设置范围显示
      const rangeElement = document.getElementById(rangeId)
      if (rangeElement) {
        const displayMax = item.isAmount ? `¥${this.formatMoney(item.max)}` : item.max
        rangeElement.textContent = displayMax
      }
      
      window.addEventListener('resize', () => {
        myChart.resize()
      })
    },

    // 获取客户类型统计数据
    loadCustomerTypeStatistics() {
      this.loading2 = true
      const params = {
        startTime: this.query.startTime,
        endTime: this.query.endTime,
        storeIds: this.query.storeIds || []
      }
      
      request({
        url: '/api/Extend/lqreport/get-customer-type-statistics',
        method: 'POST',
        data: params
      }).then(res => {
        this.customerData = res.data || null
        this.loading2 = false
      }).catch(err => {
        console.error('获取客户类型统计数据失败:', err)
        this.$message.error('获取客户类型统计数据失败')
        this.loading2 = false
      })
    },

    // 获取门店业绩对比数据
    loadStorePerformanceComparison() {
      this.loading3 = true
      this.loading4 = true
      const params = {
        startTime: this.query.startTime,
        endTime: this.query.endTime,
        storeIds: this.query.storeIds || []
      }
      
      // 获取门店业绩对比数据
      request({
        url: '/api/Extend/lqreport/get-store-performance-comparison',
        method: 'POST',
        data: params
      }).then(res => {
        // 只取前10条数据
        this.performanceData = (res.data || []).slice(0, 10)
        this.$nextTick(() => {
          this.initStorePerformanceChart()
        })
        this.loading3 = false
      }).catch(err => {
        console.error('获取门店业绩对比数据失败:', err)
        this.$message.error('获取门店业绩对比数据失败')
        this.loading3 = false
      })
      
      // 获取品项统计数据
      request({
        url: '/api/Extend/lqreport/get-item-statistics',
        method: 'POST',
        data: params
      }).then(res => {
        this.itemStatisticsData = res.data || []
        this.loading4 = false
      }).catch(err => {
        console.error('获取品项统计数据失败:', err)
        this.$message.error('获取品项统计数据失败')
        this.loading4 = false
      })
    },

    // 初始化门店业绩对比柱状图
    initStorePerformanceChart() {
      if (!this.performanceData || this.performanceData.length === 0) return
      
      const chartDom = document.getElementById('storePerformanceChart')
      if (!chartDom) return
      
      const myChart = echarts.init(chartDom)
      
      const storeNames = this.performanceData.map(item => item.StoreName)
      const targetPerformance = this.performanceData.map(item => item.TargetPerformance || 0)
      const actualPerformance = this.performanceData.map(item => item.ActualPerformance || 0)
      
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter: function(params) {
            let result = params[0].name + '<br/>'
            params.forEach(item => {
              result += item.seriesName + ': ¥' + item.value + '<br/>'
            })
            return result
          }
        },
        legend: {
          data: ['现金业绩', '消耗业绩'],
          bottom: 10,
          textStyle: {
            fontSize: 14
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '15%',
          top: '5%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: storeNames,
          axisLabel: {
            rotate: 45,
            interval: 0,
            fontSize: 12
          }
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            formatter: function(value) {
              return '¥' + value
            }
          }
        },
        series: [
          {
            name: '现金业绩',
            type: 'bar',
            data: targetPerformance,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#8A2BE2' },
                { offset: 1, color: '#9D4EDD' }
              ])
            },
            barWidth: '40%',
            label: {
              show: true,
              position: 'top',
              formatter: '{c}',
              fontSize: 12
            }
          },
          {
            name: '消耗业绩',
            type: 'bar',
            data: actualPerformance,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#FFA500' },
                { offset: 1, color: '#FF8C00' }
              ])
            },
            barWidth: '40%',
            label: {
              show: true,
              position: 'top',
              formatter: '{c}',
              fontSize: 12
            }
          }
        ]
      }
      
      myChart.setOption(option)
      
      window.addEventListener('resize', () => {
        myChart.resize()
      })
    },


    // 获取环形图样式
    getDonutStyle(rate) {
      const percentage = rate || 0
      return {
        background: `conic-gradient(#8A2BE2 0% ${percentage}%, #E5E7EB ${percentage}% 100%)`
      }
    },

    // 计算进度条宽度
    getProgressWidth(value) {
      if (!value && value !== 0) return '0%'
      // 假设最大值为500
      const maxValue = 500
      const percentage = (value / maxValue) * 100
      return Math.min(percentage, 100) + '%'
    },

    // 计算柱状图宽度（用于蝴蝶图）
    getButterflyBarWidth(value, maxValue) {
      if (!value && value !== 0 || !maxValue || maxValue === 0) return 0
      const percentage = (value / maxValue) * 100
      return Math.min(percentage, 100)
    },

    // 重置查询条件
    reset() {
      this.query = {
        startTime: undefined,
        endTime: undefined,
        storeIds: []
      }
      this.setDefaultTimeRange()
      this.businessData = null
      this.customerData = null
      this.performanceData = []
      this.itemStatisticsData = []
      this.gaugeItems = []
    },

    // 格式化金额
    formatMoney(amount) {
      if (!amount && amount !== 0) return '0.00'
      return Number(amount).toFixed(2)
    },

    // 格式化百分比
    formatPercent(ratio) {
      if (!ratio && ratio !== 0) return '0.00'
      return Number(ratio).toFixed(2)
    },

    // 格式化日期时间（用于API传参）
    formatDateTime(timestamp) {
      if (!timestamp) return ''
      const date = new Date(timestamp)
      const year = date.getFullYear()
      const month = String(date.getMonth() + 1).padStart(2, '0')
      const day = String(date.getDate()).padStart(2, '0')
      const hours = String(date.getHours()).padStart(2, '0')
      const minutes = String(date.getMinutes()).padStart(2, '0')
      const seconds = String(date.getSeconds()).padStart(2, '0')
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
    }
  }
}
</script>

<style lang="scss" scoped>
.business-report-page {
  padding: 20px;
  background: #f5f6fa;
  min-height: 100vh;
}

.search-box-container {
  margin-bottom: 20px;
}

.search-form {
  display: flex;
  align-items: center;
}

.report-card {
  margin-bottom: 20px;
  border-radius: 8px;
  
  .card-header {
    display: flex;
    align-items: center;
    font-size: 18px;
    font-weight: 600;
    color: #303133;
    
    i {
      margin-right: 10px;
      font-size: 20px;
      color: #409EFF;
    }
  }
}

/* 业务统计仪表盘 */
.gauge-dashboard {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 30px;
  padding: 30px 0;
}

.gauge-item-wrapper {
  position: relative;
}

.gauge-item {
  background: linear-gradient(135deg, #fff 0%, #f9fafb 100%);
  border-radius: 12px;
  padding: 0 20px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  
  &:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  }
}

.gauge-chart-container {
  position: relative;
  margin: 10px 0;
  min-height: 240px;
}

.gauge-chart {
  height: 240px;
}

.gauge-value-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  padding-top: 40px;
  
  .gauge-icon-wrapper {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    background: linear-gradient(135deg, #409EFF, #67C23A);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
    
    i {
      font-size: 26px;
      color: #fff;
    }
  }
  
  .gauge-value-large {
    font-size: 26px;
    font-weight: bold;
    color: #303133;
    margin-bottom: 6px;
    letter-spacing: 0;
    text-align: center;
    line-height: 1.2;
    max-width: 280px;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
  
  .gauge-label-text {
    font-size: 14px;
    color: #909399;
    font-weight: 500;
  }
}

.gauge-range-info {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
  
  .range-label,
  .range-value {
    font-size: 12px;
    color: #909399;
  }
  
  .range-divider {
    flex: 1;
    height: 1px;
    background: #DCDFE6;
    margin: 0 10px;
  }
}

/* 客户类型统计 */
.customer-stats-container {
  padding: 20px 0;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.stat-card {
  background: linear-gradient(135deg, #fff 0%, #f9fafb 100%);
  border-radius: 12px;
  padding: 25px;
  display: flex;
  align-items: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  
  &:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  }
  
  &.stat-card-purple {
    .stat-icon {
      background: linear-gradient(135deg, #8A2BE2, #A855F7);
    }
    .progress-bar {
      background: linear-gradient(90deg, #8A2BE2, #A855F7);
    }
  }
  
  &.stat-card-blue {
    .stat-icon {
      background: linear-gradient(135deg, #3B82F6, #60A5FA);
    }
    .progress-bar {
      background: linear-gradient(90deg, #3B82F6, #60A5FA);
    }
  }
  
  &.stat-card-green {
    .stat-icon {
      background: linear-gradient(135deg, #10B981, #34D399);
    }
    .progress-bar {
      background: linear-gradient(90deg, #10B981, #34D399);
    }
  }
}

.stat-icon {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
  
  i {
    font-size: 24px;
    color: #fff;
  }
}

.stat-content {
  flex: 1;
}

.stat-label {
  font-size: 14px;
  color: #909399;
  margin-bottom: 8px;
}

.stat-value {
  font-size: 28px;
  font-weight: bold;
  color: #303133;
  margin-bottom: 10px;
}

.stat-progress {
  height: 6px;
  background: #E5E7EB;
  border-radius: 3px;
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  border-radius: 3px;
  transition: width 0.8s ease;
}

.conversion-rate-card {
  background: linear-gradient(135deg, #ffffff 0%, #f9fafb 100%);
  border-radius: 12px;
  padding: 25px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  
  &:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  }
}

.donut-wrapper {
  width: 180px;
  height: 180px;
  position: relative;
  margin: 0;
}

.donut-chart {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  background: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  
  .donut-center {
    width: 156px;
    height: 156px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 15px;
    
    .conversion-title {
      font-size: 14px;
      color: #909399;
      margin-bottom: 12px;
      font-weight: 500;
    }
    
    .percentage {
      font-size: 32px;
      font-weight: bold;
      color: #8A2BE2;
      line-height: 1;
    }
  }
}

.conversion-desc {
  font-size: 14px;
  color: #67C23A;
  margin-top: 10px;
}

/* 图表容器 */
.chart-container {
  width: 100%;
  height: 500px;
  margin-top: 20px;
}

/* 蝴蝶图样式 */
.butterfly-chart-container {
  padding: 20px 0;
}

.chart-legend {
  display: flex;
  justify-content: center;
  gap: 30px;
  margin-bottom: 20px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.legend-color {
  width: 50px;
  height: 20px;
  border-radius: 4px;
}

.legend-purple {
  background: linear-gradient(90deg, #8A2BE2, #9D4EDD);
}

.legend-orange {
  background: linear-gradient(90deg, #FFA500, #FF8C00);
}

.legend-text {
  font-size: 14px;
  color: #303133;
  font-weight: 500;
}

.chart-axis {
  padding: 0 50px;
  margin-bottom: 10px;
}

.axis-labels {
  display: grid;
  grid-template-columns: repeat(14, 1fr);
  gap: 0;
}

.axis-label {
  font-size: 11px;
  color: #909399;
  text-align: center;
}

.butterfly-chart-content {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 10px;
  align-items: center;
  padding: 0 30px;
}

.chart-left,
.chart-right {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.chart-row {
  height: 40px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
}

.chart-left .chart-row {
  justify-content: flex-end;
}

.chart-right .chart-row {
  justify-content: flex-start;
}

.bar-left,
.bar-right {
  height: 35px;
  display: flex;
  align-items: center;
  border-radius: 4px;
  min-width: 50px;
}

.bar-left {
  background: linear-gradient(90deg, #8A2BE2, #9D4EDD);
  justify-content: flex-end;
  padding-right: 10px;
}

.bar-right {
  background: linear-gradient(90deg, #FFA500, #FF8C00);
  justify-content: flex-start;
  padding-left: 10px;
}

.bar-value {
  font-size: 12px;
  font-weight: 500;
  color: #fff;
}

.chart-center {
  min-width: 150px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  padding: 0 15px;
}

.category-name {
  height: 40px;
  font-size: 13px;
  color: #303133;
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  text-align: center;
  line-height: 1.4;
}
</style>