<template>
  <div class="contract-preparation-content">
    <cy-info-title>支付方式</cy-info-title>
    <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-position="top" class="rule-form-orange">
      <el-form-item label="本金支付方式" prop="principalCollectionMethod">
        <el-input v-model="ruleForm.principalCollectionMethod" :disabled="disabled" placeholder="请输入本金支付方式" clearable />
      </el-form-item>
      <el-form-item label="利息支付方式" prop="interestCollectionMethod">
        <el-input v-model="ruleForm.interestCollectionMethod" :disabled="disabled" placeholder="请输入利息支付方式" clearable />
      </el-form-item>
      <el-form-item label="管理费支付方式" prop="managementFeeCollectionMethod">
        <el-input v-model="ruleForm.managementFeeCollectionMethod" :disabled="disabled" placeholder="请输入管理费支付方式" clearable />
      </el-form-item>
      <el-form-item label="保证金支付方式" prop="marginCollectionMethod">
        <el-input v-model="ruleForm.marginCollectionMethod" :disabled="disabled" placeholder="请输入保证金支付方式" clearable />
      </el-form-item>
      <el-form-item label="保证金退还方式" prop="marginReturnMethod">
        <el-input v-model="ruleForm.marginReturnMethod" :disabled="disabled" placeholder="请输入保证金退还方式" clearable />
      </el-form-item>
      <el-form-item label="保证金退还条件" prop="marginReturnCondition">
        <el-input v-model="ruleForm.marginReturnCondition" :disabled="disabled" placeholder="请输入保证金退还条件" clearable />
      </el-form-item>
      <el-form-item label="其他费用支付方式" prop="otherFeeCollectionMethod">
        <el-input v-model="ruleForm.otherFeeCollectionMethod" :disabled="disabled" placeholder="请输入其他费用支付方式" clearable />
      </el-form-item>
      <cy-info-title style="margin-bottom: 20px;">放款条件</cy-info-title>
      <el-form-item style="width: 100%">
        <cy-comm-table
          :columns="loanColumns"
          :data="loanConditionList"
          :count="0"
        />
      </el-form-item>
      <cy-info-title style="margin-bottom: 20px;">放款条件设定</cy-info-title>
      <el-form-item style="width: 100%">
        <cy-comm-table
          :columns="loanSettingColumns"
          :data="conditionSettingList"
          :count="0"
        />
      </el-form-item>
      <cy-info-title style="margin-bottom: 20px;">主合同信息</cy-info-title>
      <el-form-item label="合同份数" prop="contractNum">
        <el-input v-model="ruleForm.contractNum" :disabled="disabled" placeholder="请输入合同份数" clearable />
      </el-form-item>
      <el-form-item label="保理主合同特殊约定" prop="specialAgreement">
        <el-input v-model="ruleForm.specialAgreement" :disabled="disabled" placeholder="请输入保理主合同特殊约定" clearable />
      </el-form-item>
      <el-form-item label="保理信息表特殊约定" prop="factoringContractAgreement">
        <el-input v-model="ruleForm.factoringContractAgreement" :disabled="disabled" placeholder="请输入保理信息表特殊约定" clearable />
      </el-form-item>
      <el-form-item label="融资确认书特殊约定" prop="financingConfirmAgreement">
        <el-input v-model="ruleForm.financingConfirmAgreement" :disabled="disabled" placeholder="请输入融资确认书特殊约定" clearable />
      </el-form-item>
      <div style="width: 100%">
        <tripartite-agreement ref="tripartiteAgreement" :disabled="disabled" v-if="tripartiteData.reviewBasicContractList.length" :details-info="tripartiteData" type="contract"></tripartite-agreement>
      </div>
    </el-form>
    <contract-conclusion ref="contractConclusion" :disabled="disabled" :details-info="detailsInfo"></contract-conclusion>
  </div>
</template>

