<template>
    <el-dialog :title="title" visible :before-close="closeDialog" :close-on-click-modal="false">
      <el-form v-if="agreement"  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
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="重量" prop="field102">
              111
            </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>
        <div class="title">请填写放货信息</div>
        <el-row>
            <el-col :span="8">
              <el-form-item label="收货人" prop="field108">
                <el-input v-model="formData.field108" placeholder="请输入收货人" clearable ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="收货人电话" prop="field109">
                <el-input v-model="formData.field109" placeholder="请输入收货人电话" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="收货人邮箱" prop="field110">
                <el-input v-model="formData.field110" placeholder="请输入收货人邮箱" clearable></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-table :data="[1]" border>
            <el-table-column label="控货箱数">

            </el-table-column>
            <el-table-column label="放货箱数">
              <el-input v-model="formData.field110" placeholder="请输入收货人邮箱" clearable></el-input>
            </el-table-column>
            <el-table-column label="体积（m³）">
              <el-input v-model="formData.field110" placeholder="请输入收货人邮箱" clearable></el-input>
            </el-table-column>
            <el-table-column label="重量（kg）">
              <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>
          <el-form-item label="控货手机号" prop="field117" style="margin-top:20px">
            <el-input v-model="formData.field117" placeholder="请输入控货手机号" clearable >
            </el-input>
          </el-form-item>
          <el-form-item label="手机验证码" prop="field118">
            <el-input v-model="formData.field118" placeholder="请输入手机验证码" clearable style="width:200px; margin-right:10px" ></el-input>
            <el-button type="success">获取验证码</el-button>
          </el-form-item>
          <el-form-item label="" prop="field117" style="margin-top:20px">
            <el-button type="success">确认放货</el-button>
            <el-button type="default" @click="closeDialog">关闭</el-button>
          </el-form-item>
      </el-form>

      <div v-else>
          <release-agreement />
          <div style="margin-top:30px">
              <el-button type="primary" @click="agreement=true">我同意</el-button>
              <el-button @click="closeDialog">关闭</el-button>
          </div>
      </div>
    </el-dialog>
</template>
<script>
import ReleaseAgreement from "./ReleaseAgreement"
export default {
    props:{
        orderId: [String, Number]
    },
    components: {ReleaseAgreement},
    data(){
        return {
            show: false,
            detail: null,
            formData:{},
            agreement: false, // 是否同意协议
        }
    },
    computed:{
        title(){
            let t = '控货权转移'
            if(this.detail){
                t += '-' + this.detail.orderNo
            }
            return t
        }
    },
    created(){
        this.show = true
        this.loadData()
    },
    methods:{
        loadData(){
            
        },
        closeDialog(){
            this.show = false
            this.$emit('close');
        },
        
    }
}
</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>