<template>
  <!-- 设置资金来源 -->
  <div>
    <dialog-edit width="50%" :visible.sync="dialogVisible" :form="newForm" :formRules="formRules" :autoSave="autoSave" :editModel="editModel" :api="api"
      :appendToBody="appendToBody" :title="$t('selfPayLoan.setTitle')"
      @onSaved="handleSubmit">
      <div class="fundsProvidePop" style="width: 70%;margin: 0 auto;max-width: 400px;">
        <dym-form :formValue.sync="newForm" :componentList="componentList" @selectChanged="selectChanged"></dym-form>
      </div>
    </dialog-edit>
  </div>
</template>

<script>
import BaseEdit from '@/pages/baseEditPage'
import * as format from '@/filters/index.js'
import SelectFundsProvide from '@/components/element/assetpkgmgr/SelectFundsProvide'
import {
  DialogEdit,
  amountInput,
  dymForm
} from 'newepoch-components'
import selfPayLoan from '@/api/assetpkgmgr/selfPayLoanApi.js'
export default {
  extends: new BaseEdit(),
  name: 'fundsProvidePop',
  components: {
    DialogEdit,
    dymForm
  },
  props: {
    autoSave: {
      type: [Boolean],
      default: false
    },
    currentRow: {
      type: [Object],
      default () {
        return null
      }
    },
    tagId: {
      type: [String],
      required: true,
      default () {
        return ''
      }
    }
  },
  data () {
    // 校验放款金额
    let checkLoanAmount = (rule, value, callback) => {
      let num = parseFloat(value)
      let restLimit = this.newForm.approvalLimit
      if (!num) {
        return callback(new Error(this.$t('selfPayLoan.amountPrompt')))
      }
      if (num > restLimit) {
        callback(new Error(this.$t('selfPayLoan.amountPromptTwo')))
      } else {
        callback()
      }
    }
    return {
      newForm: {},
      appendToBody: true,
      // 设置资金来源表单验证
      formRules: {
        fundsProvideCode: [{
          required: true,
          message: this.$t('selfPayLoan.fundsProvideInputPrompt'),
          trigger: 'blur'
        }
        ],
        loanAmount: [{
          validator: checkLoanAmount,
          required: true,
          trigger: 'blur'
        }]
      },
      componentList: [
        {
        // 资金来源
          label: this.$i18n.messages[this.$i18n.locale].selfPayLoan.ownerName,
          disabled: false,
          value: 'fundsProvideCode',
          prop: 'fundsProvideCode',
          // placeholder: this.$i18n.messages[this.$i18n.locale].common.pleaseInput,
          labelWidth: '110px',
          cols: [24, 24, 24],
          clearable: true,
          tagId: this.tagId,
          componentName: SelectFundsProvide
        },
        {
        // 可用额度（元）
          label: this.$i18n.messages[this.$i18n.locale].selfPayLoan.restLimit,
          disabled: true,
          value: 'approvalLimit',
          prop: 'approvalLimit',
          placeholder: this.$i18n.messages[this.$i18n.locale].common.pleaseInput,
          labelWidth: '110px',
          cols: [24, 24, 24],
          clearable: true,
          componentName: 'el-input',
          format: (row) => {
            return format.thousandFilter(row.restLimit)
          }
        },
        {
        // 放款金额（元）
          label: this.$i18n.messages[this.$i18n.locale].selfPayLoan.loanAmount,
          disabled: false,
          value: 'loanAmount',
          prop: 'loanAmount',
          placeholder: this.$i18n.messages[this.$i18n.locale].common.pleaseInput,
          labelWidth: '110px',
          cols: [24, 24, 24],
          clearable: true,
          componentName: amountInput
        }
      ],
      currentFundsProvideCode: ''
    }
  },
  computed: {
    api () {
      return selfPayLoan.selfPayLoan
    }
  },
  methods: {
    // 选中资金来源
    selectChanged (a, b, c) {
      if (a.fundsProvideInfo) {
        this.newForm.fundsProvideName = a.fundsProvideInfo.bridcrossinsName
        this.newForm.fundsProvideCode = a.fundsProvideInfo.keyId
        this.newForm.approvalLimit = a.fundsProvideInfo.approvalLimit || 0
      }
    },
    // 提交表单
    handleSubmit (e) {
      // console.log(this.newForm)
      this.dialogVisible = false
      this.$emit('onSaved', this.newForm, this.currentFundsProvideCode)
    }
  },
  mounted () {
    let $this = this
    $this.$nextTick(() => {
      let row = $this.UtilJs.cloneDeep(this.currentRow)
      $this.componentList[0].tagId = $this.tagId
      $this.newForm = $this.editModel === 'E' ? row : {}
      $this.currentFundsProvideCode = $this.editModel === 'E' ? row.fundsProvideCode : ''
    })
  }
  // watch: {
  //   visible (val) {
  //     if (!val) {
  //       console.log(45)
  //       let $this = this
  //       let row = $this.UtilJs.cloneDeep(this.currentRow)
  //       $this.componentList[0].tagId = $this.tagId
  //       $this.newForm = $this.editModel === 'E' ? row : {}
  //       $this.currentFundsProvideCode = $this.editModel === 'E' ? row.fundsProvideCode : ''
  //     }
  //   }
  // }
}
</script>
