<template>
    <div class="bg order">
        <span class="air">空运服务-订舱确认</span>
        <div class="px">
<!--            发件人信息-->
            <h4 class="title">发件人信息</h4>
            <div class="r-table">
                <table  class="tb" width="100%">
                    <tbody>
                    <tr>
                        <th width="15%">姓名</th>
                        <td width="18%"><el-input v-model="name" placeholder="" ></el-input></td>
                        <th width="15%">联系电话</th>
                        <td width="18%"><el-input v-model="tel" placeholder="" ></el-input></td>
                        <th width="15%">公司</th>
                        <td width="18%"><el-input v-model="company" placeholder="" ></el-input></td>
                    </tr>
                    <tr>
                        <th width="15%">税号</th>
                        <td width="18%"><el-input v-model="taxId" placeholder="" ></el-input></td>
                        <th width="15%">邮编</th>
                        <td width="18%"><el-input v-model="postcode" placeholder="" ></el-input></td>
                        <th width="15%">省市区</th>
                        <td width="18%"><el-input v-model="province" placeholder="" ></el-input></td>
                    </tr>
                    <tr>
                        <th colspan="1">详细地址</th>
                        <td colspan="5"><el-input v-model="address" placeholder="" ></el-input></td>
                    </tr>
                    </tbody>
                </table>
            </div>
<!--            收件人信息-->
            <h4 class="title">收件人信息</h4>
            <div class="r-table">
                <table  class="tb" width="100%">
                    <tbody>
                    <tr>
                        <th width="15%">姓名</th>
                        <td width="18%"><el-input v-model="name" placeholder="" ></el-input></td>
                        <th width="15%">联系电话</th>
                        <td width="18%"><el-input v-model="tel" placeholder="" ></el-input></td>
                        <th width="15%">公司</th>
                        <td width="18%"><el-input v-model="company" placeholder="" ></el-input></td>
                    </tr>
                    <tr>
                        <th width="15%">邮箱</th>
                        <td width="18%"><el-input v-model="postcode" placeholder="" ></el-input></td>
                        <th width="15%">身份证/护照</th>
                        <td width="18%"><el-input v-model="idCard" placeholder="" ></el-input></td>
                        <th width="15%">税号</th>
                        <td width="18%"><el-input v-model="companyTaxesNumber" placeholder="" ></el-input></td>
                    </tr>
                    <tr>
                        <th width="15%">国家</th>
                        <td width="18%"><el-input v-model="country" placeholder="" ></el-input></td>
                        <th width="15%">省/州</th>
                        <td width="18%"><el-input v-model="province" placeholder="" ></el-input></td>
                        <th width="15%">城市</th>
                        <td width="18%"><el-input v-model="city" placeholder="" ></el-input></td>
                    </tr>
                    <tr>
                        <th colspan="1">详细地址</th>
                        <td colspan="5"><el-input v-model="address" placeholder="" ></el-input></td>
                    </tr>
                    <tr>
                        <th colspan="1">邮编</th>
                        <td colspan="5"><el-input v-model="postcode" placeholder="" ></el-input></td>
                    </tr>
                    </tbody>
                </table>
            </div>
