<template>
    <div>
        <el-row :gutter="24">
            <el-col :span="4">
                <el-input size="medium" v-model="query.waybill" placeholder="运单号"></el-input>
            </el-col>
            <el-col :span="9">
                <el-date-picker
                        size="medium"
                        v-model="value2"
                        type="datetimerange"
                        :picker-options="pickerOptions"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        align="right">
                </el-date-picker>
            </el-col>
            <el-col :span="2">
                <el-button size="medium" @click="getList" type="primary">查询</el-button>
            </el-col>
            <el-col :span="2">
                <el-upload
                        class="upload-demo"
                        action=""
                        :before-upload="beforeUpload"
                        :http-request="impExcel"
                        :show-file-list="false">
                    <el-button size="medium" type="success">导入数据</el-button>
                </el-upload>
            </el-col>
            <el-col :span="2">
                <el-upload
                        class="upload-demo"
                        action=""
                        :before-upload="beforeUpload"
                        :http-request="importPlanExcel"
                        :show-file-list="false">
                    <el-button size="medium" type="success">导入计划表</el-button>
                </el-upload>
            </el-col>
            <el-col :span="2">
                <el-button size="medium" @click="batchExtExcel" type="success" round>批量导出excel</el-button>
            </el-col>
        </el-row>
        <el-row :gutter="24">
            <el-col :span="24">
                <el-table
                        :data="tableData"
                        border
                        style="width: 100%"
                        @selection-change="handleSelectionChange"
                        >
                    <el-table-column type="selection" width="55"></el-table-column>
                    <el-table-column
                            prop="waybill"
                            label="运单号"
                            width="120">
                    </el-table-column>
                    <!--<el-table-column
                            prop="fhl"
                            label="分单号"
                            width="120">
                    </el-table-column>-->
                    <el-table-column
                            prop="flightno"
                            label="航班号"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            prop="flightdate"
                            label="航班日期"
                            width="150">
                    </el-table-column>
                    <el-table-column
                            prop="pcs"
                            label="件数"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            prop="weight"
                            label="重量"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            prop="feweifht"
                            label="计费重"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            prop="vol"
                            label="体积"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            prop="descr"
                            label="品名"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            fixed="right"
                            label="操作"
                            width="160">
                        <template slot-scope="scope">
                            <el-button @click="handlePdf(scope.row)" type="text" size="small">下载PDF</el-button>
                            <el-button @click="handleExcel(scope.row)" type="text" size="small">下载EXCEL</el-button>
                            <el-button @click="handleDocx(scope.row)" type="text" size="small">下载DOCX</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-col>
            <el-col :span="24">
                <el-pagination
                        size="medium"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="query.pageNum"
                        :page-sizes="[100, 200, 300, 400]"
                        :page-size="query.pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total">
                </el-pagination>
            </el-col>
        </el-row>
    </div>
