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

const props = defineProps({
  data: {
    type: Object,
    required: true,
  },
})
const { data } = props
const tableData = ref([
])
const dateTableData = ref([
])
const options = ref([
  { label: '近7日', value: 0 },
  { label: '近1月', value: 1 },
  { label: '近3月', value: 2 },
  { label: '近6月', value: 3 },
  { label: '近1年', value: 4 },
])
const dateOptions = ref([
  { label: '近7日', value: 0 },
  { label: '近1月', value: 1 },
  { label: '近3月', value: 2 },
  { label: '近6月', value: 3 },
  { label: '近1年', value: 4 },
])

const selectedOption = ref(0)
const dateSelectedOption = ref(0)
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',
      ],
    },
  },
},
)
onMounted(() => {
  const seriesData = calculateTotalStats(data)
  tableData.value = typeTotalStats(data)
  dateTableData.value = dateTotalStats(data)
  const res = {
    categories: ['近7日', '近1月', '近3月', '近6月', '近1年'],
    series: [
      {
        name: '申请次数',
        data: seriesData.totalApplyCount,
      },
      {
        name: '申请的机构数',
        data: seriesData.totalOrgCount,
      },
    ],
  }
  chartData.value = JSON.parse(JSON.stringify(res))
},
)
function calculateTotalStats(data) {
  // 时间维度映射
  const timeDimensions = {
    d7: '近7日',
    m1: '近1月',
    m3: '近3月',
    m6: '近6月',
    m12: '近1年',
  }

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

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

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

    // 遍历每种机构类型并累加
    orgTypes.forEach((orgType) => {
      // 构造参数名
      const applyCountKey = `als_${timeKey}_id_${orgType}_allnum`
      const orgCountKey = `als_${timeKey}_id_${orgType}_orgnum`
      // 检查 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
}
function typeTotalStats(data) {
  // 时间维度映射
  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 result = []

  // 遍历每个时间维度
  for (const timeKey of Object.keys(timeDimensions)) {
    const tableDataEntry = []

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

      let totalApplyCount = 0
      let totalOrgCount = 0
      for (const i of orgTypeArray) {
        const applyCountKey = `als_${timeKey}_id_${i.code}_allnum`
        const orgCountKey = `als_${timeKey}_id_${i.code}_orgnum`
        totalApplyCount = totalApplyCount + Number(data[applyCountKey] || 0)
        totalOrgCount = totalOrgCount + Number(data[orgCountKey] || 0)
      }
      // 添加到 tableData
      tableDataEntry.push({
        label: orgMappings[groupOrgType],
        name: groupOrgType,
        totalApplyCount,
        totalOrgCount,
      })
    })

    result.push(tableDataEntry)
  }

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

  // 定义机构类型和对应的映射表
  const orgMappings = {
    week: '周末',
    night: '夜间',
  }
  const tableGroup = {
    week: [
      { code: 'bank_week', name: '周末银行' },
      { code: 'nbank_week', name: '周末非银' },
    ],
    night: [
      { code: 'bank_night', name: '夜间银行' },
      { code: 'nbank_night', name: '夜间非银' },
    ],
  }

  // 初始化结果数组
  const result = []

  // 遍历每个时间维度
  for (const timeKey of Object.keys(timeDimensions)) {
    const tableDataEntry = []

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

      let totalApplyCount = 0
      let totalOrgCount = 0
      for (const i of orgTypeArray) {
        const applyCountKey = `als_${timeKey}_id_${i.code}_allnum`
        const orgCountKey = `als_${timeKey}_id_${i.code}_orgnum`
        totalApplyCount = totalApplyCount + Number(data[applyCountKey] || 0)
        totalOrgCount = totalOrgCount + Number(data[orgCountKey] || 0)
      }
      // 添加到 tableData
      tableDataEntry.push({
        label: orgMappings[groupOrgType],
        name: groupOrgType,
        totalApplyCount,
        totalOrgCount,
      })
    })

    result.push(tableDataEntry)
  }
  console.log('date result', result)
  return result
}
</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" />
      <LButtonGroup v-model="selectedOption" :options="options" />
      <LTable :data="tableData[selectedOption]" type="blue-green">
        <template #header>
          <th class="border px-4 py-2">
            借贷类别
          </th>
          <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.label }}
          </td>
          <td class="border px-4 py-2">
            {{ row.totalApplyCount }}
          </td>
          <td class="border px-4 py-2">
            {{ row.totalOrgCount }}
          </td>
        </template>
      </LTable>

      <!-- 特殊时段申请记录 -->
      <LTitle title="特殊时段申请记录" type="blue-green" />
      <LButtonGroup v-model="dateSelectedOption" :options="dateOptions" />
      <LTable :data="dateTableData[dateSelectedOption]" type="blue-green">
        <!-- 表头 -->
        <template #header>
          <th class="border px-4 py-2">
            时段
          </th>
          <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.label }}
          </td>
          <td class="border px-4 py-2">
            {{ row.totalApplyCount }}
          </td>
          <td class="border px-4 py-2">
            {{ row.totalOrgCount }}
          </td>
        </template>
      </LTable>
    </div>
  </div>
</template>

<style lang="scss" scoped>

</style>
