<template>
    <div>
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="">
                <div class="block">
                    <el-date-picker
                            size="medium"
                            v-model="value2"
                            type="datetimerange"
                            :picker-options="pickerOptions"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            align="right">
                    </el-date-picker>
                </div>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" size="medium" @click="onSubmit">查询</el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" size="medium" @click="exportToExcel">导出</el-button>
            </el-form-item>
        </el-form>
        <div style="margin-bottom: 10px"><span style="color: red">总计: {{ totalItems }} 主单: {{ emptyAwbhCount }} 分单: {{ nonEmptyAwbhCount }}</span></div>
        <div>
            <el-table
                    size="medium"
                    :data="tableData"
                    border
                    style="width: 100%">
                <el-table-column
                        prop="awba"
                        label="主单号"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="awbh"
                        label="分单号"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="billtype"
                        label="单证类型">
                </el-table-column>
                <el-table-column
                        prop="costs"
                        label="应结费用">
                </el-table-column>
                <el-table-column
                        prop="flightdate"
                        label="航班日期">
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>
<script>
    import {
        selectStatistics
    } from '../../api/remote_interface/byont_import';
    import XLSX from 'xlsx';
    import { saveAs } from 'file-saver';
    import moment from 'moment';
    export default {
        data() {
            return {
                pickerOptions: {
                    shortcuts: [{
                        text: '最近一周',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近三个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit('pick', [start, end]);
                        }
                    }]
                },
                value2: '',
                tableData: [],
                query:{
                    starttime:'',
                    endtime:''
                },
                formInline:{},
                columns: [
                    { prop: 'awba', label: '主单号' },
                    { prop: 'awbh', label: '分单号' },
                    { prop: 'billtype', label: '单证类型' },
                    { prop: 'costs', label: '应结费用' },
                    { prop: 'flightdate', label: '航班日期' }
                ]
            };
        },
        computed: {
            totalItems() {
                return this.tableData.length;
            },
            emptyAwbhCount() {
                return this.tableData.filter(item => !item.awbh).length;
            },
            nonEmptyAwbhCount() {
                return this.tableData.filter(item => item.awbh).length;
            }
        },
        methods:{
            onSubmit(){
                if(this.value2 !== null && this.value2 !== ""){
                    this.query.starttime = this.value2[0];
                    this.query.endtime = this.value2[1];
                }else{
                    return this.$message.error('请选取时间段！')
                }
                selectStatistics(this.query).then((response) => {
                    const res = response.data
                    if (res.code !== '200') {
                        return this.$message.error('获取消息收发记录，失败！')
                    }
                    // 获取列表数据
                    this.tableData = res.data;
                    this.$message.success('获取消息收发记录，成功！');
                }).catch(error => {
                    // 关闭加载
                    this.$message.error(error.toString())
                })
            },
            exportToExcel() {
                // 创建一个新的工作簿
                const wb = XLSX.utils.book_new();

                // 创建一个自定义的头部数组，按照 columns 中的顺序和 label
                const header = this.columns.map(col => col.label);

                // 将 tableData 转换成二维数组，并添加到 worksheet 中
                const data = this.tableData.map(row => this.columns.map(col => row[col.prop]));

                // 使用 XLSX.utils.aoa_to_sheet 创建工作表，指定头部
                const ws = XLSX.utils.aoa_to_sheet([header, ...data]);

                // 添加 worksheet 到 workbook
                XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');

                // 生成 Excel 文件并下载
                const wbout = XLSX.write(wb, { bookType: 'xlsx', type: 'array' });
                const blob = new Blob([wbout], { type: 'application/octet-stream' });

                // 计算明天的日期
                const tomorrow = moment().add(1, 'days').format('M月D日');

                // 使用 file-saver 保存文件，并使用明天的日期作为文件名
                saveAs(blob, `${tomorrow}航班结算统计.xlsx`);
            }
        }

    };
</script>