<template>
	<div class="eibs-tab">
		<c-col :span="24">
			<c-col :span="12" style="padding-right: 20px">
        <c-col :span="24">
          <c-col :span="8">
            <el-form-item :label="$t('financing.融资金额')" prop="bpdgrp.cbs.max.cur">
              <c-select dbCode="curtxt" v-model="model.bpdgrp.cbs.max.cur" style="width:100%" placeholder="请选择融资金额" :disabled="this.model.bpdgrp.cbs.max.cur!=''"
                @change="getRecNam()">
              </c-select>
            </el-form-item>
          </c-col>
          <c-col :span="16">
            <el-form-item label-width="5px" prop="bpdgrp.cbs.max.amt">
              <c-input-currency :currency="model.bpdgrp.cbs.max.cur" v-model="model.bpdgrp.cbs.max.amt" 
                @change="getRecNam()"></c-input-currency>
            </el-form-item>
          </c-col>
        </c-col>

        <c-col :span="24">
          <el-form-item :label="$t('financing.计息周期')" prop="finmod.intprd">
            <c-select dbCode="intprd" v-model="model.finmod.intprd" style="width:100%" placeholder="Please input计息周期" @change="changeIntprd"
              :filterKey="['1', '2', '3', '4', '6', '7']">
            </c-select>
          </el-form-item>
        </c-col>

        <c-col :span="24">
          <el-form-item :label="$t('financing.利率调整方式')" prop="finmod.ratchgtyp">
            <c-select dbCode="RATCHG" v-model="model.finmod.ratchgtyp" style="width:100%" placeholder="请选择利率调整方式">
            </c-select>
          </el-form-item>
        </c-col>

        <c-col :span="24">
          <el-form-item :label="$t('financing.创建日期')" prop="bpdgrp.rec.opndat">
            <c-date-picker type="date" v-model="model.bpdgrp.rec.opndat" style="width:100%"
              placeholder="请选择创建日期"></c-date-picker>
          </el-form-item>
        </c-col>

        <c-col :span="24">
          <el-form-item :label="$t('financing.到期日')" prop="bpdgrp.rec.matdat">
            <c-date-picker type="date" v-model="model.bpdgrp.rec.matdat" style="width:100%"
              placeholder="请选择到期日"></c-date-picker>
          </el-form-item>
        </c-col>
        <c-col :span="24">
          <el-form-item :label="$t('financing.基准利率')" prop="bpdgrp.rec.intrat">
						<c-fullbox>
							<c-input-currency :disabled="true" :precision="6" v-model="model.bpdgrp.rec.intrat"></c-input-currency>
							<template slot="footer">
								<el-button size="small" type="primary" @click="getIntrat">
                  Get
                </el-button>
							</template>
						</c-fullbox>
					</el-form-item>
        </c-col>
        <c-col :span="24">
          <el-form-item :label="$t('financing.基准利率规则')" prop="finmod.dinmod.jzllgz">
            <c-select dbCode="jzllgz" v-model="model.finmod.dinmod.jzllgz" style="width:100%" placeholder="请选择基准利率规则">
            </c-select>
          </el-form-item>
        </c-col>
        <c-col :span="24">
          <el-form-item :label="$t('financing.执行利率')" prop="bpdgrp.rec.tolrat">
            <c-input-currency :precision="6" v-model="model.bpdgrp.rec.tolrat" placeholder="Please input执行利率"></c-input-currency>
          </el-form-item>
        </c-col>
        <c-col :span="24">
          <el-form-item :label="$t('financing.第一还款账号')" prop="finmod.act1">
            <c-select v-model="model.finmod.act1" style="width:100%" placeholder="请选择第一还款账号">
              <el-option v-for="item in codes.act1List" :key="item" :value="item" :label="item">
              </el-option>
            </c-select>
          </el-form-item>
        </c-col>
        <c-col :span="24">
          <c-col :span="8">
            <el-form-item :label="$t('financing.预收息金额')" prop="bpdgrp.cbs.max.cur">
              <c-select dbCode="curtxt" v-model="model.bpdgrp.cbs.max.cur" :disabled="this.model.finmod.intprd != '7'"  style="width:100%" placeholder="请选择融资金额">
              </c-select>
            </el-form-item>
          </c-col>
          <c-col :span="16">
            <el-form-item label-width="5px" prop="finmod.intamt">
              <c-fullbox>
                <c-input-currency :currency="model.bpdgrp.cbs.max.cur"  v-model="model.finmod.intamt" :disabled="this.model.finmod.intprd != '7'" ></c-input-currency>
                <template slot="footer">
                  <el-button size="small" type="primary" @click="cal">{{ $t('components.计算') }}</el-button>
                </template>
              </c-fullbox>
            </el-form-item>
          </c-col>
        </c-col>
        <c-col :span="24">
          <el-form-item :label="$t('financing.预扣息方式')" prop="finmod.inttyp">
            <c-select dbCode="INTTYP" v-model="model.finmod.inttyp" :disabled="this.model.finmod.intprd != '7'" style="width:100%" placeholder="请选择预扣息方式">
            </c-select>
          </el-form-item>
        </c-col>
        <c-col :span="24">
          <el-form-item :label="$t('financing.税率')" prop="finmod.shuilv">
            <c-input-currency :disabled="true" :precision="4" v-model="model.finmod.shuilv"
              placeholder="Please input税率"></c-input-currency>
          </el-form-item>
        </c-col>
