<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.clientCode" class="" placeholder="客户编码"></el-input>
                </el-form-item>
                <el-form-item label="">
                  <el-input size="medium" v-model="queryInfo.billNo" 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" :clearable='true' 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-item>
                  <el-button size="medium" @click="batchDelOrderByBeans" type="danger">批量删除</el-button>
                </el-form-item>
              <el-form-item>
                <el-button size="medium" @click="batchDelExt2" type="danger">主单号批量删除</el-button>
              </el-form-item>
            </el-form>
        </div>
        <div>
            <el-radio-group v-model="cebType">
                <el-radio :label="303">订单申报</el-radio>
                <el-radio :label="505">运单申报</el-radio>
                <el-radio :label="603">清单申报</el-radio>
                <el-radio :label="607">总分单申报</el-radio>
            </el-radio-group>
        </div>
        <div style="margin-bottom: 20px">
            <el-row :gutter="24">
                <el-col :span="3">
                    <el-button size="medium" @click="batchDecList" style="background: none">列表申报</el-button>
                </el-col>
                <el-col :span="3">
                    <el-upload
                            class="upload-demo"
                            action=""
                            :before-upload="beforeUpload"
                            :http-request="batchDecImport"
                            :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="batchDecBillNo" style="background: none">主单申报</el-button>
                </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.exportBodyList"
                            style="width: 85%;margin-left: 45px"
                            row-key="id"
                            stripe
                    >
                        <el-table-column type="index" label="序号" width="50" align="center"/>
                        <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="clientCode" label="客户编号" width="180"></el-table-column>
            <el-table-column prop="billNo" 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="baseCustomerConfig.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="200"
                    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="deleteOrder(scope.row)">删除</el-button>
                    <el-button type="text" @click="selectDecRec(scope.row)">申请回执查询</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog :visible.sync="dialogTableVisible">
            <template slot="title">
                {{ decRecOrderNo }}
            </template>
            <el-table :data="decRecData">
                <el-table-column property="cebType" label="申报类型">
                    <template slot-scope="scope">
                        <span v-if="scope.row.cebType==='303'">
                            订单
                        </span>
                        <span v-else-if="scope.row.cebType==='505'">
                            运单
                        </span>
                        <span v-else-if="scope.row.cebType==='603'">
                            清单
                        </span>
                        <span v-else-if="scope.row.cebType==='607'">
                            总分单
                        </span>
                        <span v-else></span>
                    </template>
                </el-table-column>
                <el-table-column property="appType" label="订单报送类型">
                    <template slot-scope="scope">
                        <span v-if="scope.row.appType==='1'">
                            新增
                        </span>
                        <span v-else-if="scope.row.appType==='2'">
                            变更
                        </span>
                        <span v-else></span>
                    </template>
                </el-table-column>
                <el-table-column property="appTime" label="订单报送时间">
                    <template slot-scope="scope">
                        {{ formatDate(scope.row.appTime) }}
                    </template>
                </el-table-column>
                <el-table-column property="appStatus" label="订单报送状态">
                    <template slot-scope="scope">
                        <span v-if="scope.row.appStatus==='1'">
                            暂存
                        </span>
                        <span v-else-if="scope.row.appStatus==='2'">
                            申报
                        </span>
                        <span v-else></span>
                    </template>
                </el-table-column>
                <el-table-column property="returnStatus" label="回执状态">
                    <template slot-scope="scope">
                        <span v-if="scope.row.returnStatus === '1'">
                            电子口岸已暂存
                        </span>
                        <span v-else-if="scope.row.returnStatus === '2'">
                            电子口岸申报中
                        </span>
                        <span v-else-if="scope.row.returnStatus === '3'">
                            发送海关成功
                        </span>
                        <span v-else-if="scope.row.returnStatus === '4'">
                            发送海关失败
                        </span>
                        <span v-else-if="scope.row.returnStatus === '100'">
                            海关退单
                        </span>
                        <span v-else-if="scope.row.returnStatus === '399'">
                            海关退单
                        </span>
                        <span v-else></span>
                    </template>
                </el-table-column>
                <el-table-column property="returnTime" label="回执时间">
                    <template slot-scope="scope">
                        <span v-if="scope.row.returnTime !==null && scope.row.returnTime !==''">
                            {{ formatDate(scope.row.returnTime) }}
                        </span>
                        <span v-else></span>
                    </template>
                </el-table-column>
                <el-table-column property="returnInfo" label="回执信息" show-overflow-tooltip></el-table-column>
            </el-table>
        </el-dialog>
        <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,deleteOrder,batchDelOrderByBeans,batchDelBillNo,
        batchDecImport,batchDecList,batchDecBillNo,selectDecRec} 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:'',
                    clientCode:'',
                    billNo:'',
                    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:'',
                cebType:'',
                decRecData:[],
                dialogTableVisible: false,
                decRecOrderNo:''
            };
        },
        mounted() {
           // this.expandedRowKeys = this.tableData.map(item => item.guid);
            this.getList();
        },
        methods: {
            // 批量申报
            batchDecList(){
                if(this.selectedRows.length!==0){
                    if(this.cebType.length !== 0){
                        this.transformedData = this.selectedRows.map(item => ({
                            orderNo: item.orderNo,
                            clientCode: item.clientCode,
                            cebType: this.cebType
                        }));
                        batchDecList(this.transformedData).then((response)=>{
                            const res=response.data;
                            if (res.code !== '200') {
                                return this.$message.error('总分单批量申报失败！')
                            }
                            this.$message.success(res.msg);
                            this.getList();
                        }).catch(error=>{
                            this.$message.error(error.toString())
                        })
                    }else{
                        this.$message.error('请选勾取需要申报的类型！');
                    }
                }else{
                    this.$message.error('请选勾取需要申报的信息！');
                }
            },
            // 导入申报
            batchDecImport({ file, onSuccess, onError }){
                if(this.cebType.length === 0){
                    this.$message.error('请选勾取需要申报的类型！');
                    return;
                }
                // 生成 FormData 对象
                const formData = new FormData();
                formData.append('file', file);
                formData.append('cebType', this.cebType);
                batchDecImport(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 回调通知上传失败
                })
            },
            // 主单申报
            batchDecBillNo(){
                if(this.cebType.length === 0){
                    this.$message.error("请选勾取需要申报的类型");
                    return;
                }
                if (this.queryInfo.billNo.length === 0){
                    this.$message.error("请在主单号栏输入主单号");
                    return;
                }

                const billNo = this.queryInfo.billNo;
                const cebType = this.cebType;

                batchDecBillNo({billNo, cebType}).then((response)=>{
                    const res=response.data;
                    if (res.code !== '200') {
                        return this.$message.error(res.msg)
                    }
                    this.$message.success(res.msg);
                    this.getList();
                }).catch(error=>{
                    this.$message.error(error.toString())
                })
            },
            //导入订单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; // 允许上传

            },
            //订单申报
            sendorder(row){
                if(this.cebType.length === 0){
                    this.$message.error('请选勾取需要申报的类型！');
                    return;
                }
                const clientCode = row.clientCode;
                const orderNo = row.orderNo;
                this.transformedData = [{
                    clientCode: clientCode,
                    orderNo: orderNo,
                    cebType: this.cebType
                }];
                batchDecList(this.transformedData).then((response)=>{
                    const res=response.data;
                    if (res.code !== '200') {
                        return this.$message.error(res.msg)
                    }
                    this.$message.success(res.msg);
                    this.getList();
                }).catch(error=>{
                    this.$message.error(error.toString())
                })
            },
            // 订单删除
            deleteOrder(row){
              this.$confirm('此操作将永久删除该订单, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              }).then(() => {
                const clientCode = row.clientCode;
                const orderNo = row.orderNo;
                deleteOrder({clientCode,orderNo}).then((response) => {
                  const res = response.data;
                  const code = res.code;
                  const msg = res.msg;
                  if (code !== '200'){
                    return this.$message.error(msg);
                  }
                  this.$message.success(`订单删除成功`);
                  this.getList();
                }).catch(error => {
                  this.$message.error(error.toString())
                })
              }).catch(() => {
              });
            },
            // 根据主单号删除数据
            batchDelExt2(){
              if (this.queryInfo.billNo.length === 0){
                this.$message.error("请在主单号栏输入主单号");
                return;
              }
              this.$confirm('此操作将永久批量删除所选主单号订单, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              }).then(() => {
                const billNo = this.queryInfo.billNo;
                console.log(billNo)
                batchDelBillNo({billNo}).then((response) => {
                  const res = response.data;
                  const code = res.code;
                  const msg = res.msg;
                  if (code !== '200'){
                    this.$message.error(msg);
                    return;
                  }
                  this.$message.success("批量删除成功");
                  this.getList();
                }).catch(error=>{
                  this.$message.error(error.toString())
              })
            }).catch(() => {

              })
            },
            // 订单批量删除
            batchDelOrderByBeans(){
              if (this.selectedRows.length===0){
                this.$message.error('请勾选需要删除的订单信息！');
                return;
              }
              this.$confirm('此操作将永久删除所选订单, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              }).then(() => {
                batchDelOrderByBeans(this.selectedRows).then((response) => {
                  const res = response.data;
                  const code = res.code;
                  const msg = res.msg;
                  const data = res.data;
                  if (code !== '200'){
                    this.$message.error(msg);
                    return;
                  }
                  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];
                }
                if(this.value2 === null){
                    this.queryInfo.startTime = '',
                    this.queryInfo.endTime = ''
                }
                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())
                })
            },
            // 申请回执查询
            selectDecRec(row){
                const guid = row.guid
                selectDecRec({guid}).then((response) => {
                    const res = response.data
                    if(res.code !== '200'){
                        return this.$message.error(res.msg)
                    }
                    this.decRecOrderNo = row.orderNo
                    this.decRecData = res.data
                    this.dialogTableVisible = true
                    this.$message.success(res.msg)
                }).catch(error => {
                    this.$message.error(error.toString)
                })
            },
            // 日期格式化
            formatDate(isoString) {
                const date = new Date(isoString);
                // 获取年、月、日
                const year = date.getFullYear();
                const month = ('0' + (date.getMonth() + 1)).slice(-2); // 月份从0开始，需要加1
                const day = ('0' + date.getDate()).slice(-2);
                // 获取小时、分钟、秒
                const hours = ('0' + date.getHours()).slice(-2);
                const minutes = ('0' + date.getMinutes()).slice(-2);
                const seconds = ('0' + date.getSeconds()).slice(-2);

                // 返回格式化的日期字符串
                return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
            },
            //分页
            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>