<template>
  <div class="payment-application-content">
    <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-position="top" class="rule-form-orange">
      <cy-info-title>付款信息</cy-info-title>
      <el-form-item label="付款类型" prop="paymentType">
        <el-select v-model="ruleForm.paymentType" disabled placeholder="请选择付款类型">
          <el-option
            v-for="item in constant.incormeExpenditureType"
            :key="item.code"
            :label="item.name"
            :value="item.code"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="付款笔数" prop="planNo">
        <el-input v-model="ruleForm.planNo" disabled placeholder="请选择付款笔数" clearable />
        <!-- <el-select v-model="ruleForm.value" disabled placeholder="请选择付款笔数">
          <el-option
            v-for="item in []"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select> -->
      </el-form-item>
      <el-form-item label="付款金额" prop="paymentAmount">
        <cy-amount-input v-model="ruleForm.paymentAmount" disabled placeholder="请输入付款金额" clearable />
      </el-form-item>
      <el-form-item label="计划付款日期" prop="planPaymentDate">
        <el-date-picker
          v-model="ruleForm.planPaymentDate"
          type="date"
          placeholder="请选择计划付款日期"
          disabled
          value-format="yyyy-MM-dd"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="融资利率" prop="financingRateStr">
        <el-input v-model="ruleForm.financingRateStr" disabled placeholder="请输入融资利率" clearable />
      </el-form-item>
      <el-form-item label="管理费率" prop="managementFeeRateStr">
        <el-input v-model="ruleForm.managementFeeRateStr" disabled placeholder="请输入管理费率" clearable />
      </el-form-item>
      <el-form-item label="利息是否计算投放日" prop="interestCalculate">
        <el-input :value="ruleForm.interestCalculate === 1 ? '是':'否'" disabled placeholder="请输入 利息是否计算投放日" clearable />
      </el-form-item>
      <el-form-item label="还款方式" prop="payBackMethod">
        <el-select
          v-model="ruleForm.payBackMethod"
          placeholder="请选择还款方式"
          disabled
        >
          <el-option
            v-for="item in constant.paymentMethodForInterestManagementFee"
            :key="item.code"
            :label="item.name"
            :value="item.code"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <!-- <cy-info-title>
        第1笔应收账款
        <div slot="right">
          <el-button type="primary">选择</el-button>
        </div>
      </cy-info-title>
      <div style="width: 100%; margin-top: 20px;">
        <cy-comm-table
          ref="commTable"
          :columns="columns"
          :data="tableData"
          :count="0"
        />
      </div>
      <cy-info-title>
        第1笔放款收放款计划
        <div slot="right">
          <el-button type="primary">自动生成</el-button>
          <el-button type="primary">添加</el-button>
        </div>
      </cy-info-title>
      <div style="width: 100%; margin-top: 20px;">
        <cy-comm-table
          ref="commTable"
          :columns="columnsChild"
          :data="tableDataChild"
          :count="0"
        />
      </div>
      <cy-info-title>
        收放款计划合计
        <div slot="right">
          <el-button type="primary">自动生成</el-button>
        </div>
      </cy-info-title>
      <div style="width: 100%; margin-top: 20px;">
        <cy-comm-table
          ref="commTable"
          :columns="columnsChild"
          :data="tableDataChild"
          :count="0"
        />
      </div>
      <el-form-item label="IRR" prop="approvalConclusion" style="width: 100%;">
        <el-input v-model="ruleForm.approvalComments" placeholder="请输入 IRR" clearable />
      </el-form-item> -->
      <condition ref="condition" style="width: 100%" :details-info="detailsInfo.conditionList" :disabled="disabled"></condition>
    </el-form>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  components: {
    Condition: () => import('./Condition.vue')
  },
  props: {
    disabled: {
      type: Boolean,
      default: false
    },
    detailsInfo: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      ruleForm: {
        paymentInfoId: '',
        paymentNo: '',
        paymentType: '',
        paymentAmount: '',
        currencyCode: '',
        planPaymentDate: '',
        statusCode: '',
        financingRateStr: '',
        interestCalculate: '',
        payBackMethod: '',
        conditionList: []
      },
      rules: {},
      tableData: [
        { userName: '1111', statusName: '2131231' },
        { userName: '1111', statusName: '2131231' }
      ],
      columns: [
        {
          label: '底层资产编号',
          prop: 'postName',
          showTooltip: true
        },
        {
          label: '贸理通底层编号',
          showTooltip: true,
          prop: 'userNumber'
        },
        {
          label: '应收账款金额',
          prop: 'userName'
        },
        {
          label: '应收账款净额',
          prop: 'userTypeName'
        },
        {
          label: '应收账款起始日',
          prop: 'otherDutyName',
          showTooltip: true
        },
        {
          label: '应收账款期限',
          prop: 'inDate'
        },
        {
          label: '应收账款到期日',
          prop: 'inDate'
        },
        {
          label: '本次付款金额',
          prop: 'inDate'
        }
      ],
      tableDataChild: [
        { userName: '1111', statusName: '2131231' },
        { userName: '1111', statusName: '2131231' }
      ],
      columnsChild: [
        {
          label: '序号',
          index: true
        },
        {
          label: '收支日期',
          prop: 'postName',
          showTooltip: true
        },
        {
          label: '类型',
          showTooltip: true,
          prop: 'userNumber'
        },
        {
          label: '收款计算值',
          prop: 'userName'
        },
        {
          label: '收款调整值',
          prop: 'userTypeName'
        },
        {
          label: '放款',
          prop: 'otherDutyName',
          showTooltip: true
        },
        {
          label: '现金流',
          prop: 'inDate'
        },
        {
          label: ' 收款主体',
          prop: 'inDate'
        }
      ]
    }
  },
  computed: {
    ...mapGetters(['constant'])
  },
  watch: {
    detailsInfo: {
      handler(val) {
        if (val === undefined) return
        this.ruleForm = val
      },
      deep: true,
      immediate: true
    }
  },
  created() {
    this.$store.dispatch('getConstant', ['paymentMethodForInterestManagementFee', 'incormeExpenditureType'])
  },
  methods: {
    getParams() {
      return new Promise((resolve, reject) => {
        const conditionList = this.$refs.condition.conditionTableData.map((item, index) => {
          item.exemptionFileIds = item.exempt && item.follow ? this.$refs.condition.$refs.commTable.$refs[`fileStorage${index}`].getFileLists.map(item => item.id) : []
          return item
        })
        for (let i = 0; i < conditionList.length; i++) {
          const { follow,  exempt, exemptionFileIds } = conditionList[i]
          if (exempt && follow) {
            if (!exemptionFileIds.length) {
              this.$message.error('请上传附件')
              return false
            }
          }
        }
        resolve({
          ...this.ruleForm,
          conditionList,
          visible: true
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
