<template>
  <el-dialog
      :append-to-body="true"
      class="client-data-dialog"
      title="创建转账还款单"
      width="60%"
      :visible.sync="visible"
      :before-close="handleClose">

    <div class="b-table">
      <table class="table">
        <tr>
          <td>还款计划：</td>
          <td>{{ ruleForm.planNo }}</td>
          <td>期数：</td>
          <td>{{ ruleForm.periodNo }}</td>
          <td>应还总金额：</td>
          <td>{{ ruleForm.planAmt }}</td>
        </tr>
        <tr>
          <td>本金：</td>
          <td>{{ ruleForm.planBen }}</td>
          <td>服务费：</td>
          <td>{{ ruleForm.planFu }}</td>
          <td>利息：</td>
          <td>{{ ruleForm.planXi }}</td>
        </tr>
        <tr>
          <td>手续费：</td>
          <td colspan="5">{{ ruleForm.accountAmt }}</td>
        </tr>
      </table>
    </div>

    <el-form
        size="small"
        label-suffix=":"
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="140px" class="demo-ruleForm">
      <el-form-item label="还款银行账号" prop="bankAccount">
        <el-col :span="20">
          <el-input v-model="ruleForm.bankAccount" placeholder="请输入还款银行账号"></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="还款银行账户名称" prop="bankOwner">
        <el-col :span="20">
          <el-input v-model="ruleForm.bankOwner" placeholder="请输入还款银行账户名称"></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="转账金额" prop="backedAmt">
        <el-col :span="20">
          <el-input v-model="ruleForm.remainAmt" placeholder="请输入转账金额"></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="还款凭证" prop="attach">
        <el-upload
            list-type="picture-card"
            :multiple="oss.multiple"
            :action="oss.action"
            :data="oss.data"
            accept=".jpeg,.jpg,.png"
            :before-upload="handleBeforeApplyUpload"
            :on-success="handleLoanApplySuccess"
            :on-remove="handleLoanApplyRemove">
          <i class="el-icon-plus"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="还款备注" prop="memo">
        <el-col :span="20">
          <el-input v-model="ruleForm.memo" placeholder="请输入还款备注"></el-input>
        </el-col>
      </el-form-item>
    </el-form>
    <div slot="footer">
      <el-button size="small" @click="handleClose">取 消</el-button>
      <el-button size="small" type="primary" @click="backedTransfer('ruleForm')">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: "offineTransfer",
  props: {
    dialogVisible: {
      type: Boolean,
      required: true
    },
    orderNo: {
      type: String
    },
    loanNo: {
      type: String
    },
    periodNo: {
      type: Number
    },
    planFu: {
      type: Number
    },
    planAmt: {
      type: Number
    },
    planBen: {
      type: Number
    },
    planXi: {
      type: Number
    },
    planNo: {
      type: String
    },
    remainAmt: {
      type: Number
    },
    accountAmt: {
      type: Number
    },
  },

  data() {
    return {
      ui: {
        submitLoading: false
      },
      visible: this.$props.dialogVisible,

      ruleForm: {
        periodNo: '',
        orderNo: '',
        loanNo: '',
        creator: '',
        planFu: '',
        planAmt: '',
        planBen: '',
        planXi: '',
        attach: '',
        planNo: '',
        bankAccount: '',
        bankOwner: '',
        backedAmt: '',
        memo: '',
      },
      rules: {
        bankAccount: [{required: true, message: '请输入还款银行账号', trigger: 'blur'}],
        bankOwner: [{required: true, message: '请输入还款银行账户名称', trigger: 'blur'}],
        planAmt: [{required: true, message: '请输入还款金额', trigger: 'blur'}],
        attach: [{required: true, message: '请添加还款凭证', trigger: 'blur'}],
      },
      loginName: '',
      oss: {
        action: '',
        data: {},
        multiple: false,
      },
    }
  },

  created() {
    this.ruleForm = {
      orderNo: this.orderNo,
      loanNo: this.loanNo,
      periodNo: this.periodNo,
      planFu: this.planFu,
      planNo: this.planNo,
      remainAmt: this.remainAmt,
      planAmt: this.planAmt,
      planBen: this.planBen,
      planXi: this.planXi,
      accountAmt: this.accountAmt,
    }
  },

  mounted() {
    this.loginName = localStorage.getItem("userName");
  },

  methods: {
    /** 提交点击 */
    backedTransfer() {
      this.$refs['ruleForm'].validate((valid) => {
        if (!valid) {
          return false
        }
        this.$$post(`/back/addTransfer`, this.buildParam()).then(res => {
          if (res.data.code != 200) {
            this.$message.error(res.data.message);
            return
          }
          this.$message({message: '操作成功', type: 'success'});
          this.handleClose();
          this.$emit('callback')
        })
            .catch(err => {
              alert("error!")
            })
      })
    },

    handleBeforeApplyUpload(file) {
      var attachType = 'LOESS_TRANSFER_APPLY'
      return this.$$get(`/oss/signature/?fileType=` + attachType + "&fileName=" + file.name).then(res => {
        if (res.data.code != 200) {
          this.$message.error(res.data.message);
          return
        }
        const result = res.data.result.result;
        const data = {};
        const tempOss = {};
        data.OSSAccessKeyId = result.accessId;
        data.policy = result.policy;
        data.Signature = result.signature;
        data.key = result.dir;
        tempOss.action = result.host;
        tempOss.data = data;
        this.oss = tempOss;
        this.ruleForm.attach = result.dir
      });
    },

    handleLoanApplySuccess(res, file, fileList) {
      this.$notify({title: '成功', message: file.name + ",上传成功", type: 'success'});
    },

    handleLoanApplyRemove(res, file, fileList) {

    },

    //参数
    buildParam() {
      return {
        rePayTypeEnum: 'BYONE',
        periodNo: this.periodNo,
        orderNo: this.ruleForm.orderNo,
        loanNo: this.ruleForm.loanNo,
        memo: this.ruleForm.memo,
        creator: this.loginName,
        planNo: this.planNo,
        attach: this.ruleForm.attach,
        bankAccount: this.ruleForm.bankAccount,
        bankOwner: this.ruleForm.bankOwner,
        backedAmt: this.ruleForm.remainAmt,
      };
    },

    /** 关闭处理 */
    handleClose() {
      this.visible = false;
      setTimeout(() => {
        this.$emit('update:dialogVisible', false)
      }, 300);
    },
  }
}
</script>

<style scoped>

</style>
