<template>
    <div class="table-container">
        <div>
            <el-form :inline="true" :model="queryInfo" class="demo-form-inline">
                <el-form-item label="">
                    <el-input size="medium" v-model="queryInfo.ext1" class="" placeholder="客户编码"></el-input>
                </el-form-item>
                <el-form-item label="">
                    <el-input size="medium" v-model="queryInfo.orderno" placeholder="订单号"></el-input>
                </el-form-item>
                <el-form-item label="">
                    <el-select size="medium" v-model="queryInfo.ordertype" placeholder="订单类型">
                        <el-option
                                v-for="item in ordertypes"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="">
                    <el-select size="medium" v-model="queryInfo.apptype" placeholder="报送类型">
                        <el-option
                                v-for="item in apptypes"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="">
                    <el-select size="medium" v-model="queryInfo.appstatus" placeholder="报关状态">
                        <el-option
                                v-for="item in appstatuss"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <div class="block">
                        <el-date-picker
                                style="background: none"
                                size="medium"
                                v-model="value2"
                                type="daterange"
                                align="right"
                                unlink-panels
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                value-format="yyyy-MM-dd HH:mm:ss"
                                :picker-options="pickerOptions">
                        </el-date-picker>
                    </div>
                </el-form-item>
                <el-form-item>
                    <el-button size="medium" @click="getList" style="background: none">查询</el-button>
                </el-form-item>
                <el-form-item>
                        <el-upload
                                class="upload-demo"
                                action=""
                                :before-upload="beforeUpload"
                                :http-request="uploadFile"
                                :show-file-list="false">
                            <el-button size="medium" type="primary">导入订单</el-button>
                        </el-upload>
                </el-form-item>
            </el-form>
        </div>
        <div style="margin-bottom: 20px">
            <el-row :gutter="24">
                <el-col :span="3">
                    <el-button size="medium" @click="batchOrder" style="background: none">订单批量申报</el-button>
                </el-col>
                <el-col :span="4">
                    <el-upload
                            class="upload-demo"
                            action=""
                            :before-upload="beforeUpload"
                            :http-request="batchOrderImport"
                            :show-file-list="false">
                        <el-button size="medium" style="background: none">订单批量导入申报</el-button>
                    </el-upload>
                </el-col>
                <el-col :span="3">
                    <el-button size="medium" @click="batchDeclare" style="background: none">清单批量申报</el-button>
                </el-col>
                <el-col :span="4">
                    <el-upload
                            class="upload-demo"
                            action=""
                            :before-upload="beforeUpload"
                            :http-request="batchDeclareImport"
                            :show-file-list="false">
                        <el-button size="medium" style="background: none">清单批量导入申报</el-button>
                    </el-upload>
                </el-col>
                <el-col :span="3">
                    <el-button size="medium" @click="ydeldBatchDeclare" style="background: none">运单批量申报</el-button>
                </el-col>
                <el-col :span="4">
                    <el-upload
                            class="upload-demo"
                            action=""
                            :before-upload="beforeUpload"
                            :http-request="ydbatchDeclareImport"
                            :show-file-list="false">
                        <el-button size="medium" style="background: none">运单批量导入申报</el-button>
                    </el-upload>
                </el-col>
            </el-row>
        </div>
        <div style="margin-bottom: 20px">
            <el-row :gutter="24">
                <el-col :span="3">
                    <el-button size="medium" @click="zfbatchOrder" style="background: none">总分单批量申报</el-button>
                </el-col>
                <el-col :span="4">
                    <el-upload
                            class="upload-demo"
                            action=""
                            :before-upload="beforeUpload"
                            :http-request="zfbatchOrderImport"
                            :show-file-list="false">
                        <el-button size="medium" style="background: none">总分单批量导入申报</el-button>
                    </el-upload>
                </el-col>
            </el-row>
        </div>

        <el-table
                :data="tableData"
                style="width: 100%"
                row-key="guid"
                :expand-row-keys="expandedRowKeys"
                @selection-change="handleSelectionChange"
                border
                stripe
        >
            <el-table-column type="expand" label="详细信息">
                <template v-slot:default="{ row }">
                    <el-table
                            :data="row.exportOrderDeclarationBodyList"
                            style="width: 85%;margin-left: 45px"
                            row-key="id"
                            stripe
                    >
                        <el-table-column prop="itemno" label="企业商品货号" />
                        <el-table-column prop="itemname" label="企业商品名称" />
                        <el-table-column prop="itemdescribe" label="企业商品描述" />
                        <el-table-column prop="barcode" label="条形码" />
                        <el-table-column prop="unit" label="计量单位" />
                        <el-table-column prop="currency" label="币制" />
                        <el-table-column prop="qty" label="数量" />
                        <el-table-column prop="price" label="单价" />
                        <el-table-column prop="totalprice" label="总价" />
                        <el-table-column prop="note" label="备注" />
                    </el-table>
                </template>
            </el-table-column>
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column prop="ext1" label="客户编号" width="180"></el-table-column>
            <el-table-column prop="orderno" label="订单编号" width="180"></el-table-column>
            <el-table-column prop="ordertype" label="订单类型" width="120">
                <template slot-scope="scope">
                                    <span v-if="scope.row.ordertype==='E'">
                                           B2C
                                        </span>
                    <span v-else-if="scope.row.ordertype==='B'">
                                            B2B
                                        </span>
                    <span v-else>
                                            海外仓
                                        </span>
                </template>
            </el-table-column>
            <el-table-column prop="apptype" label="报送类型" width="120">
                <template slot-scope="scope">
                                    <span v-if="scope.row.apptype==='1'">
                                           新增
                                        </span>
                    <span v-else>
                                            变更
                                        </span>
                </template>
            </el-table-column>
            <el-table-column prop="apptime" label="报送时间" width="180"></el-table-column>
            <el-table-column prop="appstatus" label="报送状态" width="120">
                <template slot-scope="scope">
                                    <span v-if="scope.row.appstatus==='1'">
                                           暂存
                                        </span>
                    <span v-else>
                                            申报
                                        </span>
                </template>
            </el-table-column>
            <el-table-column prop="ebpname" label="电商平台" width="180"></el-table-column>
            <el-table-column prop="goodsvalue" label="商品金额" width="120"></el-table-column>
            <el-table-column prop="freight" label="运杂费" width="120"></el-table-column>
            <el-table-column prop="note" label="备注" width="180"></el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作"
                    width="180"
                    show-overflow-tooltip>
                <template slot-scope="scope">
                    <el-button type="text" size="small" @click="sendorder(scope.row)">订单申报</el-button>
                    <el-button type="text" size="small" @click="sendDeclare(scope.row)">清单申报</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="block">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="queryInfo.pageNum"
                    :page-sizes="[20, 30, 40, 100]"
                    :page-size="queryInfo.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
    import {sendOrder,selectLists,batchOrder,batchOrderImport,importExcel,eldhBatchDeclare,eldhImportDeclare,
        eldBatchDeclare,eldImportDeclare,zfeldBatchDeclare,zfeldImportDeclare} from '../../api/consigner/exportOrder'
    export default {
        data() {
            return {
                apptypes: [
                    {
                    value: '1',
                    label: '新增'
                }, {
                    value: '2',
                    label: '变更'
                }
                ],
                appstatuss: [
                    {
                    value: '1',
                    label: '暂存'
                }, {
                    value: '2',
                    label: '申报'
                }
                ],
                ordertypes: [
                    {
                    value: 'E',
                    label: 'B2C出口订单'
                }, {
                    value: 'B',
                    label: 'B2B出口订单'
                }, {
                    value: 'W',
                    label: '海外仓订仓单'
                }
                ],
                tableData: [],
                selectedRows: [],
                expandedRowKeys: [],
                queryInfo:{
                    appstatus:'',
                    apptype:'',
                    orderno:'',
                    ordertype:'',
                    ext1:'',
                    starttime:'',
                    endtime:'',
                    pageNum:1,
                    pageSize:20
                },
                total:0,
                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:'',
                transformedData:''
            };
        },
        mounted() {
           // this.expandedRowKeys = this.tableData.map(item => item.guid);
            this.getList();
        },
        methods: {
            //运单批量导入申报
            zfbatchOrderImport({ file, onSuccess, onError }){
                // 生成 FormData 对象
                const formData = new FormData();
                formData.append('file', file);
                zfeldImportDeclare(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 回调通知上传失败
                })
            },
            //运单批量申报
            zfbatchOrder(){
                if(this.selectedRows.length!==0){
                    this.transformedData = this.selectedRows.map(item => ({
                        orderno: item.orderno,
                        ext1: item.ext1
                    }));
                    zfeldBatchDeclare(this.transformedData).then((response)=>{
                        const res=response.data;
                        if (res.code !== '200') {
                            return this.$message.error('总分单批量申报失败！')
                        }
                        this.$message.success('总分单批量申报成功！');
                        this.getList();
                    }).catch(error=>{
                        this.$message.error(error.toString())
                    })
                }else{
                    this.$message.error('请选勾取需要申报的总分单信息！');
                }
            },
            //运单批量导入申报
            ydbatchDeclareImport({ file, onSuccess, onError }){
                // 生成 FormData 对象
                const formData = new FormData();
                formData.append('file', file);
                eldImportDeclare(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 回调通知上传失败
                })
            },
            //运单批量申报
            ydeldBatchDeclare(){
                if(this.selectedRows.length!==0){
                    this.transformedData = this.selectedRows.map(item => ({
                        orderno: item.orderno,
                        ext1: item.ext1
                    }));
                    eldBatchDeclare(this.transformedData).then((response)=>{
                        const res=response.data;
                        if (res.code !== '200') {
                            return this.$message.error('运单批量申报失败！')
                        }
                        this.$message.success('运单批量申报成功！');
                        this.getList();
                    }).catch(error=>{
                        this.$message.error(error.toString())
                    })
                }else{
                    this.$message.error('请选勾取需要申报的运单信息！');
                }
            },
            //清单批量导入申报
            batchDeclareImport({ file, onSuccess, onError }){
                // 生成 FormData 对象
                const formData = new FormData();
                formData.append('file', file);
                eldhImportDeclare(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 回调通知上传失败
                })
            },
            //清单申报
            sendDeclare(row){
                const { orderno, ext1 } = row;
                const senddata= [{ orderno, ext1 }];
                eldhBatchDeclare(senddata).then((response)=>{
                    const res=response.data;
                    if (res.code !== '200') {
                        return this.$message.error('清单批量申报失败！')
                    }
                    this.$message.success('清单批量申报成功！');
                    this.getList();
                }).catch(error=>{
                    this.$message.error(error.toString())
                })

            },
            //清单批量申报
            batchDeclare(){
                if(this.selectedRows.length!==0){
                    this.transformedData = this.selectedRows.map(item => ({
                        orderno: item.orderno,
                        ext1: item.ext1
                    }));
                    eldhBatchDeclare(this.transformedData).then((response)=>{
                        const res=response.data;
                        if (res.code !== '200') {
                            return this.$message.error('清单批量申报失败！')
                        }
                        this.$message.success('清单批量申报成功！');
                        this.getList();
                    }).catch(error=>{
                        this.$message.error(error.toString())
                    })
                }else{
                    this.$message.error('请选勾取需要申报的清单信息！');
                }
            },
            //订单批量导入申报
            batchOrderImport({ file, onSuccess, onError }){
                // 生成 FormData 对象
                const formData = new FormData();
                formData.append('file', file);
                batchOrderImport(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 回调通知上传失败
                })
            },
            //批量申报订单
            batchOrder(){
                if(this.selectedRows.length!==0){
                    this.transformedData = this.selectedRows.map(item => ({
                        orderno: item.orderno,
                        ext1: item.ext1
                    }));
                    batchOrder(this.transformedData).then((response)=>{
                        const res=response.data;
                        if (res.code !== '200') {
                            return this.$message.error('订单批量申报失败！')
                        }
                        this.$message.success('订单批量申报成功！');
                        this.getList();
                    }).catch(error=>{
                        this.$message.error(error.toString())
                    })
                }else{
                    this.$message.error('请选勾取需要申报的订单信息！');
                }
            },
            //导入订单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; // 允许上传

            },
            uploadFile({ 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 回调通知上传失败
                })
            },
            //订单申报
            sendorder(row){
                sendOrder(row).then((response)=>{
                    const res=response.data;
                    if (res.code !== '200') {
                        return this.$message.error('订单申报失败！')
                    }
                    this.$message.success('订单申报成功！');
                    this.getList();
                }).catch(error=>{
                    this.$message.error(error.toString())
                })
            },
            //订单列表查询
            getList(){
                if(this.value2 !== null && this.value2 !== ""){
                    this.queryInfo.starttime = this.value2[0];
                    this.queryInfo.endtime = this.value2[1];
                }
                selectLists(this.queryInfo).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())
                })
            },
            //分页
            handleSizeChange(val) {
                this.queryInfo.pageSize=val;
                this.getList();
            },
            //分页
            handleCurrentChange(val) {
                this.queryInfo.pageNum=val;
                this.getList();
            },
            //多选
            handleSelectionChange(selection) {
                this.selectedRows = selection;
            }
        }
    };
</script>

<style scoped>
    .el-input__inner{
        background-color: #f5f7fd;
    }
    .el-table {
        border: 1px solid #ddd;
    }

    .el-table th {
        background-color: #f0f0f0;
    }

    .el-table tr.el-table__row--striped > td {
        background-color: #f8f8f8;
    }

    .el-table td, .el-table th {
        border: 1px solid #ddd;
        padding: 8px;
    }
</style>