<template>
  <div class="approve-content">
    <el-form ref="ruleForm" :key="key" :model="ruleForm" :rules="rules" label-position="top" class="rule-form-orange">
      <cy-info-title>审批结论</cy-info-title>
      <el-form-item label="审批结论：" prop="approvalConclusion">
        <el-radio-group v-model="ruleForm.approvalConclusion" :disabled="disabled">
          <el-radio label="pass">通过</el-radio>
          <el-radio label="back">退回</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item
        label="审批意见："
        style="width: 100%;"
        class="textarea-content"
        prop="approvalComment"
        :rules="[
          { required: ruleForm.approvalConclusion === 'back', message: '请输入审批意见', trigger: 'blur' }
        ]"
      >
        <el-input v-model="ruleForm.approvalComment" :disabled="disabled" type="textarea" style="width: 100%;" rows="3" clearable></el-input>
      </el-form-item>
      <condition v-if="ruleForm.approvalConclusion === 'pass'" ref="condition" style="width: 100%" type="paymentApprove" :disabled="disabled" :details-info="paymentConditionList"></condition>

    </el-form>
    <el-form v-if="ruleForm.approvalConclusion === 'pass'" ref="ruleFormFile" :model="ruleFormFile" :rules="rules" label-position="top" class="rule-form-orange">
      <cy-info-title>中登网登记模板</cy-info-title>
      <el-form-item label="中登网登记模板" style="width: 100%">
        <cy-upload
          ref="fileStorage"
          :upload-params="{}"
          :file-data="ruleFormFile.fileStorage"
          :upload-from-orange-status="true"
          disabled
          placeholder="请上传中登网登记模板"
        />
        <div class="download-box" @click="downloadFile">
          <i class="iconfont icon-xiazai"></i>
        </div>
      </el-form-item>
      <cy-info-title>应收账款登记</cy-info-title>
      <el-form-item label="登记证明编号" prop="receivablesRegisterNumber">
        <el-input v-model="ruleFormFile.receivablesRegisterNumber" :disabled="disabled" placeholder="请输入登记证明编号" />
      </el-form-item>
      <el-form-item label="登记到期日" prop="receivablesExpiryDate">
        <el-date-picker
          v-model="ruleFormFile.receivablesExpiryDate"
          type="date"
          :disabled="disabled"
          placeholder="请选择登记到期日"
          value-format="yyyy-MM-dd"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="登记附件" class="form-required">
        <cy-upload
          ref="receivablesFiles"
          :upload-params="{}"
          :file-data="ruleFormFile.receivablesFiles"
          :upload-from-orange-status="true"
          :disabled="disabled"
          placeholder="请上传登记附件"
        />
      </el-form-item>
      <template v-if="hasCollateralInfo">
        <cy-info-title style="margin-top: 20px">动产抵押登记</cy-info-title>
        <el-form-item label="登记证明编号" prop="mortgageRegisterNumber">
          <el-input v-model="ruleFormFile.mortgageRegisterNumber" :disabled="disabled" placeholder="请输入登记证明编号" />
        </el-form-item>
        <el-form-item label="登记到期日" prop="mortgageExpiryDate">
          <el-date-picker
            v-model="ruleFormFile.mortgageExpiryDate"
            type="date"
            :disabled="disabled"
            placeholder="请选择登记到期日"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="登记附件" class="form-required">
          <cy-upload
            ref="mortgageFiles"
            :upload-params="{}"
            :disabled="disabled"
            :file-data="ruleFormFile.mortgageFiles"
            :upload-from-orange-status="true"
            placeholder="请上传登记附件"
          />
        </el-form-item>
        <cy-info-title style="margin-top: 20px">所有权保留登记</cy-info-title>
        <el-form-item label="登记证明编号" prop="ownershipRegisterNumber">
          <el-input v-model="ruleFormFile.ownershipRegisterNumber" :disabled="disabled" placeholder="请输入登记证明编号" />
        </el-form-item>
        <el-form-item label="登记到期日" prop="ownershipDate">
          <el-date-picker
            v-model="ruleFormFile.ownershipDate"
            type="date"
            :disabled="disabled"
            placeholder="请选择登记到期日"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="登记附件" class="form-required">
          <cy-upload
            ref="ownershipFiles"
            :upload-params="{}"
            :file-data="ruleFormFile.ownershipFiles"
            :disabled="disabled"
            :upload-from-orange-status="true"
            placeholder="请上传登记附件"
          />
        </el-form-item>
      </template>
   
    </el-form>
  </div>
</template>

