<script setup>
import * as echarts from 'echarts' // 引入 ECharts
import LTable from '@/components/LTable.vue'
import LTitle from '@/components/LTitle.vue'
import { useRiskNotifier } from '@/composables/useRiskNotifier'

const props = defineProps({
  data: {
    type: Object,
    required: true,
  },
  apiId: {
    type: String,
    default: '',
  },
  index: {
    type: Number,
    default: 0,
  },
  notifyRiskStatus: {
    type: Function,
    default: () => { },
  },
})
const { data } = props

// 图表相关
const chartInstance = ref(null) // ECharts 实例
const chartRef = ref(null) // 图表容器 DOM
const orgPieChartRef = ref(null) // 机构类型饼图容器
const orgPieChartInstance = ref(null) // 机构类型饼图实例
const chartData = ref({})

// 颜色配置
const opts = ref({
  color: ['#4B96FF', '#3CA272', '#EE6666', '#FAC858', '#73C0DE', '#B280E9', '#FF8463'],
  idColor: '#4B96FF', // 身份证数据颜色
  cellColor: '#3CA272', // 手机号数据颜色
})

// 表格数据
const tableData = ref({
  id: [],
  cell: [],
})
const dateTableData = ref({
  id: [],
  cell: [],
})
const totalStatsData = ref({
  id: {
    totalApplyCount: [],
    totalOrgCount: [],
  },
  cell: {
    totalApplyCount: [],
    totalOrgCount: [],
  },
})

// 按钮选项
const timeOptions = ref([
  { label: '近7日', value: 0 },
  { label: '近1月', value: 1 },
  { label: '近3月', value: 2 },
  { label: '近6月', value: 3 },
  { label: '近1年', value: 4 },
])

const dataSourceOptions = ref([
  { label: '身份证匹配数据', value: 'id' },
  { label: '手机号匹配数据', value: 'cell' },
])

const selectedTimeOption = ref(0)
const dateSelectedOption = ref(0)
const selectedDataSource = ref('id')
const selectedStatType = ref('apply') // 'apply' 或 'org'
const statTabOptions = ref([
  { label: '申请次数', value: 'apply' },
  { label: '申请机构数', value: 'org' },
])

// 时间维度映射
const timeDimensions = {
  d7: '近7日',
  m1: '近1月',
  m3: '近3月',
  m6: '近6月',
  m12: '近1年',
}

// 机构类型映射，更加用户友好的描述
const orgMappings = {
  bank: '银行借贷',
  mc: '小额贷款',
  cf: '消费分期',
  ca: '现金分期',
  rel: '信用卡相关',
  af: '汽车金融',
  other: '其他借贷',
}

// 详细机构类型分组
const tableGroup = {
  bank: [{ code: 'bank', name: '银行借贷机构' }],
  mc: [
    { code: 'nbank_mc', name: '小贷机构' },
    { code: 'nbank_nsloan', name: '持牌网络小贷' },
    { code: 'nbank_sloan', name: '持牌小贷机构' },
    { code: 'pdl', name: '线上小额现金贷' },
  ],
  cf: [
    { code: 'nbank_cf', name: '消费类分期机构' },
    { code: 'coon', name: '线上消费分期' },
    { code: 'cooff', name: '线下消费分期' },
  ],
  ca: [
    { code: 'nbank_ca', name: '现金类分期机构' },
    { code: 'caon', name: '线上现金分期' },
    { code: 'caoff', name: '线下现金分期' },
    { code: 'nbank_com', name: '代偿类分期机构' },
  ],
  rel: [{ code: 'rel', name: '信用卡（类信用卡）' }],
  af: [
    { code: 'af', name: '汽车金融' },
    { code: 'nbank_autofin', name: '持牌汽车金融机构' },
  ],
  other: [
    { code: 'nbank_p2p', name: '改制机构' },
    { code: 'nbank_cons', name: '持牌消费金融机构' },
    { code: 'nbank_finlea', name: '持牌融资租赁机构' },
    { code: 'nbank_oth', name: '其他非银借贷类型申请' },
    { code: 'nbank_else', name: '其他非银类型申请' },
    { code: 'oth', name: '其他银行借贷类型申请' },
    { code: 'else', name: '其他银行类型申请' },
  ],
}

// 特殊时段类型
const dateGroup = {
  week: [
    { code: 'bank_week', name: '周末银行' },
    { code: 'nbank_week', name: '周末非银' },
  ],
  night: [
    { code: 'bank_night', name: '夜间银行' },
    { code: 'nbank_night', name: '夜间非银' },
  ],
}

// 初始化图表
function initChart() {
  if (!chartRef.value) return

  if (!chartInstance.value) {
    chartInstance.value = echarts.init(chartRef.value)
  }

  const option = {
    color: opts.value.color,
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
        shadowStyle: {
          color: 'rgba(0,0,0,0.05)',
        },
      },
      textStyle: {
        fontSize: 12,
      },
      backgroundColor: 'rgba(50,50,50,0.9)',
      borderRadius: 4,
      shadowColor: 'rgba(0,0,0,0.3)',
      shadowBlur: 10,
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '10%',

      containLabel: true,
    },
    xAxis: {
      type: 'category',
      data: chartData.value.categories || [],
      axisLabel: {
        interval: 0,
        rotate: 0,
        fontSize: 12,
        color: '#666',
      },
      axisLine: {
        lineStyle: {
          color: '#ddd',
        },
      },
    },
    yAxis: {
      type: 'value',
      name: '数量',
      nameTextStyle: {
        color: '#666',
        fontSize: 12,
      },
      splitLine: {
        lineStyle: {
          type: 'dashed',
          color: '#eee',
        },
      },
    },
    legend: {
      data: chartData.value.series?.map(item => item.name) || [],
      bottom: '0%',
      textStyle: {
        fontSize: 12,
      },
      selectedMode: true,
    },
    series: (chartData.value.series || []).map(item => ({
      name: item.name,
      type: 'bar',
      data: item.data || [],
      barMaxWidth: 50,
      barGap: '30%',
      barMinHeight: 3,
      label: {
        show: true,
        position: 'top',
        formatter: '{c}',
        fontSize: 12,
        fontWeight: 'bold',
      },
      itemStyle: {
        borderRadius: [3, 3, 0, 0],
        shadowColor: 'rgba(0,0,0,0.2)',
        shadowBlur: 8,
        shadowOffsetX: 2,
        shadowOffsetY: 2,
      },
    })),
  }
  chartInstance.value.setOption(option)
}

