<template>
  <div class="apply-financing">
    <cy-info-title>融资企业</cy-info-title>
    <el-form
      ref="ruleForm"
      :model="ruleForm"
      :rules="rules"
      label-position="top"
      label-width="120px"
      class="rule-form-orange"
    >
      <el-form-item label="企业名称" prop="businessNumber">
        <el-select
          v-model="ruleForm.businessNumber"
          placeholder="请选择企业名称"
          :disabled="disabled"
          @change="projectChange"
        >
          <el-option
            v-for="item in projectList"
            :key="item.businessNumber"
            :label="item.projectName"
            :value="item.businessNumber"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="统一社会信用代码" prop="coreEnterpriseName">
        <el-input v-model="ruleForm.coreEnterpriseName" disabled placeholder="请输入统一社会信用代码" />
      </el-form-item>
      <cy-info-title>融资金额</cy-info-title>
      <el-form-item label="可申请融资金额" prop="mainEnterpriseName">
        <cy-amount-input v-model="ruleForm.mainEnterpriseName" disabled placeholder="请输入可申请融资金额" unit-name="元" :is-unit="true" />
      </el-form-item>
      <el-form-item label="拟申请融资金额" prop="platformName">
        <cy-amount-input v-model="ruleForm.platformName" placeholder="请输入拟申请融资金额" unit-name="元" :is-unit="true" />
      </el-form-item>
      <cy-info-title>联系信息</cy-info-title>
      <el-form-item label="保理申请人联系人" prop="applicantContact">
        <el-input v-model="ruleForm.applicantContact" :disabled="disabled" placeholder="请输入保理申请人联系人" />
      </el-form-item>
      <el-form-item label="保理申请人联系电话" prop="applicantContactNumber">
        <el-input v-model="ruleForm.applicantContactNumber" :disabled="disabled" placeholder="请输入保理申请人联系电话" />
      </el-form-item>
      <el-form-item label="保理申请人联系人邮箱" prop="applicantContactEmail">
        <el-input v-model="ruleForm.applicantContactEmail" :disabled="disabled" placeholder="请输入保理申请人联系人邮箱" />
      </el-form-item>
      <cy-info-title>保理收款账户信息-公户</cy-info-title>

      <el-form-item label="保理收款账户户名" prop="applicantDesignatedAccountName">
        <el-input v-model="ruleForm.applicantDesignatedAccountName" :disabled="disabled" placeholder="请输入保理收款账户户名" />
      </el-form-item>
      <el-form-item label="保理收款账户" prop="applicantDesignatedAccount">
        <el-input v-model="ruleForm.applicantDesignatedAccount" :disabled="disabled" placeholder="请输入保理收款账户" />
      </el-form-item>
      <el-form-item label="保理收款账户开户行" prop="applicantDesignatedBank">
        <el-input v-model="ruleForm.applicantDesignatedBank" :disabled="disabled" placeholder="请输入保理收款账户开户行" />
      </el-form-item>
    </el-form>
    <div v-if="!disabled" class="submit-btn">
      <el-button @click="$router.go(-1)">关闭</el-button>
      <el-button type="primary" @click="submit('temp')">暂存</el-button>
      <el-button type="primary" @click="submit('submit')">提交</el-button>
    </div>
  </div>
</template>