<script>
export default {
  components: {
    Condition: () => import('../paymentApplication/components/Condition')
  },
  props: {
    disabled: {
      type: Boolean,
      default: false
    },
    detailsInfo: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      key: 0,
      ruleForm: {
        approvalConclusion: 'pass',
        approvalComment: ''
      },
      hasCollateralInfo: false,
      ruleFormFile: {
        paymentApplyId: '',
        receivablesRegisterNumber: '',
        receivablesExpiryDate: '',
        receivablesFiles: [],
        mortgageRegisterNumber: '',
        mortgageExpiryDate: '',
        mortgageFiles: [],
        ownershipRegisterNumber: '',
        ownershipDate: '',
        ownershipFiles: [],
        fileId: '',
        fileStorage: []
      },
      rules: {
        approvalConclusion: [
          { required: true, message: '请选择审批结论', trigger: 'change' }
        ],
        receivablesRegisterNumber: [
          { required: true, message: '请输入应收账款登记证明编号', trigger: 'blur' }
        ],
        receivablesExpiryDate: [
          { required: true, message: '请输入应收账款登记到期日', trigger: 'blur' }
        ],
        mortgageRegisterNumber: [
          { required: true, message: '请输入动产抵押登记证明编号', trigger: 'blur' }
        ],
        mortgageExpiryDate: [
          { required: true, message: '请输入动产抵押登记到期日', trigger: 'blur' }
        ],
        ownershipRegisterNumber: [
          { required: true, message: '请输入所有权保留登记证明编号', trigger: 'blur' }
        ],
        ownershipDate: [
          { required: true, message: '请输入所有权保留登记到期日', trigger: 'blur' }
        ]
      },
      paymentConditionList: []
    }
  },
  watch: {
    detailsInfo: {
      handler(newV) {
        if (newV === undefined) return
        const { approvalConclusion, approvalComments, receivablesRegisterInfo, paymentConditionList, hasCollateralInfo } = JSON.parse(JSON.stringify(newV))
        this.ruleForm.approvalConclusion = approvalConclusion
        this.ruleForm.approvalComments = approvalComments
        const { fileStorage } = receivablesRegisterInfo
        this.ruleFormFile = {
          ...receivablesRegisterInfo,
          fileStorage: fileStorage ? [fileStorage] : []
        }
        this.paymentConditionList = paymentConditionList
        this.hasCollateralInfo = hasCollateralInfo
        this.key += 1
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    getRuleFormFileParams() {
      return new Promise((resolve, reject) => {
        if (this.ruleForm.approvalConclusion === 'pass') {
          this.$refs.ruleFormFile.validate(valid => {
            if (valid) {
              const receivablesFileIds = this.$refs.receivablesFiles.getFileLists.map(item => item.id)
             
              if (!receivablesFileIds.length) {
                this.$message.warning('请上传应收账款登记附件')
                return
              }
              let mortgageFileIds = []
              let ownershipFileIds = []
              if(this.hasCollateralInfo) {
                mortgageFileIds = this.$refs.mortgageFiles.getFileLists.map(item => item.id)
                ownershipFileIds = this.$refs.ownershipFiles.getFileLists.map(item => item.id)
                if (!mortgageFileIds.length) {
                  this.$message.warning('请上传动产抵押登记附件')
                  return
                }
                if (!ownershipFileIds.length) {
                  this.$message.warning('请上传所有权保留登记附件')
                  return
                }
              }
           
              const params = {
                ...this.ruleFormFile,
                receivablesFileIds,
                mortgageFileIds,
                ownershipFileIds
              }
              delete params.receivablesFiles
              delete params.mortgageFiles
              delete params.ownershipFiles
              delete params.fileStorage
              resolve(params)
            } else {
              reject()
            }
          })
        } else {
          resolve()
        }
      })
    },
    getParams() {
      return new Promise((resolve, reject) => {
        this.$refs.ruleForm.validate(valid => {
          if (valid) {
            if (this.ruleForm.approvalConclusion === 'pass') {
              for (let i = 0; i < this.$refs.condition.conditionTableData.length; i++) {
                const { meet } = this.$refs.condition.conditionTableData[i]
                if (meet === null) {
                  this.$message.warning('请填写是否满足')
                  return
                }
              }
            }
            resolve({
              ...this.ruleForm,
              paymentConditionList: this.ruleForm.approvalConclusion === 'pass' ? this.$refs.condition.conditionTableData : []
            })
          } else {
            reject()
          }
        })
      })
    },
    downloadFile() {

    }
  }
}
</script>

<style  scoped>
.download-box {
  position: absolute;
  top: 6%;
  right: 30px;
  z-index: 10;
  width: 30px;
  text-align: center;
}
</style>
