<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="应付金额" prop="money">
        <el-input :value="unit + ' ' + ruleForm.money" placeholder="请输入" disabled />
      </el-form-item>
      <el-form-item label="支付时间" prop="paymentTime" :rules="[{ required: true, message: `请选择支付时间`, trigger: 'change' }]">
        <el-date-picker v-model="ruleForm.paymentTime" value-format="yyyy-MM-dd" type="date" placeholder="选择支付时间" style="width: 100%;" />
      </el-form-item>
      <el-form-item label="付款凭证号" prop="voucherNo" :rules="[{ required: true, message: `请输入付款凭证号`, trigger: 'blur' }]">
        <el-input v-model="ruleForm.voucherNo" placeholder="请输入" />
      </el-form-item>
      <el-form-item label="付款凭证" prop="transportCertificateFileId">
        <span slot="label" class="required-label">付款凭证</span>
        <cy-upload
          ref="fileRef"
          :file-data="[]"
          :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>
  </div>
</template>

<script>
export default {
  props: {
    money: {
      type: Number,
      default: 0
    },
    unit: {
      type: String,
      default: 'CNY'
    },
    infoId: {
      type: String,
      default: 'CNY'
    }
  },
  data() {
    return {
      ruleForm: {
        money: '',
        paymentTime: '',
        voucherNo: ''
      },
      rules: {}
    }
  },
  watch: {
    money: {
      handler(newV) {
        if (newV) {
          this.ruleForm.money = newV
        }
      },
      immediate: true
    }
  },
  methods: {
    getParams() {
      var params = {
        Loading: true,
        id: this.infoId,
        ...this.ruleForm
      }
      return new Promise((resolve, reject) => {
        this.$refs.ruleFormRef.validate(valid => {
          if (valid) {
            const contractFiles = this.$refs.fileRef.getFileLists
            if (!contractFiles.length) {
              this.$message.warning('请上传采购合同')
              reject()
              return
            }
            params.fileId = contractFiles[0].id
            resolve(params)
          } else {
            reject()
          }
        })
      })
    }
  }
}

</script>

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