<script setup>
import { ref, onMounted, watch } from "vue";
import * as echarts from "echarts"; // 引入 ECharts
import LTable from "@/components/LTable.vue";
import LTitle from "@/components/LTitle.vue";
const props = defineProps({
    data: {
        type: Object,
        required: true,
    },
});
const { data } = props;
// 图表相关
const chartInstance = ref(null); // ECharts 实例
const chartRef = ref(null); // 图表容器 DOM
const chartData = ref({});
const opts = ref({
    color: ["#FAC858", "#EE6666", "#73C0DE", "#3CA272"],
});

// 表格数据
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);

// 初始化图表
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",
            },
        },
        legend: {},
        xAxis: {
            type: "category",
            data: chartData.value.categories,
        },
        yAxis: {
            type: "value",
        },
        series: chartData.value.series.map((item) => ({
            name: item.name,
            type: "bar",
            data: item.data,
        })),
    };

    chartInstance.value.setOption(option);
}

// 更新图表
function updateChart() {
    if (chartInstance.value) {
        const option = {
            xAxis: {
                data: chartData.value.categories,
            },
            series: chartData.value.series.map((item) => ({
                name: item.name,
                data: item.data,
            })),
        };
        chartInstance.value.setOption(option);
    }
}

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);
    }
    return result;
}

// 初始化组件
onMounted(() => {
    const seriesData = calculateTotalStats(data);
    tableData.value = typeTotalStats(data);
    dateTableData.value = dateTotalStats(data);

    chartData.value = {
        categories: ["近7日", "近1月", "近3月", "近6月", "近1年"],
        series: [
            {
                name: "申请次数",
                data: seriesData.totalApplyCount,
            },
            {
                name: "申请的机构数",
                data: seriesData.totalOrgCount,
            },
        ],
    };

    initChart();
});

// 监听选项变化
watch(selectedOption, updateChart);
</script>

<template>
    <div class="card">
        <div class="flex flex-col gap-y-4">
            <!-- 申请次数 -->
            <LTitle title="申请次数" type="blue-green" />
            <div ref="chartRef" class="chart-container"></div>

            <!-- 银行类别申请记录 -->
            <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 scoped>
.chart-container {
    width: 100%;
    height: 400px;
}
</style>
