<template>
  <div class="page-com">
    <!-- <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 !== 0"
              >￥{{ loanVo.refundAmt }} ({{ loanVo.refundStatusDesc }})</span
            >
            <span v-else>￥{{ loanVo.refundAmt }}</span>
          </td>
          <td>账单已还款</td>
          <td>￥{{ loanVo.alrAmt }}</td>
        </tr>
        <tr>
          <td>操作</td>
          <td>
            <el-button
              type="primary"
              size="mini"
              @click="handleAdvanceLoanAmt"
              v-if="isNeedAudit"
              >线下结清</el-button
            >
            <el-button type="primary" size="mini" @click="protocolSettleAll"
              >代扣结清</el-button
            >
            <el-button
              type="primary"
              size="mini"
              v-if="params.capitalCodeStr === '自营'"
              @click="handleDevicePayment"
              >分笔代扣</el-button
            >
          </td>
          <td>减免金额</td>
          <td>￥{{ loanVo.derateAmt }}</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="offlineTransfer(scope.row)"
              >线下转账
            </el-button>
            <el-button
              type="text"
              size="small"
              v-else
              disabled
              @click="offlineTransfer(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>

    <!--线下提前结清-->
    <advance-loan-amt
      v-if="ui.advanceLoanAmt.visible"
      :loanNo="ui.advanceLoanAmt.loanNo"
      :orderNo="ui.advanceLoanAmt.orderNo"
      @callback="init"
      :dialogVisible.sync="ui.advanceLoanAmt.visible"
    >
    </advance-loan-amt>

    <!--代扣提前结清-->
    <protocol-settled
      v-if="ui.protocolSettled.visible"
      :loanNo="ui.protocolSettled.loanNo"
      :clientNo="ui.protocolSettled.clientNo"
      :bizType="ui.protocolSettled.bizType"
      @callback="init"
      :dialogVisible.sync="ui.protocolSettled.visible"
    >
    </protocol-settled>

    <!--分笔代扣-->
    <device-payment
      v-if="ui.devicePayment.visible"
      :loanNo="ui.devicePayment.loanNo"
      :orderNo="ui.devicePayment.orderNo"
      :clientNo="ui.devicePayment.clientNo"
      :bizType="ui.devicePayment.bizType"
      @callback="init"
      :dialogVisible.sync="ui.devicePayment.visible"
    >
    </device-payment>

    <protocol-settled-one
      v-if="ui.protocolSettledOne.visible"
      :loanNo="ui.protocolSettledOne.loanNo"
      :periodNo="ui.protocolSettledOne.periodNo"
      :remainAmt="ui.protocolSettledOne.remainAmt"
      :planAmt="ui.protocolSettledOne.planAmt"
      :bizType="ui.protocolSettledOne.bizType"
      :clientNo="ui.protocolSettledOne.clientNo"
      :loanSign="ui.protocolSettledOne.loanSign"
      :isCustomAmount="ui.protocolSettledOne.isCustomAmount"
      @callback="init"
      :dialogVisible.sync="ui.protocolSettledOne.visible"
    >
    </protocol-settled-one>

    <!-- 线下转账 -->
    <offline-transfer
      v-if="ui.offineTransfer.visible"
      :orderNo="ui.offineTransfer.orderNo"
      :loanNo="ui.offineTransfer.loanNo"
      :periodNo="ui.offineTransfer.periodNo"
      :planNo="ui.offineTransfer.planNo"
      :planAmt="ui.offineTransfer.planAmt"
      :planFu="ui.offineTransfer.planFu"
      :planBen="ui.offineTransfer.planBen"
      :planXi="ui.offineTransfer.planXi"
      :remainAmt="ui.offineTransfer.remainAmt"
      :accountAmt="ui.offineTransfer.accountAmt"
      @callback="init"
      :dialogVisible.sync="ui.offineTransfer.visible"
    >
    </offline-transfer>
  </div>
</template>

<script>
import * as moment from "moment";
import AdvanceLoanAmt from "./AdvanceLoanAmt";
import ProtocolSettled from "./ProtocolSettled";
import ProtocolSettledOne from "./ProtocolSettledOne";
import OfflineTransfer from "./OffineTransfer";
import DevicePayment from "./DevicePayment";

