<template>
  <div class="card rounded-lg border border-gray-200 mb-2">
    <div class="mt-4">
      <LTitle title="还款机构数与等级概览" />

      <!-- 还款成功 / 失败机构数对比图 -->
      <div class="h-64 px-2 mb-4">
        <v-chart class="chart-container" :option="orgChartOption" autoresize />
      </div>

      <div class="mb-4 mt-4 space-y-4">
        <!-- 还款成功机构数 -->
        <div>
          <div class="mb-4 border border-gray-200 rounded-lg overflow-hidden mx-4">
            <!-- 表头 -->
            <div class="bg-[#5d7eeb] text-white">
              <div class="grid grid-cols-2 text-sm">
                <div class="py-3 px-4 text-left font-semibold border-r border-white whitespace-nowrap">周期</div>
                <div class="py-3 px-4 text-center font-semibold whitespace-nowrap">机构数</div>
              </div>
            </div>
            <!-- 数据行 -->
            <div class="bg-white">
              <div v-for="(row, idx) in successOrgRows" :key="row.key" 
                :class="['grid grid-cols-2 text-sm', idx < successOrgRows.length - 1 ? 'border-b border-gray-200' : '']">
                <div class="py-3 px-4 font-medium text-gray-800 border-r border-gray-200 whitespace-nowrap">{{ row.label }}</div>
                <div class="py-3 px-4 text-center text-[#333333] font-semibold whitespace-nowrap">{{ row.value }}</div>
              </div>
            </div>
          </div>
        </div>

        <!-- 还款失败机构数 -->
        <div>
          <div class="mb-4 border border-gray-200 rounded-lg overflow-hidden mx-4">
            <!-- 表头 -->
            <div class="bg-[#5d7eeb] text-white">
              <div class="grid grid-cols-2 text-sm">
                <div class="py-3 px-4 text-left font-semibold border-r border-white whitespace-nowrap">周期</div>
                <div class="py-3 px-4 text-center font-semibold whitespace-nowrap">机构数</div>
              </div>
            </div>
            <!-- 数据行 -->
            <div class="bg-white">
              <div v-for="(row, idx) in failOrgRows" :key="row.key" 
                :class="['grid grid-cols-2 text-sm', idx < failOrgRows.length - 1 ? 'border-b border-gray-200' : '']">
                <div class="py-3 px-4 font-medium text-gray-800 border-r border-gray-200 whitespace-nowrap">{{ row.label }}</div>
                <div class="py-3 px-4 text-center text-[#333333] font-semibold whitespace-nowrap">{{ row.value }}</div>
              </div>
            </div>
          </div>
        </div>

        <!-- 还款成功 / 失败等级（综合） -->
        <div>
          <div class="mb-4 border border-gray-200 rounded-lg overflow-hidden mx-4">
            <!-- 表头 -->
            <div class="bg-[#5d7eeb] text-white">
              <div class="grid grid-cols-3 text-sm">
                <div class="py-3 px-4 text-left font-semibold border-r border-white whitespace-nowrap">周期</div>
                <div class="py-3 px-4 text-center font-semibold border-r border-white whitespace-nowrap">成功等级</div>
                <div class="py-3 px-4 text-center font-semibold whitespace-nowrap">失败等级</div>
              </div>
            </div>
            <!-- 数据行 -->
            <div class="bg-white">
              <div v-for="(row, idx) in levelRows" :key="row.key" 
                :class="['grid grid-cols-3 text-sm', idx < levelRows.length - 1 ? 'border-b border-gray-200' : '']">
                <div class="py-3 px-4 font-medium text-gray-800 border-r border-gray-200 whitespace-nowrap">{{ row.label }}</div>
                <div class="py-3 px-4 text-center text-[#333333] border-r border-gray-200 whitespace-nowrap">{{ row.succ }}</div>
                <div class="py-3 px-4 text-center text-[#333333] font-semibold whitespace-nowrap">{{ row.fail }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import LTitle from '@/components/LTitle.vue'
import VChart from 'vue-echarts'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { BarChart } from 'echarts/charts'
import { GridComponent, LegendComponent, TooltipComponent } from 'echarts/components'
import { PERIODS, normalizeValue } from '../utils/dataParser'

use([CanvasRenderer, BarChart, GridComponent, LegendComponent, TooltipComponent])

const props = defineProps({
  data: {
    type: Object,
    required: true,
    default: () => ({})
  }
})

// 还款成功机构数 ppcm_{period}_succ_reporg
const successOrgRows = computed(() => {
  const v = props.data || {}
  return PERIODS.map(p => {
    const prefix = `ppcm_${p.key}`
    return {
      key: p.key,
      label: p.label,
      value: normalizeValue(v[`${prefix}_succ_reporg`])
    }
  })
})

// 还款失败机构数 ppcm_{period}_fail_reporg
const failOrgRows = computed(() => {
  const v = props.data || {}
  return PERIODS.map(p => {
    const prefix = `ppcm_${p.key}`
    return {
      key: p.key,
      label: p.label,
      value: normalizeValue(v[`${prefix}_fail_reporg`])
    }
  })
})

// 还款成功 / 失败等级 ppcm_{period}_succ_repamt / fail_repamt
const levelRows = computed(() => {
  const v = props.data || {}
  return PERIODS.map(p => {
    const prefix = `ppcm_${p.key}`
    return {
      key: p.key,
      label: p.label,
      succ: normalizeValue(v[`${prefix}_succ_repamt`]),
      fail: normalizeValue(v[`${prefix}_fail_repamt`])
    }
  })
})

// 成功 / 失败机构数对比图
const orgChartOption = computed(() => {
  const labels = PERIODS.map(p => p.label)
  const succ = successOrgRows.value.map(r => r.value)
  const fail = failOrgRows.value.map(r => r.value)

  return {
    tooltip: {
      trigger: 'axis',
      axisPointer: { type: 'shadow' }
    },
    legend: {
      top: 0,
      icon: 'circle',
      textStyle: {
        fontSize: 12,
        color: '#4b5563'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      top: 24,
      bottom: 0,
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: labels,
      axisLabel: {
        fontSize: 12,
        color: '#6b7280'
      },
      axisLine: {
        lineStyle: {
          color: '#e5e7eb'
        }
      }
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        fontSize: 12,
        color: '#6b7280',
        formatter: '{value} 家'
      },
      splitLine: {
        lineStyle: {
          color: '#f3f4f6'
        }
      }
    },
    series: [
      {
        name: '还款成功机构数',
        type: 'bar',
        data: succ,
        barWidth: '30%',
        barMinHeight: 3,
        itemStyle: {
          color: '#34D399',
          borderRadius: [4, 4, 0, 0]
        }
      },
      {
        name: '还款失败机构数',
        type: 'bar',
        data: fail,
        barWidth: '30%',
        barMinHeight: 3,
        itemStyle: {
          color: '#F97316',
          borderRadius: [4, 4, 0, 0]
        }
      }
    ]
  }
})
</script>

<style scoped>
.card {
  background: #ffffff;
}

.chart-container {
  width: 100%;
  height: 100%;
}
</style>