// 初始化机构类型饼图
function initOrgPieChart() {
  if (!orgPieChartRef.value) return

  if (!orgPieChartInstance.value) {
    orgPieChartInstance.value = echarts.init(orgPieChartRef.value)
  }

  // 从当前显示的tableData中获取数据
  const currentData = transformedTableData.value?.[selectedDataSource.value]?.[selectedStatType.value] || []

  if (!currentData || currentData.length === 0) {
    // 如果没有数据，设置一个空的饼图
    const option = {
      title: {
        text: '暂无数据',
        left: 'center',
        top: 'center',
      },
      series: [
        {
          type: 'pie',
          radius: ['40%', '70%'],
          data: [],
        },
      ],
    }
    orgPieChartInstance.value.setOption(option)
    return
  }

  const pieData = currentData.map(item => ({
    name: item.label,
    value: item.value,
  }))

  const option = {
    color: opts.value.color,
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} ({d}%)',
    },
    legend: {
      orient: 'vertical',
      right: 0,
      top: 'center',
      data: pieData.map(item => item.name),
    },
    series: [
      {
        name: selectedStatType.value === 'apply' ? '申请次数' : '申请机构数',
        type: 'pie',
        radius: ['35%', '60%'], // 缩小饼图尺寸
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: 'center',
        },
        emphasis: {
          label: {
            show: true,
            fontSize: '14',
            fontWeight: 'bold',
          },
        },
        labelLine: {
          show: false,
        },
        data: pieData,
        center: ['32%', '50%'], // 将饼图位置向左移动
        itemStyle: {
          borderRadius: 8, // 添加圆角
          borderWidth: 2, // 添加边框
          borderColor: '#fff', // 边框颜色
          shadowBlur: 10, // 添加阴影
          shadowColor: 'rgba(0, 0, 0, 0.2)', // 阴影颜色
        },
        // 添加3D效果
        // roseType: 'radius',
        zlevel: 1,
      },
    ],
  }

  orgPieChartInstance.value.setOption(option)
}

// 将表格数据转换为按时间维度展示的格式
const transformedTableData = computed(() => {
  const result = {
    id: {
      // 申请次数数据
      apply: [],
      // 机构数数据
      org: [],
    },
    cell: {
      apply: [],
      org: [],
    },
  }

  // 遍历所有机构类型
  Object.keys(orgMappings).forEach(orgType => {
    // ID数据 - 申请次数
    const idApplyItem = {
      label: orgMappings[orgType],
      d7: tableData.value?.id?.[0]?.find(i => i.name === orgType)?.totalApplyCount || 0,
      m1: tableData.value?.id?.[1]?.find(i => i.name === orgType)?.totalApplyCount || 0,
      m3: tableData.value?.id?.[2]?.find(i => i.name === orgType)?.totalApplyCount || 0,
      m6: tableData.value?.id?.[3]?.find(i => i.name === orgType)?.totalApplyCount || 0,
      m12: tableData.value?.id?.[4]?.find(i => i.name === orgType)?.totalApplyCount || 0,
      value: tableData.value?.id?.[selectedTimeOption.value]?.find(i => i.name === orgType)?.totalApplyCount || 0,
    }
    result.id.apply.push(idApplyItem)

    // ID数据 - 机构数
    const idOrgItem = {
      label: orgMappings[orgType],
      d7: tableData.value?.id?.[0]?.find(i => i.name === orgType)?.totalOrgCount || 0,
      m1: tableData.value?.id?.[1]?.find(i => i.name === orgType)?.totalOrgCount || 0,
      m3: tableData.value?.id?.[2]?.find(i => i.name === orgType)?.totalOrgCount || 0,
      m6: tableData.value?.id?.[3]?.find(i => i.name === orgType)?.totalOrgCount || 0,
      m12: tableData.value?.id?.[4]?.find(i => i.name === orgType)?.totalOrgCount || 0,
      value: tableData.value?.id?.[selectedTimeOption.value]?.find(i => i.name === orgType)?.totalOrgCount || 0,
    }
    result.id.org.push(idOrgItem)

    // Cell数据 - 申请次数
    const cellApplyItem = {
      label: orgMappings[orgType],
      d7: tableData.value?.cell?.[0]?.find(i => i.name === orgType)?.totalApplyCount || 0,
      m1: tableData.value?.cell?.[1]?.find(i => i.name === orgType)?.totalApplyCount || 0,
      m3: tableData.value?.cell?.[2]?.find(i => i.name === orgType)?.totalApplyCount || 0,
      m6: tableData.value?.cell?.[3]?.find(i => i.name === orgType)?.totalApplyCount || 0,
      m12: tableData.value?.cell?.[4]?.find(i => i.name === orgType)?.totalApplyCount || 0,
      value: tableData.value?.cell?.[selectedTimeOption.value]?.find(i => i.name === orgType)?.totalApplyCount || 0,
    }
    result.cell.apply.push(cellApplyItem)

    // Cell数据 - 机构数
    const cellOrgItem = {
      label: orgMappings[orgType],
      d7: tableData.value?.cell?.[0]?.find(i => i.name === orgType)?.totalOrgCount || 0,
      m1: tableData.value?.cell?.[1]?.find(i => i.name === orgType)?.totalOrgCount || 0,
      m3: tableData.value?.cell?.[2]?.find(i => i.name === orgType)?.totalOrgCount || 0,
      m6: tableData.value?.cell?.[3]?.find(i => i.name === orgType)?.totalOrgCount || 0,
      m12: tableData.value?.cell?.[4]?.find(i => i.name === orgType)?.totalOrgCount || 0,
      value: tableData.value?.cell?.[selectedTimeOption.value]?.find(i => i.name === orgType)?.totalOrgCount || 0,
    }
    result.cell.org.push(cellOrgItem)
  })

  return result
})

