<template>
    <div  class="app-container">
        <div class="title">控货订单</div>
        <el-form ref="elForm" :model="formData" :rules="rules" size="small" label-width="100px" >
            <el-row>
                <el-col :span="6">
                <el-form-item label="订单号" prop="field101">
                    111
                </el-form-item>
                </el-col>
                <el-col :span="6">
                <el-form-item label="总控货数" prop="field104">
                    111
                </el-form-item>
                </el-col>
                <el-col :span="6">
                <el-form-item label="体积" prop="field103">
                    111 m³
                </el-form-item>
                </el-col>
                <el-col :span="6">
                <el-form-item label="重量" prop="field102">
                    111 kg
                </el-form-item>
                </el-col>
                <el-col :span="6">
                <el-form-item label="可放货箱数" prop="field105">
                    111
                </el-form-item>
                </el-col>
                <el-col :span="6">
                <el-form-item label="已放货箱数" prop="field106">
                    111
                </el-form-item>
                </el-col>
            </el-row>
        </el-form>

        <div class="title">放货详情</div>
        <el-table :data="[1]" border>
            <el-table-column label="序号" width="50px">

            </el-table-column>
            <el-table-column label="收货人">
                1
            </el-table-column>
            <el-table-column label="控货箱数">
                1
            </el-table-column>
            <el-table-column label="放货箱数">
                1
            </el-table-column>
            <el-table-column label="体积（m³）">
                1
            </el-table-column>
            <el-table-column label="提单号">
                1
            </el-table-column>
            <el-table-column label="备注">
                1
            </el-table-column>
            <el-table-column label="操作人">
                1
            </el-table-column>
            <el-table-column label="日期">
                1
            </el-table-column>
            <el-table-column label="状态">
                1
            </el-table-column>
            <el-table-column label="操作" width="300px">
                <template slot-scope="{row}">
                    <el-button type="primary" size="mini" @click="showEdit=true">修改</el-button>
                    <el-button type="danger" size="mini">取消</el-button>
                    <el-button type="success" size="mini" @click="review">放货复核</el-button>
                </template>
            </el-table-column>
        </el-table>

        <div class="title">历史放货记录</div>
        <el-table :data="[1]" border>
            <el-table-column label="序号" width="50px">

            </el-table-column>
            <el-table-column label="操作">
                <el-input v-model="formData.field110" placeholder="请输入收货人邮箱" clearable></el-input>
            </el-table-column>
            <el-table-column label="申请原因">
                <el-input v-model="formData.field110" placeholder="请输入收货人邮箱" clearable></el-input>
            </el-table-column>
            <el-table-column label="附件">
                <el-input v-model="formData.field110" placeholder="请输入收货人邮箱" clearable></el-input>
            </el-table-column>
            <el-table-column label="申请时间">
                <el-input v-model="formData.field110" placeholder="请输入收货人邮箱" clearable></el-input>
            </el-table-column>
            <el-table-column label="申请人">
                <el-input v-model="formData.field110" placeholder="请输入收货人邮箱" clearable></el-input>
            </el-table-column>
            <el-table-column label="审批时间">
                <el-input v-model="formData.field110" placeholder="请输入收货人邮箱" clearable></el-input>
            </el-table-column>
            <el-table-column label="审批人">
                <el-input v-model="formData.field110" placeholder="请输入收货人邮箱" clearable></el-input>
            </el-table-column>
            <el-table-column label="备注">
                <el-input v-model="formData.field110" placeholder="请输入收货人邮箱" clearable></el-input>
            </el-table-column>
        </el-table>

        <edit v-if="showEdit" @close="showEdit=false" />
    </div>
</template>
<script>
import edit from './components/CargoControlEdit.vue'
export default {
    components: {edit},
    data(){
        return {
            showEdit: false,
            formData:{}
        }
    },
    methods:{
        review(){
            this.$confirm('已核实放货信息，确认放货？')
                .then(res => {
                    this.$alert('// TODO ')
                })
        }
    }
}
</script>
<style lang="scss" scoped>
.title{
  font-size:16px;
  margin:20px 0;
  display:flex;
  align-items:center;
  &:before{
    content: '';
    width:5px;
    height: 15px;
    background:#666;
    margin-right:10px;
  }
}
</style>
