<template>
  <el-dialog
      width="70%"
      class="client-data-dialog"
      :title="title"
      :visible.sync="dialogVisible"
      :before-close="handleClose">

    <div class="page-dialog">
      <block-header title="账单详情"/>
      <div class="block-box">
        <table class="table">
          <tr>
            <td>借款编号:</td>
            <td>{{ advanceLoanAmt.loanNo }}</td>
            <td>账单剩余应还:</td>
            <td>{{ loanVo.surAmt }}</td>
          </tr>
          <tr>
            <td>退款金额:</td>
            <td>
              <span v-if="loanVo.refundAmt !== null ">{{ loanVo.refundAmt }} ({{ loanVo.refundStatusDesc }})</span>
              <span v-else>0</span>
            </td>
            <td>账单已还款:</td>
            <td>{{ loanVo.alrAmt }}</td>
          </tr>
          <tr>
            <td>操作:</td>
            <td colspan="3">
              <el-button type="primary" size="mini" @click="advanceLoanAmt()" v-if="isNeedAudit">线下结清</el-button>
              <el-button type="primary" size="mini" @click="protocolSettleAll()">代扣结清</el-button>
            </td>
          </tr>
        </table>
      </div>


      <div class="tables">
        <block-header :title="title"></block-header>
        <el-table
            @filter-change="handleFilterChange"
            border
            size="mini"
            :highlight-current-row="true"
            :header-row-class-name="headerStyle"
            :data="data"
            stripe
            style="width: 100%;">

          <el-table-column align="center" prop="planNo" label="计划编号" width="135px"></el-table-column>
          <el-table-column align="center" prop="planIndex" label="期数"></el-table-column>
          <el-table-column align="center" prop="planAmt" width="85" label="应还总金额"></el-table-column>
          <el-table-column align="center" prop="planBen" label="本金"></el-table-column>
          <el-table-column align="center" prop="planFu" label="服务费"></el-table-column>
          <el-table-column align="center" prop="planXi" label="利息"></el-table-column>
          <el-table-column align="center" prop="planFa" label="计划罚息"></el-table-column>
          <el-table-column align="center" prop="accountAmt" label="手续费"></el-table-column>
          <el-table-column align="center" prop="planDate" width="120" label="计划还款时间" :formatter="dateFormats"></el-table-column>
          <el-table-column align="center" prop="backedAmt" label="已还金额" :formatter="planMoneyFormat"></el-table-column>
          <el-table-column align="center" prop="derateAmt" label="减免金额"></el-table-column>
          <el-table-column align="center" prop="remainAmt" label="待还金额"></el-table-column>
          <el-table-column align="center" prop="statusStr" label="还款状态"></el-table-column>
          <el-table-column align="center" prop="gmtModified" width="120" label="结清时间" :formatter="dateFormats"></el-table-column>
          <el-table-column fixed="right"  align="center" width="120" label="操作">
            <template slot-scope="scope">

              <el-button type="text" size="small"
                         v-if=" scope.row.status !='SETTLED' && scope.row.backedSign == 'YES' "
                         @click="protocolOne(scope.row)">代扣
              </el-button>
              <el-button type="text" size="small" v-else disabled @click="protocolOne(scope.row)">代扣</el-button>

              <el-button type="text" size="small"
                         v-if=" scope.row.status != 'SETTLED' && scope.row.backedSign == 'YES' "
                         @click="offineTransfer(scope.row)">线下转账
              </el-button>
              <el-button type="text" size="small" v-else disabled @click="offineTransfer(scope.row)">线下转账</el-button>
            </template>
          </el-table-column>

        </el-table>
      </div>
      <div class="pages">
        <el-pagination
            background
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
            :current-page.sync="form.current"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="form.size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="form.total">
        </el-pagination>
      </div>
    </div>


  </el-dialog>
</template>

<script>
import BlockHeader from "@/components/byh/componments/blockHeader";
import * as moment from "moment";

