<template>
  <view class="gender-card">
    <view class="card-header">
      <text class="title">用户性别比例</text>
    </view>
    
    <view class="card-content">
      <view class="chart-container">
        <EChartsView :option="chartOption" class="donut-chart" />
        <view class="center-text">
          <text class="total-label">总用户数</text>
          <text class="total-value">{{ totalUsers }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="uts">
import EChartsView from '@/uni_modules/charts/EChartsView.vue'

export default {
  components: {
    EChartsView
  },
  data() {
    return {
      totalUsers: 525,
      chartOption: {} as any
    }
  },
  mounted() {
    setTimeout(() => {
      this.initChart()
    }, 200)
  },
  methods: {
    initChart() {
      const option = {
        tooltip: {
          trigger: 'item',
          formatter: '{b}: {c} ({d}%)'
        },
        legend: {
          top: '0%',
          left: 'center',
          icon: 'rect',
          itemWidth: 15,
          itemHeight: 15,
          textStyle: {
            fontSize: 12,
            color: '#666'
          }
        },
        series: [
          {
            name: '性别比例',
            type: 'pie',
            radius: ['50%', '75%'],
            center: ['50%', '60%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: false
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 450, name: '未知', itemStyle: { color: '#999999' } },
              { value: 50, name: '男', itemStyle: { color: '#3b82f6' } },
              { value: 25, name: '女', itemStyle: { color: '#f97316' } }
            ]
          }
        ]
      }
      this.chartOption = this.toPlainObject(option)
    },
    toPlainObject(obj: any): any {
      if (obj == null) return null
      if (typeof obj !== 'object') return obj
      if (Array.isArray(obj)) {
        return obj.map((item) => this.toPlainObject(item))
      }
      const plain: any = {}
      for (const key in obj) {
        if (Object.prototype.hasOwnProperty.call(obj, key)) {
          const value = obj[key]
          if (typeof value === 'function' || key.startsWith('_') || key === 'toJSON') {
            continue
          }
          if (value != null && typeof value === 'object' && !Array.isArray(value)) {
            let isSimple = true
            for (const k in value) {
              if (typeof value[k] === 'object' && value[k] !== null) {
                isSimple = false
                break
              }
            }
            plain[key] = isSimple ? { ...value } : this.toPlainObject(value)
          } else {
            plain[key] = value
          }
        }
      }
      return plain
    }
  }
}
</script>

<style scoped lang="scss">
.gender-card {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  margin-bottom: 20px;
  height: 521px;
}

.card-header {
  margin-bottom: 20px;
}

.title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.card-content {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 400px;
}

.chart-container {
  position: relative;
  width: 100%;
  height: 100%;
}

.donut-chart {
  width: 100%;
  height: 100%;
}

.center-text {
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
}

.total-label {
  font-size: 14px;
  color: #999;
  margin-bottom: 4px;
}

.total-value {
  font-size: 28px;
  font-weight: bold;
  color: #333;
}
</style>
