<template>
    <div class='container'>
        <el-container>
            <el-header>
                <div class="title">
                    <span>资金复核日报</span>
                    <el-date-picker v-model="days" value-format="yyyy-MM-dd" type="date" placeholder="选择日期"
                        @change="handleChangeDate">
                    </el-date-picker>
                    <!-- {{ days }} -->
                </div>
            </el-header>
            <el-main>
                <el-table :data="tableData" border show-summary :default-sort="{ prop: 'wdailyfundsfdate', order: '' }"
                    :summary-method="getSummaries" :span-method="spanMethod" :cell-style="cellStyleMethod"
                    style="width: 100%; margin-top: 20px">
                    <!-- <el-table-column type="selection" width="55"></el-table-column> -->
                    <el-table-column prop="wdailyfundsforgtype" align="center" label="公司类型"></el-table-column>
                    <el-table-column prop="wdailyfundsfdate" align="center" sortable label="日期"></el-table-column>
                    <el-table-column prop="wdailyfundsforgname" align="center" label="公司"> </el-table-column>
                    <el-table-column prop="wdailyfundsfyesterdayaccountbalance" align="center" label="昨日余额">
                    </el-table-column>
                    <el-table-column prop="wdailyfundsftodayaccountbalance" align="center" label="今日余额"> </el-table-column>
                    <el-table-column prop="wdailyfundsfaccountbalancedifference" align="center" label="差额(今日-昨日)">
                    </el-table-column>
                    <el-table-column prop="wdailyfundsftodaynetcashflow" align="center" label="净现金流"> </el-table-column>
                    <el-table-column prop="wdailyfundsftodayfreezing" align="center" label="冻结金额"> </el-table-column>
                    <el-table-column prop="wdailyfundsftodayfreezeamount" align="center" label="冻结金额上限"> </el-table-column>
                    <el-table-column prop="wdailyfundsfinspstatusname" align="center" label="复核"> </el-table-column>
                    <el-table-column prop="" align="center" label="复核人"> </el-table-column>
                    <el-table-column prop="" align="center" label="填报人"> </el-table-column>
                </el-table>
            </el-main>
            <el-footer>
                <div class="" style="display: flex;justify-content: center;" v-if="tableData.length">
                    <el-button type="primary" style="width: 200px;" @click="handleReview">
                        复核完成
                    </el-button>
                </div>
            </el-footer>
        </el-container>
        <!-- <el-table-column prop="amount3" label="备注"> </el-table-column> -->
        <!-- <div slot="append" style="display:flex;">
                        <div class="sum_footer">
                            <div class="sum_footer_unit center" style="width:160px;">
                                合计(大写)
                            </div>
                            <div class="sum_footer_unit" style="width:350px;">11111</div>
                        </div>
                        <div class="sum_footer">
                            <div class="sum_footer_unit center" style="width:120px;">
                                合计(小写)
                            </div>
                            <div class="sum_footer_unit" style="flex-grow:3">2222</div>
                        </div>
                    </div> -->
    </div>
</template>