// 特殊时段申请数据转换
const transformedDateTableData = computed(() => {
  const result = {
    id: {
      apply: [],
      org: [],
    },
    cell: {
      apply: [],
      org: [],
    },
  }

  // 特殊时段名称映射
  const dateTypeMappings = {
    week: '周末申请',
    night: '夜间申请',
  }

  // 遍历所有特殊时段类型
  Object.keys(dateTypeMappings).forEach(dateType => {
    // ID数据 - 申请次数
    const idApplyItem = {
      label: dateTypeMappings[dateType],
      d7: dateTableData.value?.id?.[0]?.find(i => i.name === dateType)?.totalApplyCount || 0,
      m1: dateTableData.value?.id?.[1]?.find(i => i.name === dateType)?.totalApplyCount || 0,
      m3: dateTableData.value?.id?.[2]?.find(i => i.name === dateType)?.totalApplyCount || 0,
      m6: dateTableData.value?.id?.[3]?.find(i => i.name === dateType)?.totalApplyCount || 0,
      m12: dateTableData.value?.id?.[4]?.find(i => i.name === dateType)?.totalApplyCount || 0,
    }
    result.id.apply.push(idApplyItem)

    // ID数据 - 机构数
    const idOrgItem = {
      label: dateTypeMappings[dateType],
      d7: dateTableData.value?.id?.[0]?.find(i => i.name === dateType)?.totalOrgCount || 0,
      m1: dateTableData.value?.id?.[1]?.find(i => i.name === dateType)?.totalOrgCount || 0,
      m3: dateTableData.value?.id?.[2]?.find(i => i.name === dateType)?.totalOrgCount || 0,
      m6: dateTableData.value?.id?.[3]?.find(i => i.name === dateType)?.totalOrgCount || 0,
      m12: dateTableData.value?.id?.[4]?.find(i => i.name === dateType)?.totalOrgCount || 0,
    }
    result.id.org.push(idOrgItem)

    // Cell数据 - 申请次数
    const cellApplyItem = {
      label: dateTypeMappings[dateType],
      d7: dateTableData.value?.cell?.[0]?.find(i => i.name === dateType)?.totalApplyCount || 0,
      m1: dateTableData.value?.cell?.[1]?.find(i => i.name === dateType)?.totalApplyCount || 0,
      m3: dateTableData.value?.cell?.[2]?.find(i => i.name === dateType)?.totalApplyCount || 0,
      m6: dateTableData.value?.cell?.[3]?.find(i => i.name === dateType)?.totalApplyCount || 0,
      m12: dateTableData.value?.cell?.[4]?.find(i => i.name === dateType)?.totalApplyCount || 0,
    }
    result.cell.apply.push(cellApplyItem)

    // Cell数据 - 机构数
    const cellOrgItem = {
      label: dateTypeMappings[dateType],
      d7: dateTableData.value?.cell?.[0]?.find(i => i.name === dateType)?.totalOrgCount || 0,
      m1: dateTableData.value?.cell?.[1]?.find(i => i.name === dateType)?.totalOrgCount || 0,
      m3: dateTableData.value?.cell?.[2]?.find(i => i.name === dateType)?.totalOrgCount || 0,
      m6: dateTableData.value?.cell?.[3]?.find(i => i.name === dateType)?.totalOrgCount || 0,
      m12: dateTableData.value?.cell?.[4]?.find(i => i.name === dateType)?.totalOrgCount || 0,
    }
    result.cell.org.push(cellOrgItem)
  })

  // 添加首次和最近申请数据
  if (dateTableData.value?.id?.[4]?.some(i => i.name === 'first_apply')) {
    const firstApply = dateTableData.value.id[4].find(i => i.name === 'first_apply')
    const lastApply = dateTableData.value.id[4].find(i => i.name === 'last_apply')

    result.id.apply.push({
      label: '最早非银申请',
      m12: firstApply?.totalApplyCount || '-',
      specialDisplay: true,
    })

    result.id.apply.push({
      label: '最近非银申请',
      m12: lastApply?.totalApplyCount || '-',
      specialDisplay: true,
    })

    result.id.org.push({
      label: '最早非银申请',
      m12: '-',
      specialDisplay: true,
    })

    result.id.org.push({
      label: '最近非银申请',
      m12: '-',
      specialDisplay: true,
    })
  }

  if (dateTableData.value?.cell?.[4]?.some(i => i.name === 'first_apply')) {
    const firstApply = dateTableData.value.cell[4].find(i => i.name === 'first_apply')
    const lastApply = dateTableData.value.cell[4].find(i => i.name === 'last_apply')

    result.cell.apply.push({
      label: '最早非银申请',
      m12: firstApply?.totalApplyCount || '-',
      specialDisplay: true,
    })

    result.cell.apply.push({
      label: '最近非银申请',
      m12: lastApply?.totalApplyCount || '-',
      specialDisplay: true,
    })

    result.cell.org.push({
      label: '最早非银申请',
      m12: '-',
      specialDisplay: true,
    })

    result.cell.org.push({
      label: '最近非银申请',
      m12: '-',
      specialDisplay: true,
    })
  }

  return result
})

// 更新图表
function updateChart() {
  if (chartInstance.value) {
    initChart()
  }
  if (orgPieChartInstance.value) {
    initOrgPieChart()
  }
}

