 <template>
  <div class="customer-disburse-edit-content">
    <el-form ref="ruleForm" :rules="rules" label-width="150px" label-position="left" class="rule-form">
      <div class="info-title">基础信息</div>
      <el-form-item label="客户名称：">
        <el-input placeholder="请输入客户名称" v-model="deatailsInfo.customerName" clearable disabled></el-input>
      </el-form-item>
      <el-form-item label="放款金额：">
        <cy-amount-input placeholder="请输入放款金额" v-model="deatailsInfo.loanAmountTotal" :is-unit="true" :unit-name="deatailsInfo.currencyCode" disabled>
        </cy-amount-input>
      </el-form-item>
      <el-form-item label="放款日期：">
        <el-input placeholder="请输入放款日期" v-model="getLoanDateList"  disabled></el-input>
      </el-form-item>
      <el-form-item label="到期日：">
        <el-input placeholder="请输入到期日" v-model="deatailsInfo.expireDate" disabled></el-input>
      </el-form-item>

      <div class="info-title" v-if="deatailsInfo.upstreamShow">上游-底层合同</div>
      <template v-if="deatailsInfo.upstreamShow">
        <template v-for="(item, index) in deatailsInfo.upstreamDetailList">
          <el-form-item
            label="合同编号："
            :key="'upstreamDetailList' + index + 1"
          >
            <el-input placeholder="请输入合同编号" v-model="item.upstreamContractNo" clearable disabled></el-input>
          </el-form-item>
          <el-form-item
            label="合同金额："
            :key="'upstreamDetailList' + index + 2"
          >
            <cy-amount-input placeholder="请输入合同金额" v-model="item.upstreamContractAmount" :is-unit="true" unit-name="CNY" clearable disabled></cy-amount-input>
          </el-form-item>
          <el-form-item
            label="合同账期："
            :key="'upstreamDetailList' + index + 3"
          >
            <el-input placeholder="请输入合同账期" v-model="item.upstreamContractPaymentDays"  disabled></el-input>
          </el-form-item>
          <el-form-item
            label="应收账款金额："
            :key="'upstreamDetailList' +index + 4"
          >
            <cy-amount-input placeholder="请输入应收账款金额" v-model="item.upstreamAccountsReceivableAmount" :is-unit="true" unit-name="CNY" disabled></cy-amount-input>
          </el-form-item>
          <div class="form-upload-box" :key="'upstreamDetailList' +index + 5">
            <div class="form-upload-name form-required" style="width: 170px;">
              采购合同：
            </div>
            <cy-upload
              :disabled="disabled"
              :ref="'upPurchContractFiles' + index"
              :upload-params="uploadParams"
              :file-data="item.upstreamPurchContractFiles"
              :upload-from-status="true"
            >
            </cy-upload>
          </div>
          <div class="form-upload-box" :key="'upstreamDetailList' +index + 6">
            <div class="form-upload-name form-required" style="width: 170px;">
              结算单：
            </div>
            <cy-upload
              :disabled="disabled"
              :ref="`upSettlementFiles${index}`"
              :upload-params="uploadParams"
              :file-data="item.upstreamSettlementFiles"
              :upload-from-status="true"
            >
            </cy-upload>
          </div>
          <div class="form-upload-box" :key="'upstreamDetailList' +index + 7" style="margin-bottom: 20px;">
            <div class="form-upload-name" style="width: 170px;">
              发票：
            </div>
            <cy-upload
              :disabled="disabled"
              :ref="`upInvoiceFiles${index}`"
              :upload-params="uploadParams"
              :file-data="item.upstreamInvoiceFiles"
              :upload-from-status="true"
            >
            </cy-upload>
          </div>
        </template>
      </template>

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

      <div class="info-title">保理业务合同及附件</div>
      <div class="form-upload-box">
        <div class="form-upload-name form-required" style="width: 170px;">
          合同及附件：
        </div>
        <cy-upload
          :disabled="disabled"
          ref="attachmentFiles"
          :upload-params="uploadParams"
          :file-data="deatailsInfo.attachmentFiles"
          :upload-from-status="true"
        >
        </cy-upload>
      </div>
      <div class="info-title">其他</div>
      <div class="form-upload-box">
        <div class="form-upload-name" style="width: 170px;">
          其他附件：
        </div>
        <cy-upload
          :disabled="disabled" ref="otherFiles"
          :upload-params="uploadParams"
          :file-data="deatailsInfo.otherFiles"
          :upload-from-status="true"
        >
        </cy-upload>
      </div>
    </el-form>
  </div>
</template>

<script>
module.exports ={
  props: {
    disabled: {
      type: Boolean,
      default: false
    },
    deatailsInfo: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      rules: {},
      loading: false,
      uploadParams: {
        mouldName: 'financialCustomerExpenditure',
      }
    }
  },
  computed: {
    getLoanDateList() {
      let loanDate = ''
      this.deatailsInfo.loanDateList.forEach((item, index) => {
          if( index === this.deatailsInfo.loanDateList.length - 1) {
            loanDate += item
          }else {
            loanDate += `${item},`
          }
      });
      return loanDate
    },
  },
  methods: {
    getParams() {
      const { id, taskId } = this.$route.query
      const upstreamDetailList = []
      this.deatailsInfo.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.deatailsInfo.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.deatailsInfo.customerName,
        loanAmountTotal:this.deatailsInfo.loanAmountTotal,
        expireDate:this.deatailsInfo.expireDate,
        loanDateList:this.deatailsInfo.loanDateList,
        upstreamDetailList,
        downstreamDetailList,
        attachmentFileIds:  attachmentFileList.map(item => item.id ),
        otherFileIds: otherFileList.map(item => item.id )
      }
      return params
    }
  },
}
</script>

<style scoped>

</style>
