<template>
  <div class="member-basic-distribution">
    <div class="chart-list">
      <div class="chart-item">
        <div class="chart-label">性别分布</div>
        <div class="chart-container" ref="genderChart"></div>
      </div>
      <div class="chart-item">
        <div class="chart-label">民族分布</div>
        <div class="chart-container" ref="ethnicityChart"></div>
      </div>
      <div class="chart-item">
        <div class="chart-label">政治面貌分布</div>
        <div class="chart-container" ref="politicalChart"></div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'MemberBasicDistribution',
  props: {
    chartsData: {
      type: Object,
      default: () => ({
        gender: { labels: ['女', '男'], data: [120, 198] },
        ethnicity: { labels: ['汉族', '其他'], data: [280, 38] },
        political: { labels: ['党员', '群众'], data: [150, 168] }
      })
    }
  },
  data() {
    return {
      charts: {}
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initCharts()
    })
  },
  watch: {
    chartsData: {
      deep: true,
      handler() {
        this.$nextTick(() => {
          this.disposeCharts()
          this.initCharts()
        })
      }
    }
  },
  methods: {
    disposeCharts() {
      Object.values(this.charts).forEach(chart => {
        if (chart) chart.dispose()
      })
      this.charts = {}
    },
    initCharts() {
      this.initGenderChart()
      this.initEthnicityChart()
      this.initPoliticalChart()
    },
    initGenderChart() {
      if (!this.$refs.genderChart) return
      this.charts.gender = echarts.init(this.$refs.genderChart)
      const option = {
        responsive: true,
        maintainAspectRatio: false,
        series: [{
          type: 'pie',
          radius: ['40%', '60%'],
          data: this.chartsData.gender.data.map((value, index) => ({
            name: this.chartsData.gender.labels[index],
            value: value
          })),
          itemStyle: {
            color: function(params) {
              const colors = ['#60A5FA', '#F472B6']
              return colors[params.dataIndex]
            }
          },
          label: {
            show: true,
            color: 'rgba(255, 255, 255, 0.7)',
            fontSize: 10,
            formatter: '{b}\n{d}%'
          }
        }]
      }
      this.charts.gender.setOption(option)
    },
    initEthnicityChart() {
      if (!this.$refs.ethnicityChart) return
      this.charts.ethnicity = echarts.init(this.$refs.ethnicityChart)
      const option = {
        responsive: true,
        maintainAspectRatio: false,
        series: [{
          type: 'pie',
          radius: ['40%', '60%'],
          data: this.chartsData.ethnicity.data.map((value, index) => ({
            name: this.chartsData.ethnicity.labels[index],
            value: value
          })),
          itemStyle: {
            color: function(params) {
              const colors = ['#A78BFA', '#34D399']
              return colors[params.dataIndex]
            }
          },
          label: {
            show: true,
            color: 'rgba(255, 255, 255, 0.7)',
            fontSize: 10,
            formatter: '{b}\n{d}%'
          }
        }]
      }
      this.charts.ethnicity.setOption(option)
    },
    initPoliticalChart() {
      if (!this.$refs.politicalChart) return
      this.charts.political = echarts.init(this.$refs.politicalChart)
      const option = {
        responsive: true,
        maintainAspectRatio: false,
        series: [{
          type: 'pie',
          radius: ['40%', '60%'],
          data: this.chartsData.political.data.map((value, index) => ({
            name: this.chartsData.political.labels[index],
            value: value
          })),
          itemStyle: {
            color: function(params) {
              const colors = ['#FBBF24', '#6366F1']
              return colors[params.dataIndex]
            }
          },
          label: {
            show: true,
            color: 'rgba(255, 255, 255, 0.7)',
            fontSize: 10,
            formatter: '{b}\n{d}%'
          }
        }]
      }
      this.charts.political.setOption(option)
    }
  },
  beforeDestroy() {
    Object.values(this.charts).forEach(chart => {
      if (chart) chart.dispose()
    })
  }
}
</script>

<style lang="scss" scoped>
.member-basic-distribution {
  .chart-list {
    display: flex;
    flex-direction: column;
    gap: 32rpx;
  }
  
  .chart-item {
    display: flex;
    align-items: center;
    gap: 24rpx;
    
    .chart-label {
      width: 160rpx;
      flex-shrink: 0;
      font-size: 24rpx;
      color: rgba(255, 255, 255, 0.5);
    }
    
    .chart-container {
      flex: 1;
      height:250rpx;
    }
  }
}
</style>
