<script setup>
const props = defineProps({
  data: {
    type: Object,
    required: true,
  },
})
const collapse = ref([])
const jsonData = ref({})
const chartData = ref({})
const opts = ref({
  rotate: false,
  rotateLock: false,
  color: ['#1890FF', '#91CB74', '#FAC858', '#EE6666', '#73C0DE', '#3CA272', '#FC8452', '#9A60B4', '#ea7ccc'],
  padding: [15, 15, 15, 15],
  dataLabel: false,
  enableScroll: false,
  legend: {
    show: true,
    position: 'right',
    lineHeight: 25,
  },
  title: {
    name: '涉诉案件数',
    fontSize: 14,
    color: '#666666',
  },
  subtitle: {
    name: '0', // 默认值为 0，稍后会动态更新
    fontSize: 25,
    color: '#EE6666',
  },
  extra: {
    ring: {
      ringWidth: 30,
      activeOpacity: 0.5,
      activeRadius: 10,
      offsetAngle: 0,
      labelWidth: 15,
      border: true,
      borderWidth: 3,
      borderColor: '#FFFFFF',
      linearType: 'custom',
    },
  },
})

onMounted(() => {
  jsonData.value = props.data

  // 计算每种案件的数量，并生成图表数据
  const caseCounts = {
    criminal: jsonData.value.criminal?.cases?.length || 0,
    civil: jsonData.value.civil?.cases?.length || 0,
    administrative: jsonData.value.administrative?.cases?.length || 0,
    preservation: jsonData.value.preservation?.cases?.length || 0,
    implement: jsonData.value.implement?.cases?.length || 0,
    bankrupt: jsonData.value.bankrupt?.cases?.length || 0,
  }

  // 生成 QiunDataCharts 图表的数据格式
  chartData.value = {
    series: [
      {
        data: [
          { name: `刑事案件${caseCounts.criminal}件`, value: caseCounts.criminal, labelText: `刑事案件${caseCounts.criminal}件` },
          { name: `民事案件${caseCounts.civil}件`, value: caseCounts.civil, labelText: `民事案件${caseCounts.civil}件` },
          { name: `行政案件${caseCounts.administrative}件`, value: caseCounts.administrative, labelText: `行政案件${caseCounts.administrative}件` },
          { name: `非诉保全审查${caseCounts.preservation}件`, value: caseCounts.preservation, labelText: `非诉保全审查${caseCounts.preservation}件` },
          { name: `执行案件${caseCounts.implement}件`, value: caseCounts.implement, labelText: `执行案件${caseCounts.implement}件` },
          { name: `强制清算与破产${caseCounts.bankrupt}件`, value: caseCounts.bankrupt, labelText: `强制清算与破产${caseCounts.bankrupt}件` },
        ],
      },
    ],
  }

  // 计算涉诉总案件数
  const totalCases = Object.values(caseCounts).reduce((sum, count) => sum + count, 0)
  opts.value.subtitle.name = totalCases.toString() // 更新 subtitle 的 name 属性
})

const caseTypes = computed(() => {
  const data = jsonData.value
  return {
    civil: data.civil?.cases || [],
    criminal: data.criminal?.cases || [],
    administrative: data.administrative?.cases || [],
    preservation: data.preservation?.cases || [],
    implement: data.implement?.cases || [],
    bankrupt: data.bankrupt?.cases || [],
  }
})

function getCaseTypeName(caseType) {
  const caseTypeNames = {
    civil: '民事',
    criminal: '刑事',
    administrative: '行政',
    preservation: '非诉保全审查',
    implement: '执行',
    bankrupt: '强制清算与破产',
  }
  return caseTypeNames[caseType] || caseType
}
</script>

<template>
  <view class="card">
    <view class="flex flex-col gap-y-4">
      <!-- 涉诉案件统计 -->
      <LTitle title="涉诉案件统计" type="blue-green" />
      <qiun-data-charts type="ring" :opts="opts" :chart-data="chartData" />
      <template v-for="(caseType, typeName) in caseTypes" :key="typeName">
        <LTitle :title="` ${getCaseTypeName(typeName)}案件`" type="blue-green" />
        <view v-if="!caseType || caseType.length === 0">
          无记录，或数据未被公开
        </view>
        <template v-else>
          <wd-collapse v-model="collapse">
            <wd-collapse-item
              v-for="(caseData, index) in caseType" :key="index" custom-class="collapse" :name="index"
              :title="`案件: ${caseData.c_ah}`"
            >
              <view class="case-row">
                <view class="case-label">
                  案号:
                </view>
                <view class="case-value">
                  {{ caseData.c_ah || '-' }}
                </view>
              </view>
              <view class="case-row">
                <view class="case-label">
                  案件类型:
                </view>
                <view class="case-value">
                  {{ caseData.n_ajlx || '-' }}
                </view>
              </view>
              <view class="case-row">
                <view class="case-label">
                  经办法院:
                </view>
                <view class="case-value">
                  {{ caseData.n_jbfy || '-' }}
                </view>
              </view>
              <view class="case-row">
                <view class="case-label">
                  立案日期:
                </view>
                <view class="case-value">
                  {{ caseData.d_larq || '-' }}
                </view>
              </view>
              <view class="case-row">
                <view class="case-label">
                  结案方式:
                </view>
                <view class="case-value">
                  {{ caseData.n_jafs || '-' }}
                </view>
              </view>
              <view class="case-row">
                <view class="case-label">
                  当事人信息:
                </view>
                <view class="case-value">
                  <view v-for="dsr in caseData.c_dsrxx" :key="dsr.c_mc">
                    {{ dsr.c_mc }} - {{ dsr.n_ssdw === '申请执行人' ? '申请执行人' : '被执行人' }}
                  </view>
                </view>
              </view>
            </wd-collapse-item>
          </wd-collapse>
        </template>
      </template>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.case-row {
  @apply flex items-start justify-between my-2;
}

.case-label {
  @apply flex-shrink-0 font-bold
}

.case-value {
  @apply text-right
}

/* :deep(.wd-collapse-item__header) {
  padding: 0;
} */

:deep(.wd-collapse-item__body) {
  padding: 0;
  @apply text-sm
}
</style>