// 计算总体统计数据
function calculateTotalStats(data) {
  // 获取时间维度列表
  const timeKeys = Object.keys(timeDimensions)

  // 初始化结果对象
  const result = {
    id: {
      totalApplyCount: [],
      totalOrgCount: [],
    },
    cell: {
      totalApplyCount: [],
      totalOrgCount: [],
    },
  }

  // 机构类型
  const orgTypes = ['bank', 'nbank']

  // 遍历每个时间维度
  for (const timeKey of timeKeys) {
    // ID数据
    let idTotalApplyCount = 0
    let idTotalOrgCount = 0

    // Cell数据
    let cellTotalApplyCount = 0
    let cellTotalOrgCount = 0

    // 遍历每种机构类型并累加
    orgTypes.forEach(orgType => {
      // ID数据统计
      const idApplyCountKey = `als_${timeKey}_id_${orgType}_allnum`
      const idOrgCountKey = `als_${timeKey}_id_${orgType}_orgnum`
      if (data?.[idApplyCountKey] !== undefined && data?.[idOrgCountKey] !== undefined) {
        idTotalApplyCount += Number(data?.[idApplyCountKey] || 0)
        idTotalOrgCount += Number(data?.[idOrgCountKey] || 0)
      }

      // Cell数据统计
      const cellApplyCountKey = `als_${timeKey}_cell_${orgType}_allnum`
      const cellOrgCountKey = `als_${timeKey}_cell_${orgType}_orgnum`
      if (data?.[cellApplyCountKey] !== undefined && data?.[cellOrgCountKey] !== undefined) {
        cellTotalApplyCount += Number(data?.[cellApplyCountKey] || 0)
        cellTotalOrgCount += Number(data?.[cellOrgCountKey] || 0)
      }
    })

    // 添加到结果对象
    result.id.totalApplyCount.push(idTotalApplyCount)
    result.id.totalOrgCount.push(idTotalOrgCount)
    result.cell.totalApplyCount.push(cellTotalApplyCount)
    result.cell.totalOrgCount.push(cellTotalOrgCount)
  }

  return result
}

// 计算各借贷类型统计数据
function typeTotalStats(data) {
  // 时间维度列表
  const timeKeys = Object.keys(timeDimensions)

  // 初始化结果数组 - 按数据来源分组
  const result = {
    id: [],
    cell: [],
  }

  // 遍历每个时间维度
  for (const timeKey of timeKeys) {
    const idTableDataEntry = []
    const cellTableDataEntry = []

    // 遍历每种借贷类型并累加
    Object.keys(orgMappings).forEach(groupOrgType => {
      const orgTypeArray = tableGroup[groupOrgType]

      // ID数据统计
      let idTotalApplyCount = 0
      let idTotalOrgCount = 0

      // Cell数据统计
      let cellTotalApplyCount = 0
      let cellTotalOrgCount = 0

      for (const i of orgTypeArray) {
        // ID数据统计
        const idApplyCountKey = `als_${timeKey}_id_${i.code}_allnum`
        const idOrgCountKey = `als_${timeKey}_id_${i.code}_orgnum`
        idTotalApplyCount += Number(data?.[idApplyCountKey] || 0)
        idTotalOrgCount += Number(data?.[idOrgCountKey] || 0)

        // Cell数据统计
        const cellApplyCountKey = `als_${timeKey}_cell_${i.code}_allnum`
        const cellOrgCountKey = `als_${timeKey}_cell_${i.code}_orgnum`
        cellTotalApplyCount += Number(data?.[cellApplyCountKey] || 0)
        cellTotalOrgCount += Number(data?.[cellOrgCountKey] || 0)
      }

      // 添加到ID表格数据
      idTableDataEntry.push({
        label: orgMappings[groupOrgType],
        name: groupOrgType,
        totalApplyCount: idTotalApplyCount,
        totalOrgCount: idTotalOrgCount,
      })

      // 添加到Cell表格数据
      cellTableDataEntry.push({
        label: orgMappings[groupOrgType],
        name: groupOrgType,
        totalApplyCount: cellTotalApplyCount,
        totalOrgCount: cellTotalOrgCount,
      })
    })

    // 添加到结果
    result.id.push(idTableDataEntry)
    result.cell.push(cellTableDataEntry)
  }

  return result
}