<!--            货件信息-->
            <h4 class="title">货件信息</h4>
            <div class="r-table">
                <table  class="tb" width="100%">
                    <tbody>
                    <tr>
                        <th width="15%">客户单号</th>
                        <td width="18%"><el-input v-model="input" placeholder="" ></el-input></td>
                        <th width="15%">总件数</th>
                        <td width="18%"><el-input v-model="input" placeholder="" ></el-input></td>
                        <th width="15%">总重量(kg)</th>
                        <td width="18%"><el-input v-model="input" placeholder="" ></el-input></td>
                    </tr>
                    <tr>
                        <th width="15%">总体积(m³)</th>
                        <td width="18%"><el-input v-model="input" placeholder="" ></el-input></td>
                        <th width="15%">包裹</th>
                        <td width="18%">
                            <el-input v-model="input" placeholder="长" style="width: 60px" ></el-input>×
                            <el-input v-model="input" placeholder="宽" style="width: 60px" ></el-input>×
                            <el-input v-model="input" placeholder="高" style="width: 60px" ></el-input>
                        </td>
                        <th width="15%">是否退件</th>
                        <td width="18%">
                            <el-select v-model="value" placeholder="请选择">
                                <el-option
                                        v-for="item in options"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                </el-option>
                            </el-select>
                        </td>
                    </tr>
                    <tr>
                        <th width="15%">运输方式</th>
                        <td width="18%">
                            <el-select v-model="value" placeholder="请选择">
                                <el-option
                                        v-for="item in options"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                </el-option>
                            </el-select>
                        </td>
                        <th width="15%">是否带电</th>
                        <td width="18%">
                            <el-select v-model="value" placeholder="请选择">
                                <el-option
                                        v-for="item in options"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                </el-option>
                            </el-select>
                        </td>
                        <th width="15%">运费付款方式</th>
                        <td width="18%">
                            <el-select v-model="value" placeholder="请选择">
                                <el-option
                                        v-for="item in options"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                </el-option>
                            </el-select>
                        </td>
                    </tr>
                    <tr>
                        <th width="15%">税金支付方式</th>
                        <td width="18%">
                            <el-select v-model="value" placeholder="请选择">
                                <el-option
                                        v-for="item in options"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                </el-option>
                            </el-select>
                        </td>
                        <th width="15%">一般贸易报关出口</th>
                        <td width="18%">
                            <el-select v-model="value" placeholder="请选择">
                                <el-option
                                        v-for="item in options"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                </el-option>
                            </el-select>
                        </td>
                        <th width="15%">一般贸易报关进口</th>
                        <td width="18%">
                            <el-select v-model="value" placeholder="请选择">
                                <el-option
                                        v-for="item in options"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                </el-option>
                            </el-select>
                        </td>
                    </tr>
                    <tr>
                        <th colspan="1">贸易条款</th>
                        <td colspan="1"><el-input v-model="input" placeholder="" ></el-input></td>
                        <th colspan="1">出口原因</th>
                        <td colspan="6">
                            <el-select v-model="value" placeholder="请选择" style="width: 100%">
                                <el-option
                                        v-for="item in options"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                </el-option>
                            </el-select>
                        </td>

                    </tr>
                    <tr>
                        <th colspan="1">商业发票备注</th>
                        <td colspan="5"><el-input v-model="input" placeholder="" ></el-input></td>
                    </tr>
                    </tbody>
                </table>
            </div>
<!--            货物信息-->
            <h4 class="title">货物信息</h4>
            <div class="r-table order">
                <table  class="tb" width="100%">
                    <tbody>
                    <tr>
                        <th width="9%">中文名</th>
                        <th width="13%">英文名</th>
                        <th width="9%">材质</th>
                        <th width="9%">申报价值(单价)</th>
                        <th width="5%">数量</th>
                        <th width="9%">申报价值(总价)</th>
                        <th width="9%">原产地</th>
                        <th width="9%">海关货物编号</th>
                        <th width="9%">配货名称</th>
                        <th width="12%">配货备注</th>
                        <th width="7%">操作</th>
                    </tr>
                    <tr>
                        <td width="9%"><el-input v-model="nameCn" placeholder="" ></el-input></td>
                        <td width="13%"><el-input v-model="name" placeholder="" ></el-input></td>
                        <td width="9%"><el-input v-model="texture" placeholder="" ></el-input></td>
                        <td width="9%"><el-input v-model="perPrice" placeholder="" ></el-input></td>
                        <td width="5%"><el-input v-model="input" placeholder="" ></el-input></td>
                        <td width="9%"><el-input v-model="totalPrices" placeholder="" ></el-input></td>
                        <td width="9%"><el-input v-model="originArea" placeholder="" ></el-input></td>
                        <td width="9%"><el-input v-model="hsCode" placeholder="" ></el-input></td>
                        <td width="9%"><el-input v-model="cargoName" placeholder="" ></el-input></td>
                        <td width="12%"><el-input v-model="cargoRemark" placeholder="" ></el-input></td>
                        <td width="7%" style="text-align: center">
                            <el-button  icon="el-icon-plus" size="mini" circle></el-button>
                            <el-button  icon="el-icon-minus" size="mini" circle></el-button>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <div style="text-align: center;margin-top: 30px">
                <el-button type="danger"  style="width: 180px;height: 50px" @click="open">确认下单</el-button>
            </div>
            <div style="margin-top: 50px;height: 80px"> </div>
        </div>
    </div>
</template>

<script>
    export default {
        methods:{

        open() {
            this.$alert('确认下单？', '', {
                confirmButtonText: '确定',
                callback: action => {
                    this.$message({
                        type: 'info',
                        message: `action: ${ action }`
                    });
                }
            });
        }
        }
    }
</script>

<style scoped>
    .bg{
        background-color: #F2F2F2;
    }
    .air{
        font-size: 20px;
        color: #308aee;
        margin-top: 20px;
        display: block;
    }
    .px{
        background-color: #FFFFFF;
        width: 100%;
        height: 850px;
        overflow: auto;

    }
    .title{
        color: #127ef2;
        font-size: 16px;
        font-weight: bold;
        margin: 20px 30px;
        text-align: left;
    }
    .r-table .tb > tbody > tr > th {
        background-color: #d8ecff;
        text-align: center;
    }
    .r-table .tb > tbody > tr > td {
        /*padding: 4px;  （间接决定了行高）*/
        /*display: table-cell;*/
    }

</style>