<template>
  <el-dialog
      :append-to-body="true"
      class="client-data-dialog"
      title="创建线下提前结清"
      width="40%"
      :visible.sync="visible"
      :before-close="handleClose">
    <div>
      <div style="margin-left:50px">
        <el-row :gutter="20">
          <el-col :span="8">
            <div class="grid-content bg-purple">本金：{{ this.ruleForm.raiseAmt }}</div>
          </el-col>
          <el-col :span="8">
            <div class="grid-content bg-purple">起息日：{{ this.ruleForm.startDate  | dateFilter }}</div>
          </el-col>
          <!-- <el-col :span="6">
              <div class="grid-content bg-purple">还款日：{{ this.ruleForm.planAmt }}</div>
          </el-col> -->
        </el-row>
        <br/>
        <el-row :gutter="20" :center="true">
          <el-col :span="8">
            <div class="grid-content bg-purple">占用天数：{{ this.ruleForm.userDay }}</div>
          </el-col>
          <el-col :span="8">
            <div class="grid-content bg-purple">占用期数：{{ this.ruleForm.userMonth }}</div>
          </el-col>

        </el-row>
        <br/>

        <el-row :gutter="20">
          <el-col :span="8">
            <div class="grid-content bg-purple">还款本金：{{ this.ruleForm.principleAmt }}</div>
          </el-col>
          <el-col :span="8">
            <div class="grid-content bg-purple">利息：{{ this.ruleForm.interestAmt }}</div>
          </el-col>
          <el-col :span="8">
            <div class="grid-content bg-purple">服务费：{{ this.ruleForm.serviceAmt }}</div>
          </el-col>

          <el-col :span="8">
            <div class="grid-content bg-purple">违约金：{{ this.ruleForm.breakAmt }}</div>
          </el-col>
          <el-col :span="8">
            <div class="grid-content bg-purple">退款金额：{{ this.ruleForm.refundAmt }}</div>
          </el-col>
          <el-col :span="8">
            <div class="grid-content bg-purple">罚息：{{ this.ruleForm.overdueAmt }}</div>
          </el-col>

               <el-col :span="8">
            <div class="grid-content bg-purple">融担金额：{{ this.ruleForm.burdenAmt }}</div>
          </el-col>
        </el-row>
        <br/>
        <el-row :gutter="20">
          <el-col :span="16">
            <div class="grid-content bg-purple">总应还金额：{{ this.ruleForm.settleAmt }}</div>
          </el-col>
        </el-row>
      </div>
      <el-form :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="settleAmt">
          <el-col :span="20">
            <el-input v-model="ruleForm.settleAmt" placeholder="请输入转账金额" disabled></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="减免金额" prop="derateAmt">
          <el-col :span="20">
            <el-input v-model="ruleForm.derateAmt" placeholder="请输入减免金额" disabled></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="还款凭证" prop="attach">
          <el-upload
              list-type="picture-card"
              :action="oss.action"
              :data="oss.data"
               :limit="3" 
               :multiple="true"
              accept=".jpeg,.jpg,.png"
              :on-exceed="masterFileMax"
              :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" type="textarea"  :rows="2" placeholder="请输入还款备注"></el-input>
          </el-col>
        </el-form-item>
      </el-form>
    </div>
    <div slot="footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="backedTransfer('ruleForm')">确 定</el-button>
    </div>

  </el-dialog>
</template>

<script>
import * as moment from "moment";
export default {
  name: "advanceLoanAmt",
  props: {
    dialogVisible: {
      type: Boolean,
      required: true
    },
    loanNo: {
      type: String
    },
    orderNo: {
      type: String
    },
  },

  data() {
    return {
      ui: {
        submitLoading: false
      },
      visible: this.$props.dialogVisible,
      ruleForm: {
        allAmt: '',
        backedAmt: '',
        loanNo: '',
        breakAmt: '',
        orderNO: '',
        clientNo: '',
        derateAmt: '',
        interestAmt: '',
        loanAmt: '',
        overdueAmt: '',
        principleAmt: '',
        serviceAmt: '',
        settleAmt: '',
        startDate: '',
        userDay: '',
        userMonth: '',
        memo: '',
        attach: [],
        bankAccount: '',
        bankOwner: '',
        raiseAmt:''
      },
      rules: {
        bankAccount: [{required: true, message: '请输入还款银行账号', trigger: 'blur'}],
        bankOwner: [{required: true, message: '请输入还款银行账户名称', trigger: 'blur'}],
        attach: [{required: true, message: '请添加还款凭证', trigger: 'blur'}],
      },
      loginName: '',
      oss: {
        action: '',
        data: {},
        multiple: false,
      },
    }
  },

  filters: {
    dateFilter: function (row) {
      const date = row;
      if (typeof (date) === undefined || typeof (date) == null) return ''
      return moment(date).format("YYYY-MM-DD")
    },
  },

  created() {
    // 查询当前的基础数据
    this.$$get('/back/countSettle?loanNo=' + this.loanNo).then(res => {
      if (res.data.code != 200) {
        this.$message.error(res.data.message);
        this.handleClose();
      } else {
        this.ruleForm = res.data.result;
        this.ruleForm.attach = [];
      }

    }).catch(error => {
      this.$message.error(error || '网络异常，请稍后。。。');
    });
  },

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

  methods: {
    masterFileMax(files,fileList){
      console.log(files, fileList);
      this.$message.warning(`最多上传3个文件。`);
    },
    /** 提交点击 */
    backedTransfer() {

      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;
        const cacheImg = this.ruleForm.attach;
        this.ruleForm.attach = cacheImg.concat(result.dir)
      });
    },

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

    handleLoanApplyRemove(res, file, fileList) {
      this.ruleForm.attach = fileList
    },
    //参数
    buildParam() {
      return {
        rePayTypeEnum: 'BYALL',
        orderNo: this.orderNo,
        loanNo: this.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.settleAmt,
        burdenAmt: this.ruleForm.burdenAmt,
      };
    },

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

<style scoped>

</style>