<template>
  <div class="relation-disburse">
    <div class="multiple-form" style="margin-bottom: 20px;">
      <div>
        <div class="required">出资方：</div>
        <div>
          <el-input placeholder="请输入出资方" v-model="rowInfo.institutionName" disabled></el-input>
        </div>
      </div>
    </div>
    <div class="multiple-form" v-for="(item, index) in disburseList" :key="index">
      <div>
        <div class="required">授信主体：</div>
        <div>
          <el-select
            v-model="item.creditSubjectName"
            filterable
            placeholder="请选择授信主体"
            clearable
            style="width: 100%"
            @change="assetsDataItmeChange(index, { creditSubjectName: item.creditSubjectName})">
            <el-option v-for="row in creditData" :key="row.creditSubjectName"
              :label="row.creditSubjectName" :value="row.creditSubjectName">
            </el-option>
          </el-select>
        </div>
      </div>
      <div>
        <div class="required">业务编号：</div>
        <div>
          <el-select
            v-model="item.businessNo"
            placeholder="请选择业务编号"
            clearable
            style="width: 100%"
            @change="assetsDataItmeChange(index, {creditSubjectName: item.creditSubjectName, businessNo: item.businessNo})"
          >
            <el-option v-for="row in getAssetBusinessNo(index)" :key="row.businessNo"
              :label="row.businessNo" :value="row.businessNo">
            </el-option>
          </el-select>
        </div>
      </div>
      <div>
        <div class="required">保理合同编号：</div>
        <div>
          <el-select
            v-model="item.contractNo"
            placeholder="请选择保理合同编号"
            clearable
            style="width: 100%"
            @change="assetsDataItmeChange(index, { creditSubjectName: item.creditSubjectName, businessNo: item.businessNo, contractNo: item.contractNo })"
          >
            <el-option
              v-for="row in getContractNumber(getAssetBusinessNo(index), item.businessNo)" :key="row.contractNo"
              :label="row.contractNo"
              :value="row.contractNo">
            </el-option>
          </el-select>
        </div>
      </div>
      <div>
        <div class="required">支用批次：</div>
        <div>
          <el-select
            v-model="item.quotaDisburseBatch"
            placeholder="请选择支用批次"
            clearable
            style="width: 100%"
            @change="assetsDataItmeChange(index, {...item, quotaDisburseBatch: item.quotaDisburseBatch }, 'quotaDisburseBatch')"
          >
            <el-option
              v-for="row in getQuotaDisburseBatch(getContractNumber(getAssetBusinessNo(index), item.businessNo), item.contractNo)"
              :key="row.quotaDisburseBatch"
              :label="row.quotaDisburseBatch"
              :value="row.quotaDisburseBatch">
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="assets-btn">
        <el-button type="text" @click="disburseOptions('empty', index)">清空</el-button>
        <el-button type="text" @click="disburseOptions('delete', index)">删除</el-button>
      </div>
    </div>
    <div>
      <el-button type="text" @click="disburseOptions('add')">添加</el-button>
    </div>
    <div class="submit-btn">
      <el-button type="primary" @click="onSubmit" style="width: 150px;">确定</el-button>
      <el-button @click="cancel" style="width: 150px;">取消</el-button>
    </div>
  </div>
</template>

<script>
module.exports = {
  props: {
    rowInfo: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      creditData: [],
      disburseList: [],
      assetObj: {
        creditSubjectName: '',
        businessNo: '',
        contractNo: '',
        quotaDisburseBatch: '',
      }
    }
  },
  computed: {
    // 获取业务编号数据
    getAssetBusinessNo() {
      return function (index) {
        if(this.disburseList[index].creditSubjectName) {
          const businessNumberList =  this.creditData.filter(item => item.creditSubjectName === this.disburseList[index].creditSubjectName)
          if( businessNumberList.length) {
            return businessNumberList[0].businessNumbers
          } else {
            return []
          }
        }else {
          return []
        }
      }
    },

    // 获取保理合同编号数据
    getContractNumber() {
      return function (list, val) {
        if(val) {
          const businessNoList =  list.filter(item => item.businessNo === val)
          if( businessNoList.length) {
            return businessNoList[0].contractNumbersVos
          } else {
            return []
          }
        } else {
          return []
        }
      }
    },

    // 获取支用批次数据
    getQuotaDisburseBatch() {
      return function (list, val) {
        if(val) {
          const quotaDisburseBatchList =  list.filter(item => item.contractNo === val)
          if( quotaDisburseBatchList.length) {
            return quotaDisburseBatchList[0].quotaDisburseBatchs
          } else {
            return []
          }
        } else {
          return []
        }
      }
    }
  },
  methods: {
    getCreditData() {
      const deepAssetObj = JSON.parse(JSON.stringify(this.assetObj))
      this.disburseList = [{...deepAssetObj}]
      this.$api.capitalManage.getRelationDisbursCreditData({ institutionId: this.rowInfo.institutionId }).then(({ data }) => {
        this.creditData = data
      })
    },
    cancel() {
      this.$emit('modify-click', 'close')
    },

    disburseOptions(type, index) {
      const deepAssetObj = JSON.parse(JSON.stringify(this.assetObj))
      if(type === 'add') {
        this.disburseList.push(deepAssetObj)
      }
      if(type === 'empty') {
        this.$set(this.disburseList, index, deepAssetObj)
      }
      if(type === 'delete') {
        this.disburseList.splice(index, 1)
      }
    },
    assetsDataItmeChange(index, item) {
      const deepAssetObj = JSON.parse(JSON.stringify(this.assetObj))
      this.$set(this.disburseList, index,  {
        ...deepAssetObj,
        ...item
      })
    },
    onSubmit() {
      for (let i = 0; i < this.disburseList.length; i++) {
        const { creditSubjectName, businessNo, contractNo, quotaDisburseBatch} = this.disburseList[i]
        if(!creditSubjectName) {
          this.$message.warning(`请选择第${i + 1}条授信主体`)
          return
        }
        if(!businessNo) {
          this.$message.warning(`请选择第${i + 1}条业务编号`)
          return
        }
        if(!contractNo) {
          this.$message.warning(`请选择第${i + 1}条保理合同编号`)
          return
        }
        if(!quotaDisburseBatch) {
          this.$message.warning(`输入第${i + 1}条本次支用批次`)
          return
        }
      }
      const params = {
        Loading: true,
        financialInstitutionInfoId: this.rowInfo.id,
        quotaDisburseVoList:  this.disburseList
      }
      this.$api.capitalManage.relationDisbursSubmit(params).then(() => {
        this.$message.success('关联支用成功')
        this.$emit('modify-click', 'comfirm')
      })
    },
  },
}
</script>

<style scoped>

</style>
