<template>
  <el-form ref="addOrUpdate" :rules="rules" label-width="130px" :model="form">
    <el-row>
      <el-col :span='12'>
        <el-form-item label="发货单号">
          <el-input v-model="code" disabled></el-input>
        </el-form-item>
      </el-col>
      <el-col :span='12'>
        <el-form-item label="装车单号" prop="deliveryCarCode">
          <el-input v-model="form.deliveryCarCode"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span='12'>
        <el-form-item label="装车时间" prop="loadTime">
          <el-date-picker
            v-model="form.loadTime"
            type="datetime"
            format='yyyy-MM-dd HH:mm:ss'
            value-format="timestamp"
            style="width: 100%;"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
      </el-col>
      <el-col :span='12'>
        <el-form-item label="车辆联系人" prop="contactPerson">
          <el-input v-model="form.contactPerson"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span='12'>
        <el-form-item label="联系方式" prop="contactPersonCall">
          <el-input v-model="form.contactPersonCall"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span='12'>
        <el-form-item label="装车产品" prop="productId">
          <el-select v-model="form.productId" placeholder="请选择" style="width: 100%;">
            <el-option
              v-for="item in productList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span='12'>
        <el-form-item label="装箱规格(片/箱)" prop="packagingSize">
          <el-input-number v-model="form.packagingSize" :min="0" :max='9999999999' style="width:100%"></el-input-number>
        </el-form-item>
      </el-col>
      <el-col :span='12'>
        <el-form-item label="产品批次" prop="productDate">
          <el-input v-model="form.productDate" placeholder="多个批次用','隔开"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span='12'>
        <el-form-item label="箱/托数" prop="packagingNum">
          <el-input-number v-model="form.packagingNum" :min="0" :max='9999999999' style="width:100%"></el-input-number>
        </el-form-item>
      </el-col>
      <el-col :span='12'>
        <el-form-item label="装车总量" prop="quantity">
          <el-input-number v-model="form.quantity" :min="0" :max='9999999999' style="width:100%"></el-input-number>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>
<script>
import { getProductAll } from '@/api/base/product'
import { deliveryLogDetCreate } from '@/api/base/delivery'
export default {
  name: 'LoadedPage',
  data() {
    return {
      form: {
        logId: '',
        deliveryCarCode: '',
        loadTime: null,
        contactPerson: '',
        contactPersonCall: '',
        productId: '',
        packagingSize: null,
        productDate: '',
        packagingNum: null,
        quantity: null
      },
      code: '',
      rules: {
        deliveryCarCode: [{ required: true, message: "装车单号不能为空", trigger: "blur" }],
        productId: [{ required: true, message: "装车产品不能为空", trigger: "change" }],
        packagingSize: [{ required: true, message: "装箱规格不能为空", trigger: "blur" }],
        packagingNum: [{ required: true, message: "箱/托数不能为空", trigger: "blur" }],
        quantity: [{ required: true, message: "装车总量不能为空", trigger: "blur" }]
      },
      productList: []
    }
  },
  methods: {
    init(id, code) {
      this.getSelectList()
      this.form.logId = id
      this.code = code
    },
    getSelectList() {
      getProductAll().then(res => {
        this.productList = res.data || []
      })
    },
    submitForm() {
      this.$refs['addOrUpdate'].validate((valid) => {
        if (valid) {
          console.log(this.form)
          deliveryLogDetCreate({ ...this.form }).then((res) => {
            if (res.code === 0) {
              this.$modal.msgSuccess("操作成功");
              this.$emit('successSubmit')
            }
          })
        } else {
          return false
        }
      })
    },
    formClear() {
      this.$refs.addOrUpdate.resetFields()
      this.code = ''
    }
  }
}
</script>
