<template>
  <div class="customer-edit-content">
    <el-form ref="ruleForm" :model="detailsInfo" label-position="top" label-width="120px" class="rule-form-orange">
      <cy-info-title>基础信息</cy-info-title>
      <el-form-item label="客户名称">
        <el-input v-model="detailsInfo.customerName" placeholder="请输入客户名称" disabled />
      </el-form-item>
      <el-form-item label="放款金额">
        <cy-amount-input v-model="detailsInfo.loanAmountTotal" placeholder="请输入放款金额" :is-unit="detailsInfo.currencyCode ? true : false" :unit-name="detailsInfo.currencyCode" disabled></cy-amount-input>
      </el-form-item>
      <el-form-item label="放款日期">
        <el-input v-model="getLoanDateList" placeholder="请输入放款日期" disabled />
      </el-form-item>
      <el-form-item label="到期日">
        <el-input v-model="detailsInfo.expireDate" placeholder="请输入到期日" disabled />
      </el-form-item>
      <cy-info-title v-if="detailsInfo.upstreamShow">上游-底层合同</cy-info-title>
      <template v-if="detailsInfo.upstreamShow">
        <template v-for="(item, index) in detailsInfo.upstreamDetailList">
          <el-form-item
            :key="'upstreamDetailList' + index + 1"
            label="合同编号"
          >
            <el-input v-model="item.upstreamContractNo" placeholder="请输入合同编号" disabled></el-input>
          </el-form-item>
          <el-form-item
            :key="'upstreamDetailList' + index + 2"
            label="合同金额"
          >
            <cy-amount-input v-model="item.upstreamContractAmount" placeholder="请输入合同金额" :is-unit="true" unit-name="CNY" disabled></cy-amount-input>
          </el-form-item>
          <el-form-item
            :key="'upstreamDetailList' + index + 3"
            label="合同账期（天）"
          >
            <el-input v-model="item.upstreamContractPaymentDays" placeholder="请输入合同账期" disabled></el-input>
          </el-form-item>
          <el-form-item
            :key="'upstreamDetailList' +index + 4"
            label="应收账款金额"
          >
            <cy-amount-input v-model="item.upstreamAccountsReceivableAmount" placeholder="请输入应收账款金额" :is-unit="true" unit-name="CNY" disabled></cy-amount-input>
          </el-form-item>

          <div :key="'upstreamDetailList' +index + 5" style="width: 100%">
            <el-form-item label="采购合同" class="form-required" style="width: 100%;">
              <cy-upload
                :ref="'upPurchContractFiles' + index"
                :disabled="disabled"
                :upload-params="uploadParams"
                :file-data="item.upstreamPurchContractFiles"
                :upload-from-orange-status="true"
              >
              </cy-upload>
            </el-form-item>
          </div>
          <div :key="'upstreamDetailList' +index + 6" style="width: 100%;">
            <el-form-item label="结算单" class="form-required" style="width: 100%;">
              <cy-upload
                :ref="`upSettlementFiles${index}`"
                :disabled="disabled"
                :upload-params="uploadParams"
                :file-data="item.upstreamSettlementFiles"
                :upload-from-orange-status="true"
              >
              </cy-upload>
            </el-form-item>
          </div>
          <div :key="'upstreamDetailList' +index + 7" style="width: 100%; margin-bottom: 20px;">
            <el-form-item label="发票" style="width: 100%;">
              <cy-upload
                :ref="`upInvoiceFiles${index}`"
                :disabled="disabled"
                :upload-params="uploadParams"
                :file-data="item.upstreamInvoiceFiles"
                :upload-from-orange-status="true"
              >
              </cy-upload>
            </el-form-item>
          </div>
        </template>
      </template>

      <cy-info-title>下游-底层合同</cy-info-title>
      <template v-for="(item, index) in detailsInfo.downstreamDetailList">
        <el-form-item
          :key="'downstreamDetailList' + index + 1"
          label="合同编号"
        >
          <el-input v-model="item.downstreamContractNo" placeholder="请输入合同编号" disabled></el-input>
        </el-form-item>
        <el-form-item
          :key="'downstreamDetailList' +index + 2"
          label="合同金额"
        >
          <cy-amount-input v-model="item.downstreamContractAmount" placeholder="请输入合同金额" :is-unit="true" unit-name="CNY" disabled></cy-amount-input>
        </el-form-item>
        <el-form-item
          :key="'downstreamDetailList' +index + 3"
          label="合同账期（天）"
        >
          <el-input v-model="item.downstreamContractPaymentDays" placeholder="请输入合同账期" disabled></el-input>
        </el-form-item>
        <el-form-item
          :key="'downstreamDetailList' +index + 4"
          label="应收账款金额"
        >
          <cy-amount-input v-model="item.downstreamAccountsReceivableAmount" placeholder="请输入应收账款金额" :is-unit="true" unit-name="CNY" disabled></cy-amount-input>
        </el-form-item>
        <div :key="'downstreamDetailList' +index + 5" style="width: 100%;">
          <el-form-item label="销售合同" class="form-required" style="width: 100%;">
            <cy-upload
              :ref="'downSalesContractFiles' + index"
              :disabled="disabled"
              :upload-params="uploadParams"
              :file-data="item.downstreamSalesContractFiles"
              :upload-from-orange-status="true"
            >
            </cy-upload>
          </el-form-item>
        </div>
        <div :key="'downstreamDetailList' +index + 6" style="width: 100%;">
          <el-form-item label="结算单" class="form-required" style="width: 100%;">
            <cy-upload
              :ref="`downSettlementFiles${index}`"
              :disabled="disabled"
              :upload-params="uploadParams"
              :file-data="item.downstreamSettlementFiles"
              :upload-from-orange-status="true"
            >
            </cy-upload>
          </el-form-item>
        </div>
        <div :key="'downstreamDetailList' +index + 7" style="width: 100%; margin-bottom: 20px;">
          <el-form-item label="发票" style="width: 100%;">
            <cy-upload
              :ref="`downInvoiceFiles${index}`"
              :disabled="disabled"
              :upload-params="uploadParams"
              :file-data="item.downstreamInvoiceFiles"
              :upload-from-orange-status="true"
            >
            </cy-upload>
          </el-form-item>
        </div>
      </template>

      <cy-info-title>保理业务合同及附件</cy-info-title>
      <div style="width: 100%;">
        <el-form-item label="合同及附件" class="form-required" style="width: 100%;">
          <cy-upload
            ref="attachmentFiles"
            :disabled="disabled"
            :upload-params="uploadParams"
            :file-data="detailsInfo.attachmentFiles"
            :upload-from-orange-status="true"
          >
          </cy-upload>
        </el-form-item>
      </div>

      <cy-info-title>其他</cy-info-title>
      <div style="width: 100%;">
        <el-form-item label="其他附件" style="width: 100%;">
          <cy-upload
            ref="otherFiles"
            :disabled="disabled"
            :upload-params="uploadParams"
            :file-data="detailsInfo.otherFiles"
            :upload-from-orange-status="true"
          >
          </cy-upload>
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'CustomerDisburseEditContent',
  props: {
    disabled: {
      type: Boolean,
      default: false
    },
    detailsInfo: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      rules: {},
      loading: false,
      uploadParams: {
        mouldName: 'financialCustomerExpenditure'
      }
    }
  },
  computed: {
    getLoanDateList() {
      let loanDate = ''
      this.detailsInfo.loanDateList.forEach((item, index) => {
        if (index === this.detailsInfo.loanDateList.length - 1) {
          loanDate += item
        } else {
          loanDate += `${item},`
        }
      })
      return loanDate
    }
  },
  methods: {
    getParams() {
      return new Promise((resolve, reject) => {
        const { id, taskId } = this.$route.query
        const upstreamDetailList = []
        this.detailsInfo.upstreamDetailList.forEach((item, index) => {
          const upPurchContractFileList = this.$refs['upPurchContractFiles' + index][0].getFileLists
          const upSettlementFileList = this.$refs['upSettlementFiles' + index][0].getFileLists
          const upInvoiceFileList = this.$refs['upInvoiceFiles' + index][0].getFileLists
          upstreamDetailList.push(
            {
              contractInfoId: item.contractInfoId,
              upstreamPurchContractFileIds: upPurchContractFileList.map(item => item.id),
              upstreamSettlementFileIds: upSettlementFileList.map(item => item.id),
              upstreamInvoiceFileIds: upInvoiceFileList.map(item => item.id)
            }
          )
        })
        const downstreamDetailList = []
        this.detailsInfo.downstreamDetailList.forEach((item, index) => {
          const downSalesContractFileList = this.$refs[`downSalesContractFiles${index}`][0].getFileLists
          const downSettlementFileList = this.$refs[ `downSettlementFiles${index}`][0].getFileLists
          const downInvoiceFileList = this.$refs[ `downInvoiceFiles${index}`][0].getFileLists
          downstreamDetailList.push(
            {
              contractInfoId: item.contractInfoId,
              downstreamSalesContractFileIds: downSalesContractFileList.map(item => item.id),
              downstreamSettlementFileIds: downSettlementFileList.map(item => item.id),
              downstreamInvoiceFileIds: downInvoiceFileList.map(item => item.id)
            }
          )
        })
        const attachmentFileList = this.$refs.attachmentFiles.getFileLists
        const otherFileList = this.$refs.otherFiles.getFileLists
        const params = {
          id: id,
          taskId,
          customerName: this.detailsInfo.customerName,
          loanAmountTotal: this.detailsInfo.loanAmountTotal,
          expireDate: this.detailsInfo.expireDate,
          loanDateList: this.detailsInfo.loanDateList,
          upstreamDetailList,
          downstreamDetailList,
          attachmentFileIds: attachmentFileList.map(item => item.id),
          otherFileIds: otherFileList.map(item => item.id)
        }
        resolve(params)
      })
    }
  }
}
</script>
<style scoped lang="scss">

</style>