<script>
export default {
    data() {
        return {
            tableData: [],
            days: new Date(Date.now() - 86400000).toISOString().split('T')[0]
        };
    },
    mounted() {
        this.initData();
    },
    methods: {
        async initData() {
            let params = {
                "templateId": "1810231230602571776",
                "queryFilter": {
                    "pageBean": {
                        "page": 1,
                        "pageSize": 999,
                        "total": 1
                    },
                    "querys": [
                        {
                            "property": "t.F_date",
                            "value": this.days
                        },
                    ],
                    "sorter": [
                        {
                            "property": "t.F_date",
                            "direction": "DESC"
                        },
                        {
                            "property": "t.F_org_type",
                            "direction": "DESC"
                        },
                        {
                            "property": "t.F_org_name",
                            "direction": "DESC"
                        },
                        {
                            "property": "t.F_org_id",
                            "direction": "DESC"
                        },
                        {
                            "property": "t.F_insp_status_name",
                            "direction": "DESC"
                        }
                    ]
                }
            }
            let data = await this.$requestConfig.getDataTemplateDataList(params);
            this.tableData = data.rows;
            // 添加小计行
            this.tableData = this.tableData.reduce((acc, cur, index) => {
                acc.push(cur);
                // 判断是否需要添加小计行
                if (cur.wdailyfundsforderno !== 'subtotal' && (index === this.tableData.length - 1 || this.tableData[index + 1].wdailyfundsforgtype !== cur.wdailyfundsforgtype)) {
                    const subtotalRow = {
                        wdailyfundsforderno: 'subtotal',
                        wdailyfundsforgtype: '小计',
                        wdailyfundsfyesterdayaccountbalance: 0,
                        wdailyfundsftodayaccountbalance: 0,
                        wdailyfundsfaccountbalancedifference: 0,
                        wdailyfundsftodaynetcashflow: 0,
                        wdailyfundsftodayfreezing: 0,
                        wdailyfundsftodayfreezeamount: 0,
                    };
                    // 计算小计值
                    this.tableData.forEach((item) => {
                        if (item.wdailyfundsforgtype === cur.wdailyfundsforgtype) {
                            subtotalRow.wdailyfundsfyesterdayaccountbalance += isNaN(item.wdailyfundsfyesterdayaccountbalance) ? 0 : item.wdailyfundsfyesterdayaccountbalance;
                            subtotalRow.wdailyfundsftodayaccountbalance += isNaN(item.wdailyfundsftodayaccountbalance) ? 0 : item.wdailyfundsftodayaccountbalance;
                            subtotalRow.wdailyfundsfaccountbalancedifference += isNaN(item.wdailyfundsfaccountbalancedifference) ? 0 : item.wdailyfundsfaccountbalancedifference;
                            subtotalRow.wdailyfundsftodaynetcashflow += isNaN(item.wdailyfundsftodaynetcashflow) ? 0 : item.wdailyfundsftodaynetcashflow;
                            subtotalRow.wdailyfundsftodayfreezing += isNaN(item.wdailyfundsftodayfreezing) ? 0 : item.wdailyfundsftodayfreezing;
                            subtotalRow.wdailyfundsftodayfreezeamount += isNaN(item.wdailyfundsftodayfreezeamount) ? 0 : item.wdailyfundsftodayfreezeamount;
                        }
                    });
                    subtotalRow.wdailyfundsfyesterdayaccountbalance = (subtotalRow.wdailyfundsfyesterdayaccountbalance.toFixed(2));
                    subtotalRow.wdailyfundsftodayaccountbalance = (subtotalRow.wdailyfundsftodayaccountbalance.toFixed(2));
                    subtotalRow.wdailyfundsfaccountbalancedifference = (subtotalRow.wdailyfundsfaccountbalancedifference.toFixed(2));
                    subtotalRow.wdailyfundsftodaynetcashflow = (subtotalRow.wdailyfundsftodaynetcashflow.toFixed(2));
                    subtotalRow.wdailyfundsftodayfreezing = (subtotalRow.wdailyfundsftodayfreezing.toFixed(2));
                    subtotalRow.wdailyfundsftodayfreezeamount = (subtotalRow.wdailyfundsftodayfreezeamount.toFixed(2));
                    acc.push(subtotalRow);
                }
                return acc;
            }, []);
            console.log('数据', JSON.parse(JSON.stringify(this.tableData)));
        },
        handleChangeDate() {
            this.initData();
        },
        getSummaries(param) {
            const { columns, data } = param;
            console.log('data', JSON.parse(JSON.stringify(data)));
            const sums = [];
            columns.forEach((column, index) => {
                if (index === 0) {
                    sums[index] = '汇总';
                    return;
                }
                const values = data.map(item => Number(item[column.property]));
                if (!values.every(value => isNaN(value))) {
                    sums[index] = values.reduce((prev, curr) => {
                        const value = Number(curr);
                        if (!isNaN(value)) {
                            return prev + curr;
                        } else {
                            return prev;
                        }
                    }, 0);
                    sums[index] += ' .00';
                } else {
                    sums[index] = 'N/A';
                }
            });
            // 可直接调接口获取后修改sums。
            // console.log("合计列",sums);
            return sums;
        },
        getSummaries(param) {
            const { columns, data } = param;
            const sums = [];
            columns.forEach((column, index) => {
                if (index === 0) {
                    sums[index] = '汇总';
                    return;
                }
                const values = data
                    .filter(item => item.wdailyfundsforderno !== 'subtotal') // 过滤掉小计行
                    .map(item => Number(item[column.property]));
                if (!values.every(value => isNaN(value))) {
                    sums[index] = values.reduce((prev, curr) => {
                        const value = Number(curr);
                        if (!isNaN(value)) {
                            return prev + curr;
                        } else {
                            return prev;
                        }
                    }, 0);
                    sums[index] = sums[index].toFixed(2);
                } else {
                    sums[index] = 'N/A';
                }
            });
            // 可直接调接口获取后修改sums。
            // console.log("合计列",sums);
            return sums;
        },
        spanMethod({ row, column, rowIndex, columnIndex }) {
            // console.log('row',JSON.parse(JSON.stringify(row)));
            // console.log('column',JSON.parse(JSON.stringify(column)));
            if (columnIndex === 0) {
                // 第一列合并单元格
                if (row.wdailyfundsforderno === 'subtotal') {
                    // 小计行
                    return {
                        rowspan: 1,
                        colspan: 1,
                        content: '小计'
                    };
                } else if (rowIndex > 0 && row.wdailyfundsforgtype === this.tableData[rowIndex - 1].wdailyfundsforgtype) {
                    return {
                        rowspan: 0,
                        colspan: 0
                    };
                } else {
                    // 计算合并行数
                    let rowspan = 1;
                    for (let i = rowIndex + 1; i < this.tableData.length; i++) {
                        if (row.wdailyfundsforgtype === this.tableData[i].wdailyfundsforgtype) {
                            rowspan++;
                        } else {
                            break;
                        }
                    }
                    return {
                        rowspan,
                        colspan: 1,
                        content: row.wdailyfundsforgtype
                    };
                }
            }

        },
        cellStyleMethod({ row, column, rowIndex, columnIndex }) {

        },
        // 复核
        handleReview() {
            console.log('一键复核', JSON.parse(JSON.stringify(this.tableData)));
        },
    }
};
</script>
<style lang='scss' scoped>
.container {
    background: #fff;
}

.title {
    font-size: 28px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.el-input {
    line-height: 0;
}

::v-deep .el-input__inner {
    border: none;
    font-size: 28px;
}

.el-header {
    text-align: center;
    line-height: 60px;
}

.el-footer {
    width: 100%;
}
</style>