<template>
    <el-container>
        <el-main>
            <el-row>
                <el-col :span="24">
                    <div class="grid-content content">航班文件</div>
                </el-col>
            </el-row>
            <!--            搜索区域-->
            <el-row>
                <el-form :inline="true" :model="formInline" class="demo-form-inline">
                    <el-col :span="5">
                        <el-form-item label="航班号">
                            <el-input v-model="formInline.flightNo" placeholder="请输入航班号"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item>
                            <el-button type="primary" @click="onSubmit">查询</el-button>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item>
                            <el-select v-model="formInline.operation" placeholder="航班操作" style="margin-left: 50px">
                                <el-option
                                        v-for="item in operation"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-form>
            </el-row>
            <!--            三个表单区域-->
            <el-row>
                <el-tabs v-model="activeName" @tab-click="handleClick">
                    <el-tab-pane label="舱单" name="first">
                        <el-table
                                :data="tableData"
                                style="width: 100%"
                                row-key="id"
                                border
                                lazy
                                :load="load"
                                :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
                            <el-table-column
                                    prop="box"
                                    label="板箱号">
                            </el-table-column>
                            <el-table-column
                                    prop="assembling"
                                    label="配载件数">
                            </el-table-column>
                            <el-table-column
                                    prop="stowage"
                                    label="配载重量">
                            </el-table-column>
                            <el-table-column
                                    prop="stowageVol"
                                    label="配载体积">
                            </el-table-column>
                            <el-table-column
                                    prop="code"
                                    label="特殊处理代码">
                            </el-table-column>
                            <el-table-column
                                    prop="productName"
                                    label="品名">
                            </el-table-column>
                            <el-table-column
                                    prop="departure"
                                    label="始发站">
                            </el-table-column>
                            <el-table-column
                                    prop="destination"
                                    label="目的站">
                            </el-table-column>
                            <el-table-column
                                    prop="priority"
                                    label="优先级">
                            </el-table-column>
                            <el-table-column
                                    prop="remarks"
                                    label="备注">
                            </el-table-column>
                        </el-table>
                    </el-tab-pane>
                    <el-tab-pane label="机长通知单" name="second">

                    </el-tab-pane>
                    <el-tab-pane label="舱单编辑区" name="third">
                        <el-form ref="form" :model="form" label-width="80px">
                            <el-row>
                                <el-col :span="6">
                                    <el-form-item label="ULD类别">
                                        <el-select v-model="form.type" placeholder="请选择">
                                            <el-option label="ULD" value="ULD"></el-option>
                                            <el-option label="其他" value="其他"></el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="ULD号">
                                        <el-input v-model="form.uldNo"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="">
                                        <el-button>添加ULD</el-button>
                                        <el-button>清空ULD</el-button>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="6">
                                    <el-form-item label="运单号">
                                        <el-input v-model="form.waybillNo"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="件数">
                                        <el-input v-model="form.number"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="重量">
                                        <el-input v-model="form.weight"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="6">
                                    <el-form-item label="配载件数">
                                        <el-input v-model="form.assembling"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="配载重量">
                                        <el-input v-model="form.stowage"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="配载体积">
                                        <el-input v-model="form.stowageVol"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="6">
                                    <el-form-item label="特货代码">
                                        <el-input v-model="form.code"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="品名">
                                        <el-input v-model="form.productName"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="始发站">
                                        <el-input v-model="form.departure"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="6">
                                    <el-form-item label="目的站">
                                        <el-input v-model="form.destination"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="优先级">
                                        <el-select v-model="form.priority" placeholder="请选择">
                                            <el-option label="一" value="一"></el-option>
                                            <el-option label="二" value="二"></el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="备注">
                                        <el-input v-model="form.remarks"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </el-form>
                    </el-tab-pane>
                </el-tabs>
                <div>
                    <el-button>导入舱单</el-button>
                    <el-button>舱单保存</el-button>
                    <el-button>发送FFM</el-button>
                    <el-button>发送H2000舱单报</el-button>
                    <el-button>不正常检查</el-button>
                    <el-button @click="dialogTableVisible = true">打印</el-button>
                    <el-button>打印标签</el-button>
                </div>
            </el-row>
            <!--            航班文件    打印按钮-->
            <el-row>
                <el-dialog  title="打印" :visible.sync="dialogTableVisible">
                    <el-tabs v-model="activeName1" @tab-click="handleClick">
                        <el-tab-pane label="舱单打印" name="first">
                            <el-table
                                    :data="tableData1"
                                    style="width: 100%"
                                    row-key="id"
                                    border
                                    lazy
                                    :load="load"
                                    :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
                                <el-table-column
                                        type="selection"
                                        width="55">
                                </el-table-column>
                                <el-table-column
                                        prop="date"
                                        label="板箱号">
                                </el-table-column>
                                <el-table-column
                                        prop="name"
                                        label="配载件数">
                                </el-table-column>
                                <el-table-column
                                        prop="address"
                                        label="配载重量">
                                </el-table-column>
                                <el-table-column
                                        prop="date"
                                        label="配载体积">
                                </el-table-column>
                                <el-table-column
                                        prop="name"
                                        label="特殊处理代码"
                                        width="120px">
                                </el-table-column>
                                <el-table-column
                                        prop="address"
                                        label="品名">
                                </el-table-column>
                                <el-table-column
                                        prop="date"
                                        label="始发站">
                                </el-table-column>
                                <el-table-column
                                        prop="name"
                                        label="目的站">
                                </el-table-column>
                                <el-table-column
                                        prop="address"
                                        label="优先级">
                                </el-table-column>
                                <el-table-column
                                        prop="name"
                                        label="备注">
                                </el-table-column>
                                <el-table-column
                                        prop="address"
                                        label="舱单打印">
                                </el-table-column>
                            </el-table>
                        </el-tab-pane>
                        <el-tab-pane label="分批单打印" name="second">分批单打印</el-tab-pane>
                        <el-tab-pane label="分批单打印" name="third">分批单打印</el-tab-pane>
                    </el-tabs>
                    <div style="margin-top: 10px;margin-left: 250px">
                        <el-button @click="">无ULD打印</el-button>
                        <el-button @click="">有ULD打印</el-button>
                        <el-button @click="">装载舱单打印</el-button>
                    </div>
                </el-dialog>
            </el-row>
        </el-main>
    </el-container>
</template>

<script>
    export default {
        data() {
            return {
                formInline: {
                    flightNo: undefined,
                    operation: undefined
                },
                form: {
                    type:undefined,
                    uldNo:undefined,
                    waybillNo:undefined,
                    number:undefined,
                    weight:undefined,
                    assembling:undefined,
                    stowage:undefined,
                    stowageVol:undefined,
                    code:undefined,
                    productName:undefined,
                    departure:undefined,
                    destination:undefined,
                    priority:undefined,
                    remarks:undefined,
                },
                tableData:[],
                tableData1:[],
                dialogTableVisible: false,
                dialogTableVisible1: false,
                activeName: 'first',
                activeName1: 'first',

            };

        }
    }
</script>

<style scoped>

</style>