<template>
  <div>
    <el-form ref="bookingForm" :rules="rules" :model="booking" label-width="140px" class="booking-form">
      <el-form-item label="SO NO">
        <el-input v-model="booking.soNo"></el-input>
      </el-form-item>
      <el-form-item label="船公司类型">
        <el-select v-model="booking.type" placeholder="请选择船公司类型">
          <el-option v-for="type in types" :key="type" :label="type" :value="type"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="驳船港">
        <el-select v-model="booking.bargePort" placeholder="请选择驳船港">
          <el-option v-for="type in types" :key="type" :label="type" :value="type"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="大船港">
        <el-select v-model="booking.bigShipPort" placeholder="请选择大船港">
          <el-option v-for="type in types" :key="type" :label="type" :value="type"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="目的港">
        <el-select v-model="booking.destination" placeholder="请选择目的港">
          <el-option v-for="type in types" :key="type" :label="type" :value="type"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="订舱公司">
        <el-select v-model="booking.bookingCompany" placeholder="请选择订舱公司">
          <el-option v-for="type in types" :key="type" :label="type" :value="type"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="预计驳船时间" prop="time">
        <el-date-picker type="date" placeholder="请选择日期" v-model="booking.bargeTime"></el-date-picker>
      </el-form-item>

      <el-row>
        <el-col span="12">
          <el-form-item label="预计开船时间" prop="time">
            <el-date-picker type="date" placeholder="请选择日期" v-model="booking.departureTime"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col span="12">
          <el-form-item label="通知人" label-width="80px">
            <el-select v-model="booking.feedTimePerson" placeholder="请选择通知人">
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col span="12">
          <el-form-item label="预计提单补料时间">
            <el-date-picker type="date" placeholder="请选择日期" v-model="booking.feedTime"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col span="12">
          <el-form-item label="通知人" label-width="80px">
            <el-select v-model="booking.feedTimePerson" placeholder="请选择通知人">
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col span="12">
          <el-form-item label="预计报关时间">
            <el-date-picker type="date" placeholder="请选择日期" v-model="booking.declarationTime"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col span="12">
          <el-form-item label="通知人" label-width="80px">
            <el-select v-model="booking.feedTimePerson" placeholder="请选择通知人">
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col span="12">
          <el-form-item label="预计截关时间">
            <el-date-picker type="date" placeholder="请选择日期" v-model="booking.cutOffTime"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col span="12">
          <el-form-item label="通知人" label-width="80px">
            <el-select v-model="booking.feedTimePerson" placeholder="请选择通知人">
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

    </el-form>
    <el-row class="operate-button">
      <el-button type="primary" @click="onSubmit">提交</el-button>
      <el-button @click="cancel">取消</el-button>
    </el-row>
  </div>

</template>

<script>
export default {
  name: "booking",
  data() {
    return {
      types: ["PIL", "MSK", "CMA", "COSCO", "ZIM", "ONE", "OOCL", "MSC", "HPL"],
      booking: {},
      rules: {
        time: [{ required: true, message: "请选择时间", trigger: "change" }],
      },
    };
  },
  methods: {
    onSubmit() {
      this.$refs["bookingForm"].validate((valid) => {
        if (valid) {
          alert("submit!");
        }
      });
    },
    cancel() {
      this.$emit("closeDialog");
    },
  },
};
</script>