<!--        <c-col :span="24">
          <el-form-item :label="$t('financing.定价审批代码')" prop="finmod.dinjdm">
            <c-fullbox>
              <c-input v-model="model.finmod.dinjdm" maxlength="20"></c-input>
              <template slot="footer">
                <el-button size="small" type="primary">
                  Get
                </el-button>
              </template>
            </c-fullbox>
					</el-form-item>
        </c-col>
        <c-col :span="24">
          <el-form-item :label="$t('financing.市场LPR期限品种')" prop="bpdgrp.rec.lprtyp"
            :rules="[{ required: isRequiredLprtyp, validator: validatorBpdgrpRecLprtyp, trigger: ['blur', 'change'] }]">
            <c-select dbCode="lprtyp" v-model="model.bpdgrp.rec.lprtyp" style="width:100%" placeholder="请选择市场LPR期限品种">
            </c-select>
          </el-form-item>
        </c-col>
        <c-col :span="24">
          <el-form-item :label="$t('financing.审批流程发起标识')" prop="finmod.dinmod.rmbsbs">
            <c-select dbCode="rmbsbs" v-model="model.finmod.dinmod.rmbsbs" style="width:100%" placeholder="Please input审批流程发起标识">
            </c-select>
          </el-form-item>
        </c-col>-->
        <c-col :span="24">
          <el-form-item :label="$t('financing.发票类型')" prop="bpdgrp.rec.invtyp">
            <c-select dbCode="invtyp" v-model="model.bpdgrp.rec.invtyp" style="width:100%" placeholder="请选择发票类型">
            </c-select>
          </el-form-item>
        </c-col>
			</c-col>

			<c-col :span="12" style="padding-left: 20px">
        <c-col :span="24">
          <el-form-item :label="$t('financing.借据号')" prop="bpdgrp.rec.fincod">
            <c-input v-model="model.bpdgrp.rec.fincod" maxlength="17" placeholder="Please input借据号"></c-input>
          </el-form-item>
        </c-col>
        <c-col :span="24">
          <el-form-item :label="$t('financing.计息日期')" prop="finmod.intdat">
            <c-date-picker type="date" v-model="model.finmod.intdat" style="width:100%"></c-date-picker>
          </el-form-item>
        </c-col>
        <c-col :span="24">
          <el-form-item style="float: left;">
            <c-checkbox v-model="model.finmod.wjdkfl">{{ $t('financing.到期主动扣收贷款本息') }}</c-checkbox>
          </el-form-item>
        </c-col>
        <c-col :span="24">
          <el-form-item :label="$t('financing.利率调整周期')" prop="finmod.ratchgprd">
            <c-select dbCode="INTPRD" v-model="model.finmod.ratchgprd" style="width:100%" placeholder="请选择利率调整周期">
            </c-select>
          </el-form-item>
        </c-col>
        <c-col :span="24">
          <el-form-item :label="$t('financing.月日数')" prop="finmod.ratchgdat">
            <c-input v-model="model.finmod.ratchgdat" maxlength="4" placeholder="Please input月日数"></c-input>
          </el-form-item>
        </c-col>
        <c-col :span="24">
          <el-form-item :label="$t('financing.融资天数')" prop="bpdgrp.rec.intday">
            <c-input disabled v-model.number="defaultIntday" maxlength="10" style="width: 100%"
              placeholder="Please input融资天数"></c-input>
          </el-form-item>
        </c-col>
        <c-col :span="24">
          <el-form-item :label="$t('financing.宽限期')" prop="finmod.graday">
            <div style="width:100%;display:inline-block">
              <c-col :span="22">
                <c-input style="width: 100%" v-model="model.finmod.graday"></c-input>
              </c-col>
              <c-col :span="2" style="padding-left:5px" v-if="model.finmod.flttyp == '2'">
                <span>%</span>
              </c-col>
            </div>
          </el-form-item>
        </c-col>
        <c-col :span="24">
          <el-form-item :label="$t('financing.浮动方式')" prop="finmod.flttyp">
            <c-select dbCode="flttyp" v-model="model.finmod.flttyp" style="width:100%" @change="changeFlttyp"
              placeholder="请选择浮动方式">
            </c-select>
          </el-form-item>
        </c-col>
        <c-col :span="24">
          <el-form-item :label="$t('financing.浮动值')" prop="finmod.fltval">
            <div style="width:100%;display:inline-block">
              <c-col :span="22">
                <c-input-currency :disabled="fltvalDis" :precision="7" v-model="model.finmod.fltval"
                  placeholder="Please input浮动值"></c-input-currency>
              </c-col>
              <c-col :span="2" style="padding-left:5px">
                <span>%</span>
              </c-col>
            </div>
          </el-form-item>
        </c-col>
        <c-col :span="24">
          <el-form-item :label="$t('financing.逾期计息方式')" prop="finmod.ovdinttyp">
            <c-select dbCode="OVDINT" v-model="model.finmod.ovdinttyp" style="width:100%" placeholder="请选择逾期计息方式">
            </c-select>
          </el-form-item>
        </c-col>
        <c-col :span="24">
          <el-form-item :label="$t('financing.罚息比率')" prop="finmod.ovdintrat">
            <c-input-currency :precision="5" v-model="model.finmod.ovdintrat" placeholder="罚息比率"></c-input-currency>
          </el-form-item>
        </c-col>

        <c-col :span="24">
          <el-form-item :label="$t('financing.第三方还款方式')" prop="finmod.acttyp">
            <c-select dbCode="TYPACT" v-model="model.finmod.acttyp" style="width:100%" placeholder="Please input第三方还款方式">
            </c-select>
          </el-form-item>
        </c-col>

        <c-col :span="24">
          <el-form-item :label="$t('financing.第三方还款账号')" prop="finmod.act3">
            <c-select dbCode="act3" v-model="model.finmod.act3" style="width:100%" placeholder="请选择第三方还款账号">
            </c-select>
          </el-form-item>
        </c-col>
        <c-col :span="24">
          <el-form-item :label="$t('financing.预扣息账号')" prop="finmod.intact">
            <c-select dbCode="intact" v-model="model.finmod.intact" :disabled="this.model.finmod.intprd != '7'" style="width:100%" placeholder="请选择预扣息账号">
            </c-select>
          </el-form-item>
        </c-col>
        <c-col :span="24">
          <el-form-item :label="$t('financing.贸易合同号')" prop="bpdgrp.rec.mycontno">
            <c-input v-model="model.bpdgrp.rec.mycontno" maxlength="35" placeholder="Please input贸易合同号"></c-input>
          </el-form-item>
        </c-col>
			</c-col>
		</c-col>
	</div>