// 计算特殊时段统计数据
function dateTotalStats(data) {
  // 时间维度列表
  const timeKeys = Object.keys(timeDimensions)

  // 特殊时段名称映射
  const dateTypeMappings = {
    week: '周末申请',
    night: '夜间申请 (晚8点至次日早8点)',
  }

  // 初始化结果数组 - 按数据来源分组
  const result = {
    id: [],
    cell: [],
  }

  // 遍历每个时间维度
  for (const timeKey of timeKeys) {
    const idTableDataEntry = []
    const cellTableDataEntry = []

    // 遍历每种特殊时段类型
    Object.keys(dateTypeMappings).forEach(dateType => {
      const typeArray = dateGroup[dateType]

      // ID数据统计
      let idTotalApplyCount = 0
      let idTotalOrgCount = 0

      // Cell数据统计
      let cellTotalApplyCount = 0
      let cellTotalOrgCount = 0

      for (const i of typeArray) {
        // ID数据统计
        const idApplyCountKey = `als_${timeKey}_id_${i.code}_allnum`
        const idOrgCountKey = `als_${timeKey}_id_${i.code}_orgnum`
        idTotalApplyCount += Number(data?.[idApplyCountKey] || 0)
        idTotalOrgCount += Number(data?.[idOrgCountKey] || 0)

        // Cell数据统计
        const cellApplyCountKey = `als_${timeKey}_cell_${i.code}_allnum`
        const cellOrgCountKey = `als_${timeKey}_cell_${i.code}_orgnum`
        cellTotalApplyCount += Number(data?.[cellApplyCountKey] || 0)
        cellTotalOrgCount += Number(data?.[cellOrgCountKey] || 0)
      }

      // 添加到ID表格数据
      idTableDataEntry.push({
        label: dateTypeMappings[dateType],
        name: dateType,
        totalApplyCount: idTotalApplyCount,
        totalOrgCount: idTotalOrgCount,
      })

      // 添加到Cell表格数据
      cellTableDataEntry.push({
        label: dateTypeMappings[dateType],
        name: dateType,
        totalApplyCount: cellTotalApplyCount,
        totalOrgCount: cellTotalOrgCount,
      })
    })

    // 添加最早和最近申请时间（如果存在数据）
    if (timeKey === 'm12') {
      // 最早申请日期（间隔天数）
      const idFirstApplyKey = 'als_fst_id_nbank_inteday'
      const cellFirstApplyKey = 'als_fst_cell_nbank_inteday'

      // 最近申请日期（间隔天数）
      const idLastApplyKey = 'als_lst_id_nbank_inteday'
      const cellLastApplyKey = 'als_lst_cell_nbank_inteday'

      if (data?.[idFirstApplyKey]) {
        idTableDataEntry.push({
          label: '最早非银借贷申请',
          name: 'first_apply',
          totalApplyCount: `${data[idFirstApplyKey]}天前`,
          totalOrgCount: '-',
        })
      }

      if (data?.[idLastApplyKey]) {
        idTableDataEntry.push({
          label: '最近非银借贷申请',
          name: 'last_apply',
          totalApplyCount: `${data[idLastApplyKey]}天前`,
          totalOrgCount: '-',
        })
      }

      if (data?.[cellFirstApplyKey]) {
        cellTableDataEntry.push({
          label: '最早非银借贷申请',
          name: 'first_apply',
          totalApplyCount: `${data[cellFirstApplyKey]}天前`,
          totalOrgCount: '-',
        })
      }

      if (data?.[cellLastApplyKey]) {
        cellTableDataEntry.push({
          label: '最近非银借贷申请',
          name: 'last_apply',
          totalApplyCount: `${data[cellLastApplyKey]}天前`,
          totalOrgCount: '-',
        })
      }
    }

    // 添加到结果
    result.id.push(idTableDataEntry)
    result.cell.push(cellTableDataEntry)
  }

  return result
}

// 计算总结统计数据
function calculateSummaryStats(data) {
  // 获取最大借贷次数和最大机构数
  const maxData = {
    id: {
      maxApply: 0,
      maxOrg: 0,
      avgMonthlyApply: 0,
    },
    cell: {
      maxApply: 0,
      maxOrg: 0,
      avgMonthlyApply: 0,
    },
  }

  // 检查是否有最大月申请次数数据
  if (data?.als_m12_id_max_monnum) {
    maxData.id.maxApply = Number(data.als_m12_id_max_monnum)
  }

  if (data?.als_m12_cell_max_monnum) {
    maxData.cell.maxApply = Number(data.als_m12_cell_max_monnum)
  }

  // 检查是否有平均月申请次数数据
  if (data?.als_m12_id_avg_monnum) {
    maxData.id.avgMonthlyApply = Number(data.als_m12_id_avg_monnum)
  }

  if (data?.als_m12_cell_avg_monnum) {
    maxData.cell.avgMonthlyApply = Number(data.als_m12_cell_avg_monnum)
  }

  // 获取总申请月份数
  if (data?.als_m12_id_nbank_tot_mons) {
    maxData.id.totalMonths = Number(data.als_m12_id_nbank_tot_mons)
  }

  if (data?.als_m12_cell_nbank_tot_mons) {
    maxData.cell.totalMonths = Number(data.als_m12_cell_nbank_tot_mons)
  }

  return maxData
}

// 检查某种数据源是否有数据
function hasDataSource(source) {
  if (source === 'id') {
    // 检查ID数据源
    return totalStatsData.value?.id?.totalApplyCount?.some(count => count > 0) || false
  } else if (source === 'cell') {
    // 检查Cell数据源
    return totalStatsData.value?.cell?.totalApplyCount?.some(count => count > 0) || false
  }
  return false
}

// 监听选项变化
watch(selectedTimeOption, () => {
  // 更新饼图值
  transformedTableData.value[selectedDataSource.value][selectedStatType.value].forEach(item => {
    const timeKey = ['d7', 'm1', 'm3', 'm6', 'm12'][selectedTimeOption.value]
    item.value = item[timeKey]
  })
  updateChart()
})
watch(selectedDataSource, () => {
  updateChartData()
  // 完全重新渲染图表
  initChart()
})
watch(selectedStatType, updateChart)

// 窗口大小变化时重新调整图表大小
function resizeCharts() {
  if (chartInstance.value) {
    chartInstance.value.resize()
  }
  if (orgPieChartInstance.value) {
    orgPieChartInstance.value.resize()
  }
}

// 初始化组件
onMounted(() => {
  // 计算总体统计数据
  totalStatsData.value = calculateTotalStats(data)

  // 计算各借贷类型统计数据
  tableData.value = typeTotalStats(data)

  // 计算特殊时段统计数据
  dateTableData.value = dateTotalStats(data)

  // 计算总结统计数据
  const summaryData = calculateSummaryStats(data)

  // 检查哪个数据源有数据，并自动选择
  if (hasDataSource('id')) {
    selectedDataSource.value = 'id'
  } else if (hasDataSource('cell')) {
    selectedDataSource.value = 'cell'
  }

  // 设置图表数据
  updateChartData()

  nextTick(() => {
    // 初始化所有图表
    initChart()
    initOrgPieChart()
  })

  // 添加窗口大小变化监听
  window.addEventListener('resize', resizeCharts)
})

// 更新图表数据
function updateChartData() {
  chartData.value = {
    categories: ['近7日', '近1月', '近3月', '近6月', '近1年'],
    series: [
      {
        name: '申请次数',
        data: totalStatsData.value?.[selectedDataSource.value]?.totalApplyCount || [],
      },
      {
        name: '申请的机构数',
        data: totalStatsData.value?.[selectedDataSource.value]?.totalOrgCount || [],
      },
    ],
  }
}

