<script setup>
import QiunDataCharts from '@/components/qiun-data-charts/qiun-data-charts.vue'

const props = defineProps({
  data: {
    type: Object,
    required: true,
  },
})
const { data } = props
console.log('behavior', data)
const tableData = ref([
])

const chartData = ref({})

const opts = ref({

  color: ['#FAC858', '#EE6666', '#FAC858', '#EE6666', '#73C0DE', '#3CA272', '#FC8452', '#9A60B4', '#ea7ccc'],
  padding: [15, 15, 0, 5],
  enableScroll: false,
  legend: {},
  xAxis: {
    disableGrid: true,
  },
  yAxis: {
    data: [
      {
        min: 0,
      },
    ],
  },
  extra: {
    column: {
      type: 'group',
      width: 15,
      activeBgColor: '#000000',
      activeBgOpacity: 0.08,
      linearType: 'custom',
      seriesGap: 5,
      linearOpacity: 0.5,
      barBorderCircle: true,
      customColor: [
        '#FA7D8D',
        '#EB88E2',
      ],
    },
  },
},
)
function calculateTotalStats(data) {
  // 时间维度映射
  const timeDimensions = {
    m3: '近3月',
    m6: '近6月',
    m9: '近9月',
    m12: '近1年',
  }

  const result = []
  // 遍历每个时间维度
  for (const timeKey of Object.keys(timeDimensions)) {
    const countKey = `tl_id_${timeKey}_nbank_passlendamt`
    let money = 1
    if (data[countKey] !== undefined) {
      money = getLevelRange(Number(data[countKey] || 1), 3000)
    }
    result.push({
      date: timeDimensions[timeKey],
      money,
    })
  }

  return result
}
function totalStats(data) {
  // 时间维度映射
  const timeDimensions = {
    m3: '近3月',
    m6: '近6月',
    m9: '近9月',
    m12: '近1年',
  }

  // 机构类型

  // 初始化结果数组
  const result = {
    totalApplyCount: [],
    totalOrgCount: [],
  }

  // 遍历每个时间维度
  for (const timeKey of Object.keys(timeDimensions)) {
    let totalApplyCount = 0 // 每个时间维度的总申请次数
    let totalOrgCount = 0 // 每个时间维度的总机构数

    const applyCountKey = `tl_id_${timeKey}_nbank_passnum`
    const orgCountKey = `tl_id_${timeKey}_nbank_passorg`
    // 检查 data 中是否存在此参数，如果不存在则跳过
    if (data[applyCountKey] !== undefined && data[orgCountKey] !== undefined) {
      // 累加数值（如果值为 undefined 或 null 则转换为 0）
      totalApplyCount += Number(data[applyCountKey] || 0)
      totalOrgCount += Number(data[orgCountKey] || 0)
    }

    // 将每个时间维度的总申请次数和总机构数添加到结果数组中
    result.totalApplyCount.push(totalApplyCount)
    result.totalOrgCount.push(totalOrgCount)
  }

  return result
}
onMounted(() => {
  tableData.value = calculateTotalStats(data)
  console.log('calculateTotalStats(data)', calculateTotalStats(data))
  const chatData = totalStats(data)
  console.log('chatData', chatData)

  const res = {
    categories: ['近1月', '近3月', '近6月', '近1年'],
    series: [
      {
        name: '借贷次数',
        data: chatData.totalApplyCount,
      },
      {
        name: '借贷机构数',
        data: chatData.totalOrgCount,
      },
    ],
  }
  chartData.value = JSON.parse(JSON.stringify(res))
},
)
function getLevelRange(level, threshold) {
  const upperLimit = level * threshold
  const lowerLimit = (level - 1) * threshold
  return `${lowerLimit}元 - ${upperLimit}元`
}
</script>

<template>
  <div class="card">
    <div class="flex flex-col gap-y-4">
      <!-- 申请次数 -->
      <LTitle title="借贷次数" type="blue-green" />
      <QiunDataCharts
        type="column"
        :opts="opts"
        :chart-data="chartData"
      />

      <!-- 银行类别申请记录 -->
      <LTitle title="借贷额度" type="blue-green" />
      <LTable :data="tableData" type="blue-green">
        <template #header>
          <th class="border px-4 py-2">
            时间段
          </th>
          <th class="border px-4 py-2">
            借贷数额
          </th>
        </template>

        <template #default="{ row }">
          <td class="border px-4 py-2">
            {{ row.date }}
          </td>
          <td class="border px-4 py-2">
            {{ row.money }}
          </td>
        </template>
      </LTable>
    </div>
  </div>
</template>

<style lang="scss" scoped>

</style>
