<template>
  <div class="layout-padding">
    <div class="layout-padding-auto layout-padding-view">
      <!-- 页面标题 -->
      <div style="margin-bottom: 20px;">
        <h2 style="margin: 0; font-size: 20px; font-weight: 600; color: #303133;">职称统计</h2>
      </div>

      <!-- 图表统计 -->
      <div style="width: 100%">
        <el-row :gutter="24">
          <el-col :span="12">
            <v-chart ref="titleChartRef" style="width: 100%; height: 400px;" :option="titleChartOption" />
          </el-col>
          <el-col :span="12">
            <el-table :data="titleChartTableData" border show-summary style="width: 100%">
              <el-table-column prop="name" label="职称" width="180" align="center" />
              <el-table-column prop="value" label="人数" width="180" align="center" />
              <el-table-column prop="rate" label="比例" width="180" align="center" />
            </el-table>
          </el-col>
        </el-row>

        <el-row :gutter="24" style="margin-top: 20px;">
          <el-col :span="12">
            <v-chart ref="techChartRef" style="width: 100%; height: 400px;" :option="techChartOption" />
          </el-col>
          <el-col :span="12">
            <el-table :data="techChartTableData" border show-summary style="width: 100%">
              <el-table-column prop="name" label="技术职务" width="180" align="center" />
              <el-table-column prop="value" label="人数" width="180" align="center" />
              <el-table-column prop="rate" label="比例" width="180" align="center" />
            </el-table>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import VChart from 'vue-echarts'
import { use } from 'echarts/core'
import { PieChart } from 'echarts/charts'
import { TooltipComponent, LegendComponent } from 'echarts/components'
import { CanvasRenderer } from 'echarts/renderers'
import { getChartOption } from '/@/api/professional/professionaluser/professionaltitlerelation'

// 注册 ECharts 组件
use([TooltipComponent, LegendComponent, PieChart, CanvasRenderer])

// 图表引用
const titleChartRef = ref()
const techChartRef = ref()

// 图表数据
const titleChartOption = ref<any>({})
const titleChartTableData = ref<any[]>([])
const techChartOption = ref<any>({})
const techChartTableData = ref<any[]>([])

// 初始化图表
const initChartOption = async () => {
  try {
    const response = await getChartOption()
    const data = response.data.data || {}
    
    // 职称图表
    titleChartOption.value = data.titleOption || {}
    let titleTotal = 0
    if (titleChartOption.value.series && titleChartOption.value.series[0] && titleChartOption.value.series[0].data) {
      titleChartOption.value.series[0].data.forEach((item: any) => {
        titleTotal += item.value || 0
      })
      
      titleChartTableData.value = []
      titleChartOption.value.series[0].data.forEach((item: any) => {
        const rate = titleTotal > 0 ? Number((item.value / titleTotal * 100).toFixed(1)) : 0
        titleChartTableData.value.push({
          name: item.name,
          value: item.value,
          rate: `${rate}%`
        })
      })
    }
    
    // 技术职务图表
    techChartOption.value = data.techOption || {}
    let techTotal = 0
    if (techChartOption.value.series && techChartOption.value.series[0] && techChartOption.value.series[0].data) {
      techChartOption.value.series[0].data.forEach((item: any) => {
        techTotal += item.value || 0
      })
      
      techChartTableData.value = []
      techChartOption.value.series[0].data.forEach((item: any) => {
        const rate = techTotal > 0 ? Number((item.value / techTotal * 100).toFixed(1)) : 0
        techChartTableData.value.push({
          name: item.name,
          value: item.value,
          rate: `${rate}%`
        })
      })
    }
  } catch (error) {
    // Failed to load chart data
  }
}

// 页面加载时初始化图表
onMounted(() => {
  initChartOption()
})
</script>

<style lang="scss" scoped>
</style>

