<template>
  <div class="purchase-order-trans">
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      label-position="top"
      label-width="150px"
      class="rule-form-orange list-form"
    >
      <el-form-item label="采购订单ID" prop="orderNo">
        <el-input v-model="ruleForm.orderNo" placeholder="请输入" disabled />
      </el-form-item>
      <el-form-item label="物流公司" prop="companyName" :rules="[{ required: true, message: `请输入物流公司`, trigger: 'blur' }]">
        <el-input v-model="ruleForm.companyName" placeholder="请输入" />
      </el-form-item>
      <el-form-item label="物流单号" prop="logisticsOrderNumber" :rules="[{ required: true, message: `请输入物流单号`, trigger: 'blur' }]">
        <el-input v-model="ruleForm.logisticsOrderNumber" placeholder="请输入" />
      </el-form-item>
      <el-form-item label="发货时间" prop="deliveryTime" :rules="[{ required: true, message: `请选择发货时间`, trigger: 'change' }]">
        <el-date-picker v-model="ruleForm.deliveryTime" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="选择发货时间" style="width: 100%;" />
      </el-form-item>
      <el-form-item label="送达日期" prop="arriveTime" :rules="[{ required: true, message: `请选择送达日期`, trigger: 'change' }]">
        <el-date-picker v-model="ruleForm.arriveTime" value-format="yyyy-MM-dd" type="date" placeholder="选择送达日期" style="width: 100%;" />
      </el-form-item>
      <el-form-item label="运输证明" prop="transportCertificateFileId">
        <span slot="label" class="required-label">运输证明</span>
        <cy-upload
          ref="transportCertificateFileId"
          :upload-params="{
            fileType: 'transportCertificateFileId'
          }"
          :file-data="ruleForm.transportCertificateFileId"
          :upload-from-orange-status="true"
          :file-type="'pdf,PDF,png,PNG,jpg,JPG,bmp,BMP,jpeg,JPEG'"
          placeholder="请上传运输证明"
          :limit="1"
          :file-size="20"
        />
      </el-form-item>
      <el-form-item label="备注（选填）" prop="remark">
        <el-input v-model="ruleForm.remark" placeholder="请输入" />
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  props: {
    orderNo: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      ruleForm: {
        orderNo: '',
        logisticsOrderNumber: '',
        companyName: '',
        deliveryTime: '',
        arriveTime: '',
        transportCertificateFileId: [],
        remark: ''
      },
      rules: {}
    }
  },
  watch: {
    orderNo: {
      handler(newV) {
        if (newV) {
          this.ruleForm.orderNo = newV
        }
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    async getParams() {
      var params = {
        Loading: true,
        ...this.ruleForm
      }
      return new Promise((resolve, reject) => {
        this.$refs.ruleFormRef.validate(valid => {
          if (valid) {
            const contractFiles = this.$refs.transportCertificateFileId.getFileLists
            if (!contractFiles.length) {
              this.$message.warning('请上传采购合同')
              return
            } else {
              params.transportCertificateFileId = contractFiles.length ? contractFiles.map(item => item.id)[0] : null
            }

            return resolve(params)
          } else {
            reject()
            return false
          }
        })
      })
    }
  }
}

</script>

<style lang="scss" scoped>
.purchase-order-trans {
  max-height: 50vh;
  overflow: auto;
}
</style>