// 计算风险评分（0-100分，分数越高越安全）
const riskScore = computed(() => {
  // 获取近1年的申请次数
  const idApplyCount = totalStatsData.value?.id?.totalApplyCount?.[4] || 0;
  const cellApplyCount = totalStatsData.value?.cell?.totalApplyCount?.[4] || 0;
  const totalApplyCount = Math.max(idApplyCount, cellApplyCount);

  // 根据申请次数计算风险评分
  // 0次：100分（最安全）
  // 1-3次：80分（较安全）
  // 4-10次：60分（中等风险）
  // 11-20次：40分（较高风险）
  // 20次以上：20分（高风险）
  if (totalApplyCount === 0) return 100;
  if (totalApplyCount <= 3) return 80;
  if (totalApplyCount <= 10) return 60;
  if (totalApplyCount <= 20) return 40;
  return 20;
});

// 使用 composable 通知父组件风险评分
useRiskNotifier(props, riskScore);

// 暴露给父组件
defineExpose({
  riskScore
});

// 组件销毁时清理资源
onUnmounted(() => {
  window.removeEventListener('resize', resizeCharts)
  if (chartInstance.value) {
    chartInstance.value.dispose()
  }
  if (orgPieChartInstance.value) {
    orgPieChartInstance.value.dispose()
  }
})

// 当数据源变化时，更新主图表数据
watch(selectedDataSource, newValue => {
  updateChartData()

  if (chartInstance.value) {
    chartInstance.value.setOption({
      xAxis: {
        data: chartData.value.categories,
      },
      series: chartData.value.series.map(item => ({
        name: item.name,
        data: item.data,
      })),
    })
  }
})
</script>

