<template>
  <el-dialog
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      title="生成协议链接"
      center
      width="50%"
      :visible.sync="DialogVisible"
      :before-close="handleCancel"
  >
    <div class="box-agreement">
      <el-form label-suffix=":" :rules="rules" label-width="200px" :model="form" ref="form">
        <el-row>
          <el-col :span="16">


            <template v-if="EnumList && EnumList.length">
              <el-form-item prop="protocolType" label="协议类型">
                <el-select style="width: 100%" @change="handleChangeProtocolType" clearable v-model="form.protocolType"
                           clearable
                           placeholder="请选择产品">
                  <el-option
                      v-for="item in EnumList"
                      :key="item.protocolType"
                      :label="item.protocolTypeName"
                      :value="item.protocolType"></el-option>
                </el-select>
              </el-form-item>
            </template>
            <template v-if="form.protocolType && form.protocolType!=='ZDBG_SILENT_SIGNED'">
              <el-form-item prop="templateCode" label="模板名称">
                <el-select style="width: 100%" clearable v-model="form.templateCode" clearable
                           placeholder="请选择协议模板">
                  <el-option
                      v-for="item in TemplateList"
                      :key="item.templateCode"
                      :label="item.templateName"
                      :value="item.templateCode"></el-option>
                </el-select>
              </el-form-item>
            </template>

            <el-form-item prop="isUploadProve" label="上传证明">
              <el-radio-group v-model="form.isUploadProve">
                <el-radio :label="true">是</el-radio>
                <el-radio :label="false">否</el-radio>
              </el-radio-group>
            </el-form-item>

            <!--账单变更-静默签-->
            <template v-if="form.protocolType==='ZDBG_SILENT_SIGNED'">
              <el-form-item prop="loanNo" label="借款编号">
                <el-row>
                  <el-col :span="16">
                    <el-input placeholder="请输入借款编号" v-model="form.loanNo"></el-input>
                  </el-col>
                  <el-col :offset="2" v-if="form.protocolType && form.protocolType==='ZDBG_SILENT_SIGNED'" :span="6">
                    <div style="display: flex; justify-content: flex-end">
                      <el-button type="primary" @click="handleQueryLoan">查询</el-button>
                    </div>
                  </el-col>
                </el-row>
              </el-form-item>

              <template v-if="LoanInfo">
                <el-form-item style="margin-bottom: 0" label="剩余可平摊服务费金额">
                  <div>{{ LoanInfo.splitServiceAmt }}元</div>
                </el-form-item>
                <el-form-item style="margin-bottom: 0" label="服务费期数">
                  <div>{{ LoanInfo.splitPlanIndex }}期</div>
                </el-form-item>
                <el-form-item style="margin-bottom: 0" label="剩余可平摊融单费金额">
                  <div>{{ LoanInfo.splitBurdenAmt }}元</div>
                </el-form-item>
                <el-form-item style="margin-bottom: 0" label="融单费期数">
                  <div>{{ LoanInfo.splitPlanIndex }}期</div>
                </el-form-item>
              </template>
            </template>
            <!--金钱手签-->
            <template v-else>

              <!--借款编号-->
              <el-form-item prop="loanNo" label="借款编号">
                <el-input placeholder="请输入借款编号" v-model="form.loanNo"></el-input>
              </el-form-item>

              <!--减免协议-->
              <template v-if="form.templateCode.indexOf('reduction')!==-1">
                <el-form-item prop="reductionAmount" label="减免金额">
                  <el-input placeholder="请输入金额" v-model="form.reductionAmount"></el-input>
                </el-form-item>
              </template>

              <!--退费申请-->
              <template v-if="form.templateCode.indexOf('refund')!==-1">
                <el-form-item prop="refundAmount" label="退费金额">
                  <el-input placeholder="请输入金额" v-model="form.refundAmount"></el-input>
                </el-form-item>

                <div v-if="form.templateCode==='dr-refund'">
                  <el-form-item prop="clientName" label="账户名称">
                    <el-input placeholder="请输入" v-model="form.clientName"></el-input>
                  </el-form-item>
                  <el-form-item prop="bankName" label="开户银行">
                    <el-input placeholder="请输入" v-model="form.bankName"></el-input>
                  </el-form-item>
                  <el-form-item prop="bankAccount" label="银行账号">
                    <el-input placeholder="请输入" v-model="form.bankAccount"></el-input>
                  </el-form-item>
                </div>
              </template>
              <!--延期还款申请书-->
              <template v-if="form.templateCode.indexOf('repayment')!==-1">
                <el-form-item prop="extensionPlan" label="延期方案">

                  <el-input type="textarea" maxlength="300"
                            show-word-limit placeholder="请输入" v-model="form.extensionPlan"></el-input>
                </el-form-item>
              </template>
            </template>

          </el-col>
        </el-row>
      </el-form>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleCancel">取 消</el-button>
      <el-button type="primary" @click="onSubmit">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: "CreateAgreement",
  props: {
    DialogVisible: {
      type: Boolean,
      required: true,
    },
    EnumList: {
      type: Array,
      required: true,
    }
  },
  data() {
    return {
      TemplateList: [],
      LoanInfo: null,
      rules: {
        protocolType: [
          {required: true, message: "请选择协议类型", trigger: 'change'}
        ],
        loanNo: [
          {required: true, message: "请输入借款编号", trigger: 'blur'}
        ],
        templateCode: [
          {required: true, message: "请选择模板", trigger: 'change'}
        ],
        isUploadProve: [
          {required: true, message: "请选择是否需要证明", trigger: 'change'}
        ],
        refundAmount: [
          {required: true, message: "请输入退费金额", trigger: 'blur'}
        ],
        extensionPlan: [
          {required: true, message: "请输入延期方案", trigger: 'blur'}
        ],
        reductionAmount: [
          {required: true, message: "请输入减免金额", trigger: 'blur'}
        ],
        clientName: [
          {required: true, message: "请输入账户名称", trigger: 'blur'}
        ],
        bankName: [
          {required: true, message: "请输入开户银行", trigger: 'blur'}
        ],
        bankAccount: [
          {required: true, message: "请输入银行账户", trigger: 'blur'}
        ],

      },
      form: {

        bankAccount: "", // 银行卡号
        bankName: "", // 银行
        clientName: "", // 客户名称
        extensionPlan: "",
        isUploadProve: "",
        loanNo: "",
        protocolType: "",
        reductionAmount: "",
        refundAmount: "",
        splitBurdenAmt: "",
        splitServiceAmt: "",
        splitSumIndex: '',
        templateCode: ""

      }
    };
  },
  async created() {

  },
  methods: {
    /** 取消 && 关闭弹框 */
    handleCancel() {
      this.$emit('handleClose')
    },
    /** 根据借款编号查询信息 */
    async handleQueryLoan() {
      if (!this.form.loanNo) {
        this.$message.error('请输入借款编号');
        return
      }

      try {
        const loanNo = this.form.loanNo
        const res = await this.$$get('/protocol/getCanChangePlan', {loanNo})
        if (res.status === 200 && res.data.success) {
          const result = res.data.result;
          this.form.splitBurdenAmt = result.splitBurdenAmt + ''
          this.form.splitSumIndex = result.splitSumIndex
          this.form.splitServiceAmt = result.splitServiceAmt + ''


          this.LoanInfo = res.data.result;
        } else {
          this.$message.error(res.data.message);
        }
      } catch (err) {
        this.$message.error(res || '初始化协议枚举列表报错');
      }
    },

    /** 协议类型下拉回调*/
    handleChangeProtocolType(val) {
      console.log(val)
      this.form.templateCode = ''
      this.EnumList.forEach(item => {
        if (item.protocolType === val) {
          this.TemplateList = item.responseList
        }
      })
    },
    /** 提交数据 */
    onSubmit() {
      this.$refs['form'].validate(async (valid) => {
        if (!valid) {
          return false
        }
        try {
          const params = this.form
          const res = await this.$$post('/protocol/createProtocol', {...params})
          if (res.status === 200 && res.data.success) {
            this.$message.success('操作成功！');
            this.$emit('handleCallback')
            setTimeout(() => {
              this.handleCancel()
            }, 1500)
          } else {
            this.$message.error(res.data.message);
          }
        } catch (err) {
          this.$message.error(res || '初始化协议枚举列表报错');
        }
      })


    }
  },
};
</script>

<style lang="less" scoped>
.el-dialog__title {
  font-size: 30px;
  font-weight: 700;
}

.box-agreement {
  height: 375px;
  overflow: auto;
  box-sizing: border-box;
  padding: 0 50px;
}


</style>