export default {
  name: "RiskInfo",
  components: {
    AdvanceLoanAmt,
    ProtocolSettled,
    ProtocolSettledOne,
    OfflineTransfer,
    DevicePayment,
  },
  props: {
    title: {
      type: String,
      required: false,
    },
    params: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      tableStatus: [
        { text: "成功", value: "SUCCESS" },
        { text: "失败", value: "FAIL" },
      ],
      form: {
        total: 1,
        current: 1,
        size: 10,
      },
      advanceLoanAmt: {},
      loanVo: {},
      isNeedAudit: true,
      data: [],
      ui: {
        offineTransfer: {
          visible: false,
          orderNo: "",
          loanNo: "",
          periodNo: "",
          planAmt: "",
          planFu: "",
          planBen: "",
          planXi: "",
          planNo: "",
          accountAmt: "",
        },
        advanceLoanAmt: {
          visible: false,
          orderNo: "",
          loanNo: "",
          planAmt: "",
          planFu: "",
          planBen: "",
          planXi: "",
          planNo: "",
        },
        //分笔代扣
        devicePayment: {
          visible: false,
          orderNo: "",
          loanNo: "",
          planAmt: "",
          planFu: "",
          planBen: "",
          planXi: "",
          planNo: "",
        },
        protocolSettled: {
          visible: false,
          loanNo: "",
          bizType: "",
          clientNo: "",
        },
        protocolSettledOne: {
          visible: false,
          loanNo: "",
          bizType: "",
          clientNo: "",
          periodNo: "",
          remainAmt: "",
          planAmt: "",
          isCustomAmount:""
        },
      },
    };
  },
  async created() {
    if (this.params) {
      //  console.log(this.params,'hhhhhh');
      const { loanNo } = this.params;
      this.advanceLoanAmt.loanNo = loanNo;
      await this.init();
    }
  },
  methods: {
    headerStyle() {
      return "tableHeaderStyle";
    },

    async init() {
      const res = await this.$$get(
        "/detail/customer/" + this.advanceLoanAmt.loanNo
      );
      const { success, result } = res.data;
      // console.log(res.data.result,'888');
      if (success && result != null) {
        const { loanVo, applyVo, planVo } = result;
        this.advanceLoanAmt.loanNo = applyVo.loanNo;
        this.advanceLoanAmt.bizType = applyVo.bizType;
        this.advanceLoanAmt.clientNo = applyVo.clientNo;

        this.data = planVo;
        if (planVo == null) {
          this.data = [];
          this.isNeedAudit = false;
        }
        this.loanVo = loanVo;
      }
    },
    // 计算小数
    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;
    },

    // 线下提前结清
    handleAdvanceLoanAmt() {
      this.ui.advanceLoanAmt = {
        visible: true,
        loanNo: this.advanceLoanAmt.loanNo,
        orderNo: this.params.orderNo,
      };
    },
    // 计算已还金额
    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);
    },

    offlineTransfer(record) {
      const { applyVo, orderNo, loanNo } = this.params;
      // console.log(this.params, "代扣");

      // 取当前用户的信息
      this.ui.offineTransfer = {
        visible: true,
        orderNo: orderNo,
        loanNo: 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.advanceLoanAmt.loanNo,
        bizType: this.advanceLoanAmt.bizType,
        clientNo: this.advanceLoanAmt.clientNo,
      };
    },
    //代扣当期
    protocolOne(record) {
      console.log(record,'record');
      const { applyVo, loanNo,loanSign } = this.params;
      this.ui.protocolSettledOne = {
        visible: true,
        loanNo: loanNo,
        loanSign:loanSign,
        bizType: this.advanceLoanAmt.bizType,
        clientNo: this.advanceLoanAmt.clientNo,
        periodNo: record.planIndex,
        remainAmt: record.remainAmt,
        planAmt: record.planAmt,
        isCustomAmount: record.isCustomAmount,
      };
      console.log(this.ui.protocolSettledOne,'数据');
    },
    //分笔代扣
    handleDevicePayment() {
      const { applyVo, loanNo, orderNo, clientNo } = this.params;
      // console.log(this.params,'params');
      this.ui.devicePayment = {
        visible: true,
        loanNo: loanNo,
        bizType: this.advanceLoanAmt.bizType,
        clientNo: clientNo,
        orderNo: orderNo,
      };
    },
    // 合并日期
    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];
      }
    },
  },
};
</script>

<style>
.tables {
  margin-bottom: 20px;
}

.pages {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