</template>
<script>
    import {selectLists,extPdf,extExcel,batchExtExcel,extDocx,importExcel,importPlanExcel} from "../../api/zhidan/zhidan";

    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]);
                        }
                    }
                    ]
                },
                query:{
                    waybill:'',
                    starttime:'',
                    endtime:'',
                    pageNum:1,
                    pageSize:20
                },
                value2:'',
                tableData: [],
                total:0,
                selectedRows: []
            }
        },
        mounted() {
            this.getList();
        },
        methods:{
            //导入订单excel
            beforeUpload(file) {
                // 检查文件类型
                const isExcel = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' || file.type === 'application/vnd.ms-excel';
                if (!isExcel) {
                    this.$message.error('上传文件只能是 Excel 格式!');
                    return false; // 取消文件上传
                }
                return true; // 允许上传

            },
            impExcel({ file, onSuccess, onError }){
                // 生成 FormData 对象
                const formData = new FormData();
                formData.append('file', file);
                importExcel(formData).then((response) => {
                    const res = response.data
                    if (res.code !== '200') {
                        return this.$message.error(res.msg);
                    }
                    this.$message.success(res.msg);
                    this.getList();
                    onSuccess(response.data); // 调用 onSuccess 回调通知上传成功
                }).catch(error => {
                    // 关闭加载
                    this.$message.error(error.toString())
                    onError(error); // 调用 onError 回调通知上传失败
                })
            },
            // 导入计划表
            importPlanExcel({file, onSuccess, onError}){
                // 生成 FormData 对象
                const formData = new FormData();
                formData.append('file', file);
                importPlanExcel(formData).then((response) => {
                    const res = response.data
                    if (res.code !== '200') {
                        return this.$message.error(res.msg);
                    }
                    this.$message.success(res.msg);
                    this.getList();
                    onSuccess(response.data); // 调用 onSuccess 回调通知上传成功
                }).catch(error => {
                    // 关闭加载
                    this.$message.error(error.toString())
                    onError(error); // 调用 onError 回调通知上传失败
                })
            },
            getList(){
                if(this.value2 !== null && this.value2 !== ""){
                    this.query.starttime=this.value2[0];
                    this.query.endtime=this.value2[1];
                }
                selectLists(this.query).then((response) => {
                    const res = response.data
                    if (res.code !== '200') {
                        return this.$message.error('获取消息收发记录，失败！')
                    }
                    // 获取列表数据
                    this.tableData = res.data.list
                    // 获取列表的总记录数
                    this.total = res.data.total
                    this.$message.success('获取消息收发记录，成功！');
                }).catch(error => {
                    // 关闭加载
                    this.$message.error(error.toString())
                })
            },
            handlePdf(row) {
                extPdf({id: row.id}).then(response => {
                    const url = window.URL.createObjectURL(new Blob([response.data]));
                    const link = document.createElement('a');
                    link.href = url;
                    link.setAttribute('download', row.waybill+'.pdf'); // 动态设置文件名
                    document.body.appendChild(link);
                    link.click();
                    document.body.removeChild(link); // 清理临时链接
                    window.URL.revokeObjectURL(url); // 清理URL对象
                }).catch(error => {
                    console.error('Error downloading PDF:', error);
                });
            },
            handleExcel(row) {
                extExcel({id: row.id}).then(response => {
                    if (!response || !response.data) {
                        console.error('Response data is empty or not a Blob.');
                        return;
                    }

                    const blob = new Blob([response.data], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'});
                    const tempFile = URL.createObjectURL(blob);

                    fetch(tempFile)
                        .then(res => res.blob())
                        .then(blob => {
                            const url = window.URL.createObjectURL(blob);
                            const link = document.createElement('a');
                            link.href = url;
                            link.setAttribute('download', row.waybill+'.xlsx');
                            document.body.appendChild(link);
                            link.click();
                            document.body.removeChild(link);
                            window.URL.revokeObjectURL(url);
                        })
                        .catch(error => {
                            console.error('Error creating temporary file:', error);
                        });

                    window.URL.revokeObjectURL(tempFile);
                }).catch(error => {
                    console.error('Error downloading Excel:', error);
                });
            },
            handleDocx(row){
                extDocx({id: row.id}).then(response => {
                    // 创建一个 Blob 对象
                    const blob = new Blob([response.data], { type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' });

                    // 创建一个隐藏的可下载链接
                    const link = document.createElement('a');
                    link.href = URL.createObjectURL(blob);
                    link.download = row.waybill + '.docx'; // 设置下载文件名

                    // 将链接添加到 DOM 中
                    document.body.appendChild(link);

                    // 触发下载
                    link.click();

                    // 移除链接
                    document.body.removeChild(link);
                }).catch(error => {
                    console.error('Error downloading DOCX:', error);
                });
            },
            batchExtExcel(){
                if(this.selectedRows.length === 0){
                    this.$message.error('请选择需要批量导出的数据')
                    return
                }

                const ids = this.selectedRows.map(item => item.id)
                const idsString = ids.join(',');
                console.log(idsString)

                batchExtExcel({ids: idsString}).then(response => {
                    if (!response || !response.data) {
                        console.error('Response data is empty or not a Blob.');
                        return;
                    }

                    const blob = new Blob([response.data], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'});
                    const tempFile = URL.createObjectURL(blob);

                    fetch(tempFile)
                        .then(res => res.blob())
                        .then(blob => {
                            const url = window.URL.createObjectURL(blob);
                            const link = document.createElement('a');
                            link.href = url;
                            link.setAttribute('download', 主单excel +'.xlsx');
                            document.body.appendChild(link);
                            link.click();
                            document.body.removeChild(link);
                            window.URL.revokeObjectURL(url);
                        })
                        .catch(error => {
                            console.error('Error creating temporary file:', error);
                        });

                    window.URL.revokeObjectURL(tempFile);
                }).catch(error => {
                    console.error('Error downloading Excel:', error);
                });
            },
            handleSizeChange(val) {
                this.query.pageSize=val;
                this.getList();
            },
            handleCurrentChange(val) {
                this.query.pageNum=val;
                this.getList();
            },
            //多选
            handleSelectionChange(selection) {
                this.selectedRows = selection;
            }
        }
    }
</script>