<template>
    <el-container  style="height: 550px;overflow:auto;">
        <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="8">
                        <el-form-item label="航班号">
                            <el-input size="small" v-model="formInline.flightNo" placeholder="请输入航班号"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item>
                            <el-button size="small" type="primary" @click="onSubmit">查询</el-button>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item>
                            <el-select size="small" 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"
                                tooltip-effect="dark"
                                style="border-radius: 10px 10px 0px 0px;line-height: 25px;"
                                :header-cell-style="{background:'#6F8294',color:'#FFFFFF'}" size="small"
                                :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="特殊处理代码"
                                    width="95">
                            </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 size="small" 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 size="small" v-model="form.uldNo"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="">
                                        <el-button size="small">添加ULD</el-button>
                                        <el-button size="small">清空ULD</el-button>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="6">
                                    <el-form-item label="运单号">
                                        <el-input size="small" v-model="form.waybillNo"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="件数">
                                        <el-input size="small" v-model="form.number"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="重量">
                                        <el-input size="small" 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 size="small" v-model="form.assembling"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="配载重量">
                                        <el-input size="small" v-model="form.stowage"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="配载体积">
                                        <el-input size="small" 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 size="small" v-model="form.code"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="品名">
                                        <el-input size="small" v-model="form.productName"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="始发站">
                                        <el-input size="small" 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 size="small" v-model="form.destination"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="优先级">
                                        <el-select size="small" 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 size="small" v-model="form.remarks"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </el-form>
                    </el-tab-pane>
                </el-tabs>
                <div style="margin-top: 15px;margin-left: 20px">
                    <el-button size="small">导入舱单</el-button>
                    <el-button size="small">舱单保存</el-button>
                    <el-button size="small">发送FFM</el-button>
                    <el-button size="small">发送H2000舱单报</el-button>
                    <el-button size="small">不正常检查</el-button>
                    <el-button size="small" @click="dialogTableVisible = true">打印</el-button>
                    <el-button size="small">打印标签</el-button>
                </div>
                <div style="margin-left: 1190px">
                </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 {
                operation: [{
                    value: '操作1',
                    label: '操作1'
                }, {
                    value: '操作2',
                    label: '操作2'
                }],
                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>