<script>
import { getProjectInfo, getFinishProCon, applySubmit, getDetailsInfo } from '@/api/myFinancing'
import { validMail } from '@/utils/validate'
export default {
  name: 'ApplyFinancing',
  props: {
    detailsInfo: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    var validMailData = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入保理申请人联系人邮箱'))
      } else {
        if (!validMail(value)) {
          callback(new Error('请输入正确的保理申请人联系人邮箱'))
        } else {
          callback()
        }
      }
    }
    return {
      ruleForm: {
        businessNumber: '',
        coreEnterpriseId: '',
        coreEnterpriseName: '',
        mainEnterpriseId: '',
        mainEnterpriseName: '',
        platformId: '',
        platformName: '',
        purchContractId: '',
        purchContractName: '',
        purchContractNumber: '',
        applicantContact: '',
        applicantContactNumber: '',
        applicantContactEmail: '',
        applicantDesignatedAccountName: '',
        applicantDesignatedAccount: '',
        applicantDesignatedBank: ''
      },
      rules: {
        businessNumber: [
          { required: true, message: '请选择项目名称', trigger: 'change' }
        ],
        applicantContact: [
          { required: true, message: '请输入保理申请人联系人', trigger: 'blur' }
        ],
        applicantContactNumber: [
          { required: true, message: '请输入保理申请人联系电话', trigger: 'blur' }
        ],
        applicantContactEmail: [
          { required: true, message: '请输入保理申请人联系人邮箱', trigger: 'blur' },
          { validator: validMailData, trigger: 'blur' }

        ],
        applicantDesignatedAccountName: [
          { required: true, message: '请输入保理申请人指定账户户名', trigger: 'blur' }
        ],
        applicantDesignatedAccount: [
          { required: true, message: '请输入保理申请人指定账户', trigger: 'blur' }
        ],
        applicantDesignatedBank: [
          { required: true, message: '请输入保理申请人指定账户开户行', trigger: 'blur' }
        ]
      },
      disabled: false
    }
  },
  watch: {
    detailsInfo: {
      handler(val) {
        if (val) {
          const { type } = this.$route.query
          if (type === 'see') {
            this.initData(val)
          }
        }
      },
      deep: true,
      immediate: true
    }
  },
  created() {
    this.getProject()
    const { type } = this.$route.query
    if (type === 'see') {
      this.disabled = true
    } else {
      this.getDetails()
    }
  },
  methods: {
    initData(data) {
      const { financingBasicInfo, financingGoodsInfoList, financingApplicantInfo } = data
      this.oldTableData = financingGoodsInfoList
      this.tableData = this.handlerGoodsFormat(financingGoodsInfoList)
      const { applicantContact,
        applicantContactNumber,
        applicantContactEmail,
        applicantDesignatedAccountName,
        applicantDesignatedAccount,
        applicantDesignatedBank } = financingApplicantInfo
      this.ruleForm = {
        ...financingBasicInfo,
        applicantContact,
        applicantContactNumber,
        applicantContactEmail,
        applicantDesignatedAccountName,
        applicantDesignatedAccount,
        applicantDesignatedBank
      }
    },
    getDetails() {
      const { id } = this.$route.params
      if (id === 'add') return
      getDetailsInfo({ id }).then(({ data }) => {
        this.initData(data)
      })
    },
    getProject() {
      getProjectInfo().then(({ data }) => {
        this.projectList = data
      })
    },
    projectChange(val) {
      getFinishProCon({ businessNumber: val }).then(({ data }) => {
        this.ruleForm = {
          ...this.ruleForm,
          ...data
        }
      })
      this.getApplican()
      this.tableData = []
      this.tableDataInfo = []
    },
    submit(type) {
      const { applicantContact, applicantContactNumber, applicantContactEmail, applicantDesignatedAccountName, applicantDesignatedAccount, applicantDesignatedBank } = this.ruleForm
      const fileStorageList = this.$refs.fileStorage.getFileLists
      const params = {
        financingBasicInfo: {
          ...this.ruleForm
        },
        financingGoodsInfoList: this.oldTableData,
        financingAccountsReceivableInfoList: this.oldTableDataInfo,
        financingApplicantInfo: {
          applicantContact,
          applicantContactNumber,
          applicantContactEmail,
          applicantDesignatedAccountName,
          applicantDesignatedAccount,
          applicantDesignatedBank
        },
        fileIds: fileStorageList.map(item => item.id),
        visible: type !== 'temp'
      }
      if (type === 'temp') {
        applySubmit(params).then(() => {
          this.$message.success('暂存成功')
          this.$router.go(-1)
        })
      } else {
        this.$refs.ruleForm.validate((valid) => {
          if (valid) {
            applySubmit(params).then(() => {
              this.$message.success('提交成功')
              this.$router.go(-1)
            })
          } else {
            return false
          }
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.apply-financing {
  .statistics {
    color: #FF0000;
    margin-left: 20px;
  }
}

</style>
