<template>
    <el-container>
        <el-main>
            <el-row>
                <el-col :span="24">
                    <div class="grid-content content">收费处理</div>
                </el-col>
            </el-row>
            <!--            两个表单区域-->
            <el-row>
                <el-tabs v-model="activeName" @tab-click="handleClick">
                    <el-tab-pane label="计费" name="first">
                        <el-form ref="form" :model="form" label-width="80px">
                            <el-row>
                                <el-col :span="6">
                                    <el-form-item label="运单号">
                                        <el-input v-model="form.name"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="">
                                        <el-button @click="">挑单</el-button>
                                        <el-button @click="">批量挑单</el-button>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="6">
                                    <el-form-item label="结算客户">
                                        <el-input v-model="form.name"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="付款方式" :label-width="formLabelWidth">
                                        <el-select v-model="form.waybillNo" placeholder="请选择">
                                            <el-option label="方式一" value="yi"></el-option>
                                            <el-option label="方式二" value="er"></el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-table
                                        :data="tableData"
                                        style="width: 100%"
                                        row-key="id"
                                        border
                                        lazy
                                        :load="load"
                                        :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
                                    <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="超重费">
                                    </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="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="address"
                                            label="收/发货人">
                                    </el-table-column>
                                </el-table>
                            </el-row>
                            <div>
                                <el-button @click="">清除</el-button>
                                <el-button @click="">核对并现结结算</el-button>
                                <el-button @click="">导出</el-button>
                                <el-button @click="">打印</el-button>
                            </div>
                        </el-form>
                    </el-tab-pane>
                    <el-tab-pane label="已结算" name="second">已结算</el-tab-pane>
                </el-tabs>
            </el-row>
        </el-main>
    </el-container>
</template>

<script>
    export default {
        data() {
            return {
                form: {

                },
                activeName: 'first',
                tableData:[],
            }
        }
    }
</script>

<style scoped>

</style>