<script>
export default {
  components: {
    TripartiteAgreement: () => import('../limitExpenditure/components/TripartiteAgreement'),
    ContractConclusion: () => import('./ContractConclusion')
  },
  props: {
    disabled: {
      type: Boolean,
      default: false
    },
    detailsInfo: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      ruleForm: {
        principalCollectionMethod: '',
        interestCollectionMethod: '',
        managementFeeCollectionMethod: '',
        marginCollectionMethod: '',
        marginReturnMethod: '',
        marginReturnCondition: '',
        otherFeeCollectionMethod: '',
        contractNum: '',
        specialAgreement: '',
        factoringContractAgreement: '',
        financingConfirmAgreement: ''
      },
      rules: {
        principalCollectionMethod: [
          { required: true, message: '请输入本金支付方式', trigger: 'blur' }
        ],
        interestCollectionMethod: [
          { required: true, message: '请输入利息支付方式', trigger: 'blur' }
        ],
        managementFeeCollectionMethod: [
          { required: true, message: '请输入管理费支付方式', trigger: 'blur' }
        ],
        marginCollectionMethod: [
          { required: true, message: '请输入保证金支付方式', trigger: 'blur' }
        ],
        marginReturnMethod: [
          { required: true, message: '请输入保证金退还方式', trigger: 'blur' }
        ],
        marginReturnCondition: [
          { required: true, message: '请输入保证金退还条件', trigger: 'blur' }
        ],
        otherFeeCollectionMethod: [
          { required: true, message: '请输入其他费用支付方式', trigger: 'blur' }
        ],
        contractNum: [
          { required: true, message: '请输入合同份数', trigger: 'blur' }
        ]

      },
      loanConditionList: [],
      loanColumns: [
        {
          label: '序号',
          index: true
        },
        {
          label: '放款日期',
          prop: 'loanDate'
        },
        {
          label: '金额（CNY）',
          prop: 'amount'
        },
        {
          label: '额度支用审批-放款条件',
          prop: 'loanCondition'
        }
      ],
      conditionSettingList: [],
      tripartiteData: {}
    }
  },
  computed: {
    loanSettingColumns() {
      return [
        {
          label: '序号',
          index: true
        },
        {
          label: '放款条件',
          prop: 'loanCondition',
          render: (h, row, index) => {
            return <el-input v-model={row.loanCondition} disabled={row.fixedCondition || this.disabled} placeholder='请输入放款条件'></el-input>
          }
        },
        {
          label: '当前阶段放款条件',
          prop: 'checked',
          render: (h, row) => {
            return <el-checkbox v-model={row.checked} disabled={this.disabled}></el-checkbox>
          },
          width: 160
        },
        {
          label: '操作',
          show: !this.disabled,
          render: (h, row, index) => {
            const btnList = [
              {
                msg: '新增',
                category: 'add',
                number: 16
              },
              {
                msg: '删除',
                category: 'delete',
                number: 17
              }
            ]
            const options = btnList.map(item => {
              return (
                index >= item.number && <span class='table-icon-box' style='font-size: 12px;' onClick={() => { this.handlerOperate(item.category, index) }}>
                  { item.msg }
                </span>
              )
            })
            return <div>{ options }</div>
          },
          width: 130
        }
      ]
    }
  },
  watch: {  
    detailsInfo: {
      handler(newV) {
        if (newV === undefined) return
        const { contractFinancingInfo, contractMasterContract, loanConditionList, conditionSettingList, contractBasicContractList } = JSON.parse(JSON.stringify(newV))
        this.loanConditionList = loanConditionList
        this.conditionSettingList = conditionSettingList
        this.ruleForm = {
          ...contractMasterContract,
          ...contractFinancingInfo
        }
        this.tripartiteData = {
          ...newV,
          reviewBasicContractList: contractBasicContractList && contractBasicContractList.map(item => {
            // item.contractContentList = item.contractChangeContentList
            return item
          })
        }
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    handlerOperate(type, index) {
      if (type === 'add') {
        this.conditionSettingList.push({
          fixedCondition: false,
          loanCondition: '',
          checked: true,
        })
      } else if (type === 'delete') {
        this.conditionSettingList.splice(index, 1)
      }
    },
    async getParameter(type) {
      const { contractNum, specialAgreement, factoringContractAgreement, financingConfirmAgreement
      } = this.ruleForm
      const contractFinancingInfo = {
        ...this.ruleForm
      }
      delete contractFinancingInfo.contractNum
      delete contractFinancingInfo.specialAgreement
      delete contractFinancingInfo.factoringContractAgreement
      delete contractFinancingInfo.financingConfirmAgreement
      const contractMasterContract = {
        contractNum, specialAgreement, factoringContractAgreement, financingConfirmAgreement
      }
      var contractBasicContractList
      if(this.tripartiteData.reviewBasicContractList.length) {
        contractBasicContractList = this.$refs.tripartiteAgreement.tableData
      }else {
        contractBasicContractList = []
      }
     
      const contractConclusion = await this.$refs.contractConclusion.getParams(type)
      const params = {
        contractFinancingInfo,
        contractMasterContract,
        contractBasicContractList,
        conditionSettingList: this.conditionSettingList.filter(item => item.checked === true),
        ...contractConclusion
      }
      return params
    },
    getParams(type) {
      return new Promise((resolve, reject) => {
        if (type === 'temp') {
          resolve(this.getParameter(type))
          return
        }
        this.$refs.ruleForm.validate(async(valid) => {
          if (valid) {
            for (let i = 0; i < this.conditionSettingList.length; i++) {
              const { loanCondition } = this.conditionSettingList[i]
              if (!loanCondition) {
                this.$message.warning('请填写放款条件')
                return
              }
            }

            resolve(this.getParameter(type))
          } else {
            return false
          }
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.contract-preparation-content {

}
</style>
