<template>
    <!--<div class="app-container">-->
    <div class="app-content">
        <div class="filter-container">
            <el-input v-model="listQuery.awba" clearable style="width: 200px;" class="filter-item" placeholder="主单号"/>
            <el-input v-model="listQuery.awbh" clearable style="width: 200px;" class="filter-item" placeholder="分单号"/>
            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleSearch">查询</el-button>
        </div>
        <div>
            <span style="color: red">注：主分单必须同时为空或者同时不为空</span>
        </div>
        <tree-table v-loading="listLoading" :data="lostLoadData" :eval-func="func" :expand-all="true"
                    style="border-radius: 10px 10px 0px 0px;line-height: 25px;"
                    :header-cell-style="{background:'#6F8294',color:'#FFFFFF'}" size="small"
                    tooltip-effect="dark" border>
            <el-table-column label="航班号" width="70px" align="center">
                <template slot-scope="scope">
                    <span>{{ scope.row.carrier }}{{ scope.row.flightno }}</span>
                </template>
            </el-table-column>
            <el-table-column label="航班日期" width="100px" align="center">
                <template slot-scope="scope">
                    <span>{{ scope.row.flightdate }}</span>
                </template>
            </el-table-column>
            <el-table-column label="航段" width="90px" align="center">
                <template slot-scope="scope">
                    <span>{{ scope.row.originstation }}-{{ scope.row.destinationstation }}</span>
                </template>
            </el-table-column>
            <el-table-column label="主单号" width="120px" align="center">
                <template slot-scope="scope">
                    <span>{{ scope.row.awba }}</span>
                </template>
            </el-table-column>
            <el-table-column label="分单号" width="150px" align="center">
                <template slot-scope="scope">
                    <span>{{ scope.row.awbh }}</span>
                </template>
            </el-table-column>
            <el-table-column label="件数" width="60px" align="center">
                <template slot-scope="scope">
                    <span>{{ scope.row.piece }}</span>
                </template>
            </el-table-column>
            <el-table-column label="重量" width="60px" align="center">
                <template slot-scope="scope">
                    <span>{{ scope.row.weight }}</span>
                </template>
            </el-table-column>
            <el-table-column label="关区" width="60px" align="center">
                <template slot-scope="scope">
                    <span>{{ scope.row.customcode }}</span>
                </template>
            </el-table-column>
            <el-table-column label="时间" width="150px" align="center">
                <template slot-scope="scope">
                    <span>{{ scope.row.actime }}</span>
                </template>
            </el-table-column>
            <el-table-column label="落装状态" width="90px" align="center">
                <template slot-scope="scope">
                    <span v-if="scope.row.offload ==='001'">未落装</span>
                    <span v-if="scope.row.offload ==='002'">已落装</span>
                    <span v-if="scope.row.offload ==='003'">已落装改配</span>
                </template>
            </el-table-column>
            <el-table-column label="状态" width="90px" align="center">
                <template slot-scope="scope">
                    <span v-if="scope.row.status ==='01'">未发送</span>
                    <span v-if="scope.row.status ==='02'">已发舱单报</span>
                    <span v-if="scope.row.status ==='05'">舱单报退单</span>
                    <span v-if="scope.row.status ==='06'">舱单转人工</span>
                    <span v-if="scope.row.status ==='07'">舱单报申报成功</span>
                    <span v-if="scope.row.status ==='08'">已发舱单删除报</span>
                    <span v-if="scope.row.status ==='09'">舱单删除报退单</span>
                    <span v-if="scope.row.status ==='10'">舱单删除报转人工</span>
                    <span v-if="scope.row.status ==='11'">舱单删除成功</span>
                    <span v-if="scope.row.status ==='12'">已发舱单修改报</span>
                    <span v-if="scope.row.status ==='13'">舱单修改报退单</span>
                    <span v-if="scope.row.status ==='14'">舱单修改报转人工</span>
                    <span v-if="scope.row.status ==='15'">舱单修改报成功</span>
                    <span v-if="scope.row.status ==='16'">海关已存在</span>
                </template>
            </el-table-column>
            <el-table-column label="回执内容" align="center" show-overflow-tooltip>
                <template slot-scope="scope">
                    <span>{{ scope.row.ext5 }}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="220px" align="center" fixed="right">
                <template slot-scope="scope">
                    <el-button size="mini" type="primary" @click="handleLostLoad(scope.row)"
                               :disabled="scope.row.offload ==='002'">落装申请
                    </el-button>
                    <el-button size="mini" type="success" @click="handleLostChange(scope.row)"
                               :disabled="scope.row.offload ==='003'">落装改配
                    </el-button>
                </template>
            </el-table-column>
        </tree-table>
        <pagination v-show="total>0" :total="total" :page.sync="listQuery.pageSize" :limit.sync="listQuery.limitSize"
                    @pagination="getList"/>
        <el-dialog :title="dialogMap[dialogStatus]" :visible.sync="dialogFormVisible">
            <el-form ref="lostChangeData" :model="lostChangeModel" :rules="lostChangeRules" label-width="120px">
                <el-form-item label="需改配主单号" prop="manifest">
                    <el-input v-model="lostChangeModel.awba" style="width: 300px"></el-input>
                </el-form-item>
                <el-form-item label="需改配分单号" prop="manifest">
                    <el-input v-model="lostChangeModel.awbh" style="width: 300px"></el-input>
                </el-form-item>
                <el-form-item label="改配后主单号" prop="manifest">
                    <el-input v-model="lostChangeModel.manifest" style="width: 300px"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取消</el-button>
                <el-button type="primary" @click="dialogStatus==='create'?createData():updateData()">保存</el-button>
            </div>
        </el-dialog>
    </div>