export default {
  name: 'RiskInfo',
  components: {
    BlockHeader
  },
  props: {
    dialogVisible: {
      type: Boolean,
      required: true,
    },
    title: {
      type: String,
      required: true,
    },
    params: {
      type: Object,
      required: true
    },
  },
  data() {
    return {
      tableStatus: [{text: '成功', value: "SUCCESS"}, {text: '失败', value: "FAIL"}],
      form: {
        total: 1,
        current: 1,
        size: 10,
      },
      advanceLoanAmt:{},
      loanVo:{},
      isNeedAudit:false,
      data: []
    }
  },
  async created() {
    const params = this.params;
    this.advanceLoanAmt.loanNo = params.applyVo.loanNo;
    this.advanceLoanAmt.bizType = params.applyVo.bizType;
    this.advanceLoanAmt.clientNo = params.applyVo.clientNo;

    this.data = params.planVo;
    //this.form.result = params.phoneNo;
    //await this.init()
  },
  methods: {
    headerStyle() {
      return "tableHeaderStyle";
    },
    async init() {
      const res = await this.$$post('/back/detailPageList', this.form);
      const {success, result} = res.data;
      if (success && result !== null) {
        const {data, total} = result
        this.data = data;
        this.form.total = total;
      }
    },
    // 计算小数
    accAdd(arg1, arg2) {
      let r1, r2, m;
      try {
        r1 = arg1.toString().split(".")[1].length
      } catch (e) {
        r1 = 0
      }
      try {
        r2 = arg2.toString().split(".")[1].length
      } catch (e) {
        r2 = 0
      }
      m = Math.pow(10, Math.max(r1, r2))
      return (arg1 * m + arg2 * m) / m
    },

    offineTransfer(record) {
      // 取当前用户的信息
      this.ui.offineTransfer = {
        visible: true,
        orderNo: this.loanModel.orderNo,
        loanNo: this.loanModel.loanNo,
        planNo: record.planNo,
        periodNo: record.planIndex,
        planAmt: record.planAmt,
        planFu: record.planFu,
        planBen: record.planBen,
        planXi: record.planXi,
        remainAmt: record.remainAmt,
        accountAmt: record.accountAmt,
      };
    },
    //代扣提前结清
    protocolSettleAll() {
      this.ui.protocolSettled = {
        visible: true,
        loanNo: this.loanModel.loanNo,
        bizType: this.advanceLoanAmt.bizType,
        clientNo: this.advanceLoanAmt.clientNo,
      };
    },

    // 计算已还金额
    planMoneyFormat: function (row, column) {
      return this.accAdd(this.accAdd(this.accAdd(this.accAdd(this.accAdd(row.backedBen, row.backedFu), row.backedXi), row.backedFa), row.backedBurden), row.backedSpeaccount).toFixed(2)
    },
    // 还款结果
    resultBankFormat: function (row, column) {
      return row.resultStr + "(" + row.confirmDesc + ")";
    },
    //代扣当期
    protocolOne(record) {
      this.ui.protocolSettledOne = {
        visible: true,
        loanNo: this.loanModel.loanNo,
        bizType: this.advanceLoanAmt.bizType,
        clientNo: this.advanceLoanAmt.clientNo,
        periodNo: record.planIndex,
        remainAmt: record.remainAmt,
        planAmt: record.planAmt,
      };
    },
    // 合并日期
    dateCompare: function (row, column) {
      let date = row[column.property]
      if (date === undefined) {
        return ''
      }
      return moment(date).format("YYYY-MM-DD ") + row.backedTime
    },
    // 银行信息拼接
    cardBankFormat: function (row, column) {
      return row.cardBankAccount + "(" + row.cardBankName + ")";
    },
    /*日期*/
    dateFormat: function (row, column) {
      let date = row[column.property]
      if (date === undefined) {
        return ''
      }
      return moment(date).format("YYYY-MM-DD HH:mm:ss")
    },
    /*日期*/
    dateFormats: function (row, column) {
      let date = row[column.property]
      if (date === undefined) {
        return ''
      }
      return moment(date).format("YYYY-MM-DD")
    },
    handleClose() {
      this.$emit("handleClose");
    },
    //客服状态
    serviceFormat: function (row, column) {
      let status = row['feedStatus'];
      return this.$enumUtils.toMsg('FeedStatus', status);
    },
    handleCurrentChange(e) {
      this.form.current = e;
      this.init();
    },
    handleSizeChange(e) {
      this.form.size = e
      this.form.current = 1;
      this.init();
    },
    //还款添加查询功能
    handleFilterChange: function (filters, value) {
      if (filters.status.length === 2) {
        this.backValue = null
      }
      else {
        this.backValue = filters.status[0]
      }

      this.loanBackedData(this.loanNos)

    },
  }
}
</script>

<style>
.tables{
  margin-bottom: 20px;
}
.pages {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