</template>
<script>
import event from "../event";
import Default from "../model/default";
import commonFunctions from "~/mixin/commonFunctions.js";
import commonDepend from "~/mixin/commonDepend.js";
import moment from 'moment';
export default {
  inject: ["root"],
  props: ["model", "codes"],
  mixins: [event, Default, commonFunctions, commonDepend],
  data() {
    return {
      fltvalDis: true,
    };
  },
  methods: {
    validatorBpdgrpRecLprtyp(rule, value, callback) {
      let jzllgz = this.model.finmod.dinmod.jzllgz;
      let cur = this.model.bpdgrp.cbs.max.cur;
      if (jzllgz == '1' && cur == 'CNY') {
        if (value == '' || value == null) {
          return callback(new Error(this.$t('financing.必输项')));
        }
      }
      if (jzllgz !== '1' || cur !== 'CNY') {
        if (value !== '' && value !== null) {
          return callback(new Error(this.$t('financing.币种不是人民币或基准利率准则不是市场LPR基准时，该字段不能有值')));
        }
      }
      callback();
    }
  },
  mounted() {},
  computed: {
    isRequiredLprtyp() {
      let jzllgz = this.model.finmod.dinmod.jzllgz;
      let cur = this.model.bpdgrp.cbs.max.cur;
      return jzllgz == '1' && cur == 'CNY';
    },
    defaultIntday() {
      let opndat = this.model.bpdgrp.rec.opndat;
      let matdat = this.model.bpdgrp.rec.matdat;
      if (opndat == "" || opndat == null || matdat == "" || matdat == null) {
        this.model.bpdgrp.rec.intday = 0;
        return;
      }
      // 将字符串转换成 Moment.js 对象
      const start = moment(opndat);
      const end = moment(matdat);

      // 计算天数差并输出结果
      let diffInDays = end.diff(start, 'days');
      this.model.bpdgrp.rec.intday = diffInDays
      return diffInDays;
    }
  },
  watch: {
    "model.bpdgrp.cbs.max.cur": {
      immediate: true,
      handler(val, oldval) {
        if (this.$store.state.Status.mode === "display") {
          return;
        }
        this.onAccounts();
      }
    },
    "model.finmod.intprd": {
      handler(val, oldval) {
        this.changeIntprd();
      }
    }
  },
  created: function() {}
};
</script>
<style lang="less" scoped>
.el-textarea .el-textarea__inner {
  height: 100px;
}

.page-wrap {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  padding: 2px;
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: column;
  border: 1px solid #707070;

  .form-content {
    width: 100%;
    flex: 1;
    position: relative;
    border: 1px solid #b1b1b1;
    overflow-y: auto;
    background-color: #fff;
    padding: 5px 0;
  }
}

.field {
  text-align: left;
  line-height: 32px;
  width: 40px;
}

.fieldName {
  /deep/ .el-form-item--small .el-form-item__label {
    width: 200px !important;
    justify-content: flex-start;
  }

  /deep/ .el-date-editor.el-input {
    width: 90%;
  }

  /deep/ .el-select {
    width: 90%;
  }
}

.over {
  /deep/ .el-form-item--small .el-form-item__label {
    text-align: left;
  }
}
</style>