<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>
            <template v-if="!type">
              <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.capitalCode === 'OWNBUSINESS' || params.capitalCode === 'YUANFENGBUSINESS'"
                @click="handleDevicePayment">分笔代扣</el-button>
              <template v-if="$permissionUtils.rolePermission('protocolSign')">
                <el-button v-if="params.level === 'CF'" :disabled="cf.disabled" type="primary" size="mini"
                  @click="handleChangeCFBill">CF账单变更
                </el-button>
              </template>
            </template>
          </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" v-if="!type" 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>

    <!--CF账单变更-->
    <el-dialog :close-on-click-modal="false" :close-on-press-escape="false" :append-to-body="true" title="CF账单变更" center
      width="50%" :visible.sync="cf.visible" :before-close="handleChangeCFClose">
      <div class="box-agreement" style="height: 380px; overflow: auto">
        <h3 style="color: crimson; text-align: center; margin-bottom: 20px">账单变更后，不可恢复，请谨慎操作</h3>
        <block-header title="当前可变更信息" />
        <el-form label-suffix=":" label-width="110px" :model="form" ref="form">
          <el-form-item prop="isUploadProve" label="可变更期数">
            <div>{{ cf.form.splitPlanIndex }}期</div>
          </el-form-item>
          <el-form-item prop="isUploadProve" label="总变更期数">
            <div>{{ cf.form.splitSumIndex }}期</div>
          </el-form-item>
          <el-form-item prop="isUploadProve" label="总变更金额">
            <div>{{ cf.form.totalAmt }}元</div>
          </el-form-item>
        </el-form>

        <!--还款计划-->
        <block-header title="变更后还款计划" />
        <div class="p-table">

          <el-table border :highlight-current-row="true" :header-row-class-name="headerStyle" size="small"
            :data="cf.list" stripe style="width: 100%;">
            <el-table-column align="center" prop="planIndex" label="期数"></el-table-column>
            <el-table-column align="center" prop="planAmt" 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="planBurden" label="担保费"></el-table-column>
          </el-table>

        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleChangeCFClose">取 消</el-button>
        <el-button type="primary" @click="handleChangeCFSubmit">确 定</el-button>
      </div>
    </el-dialog>
  </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,
    },
    type: {
      type: String,
      desc: '用这个字段来判断，是否是委外，如果是委外，去掉操作菜单',
      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: ""
        },
      },
      cf: {
        disabled: false,
        visible: false,
        form: {}
      },
    };
  },
  async created() {
    if (this.params) {
      console.log(this.params, '参数')
      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, isChangePlan } = result;
        this.advanceLoanAmt.loanNo = applyVo.loanNo;
        this.advanceLoanAmt.bizType = applyVo.bizType;
        this.advanceLoanAmt.clientNo = applyVo.clientNo;
        this.cf.disabled = isChangePlan

        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,
      };
    },
    // CF 账单变更 弹框打开
    async handleChangeCFBill() {
      try {

        const loanNo = this.params.loanNo
        const res = await this.$$get('/protocol/getCanChangePlan', { loanNo })
        if (res.status === 200 && res.data.success) {
          const result = res.data.result;
          const { debtPlanModels } = result
          this.cf.visible = true;
          this.cf.form = result;
          this.cf.list = debtPlanModels
        } else {
          this.$message.error(res.data.message);
        }

      } catch (err) {
        this.$message.error(res || '初始化CF账单信息报错');
      }
    },
    // CF 账单变更 弹框关闭
    handleChangeCFClose() {
      this.cf.visible = false
    },
    // CF 账单变更提交
    async handleChangeCFSubmit() {
      try {
        const loanNo = this.params.loanNo
        this.cf.form.applyUser = localStorage.getItem("loginName")
        this.cf.form.loanNo = loanNo
        const res = await this.$$post('/protocol/changePlan', { ...this.cf.form })
        if (res.status === 200 && res.data.success) {
          this.$message.success('操作成功');
          this.cf.visible = false;
        } else {
          this.$message.error(res.data.message);
        }

      } catch (err) {
        this.$message.error(res || '初始化CF账单信息报错');
      }
    },
    // 合并日期
    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 + ")";
    },
    /*日期*/
    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>