<template>
  <div class="card">
    <div class="flex flex-col gap-y-6">
      <!-- 数据切换选项 -->
      <div class="p-6 bg-white rounded-lg shadow-sm border border-gray-100 relative overflow-hidden">
        <!-- 背景装饰元素 -->
        <div class="absolute top-0 right-0 w-32 h-32 bg-blue-50 rounded-full -mr-8 -mt-8 opacity-60"></div>
        <div class="absolute bottom-0 left-0 w-20 h-20 bg-green-50 rounded-full -ml-10 -mb-10 opacity-50"></div>

        <div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 relative z-10">
          <div class="space-y-2">
            <h2 class="text-xl font-semibold text-gray-800 flex items-center">借贷申请分析报告</h2>
            <p class="text-sm text-gray-600 ml-6">本报告统计借贷申请记录和机构情况，帮助评估信贷风险</p>
          </div>
          <div class="flex flex-wrap gap-6 w-full">
            <template v-if="hasDataSource('id') || hasDataSource('cell')">
              <div class="flex-1 flex rounded-md shadow-sm relative">
                <!-- 图标装饰 -->
                <button v-if="hasDataSource('id')" type="button"
                  class="flex-1 py-2 px-4 text-sm font-medium rounded-l-md border transition-all duration-200 flex items-center flex-shrink-0"
                  :class="[
                    selectedDataSource === 'id'
                      ? 'bg-gradient-to-r from-blue-500 to-blue-600 text-white border-blue-500 shadow-md'
                      : 'bg-white text-gray-700 border-gray-300 hover:bg-gray-50',
                  ]" @click="selectedDataSource = 'id'">
                  <svg v-if="selectedDataSource === 'id'" class="w-4 h-4 mr-1" fill="none" stroke="currentColor"
                    viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                      d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                  </svg>
                  <svg v-else class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                    xmlns="http://www.w3.org/2000/svg">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                      d="M10 6H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V8a2 2 0 00-2-2h-5m-4 0V5a2 2 0 114 0v1m-4 0a2 2 0 104 0m-5 8a2 2 0 100-4 2 2 0 000 4zm0 0c1.306 0 2.417.835 2.83 2M9 14a3.001 3.001 0 00-2.83 2M15 11h3m-3 4h2">
                    </path>
                  </svg>
                  身份证匹配
                </button>
                <button v-if="hasDataSource('cell')" type="button"
                  class="flex-1 py-2 px-4 text-sm font-medium rounded-r-md border transition-all duration-200 flex items-center flex-shrink-0"
                  :class="[
                    selectedDataSource === 'cell'
                      ? 'bg-gradient-to-r from-green-500 to-green-600 text-white border-green-500 shadow-md'
                      : 'bg-white text-gray-700 border-gray-300 hover:bg-gray-50',
                  ]" @click="selectedDataSource = 'cell'">
                  <svg v-if="selectedDataSource === 'cell'" class="w-4 h-4 mr-1" fill="none" stroke="currentColor"
                    viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                      d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                  </svg>
                  <svg v-else class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                    xmlns="http://www.w3.org/2000/svg">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                      d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z"></path>
                  </svg>
                  手机号匹配
                </button>
              </div>
            </template>
          </div>
        </div>

        <!-- 数据类型说明 -->
        <div class="mt-4 bg-blue-50 p-3 rounded-lg text-xs text-gray-700">
          <p class="font-medium text-blue-800 mb-1">数据类型说明：</p>
          <div class="grid grid-cols-1 md:grid-cols-2 gap-2">
            <div class="flex items-start">
              <span class="inline-block w-2 h-2 mt-1 mr-2 rounded-full flex-shrink-0 bg-blue-500"></span>
              <span><strong>身份证匹配：</strong>通过身份证号码匹配获取的借贷申请记录，能够反映与身份证关联的所有金融机构申请行为</span>
            </div>
            <div class="flex items-start">
              <span class="inline-block w-2 h-2 mt-1 mr-2 rounded-full flex-shrink-0 bg-green-500"></span>
              <span><strong>手机号匹配：</strong>通过手机号码匹配获取的借贷申请记录，能够反映与手机号关联的所有金融机构申请行为</span>
            </div>
          </div>
        </div>
      </div>

      <template v-if="hasDataSource(selectedDataSource)">
        <!-- 借贷申请总体情况概览 -->
        <div class="bg-gradient-to-br from-gray-50 to-gray-100 rounded-lg p-4 relative overflow-hidden">
          <!-- 装饰元素 -->
          <div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-blue-400 to-green-400 opacity-70"></div>
          <div class="absolute bottom-4 right-4 opacity-10">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-32 w-32" fill="none" viewBox="0 0 24 24"
              stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1"
                d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
            </svg>
          </div>

          <div class="grid grid-cols-2 md:grid-cols-2 lg:grid-cols-4 gap-4 relative z-10">
            <div
              class="bg-white rounded-lg p-3 md:p-5 shadow-sm border border-gray-100 transform transition-transform duration-300 hover:shadow-md hover:-translate-y-1">
              <div class="flex items-start">
                <div class="mr-2 md:mr-3 bg-blue-100 rounded-lg p-1 md:p-2 text-blue-600">
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 md:h-6 md:w-6" fill="none" viewBox="0 0 24 24"
                    stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                      d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
                  </svg>
                </div>
                <div>
                  <div class="text-xs md:text-sm text-gray-500">近1年总申请次数</div>
                  <div class="text-lg md:text-2xl font-bold mt-1 text-gray-800">
                    {{ totalStatsData[selectedDataSource]?.totalApplyCount[4] || 0 }}
                  </div>
                </div>
              </div>
            </div>

            <div
              class="bg-white rounded-lg p-3 md:p-5 shadow-sm border border-gray-100 transform transition-transform duration-300 hover:shadow-md hover:-translate-y-1">
              <div class="flex items-start">
                <div class="mr-2 md:mr-3 bg-green-100 rounded-lg p-1 md:p-2 text-green-600">
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 md:h-6 md:w-6" fill="none" viewBox="0 0 24 24"
                    stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                      d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
                  </svg>
                </div>
                <div>
                  <div class="text-xs md:text-sm text-gray-500">近1年总申请机构数</div>
                  <div class="text-lg md:text-2xl font-bold mt-1 text-gray-800">
                    {{ totalStatsData[selectedDataSource]?.totalOrgCount[4] || 0 }}
                  </div>
                </div>
              </div>
            </div>

            <div
              class="bg-white rounded-lg p-3 md:p-5 shadow-sm border border-gray-100 transform transition-transform duration-300 hover:shadow-md hover:-translate-y-1">
              <div class="flex items-start">
                <div class="mr-2 md:mr-3 bg-yellow-100 rounded-lg p-1 md:p-2 text-yellow-600">
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 md:h-6 md:w-6" fill="none" viewBox="0 0 24 24"
                    stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                      d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
                  </svg>
                </div>
                <div>
                  <div class="text-xs md:text-sm text-gray-500">单月最高申请次数</div>
                  <div class="text-lg md:text-2xl font-bold mt-1 text-gray-800">
                    {{ data[`als_m12_${selectedDataSource}_max_monnum`] || 0 }}
                  </div>
                </div>
              </div>
            </div>

            <div
              class="bg-white rounded-lg p-3 md:p-5 shadow-sm border border-gray-100 transform transition-transform duration-300 hover:shadow-md hover:-translate-y-1">
              <div class="flex items-start">
                <div class="mr-2 md:mr-3 bg-purple-100 rounded-lg p-1 md:p-2 text-purple-600">
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 md:h-6 md:w-6" fill="none" viewBox="0 0 24 24"
                    stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                      d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4" />
                  </svg>
                </div>
                <div>
                  <div class="text-xs md:text-sm text-gray-500">月均申请次数</div>
                  <div class="text-lg md:text-2xl font-bold mt-1 text-gray-800">
                    {{ data[`als_m12_${selectedDataSource}_avg_monnum`] || 0 }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 申请次数和机构数趋势图 -->
        <div>
          <LTitle title="借贷申请趋势" />
          <div ref="chartRef" class="chart-container"></div>
        </div>

        <!-- 借贷类型分析区域 -->
        <div>
          <LTitle title="借贷类型分析" />
          <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
            <!-- 借贷类型分布饼图 -->
            <div class="relative">
              <div ref="orgPieChartRef" class="chart-container-small"></div>
            </div>

            <!-- 借贷类型表格 -->
            <div>
              <div class="mb-2 flex justify-between items-center">
                <LButtonGroup v-model="selectedStatType" :options="statTabOptions" />
              </div>
              <div class="overflow-x-auto">
                <LTable :data="transformedTableData?.[selectedDataSource]?.[selectedStatType] || []"
                  class="w-full whitespace-nowrap">
                  <template #header>
                    <th class="border px-2 py-1 text-xs lg:px-3 lg:py-2 lg:text-sm w-[25%]">借贷类别</th>
                    <th class="border px-2 py-1 text-xs lg:px-3 lg:py-2 lg:text-sm w-[15%]">近7日</th>
                    <th class="border px-2 py-1 text-xs lg:px-3 lg:py-2 lg:text-sm w-[15%]">近1月</th>
                    <th class="border px-2 py-1 text-xs lg:px-3 lg:py-2 lg:text-sm w-[15%]">近3月</th>
                    <th class="border px-2 py-1 text-xs lg:px-3 lg:py-2 lg:text-sm w-[15%]">近6月</th>
                    <th class="border px-2 py-1 text-xs lg:px-3 lg:py-2 lg:text-sm w-[15%]">近1年</th>
                  </template>
                  <template #default="{ row }">
                    <td class="border px-2 py-1 text-xs lg:px-3 lg:py-2 lg:text-sm font-medium whitespace-nowrap">
                      {{ row.label }}
                    </td>
                    <td class="border px-2 py-1 text-xs lg:px-3 lg:py-2 lg:text-sm text-center">{{ row.d7 }}</td>
                    <td class="border px-2 py-1 text-xs lg:px-3 lg:py-2 lg:text-sm text-center">{{ row.m1 }}</td>
                    <td class="border px-2 py-1 text-xs lg:px-3 lg:py-2 lg:text-sm text-center">{{ row.m3 }}</td>
                    <td class="border px-2 py-1 text-xs lg:px-3 lg:py-2 lg:text-sm text-center">{{ row.m6 }}</td>
                    <td class="border px-2 py-1 text-xs lg:px-3 lg:py-2 lg:text-sm text-center">{{ row.m12 }}</td>
                  </template>
                </LTable>
              </div>
            </div>
          </div>

          <!-- 借贷类型解释 -->
          <div class="mt-4 bg-blue-50 p-3 rounded-lg text-sm">
            <p class="font-medium text-blue-800 mb-1">借贷类型说明：</p>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2">
              <div v-for="(desc, key) in orgMappings" :key="key" class="flex items-start">
                <span class="inline-block w-3 h-3 mt-1 mr-2 rounded-full flex-shrink-0"
                  :style="{ backgroundColor: opts.color[Object.keys(orgMappings).indexOf(key)] }"></span>
                <span><strong>{{ desc }}：</strong>{{key === 'bank' ? '包含各类银行贷款' : tableGroup[key].map(i =>
                  i.name).join('、')
                }}</span>
              </div>
            </div>
          </div>
        </div>

        <!-- 特殊时段申请记录 -->
        <div>
          <LTitle title="特殊时段申请记录" />
          <div class="text-xs text-gray-500 my-2">
            此表格展示在周末或夜间时段的借贷申请情况，这类时段的高频申请可能需要额外关注
          </div>
          <div class="mb-2">
            <LButtonGroup v-model="selectedStatType" :options="statTabOptions" />
          </div>
          <div class="overflow-x-auto">
            <LTable :data="transformedDateTableData?.[selectedDataSource]?.[selectedStatType] || []"
              class="w-full whitespace-nowrap">
              <template #header>
                <th class="border px-2 py-1 text-xs lg:px-3 lg:py-2 lg:text-sm w-[25%]">时段类型</th>
                <th class="border px-2 py-1 text-xs lg:px-3 lg:py-2 lg:text-sm w-[15%]">近7日</th>
                <th class="border px-2 py-1 text-xs lg:px-3 lg:py-2 lg:text-sm w-[15%]">近1月</th>
                <th class="border px-2 py-1 text-xs lg:px-3 lg:py-2 lg:text-sm w-[15%]">近3月</th>
                <th class="border px-2 py-1 text-xs lg:px-3 lg:py-2 lg:text-sm w-[15%]">近6月</th>
                <th class="border px-2 py-1 text-xs lg:px-3 lg:py-2 lg:text-sm w-[15%]">近1年</th>
              </template>
              <template #default="{ row }">
                <td class="border px-2 py-1 text-xs lg:px-3 lg:py-2 lg:text-sm font-medium whitespace-nowrap">
                  {{ row.label }}
                </td>
                <td class="border px-2 py-1 text-xs lg:px-3 lg:py-2 lg:text-sm text-center">
                  {{ row.specialDisplay ? '-' : row.d7 }}
                </td>
                <td class="border px-2 py-1 text-xs lg:px-3 lg:py-2 lg:text-sm text-center">
                  {{ row.specialDisplay ? '-' : row.m1 }}
                </td>
                <td class="border px-2 py-1 text-xs lg:px-3 lg:py-2 lg:text-sm text-center">
                  {{ row.specialDisplay ? '-' : row.m3 }}
                </td>
                <td class="border px-2 py-1 text-xs lg:px-3 lg:py-2 lg:text-sm text-center">
                  {{ row.specialDisplay ? '-' : row.m6 }}
                </td>
                <td class="border px-2 py-1 text-xs lg:px-3 lg:py-2 lg:text-sm text-center">{{ row.m12 }}</td>
              </template>
            </LTable>
          </div>
        </div>

        <!-- <div v-if="data.flag_applyloanstr || data.flag_datastrategy">
          <LTitle title="风险策略评估" />
          <div class="bg-gray-50 p-4 rounded-lg">
            <div class="flex flex-col gap-y-2">
              <div v-if="data.flag_applyloanstr === '1'" class="flex items-center">
                <span class="inline-block w-3 h-3 mr-2 rounded-full bg-yellow-500"></span>
                <span>根据申请记录分析，此用户存在多头申请特征</span>
              </div>
              <div v-if="data.flag_datastrategy === '1'" class="flex items-center">
                <span class="inline-block w-3 h-3 mr-2 rounded-full bg-red-500"></span>
                <span>根据数据策略评估，此用户存在潜在风险特征</span>
              </div>
            </div>
          </div>
        </div> -->
      </template>

      <template v-else>
        <div class="flex items-center justify-center h-60 bg-gray-50 rounded-lg">
          <div class="text-center">
            <div class="text-gray-400 text-4xl mb-2">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 mx-auto" fill="none" viewBox="0 0 24 24"
                stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                  d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
              </svg>
            </div>
            <div class="text-gray-600 text-xl font-medium">暂无借贷申请数据</div>
            <div class="text-gray-500 mt-2">当前没有匹配到任何借贷申请记录</div>
          </div>
        </div>
      </template>
    </div>
  </div>
</template>

<style scoped>
.chart-container {
  width: 100%;
  height: 350px;
}

.chart-container-small {
  width: 100%;
  height: 300px;
}

.form-radio {
  @apply appearance-none rounded-full h-4 w-4 border border-gray-300 bg-white checked:bg-blue-600 checked:border-blue-600 focus:outline-none transition duration-200 align-top bg-no-repeat bg-center bg-contain float-left cursor-pointer;
}

.card {
  @apply bg-white rounded-lg shadow-md p-4 md:p-6;
}
</style>