</template>
<script>
    import treeTable from '@/components/TreeTable'
    import treeToArray from '@/utils/customEval'
    import Pagination from '@/components/Pagination'
    import {getMt2201ListForParam, getLostLoadChange, saveLostChange, saveLostLoad} from "@/api/exitPre";
    import {Message} from 'element-ui'
    export default {
        name: "LostLoad",
        components: {treeTable, Pagination},
        inject: ['reload'],
        data() {
            return {
                func: treeToArray,
                preTableStatus: true,
                lostTableStatus: false,
                total: 1,
                listLoading: false,
                listQuery: {
                    pageSize: 1,
                    limitSize: 100,
                    awba: undefined,
                    awbh: undefined,
                },
                dialogFormVisible: false,
                dialogStatus: undefined,
                dialogMap: {
                    create: '发送落装改配'
                },
                lostLoadData: [],
                lostChangeModel:{
                    uuid: undefined,
                    awba: undefined,
                    awbh: undefined,
                    manifest: undefined
                },
                lostChangeRules:{}
            }
        },
        methods: {
            getList() {
                this.listLoading = true
                if (this.listQuery.awba !== undefined && this.listQuery.awbh !== undefined &&
                    this.listQuery.awba !== '' && this.listQuery.awbh !== '') {
                    getLostLoadChange(this.listQuery).then(res => {
                        this.lostLoadData = res.data.dataList
                        this.total = res.data.count
                        setTimeout(() => {
                            this.listLoading = false
                        }, 1500)
                    })
                } else {
                    this.listQuery.awba = undefined
                    this.listQuery.awbh = undefined
                    getMt2201ListForParam(this.listQuery).then(res => {
                        this.lostLoadData = res.data.dataList
                        this.total = res.data.count
                        setTimeout(() => {
                            this.listLoading = false
                        }, 1500)
                    })
                }
            },
            handleSearch() {
                this.getList()
            },
            handleLostLoad(row) {
                console.log(row)
                this.$confirm("是否发送落装申请", "确认消息", {
                    distinguishCancelAndClose: true,
                    confirmButtonText: '确认发送',
                    cancelButtonText: '取消发送'
                }).then(() => {
                    delete row.parent
                    delete row.children
                    saveLostLoad(row).then(res => {
                        if (res.data.count > 0) {
                            this.$message({
                                type: 'success',
                                message: res.data.respMessage
                            })
                            this.getList()
                        } else {
                            this.$message({
                                type: 'error',
                                message: res.data.respMessage
                            })
                        }
                    })

                }).catch(action => {
                    this.$message({
                        type: 'info',
                        message: action === 'cancel'
                            ? '取消发送'
                            : '发送取消'
                    })
                })
            },
            handleLostChange(row) {
                this.lostChangeModel = {
                    uuid: undefined,
                    awba: undefined,
                    awbh: undefined,
                    manifest: undefined
                }
                const preModel = Object.assign({},row)
                this.lostChangeModel.awba = preModel.awba
                this.lostChangeModel.awbh = preModel.awbh
                this.lostChangeModel.uuid = preModel.uuid
                this.dialogStatus = 'create'
                this.dialogFormVisible = true
                this.$nextTick(()=>{
                    this.$refs.lostChangeData.clearValidate()
                })
            },
            createData(){
                saveLostChange(this.lostChangeModel).then(res =>{
                    if(res.data.count >0){
                        Message.success(res.data.respMessage)
                        this.dialogFormVisible = false
                        this.getList()
                    } else {
                        Message.error(res.data.respMessage)
                    }
                })
            }
        }
    }

</script>
<style>

</style>