<template>
  <div>
    <el-button type="text" @click="goBack" v-text="`<`+'返回'"></el-button>
    <div>
      <el-collapse v-model="activeNames">

        <el-collapse-item title="基本信息" name="1">
          <div>
            <h2 style="float:left">基本信息</h2>
            <el-button style="float:right;margin-right:65px" type="primary" @click="addQuestion">新增反馈记录</el-button>
            <br/>
          </div>

          <br/>
          <br/>
          <el-row :gutter="20" type="flex" :data="basicInfo" style="margin-left:50px">
            <el-col :span="8">
              <div class="grid-content bg-purple">姓名：{{ basicInfo.name }}</div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content bg-purple">身份证号：{{ basicInfo.idCard }}</div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content bg-purple">手机号：{{ basicInfo.phone }}</div>
            </el-col>
          </el-row>
          <br/>

          <h2>认证信息</h2>
          <br/>

          <el-row :gutter="20" style="margin-left:50px">
            <el-col :span="8">
              <div class="grid-content bg-purple">实名认证：{{ basicInfo.isIdentity }}</div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content bg-purple">基础信息认证：{{ basicInfo.isBasicInfo }}</div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content bg-purple">活体认证：{{ basicInfo.isFace }}</div>
            </el-col>
          </el-row>
          <br/>


          <el-row :gutter="20" type="flex" style="margin-left:50px;">

            <el-col :span="8">
              <div class="grid-content bg-purple">客户单位名称：{{ basicInfo.companyName }}</div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content bg-purple">客户单位地址：{{ basicInfo.companyAddress }}</div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content bg-purple">住宅地址：{{ basicInfo.houseAddress }}</div>
            </el-col>

          </el-row>
          <br/>

          <el-row :gutter="20" type="flex" :data="basicInfo" style="margin-left:50px">
            <el-col :span="8">
              <div class="grid-content bg-purple">第一联系人姓名：{{ basicInfo.firstName }}</div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content bg-purple">第一联系人电话：{{ basicInfo.firstPhone }}</div>
            </el-col>

          </el-row>
          <!-- 当前用户认证的银行卡列表 -->
          <el-table :data="ownerBank" stripe style="width: 100%;">
            <el-table-column prop="bankAccount" label="银行卡号"></el-table-column>
            <el-table-column prop="openBankName" label="银行名称"></el-table-column>
            <el-table-column prop="ownerName" label="姓名"></el-table-column>
            <el-table-column prop="payChannelApi" label="渠道名称"></el-table-column>
            <el-table-column prop="gmtCreated" label="绑定时间" :formatter="dateFormat"></el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">

                <el-button type="text" size="small" @click="ownerBankBind(scope.row)">绑卡记录</el-button>
              </template>
            </el-table-column>

          </el-table>

        </el-collapse-item>

        <el-collapse-item name="2" title="借款信息">
          <h2>借款信息</h2>
          <br/>

          <el-table :data="loanResultLists" stripe style="width: 100%;">
            <el-table-column prop="loanNo" label="借款编号"></el-table-column>
            <el-table-column prop="gmtCreated" label="申请日期" :formatter="dateFormats"></el-table-column>
            <el-table-column prop="startDate" label="放款日期" :formatter="dateFormats"></el-table-column>
            <el-table-column prop="raiseAmt" label="放款本金"></el-table-column>
            <el-table-column prop="capitalCode" label="放款资方" :formatter="capitalCodeFormat"></el-table-column>
            <el-table-column prop="status" label="借款单状态" :formatter="loanStatusFormat"></el-table-column>
            <el-table-column prop="cancelMemo" label="备注"></el-table-column>
            <el-table-column label="查看详情">
              <template slot-scope="scope">
                <el-button type="text" size="small" @click="addLoanDetail(scope.row.loanNo)">详情</el-button>
              </template>
            </el-table-column>
          </el-table>

        </el-collapse-item>

        <el-collapse-item title="申请信息" name="3">

          <p style="margin-left:50px"><strong>当前借款</strong></p>
          <br/>
          <div v-if="this.loanModel !=null">
            <el-row :gutter="20" :data="loanModel" style="margin-left:50px">
              <el-col :span="6">
                <div class="grid-content bg-purple">申请日期：{{ loanModel.gmtCreated | dateFilter }}</div>
              </el-col>
              <el-col :span="6">
                <div class="grid-content bg-purple">放款日期：{{ loanModel.raiseDate | dateFilter }}</div>
              </el-col>
              <el-col :span="6">
                <div class="grid-content bg-purple">项目名称：{{ loanModel.bizTypeStr }}</div>
              </el-col>


            </el-row>
            <br/>
            <el-row :gutter="20" :data="loanModel" style="margin-left:50px">
              <el-col :span="6">
                <div class="grid-content bg-purple">总应还金额：{{ loanModel.loanAmt }}</div>
              </el-col>

              <el-col :span="6">
                <div class="grid-content bg-purple">申请期数：{{ loanModel.loanLimit }}</div>
              </el-col>

              <el-col :span="6">
                <div class="grid-content bg-purple" v-if="loanModel.cardBankAccount">
                  放款银行卡（所属银行）：{{ loanModel.cardBankAccount }}（{{ loanModel.cardBankCodeStr }}）
                </div>
                <div class="grid-content bg-purple" v-else>放款银行卡（所属银行）：{{ loanModel.bankAccount }}</div>
              </el-col>
            </el-row>
            <br/>
            <el-row :gutter="20" :data="loanModel" style="margin-left:50px">

              <el-col :span="6">
                <div class="grid-content bg-purple">本金：{{ loanModel.raiseAmt }}</div>
              </el-col>
              <el-col :span="6">
                <div class="grid-content bg-purple">总服务费：{{ loanModel.serviceAmt }}</div>
              </el-col>
              <el-col :span="6">
                <div class="grid-content bg-purple">总利息：{{ loanModel.rateAmt }}</div>
              </el-col>
              <el-col :span="6">
                <div class="grid-content bg-purple">总手续费：{{ loanModel.accountAmt }}</div>
              </el-col>
            </el-row>
          </div>
        </el-collapse-item>


        <el-collapse-item title="账单详情" name="4">

          <br/>
          <div style="margin-left:10px">
            <strong>
              <el-row :gutter="20" :data="loanModel" style="margin-left:20px">
                <el-col :span="4">
                  <div class="grid-content bg-purple">借款编号：{{ this.advanceLoanAmt.loanNo }}</div>
                </el-col>
                <el-col :span="4">
                  <div class="grid-content bg-purple">账单剩余应还：{{ this.loanVo.surAmt }}</div>
                </el-col>
                <el-col :span="4">
                  <div class="grid-content bg-purple">账单已还款：{{ this.loanVo.alrAmt }}</div>
                </el-col>
                <el-col :span="4">
                  <div class="grid-content bg-purple" v-if="this.loanVo.refundAmt != null ">退款金额：{{ this.loanVo.refundAmt }} ({{ this.loanVo.refundStatusDesc }})</div>
                  <div class="grid-content bg-purple" v-else>退款金额：0</div>
                </el-col>
                <el-col :span="6">
                  <el-button type="primary" size="small" @click="advanceLoanAmt()" v-if="isNeedAudit">线下结清</el-button>
                  <el-button type="primary" size="small" @click="protocolSettleAll()"
                             v-if="$permissionUtils.rolePermission('customBoss')">代扣结清
                  </el-button>
                </el-col>
              </el-row>
            </strong>
          </div>
          <br/>

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

                <el-button type="text" size="small"
                           v-if=" scope.row.status !='SETTLED' && scope.row.backedSign == 'YES' && $permissionUtils.rolePermission('customBoss') "
                           @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>

        </el-collapse-item>


        <el-collapse-item title="还款情况" name="5">

          <el-table :data="loanBackedList" stripe style="width: 100%;">
            <el-table-column prop="backedNo" label="还款编号"></el-table-column>
            <el-table-column prop="planIndex" label="期数"></el-table-column>
            <el-table-column prop="backedAmt" label="还款金额"></el-table-column>
            <el-table-column prop="backedTypeStr" label="还款方式"></el-table-column>
            <!-- <el-table-column prop="backedXi" label="还款利息"></el-table-column> -->
            <el-table-column prop="statusStr" label="还款单状态"></el-table-column>
            <el-table-column prop="cardOwnerName" label="银行账号户主名称"></el-table-column>
            <el-table-column prop="cardOwnerMobile" label="银行账号户主电话号码"></el-table-column>
            <el-table-column prop="cardBankAccount" label="银行账号" :formatter="cardBankFormat"></el-table-column>
            <el-table-column prop="bankAccount" label="还款银行账号"></el-table-column>
            <el-table-column prop="bankOwner" label="还款银行账户"></el-table-column>
            <el-table-column prop="backedDate" label="还款时间" :formatter="dateCompare"></el-table-column>
            <el-table-column prop="resultStr" label="还款结果" :formatter="resultBankFormat"></el-table-column>
            <el-table-column prop="creator" label="创建人"></el-table-column>
            <el-table-column prop="memo" label="备注"></el-table-column>
          </el-table>
          <div class="page">
            <el-pagination
                @current-change="handleCurrentChange"
                @size-change="handleSizeChange"
                :current-page.sync="page.current"
                :page-sizes="[10, 20, 50, 100]"
                :page-size="page.size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="page.total">
            </el-pagination>
          </div>
        </el-collapse-item>


        <el-collapse-item title="客服反馈问题记录" name="6">

          <el-table :data="customerFeedList" stripe style="width: 100%;">
            <el-table-column prop="feedNo" label="客服反馈编号"></el-table-column>
            <el-table-column prop="clientName" label="客户姓名"></el-table-column>
            <el-table-column prop="clientCell" label="客户手机号"></el-table-column>
            <el-table-column prop="feedType" label="反馈类型"></el-table-column>
            <el-table-column prop="feedContent" label="反馈内容"></el-table-column>
            <el-table-column prop="finishContent" label="处理意见"></el-table-column>
            <el-table-column prop="feedStatus" label="状态" :formatter="serviceFormat"></el-table-column>
            <el-table-column prop="creater" label="处理人"></el-table-column>
            <el-table-column prop="gmtCreated" label="记录时间" :formatter="dateFormat"></el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button type="text" size="small" @click="updateQueDialog(scope.row)">修改</el-button>
              </template>
            </el-table-column>
          </el-table>

          <div class="page">
            <el-pagination
                @current-change="customerHandleCurrentChange"
                @size-change="customerHandleSizeChange"
                :current-page.sync="customerPage.current"
                :page-sizes="[10, 20, 50, 100]"
                :page-size="customerPage.size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="customerPage.total">
            </el-pagination>
          </div>
        </el-collapse-item>

        <el-collapse-item title="催收记录" name="7">

          <el-table :data="collectFeedList" stripe style="width: 100%;">
            <el-table-column prop="collectContact.contactMobile" label="联系人手机号"></el-table-column>
            <el-table-column prop="collectContact.contactName" label="联系人姓名"></el-table-column>
            <el-table-column prop="collectContact.contactRelation" label="联系人关系"></el-table-column>
            <el-table-column prop="collectContact.overdueDay" label="逾期天数"></el-table-column>
            <el-table-column prop="collectContact.state" label="状态" :formatter="collectStatueFormat"></el-table-column>
            <el-table-column prop="collectContact.created" label="联系时间"
                             :formatter="collectDateFormat"></el-table-column>
            <el-table-column prop="collectContact.resultType" label="结果"
                             :formatter="collectResultFormat"></el-table-column>
            <el-table-column prop="collectContact.callSeconds" label="语音时长"
                             :formatter="formatSeconds"></el-table-column>
            <el-table-column prop="collectContact.record" label="催记"></el-table-column>
          </el-table>

          <div class="page">
            <el-pagination
                @current-change="collectHandleCurrentChange"
                @size-change="collectHandleSizeChange"
                :current-page.sync="collectPage.current"
                :page-sizes="[10, 20, 50, 100]"
                :page-size="collectPage.size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="collectPage.total">
            </el-pagination>
          </div>
        </el-collapse-item>

        <el-collapse-item title="操作日志" name="8">

          <el-table :data="loanLogCustom" stripe style="width: 100%;">
            <el-table-column prop="typeStr" label="操作类型"></el-table-column>
            <el-table-column prop="gmtCreated" label="操作时间" :formatter="dateFormat"></el-table-column>
            <el-table-column prop="memo" label="备注"></el-table-column>
          </el-table>
          <div class="page">
            <el-pagination
                @current-change="handleCurrentChangeClient"
                @size-change="handleSizeChangeClient"
                :current-page.sync="pages.current"
                :page-sizes="[10, 20, 50, 100]"
                :page-size="pages.size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="pages.total">
            </el-pagination>
          </div>
        </el-collapse-item>

      </el-collapse>


    </div>


    <!--窗口组件-->
    <template>
      <!--新增窗口-->
      <addQuestion
          v-if="ui.addQuestion.visible"
          :clientNo="ui.addQuestion.clientNo"
          :dialogVisible.sync="ui.addQuestion.visible"
      >
      </addQuestion>

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

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

      <protocolSettledOne
          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"
          :dialogVisible.sync="ui.protocolSettledOne.visible">
      </protocolSettledOne>

      <!--修改窗口-->
      <updateQueDialog
          v-if="ui.updateQueDialog.visible"
          :feedNo="ui.updateQueDialog.feedNo"
          :feedType="ui.updateQueDialog.feedType"
          :feedStatus="ui.updateQueDialog.feedStatus"
          :feedContent="ui.updateQueDialog.feedContent"
          :creater="ui.updateQueDialog.creater"
          :finishContent="ui.updateQueDialog.finishContent"
          :dialogVisible.sync="ui.updateQueDialog.visible">
      </updateQueDialog>

      <!-- 详情组件 -->
      <readDetail
          v-if="ui.readDetail.visible"
          :planNo="ui.readDetail.planNo"
          :planIndex="ui.readDetail.planIndex"
          :planAmt="ui.readDetail.planAmt"
          :backedBen="ui.readDetail.backedBen"
          :backedFu="ui.readDetail.backedFu"
          :planXi="ui.readDetail.planXi"
          :planFu="ui.readDetail.planFu"
          :planBen="ui.readDetail.planBen"
          :backedXi="ui.readDetail.backedXi"
          :loanLimit="ui.readDetail.loanLimit"
          :dialogVisible.sync="ui.readDetail.visible">
      </readDetail>

      <!-- 线下转账 -->
      <offineTransfer
          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"
          :dialogVisible.sync="ui.offineTransfer.visible">
      </offineTransfer>

      <!-- 绑卡记录 -->
      <ownerBankBind
          v-if="ui.ownerBankBind.visible"
          :cardLogList="ui.ownerBankBind.cardLogList"
          :dialogVisible.sync="ui.ownerBankBind.visible">
      </ownerBankBind>
    </template>


  </div>
</template>

<script>
import * as moment from "moment";
import addQuestion from "../byh/AddQuestion";
import advanceLoanAmt from "./AdvanceLoanAmt";
import protocolSettled from "./ProtocolSettled";
import updateQueDialog from "../byh/UpdateQueDialog";
import readDetail from "../byh/readDetail";
import offineTransfer from "../byh/offineTransfer";
import protocolSettledOne from "../byh/ProtocolSettledOne";
import ownerBankBind from "../byh/OwnerBankBind";
import clone from "../../mixins/clone";

export default {
  name: "ByhLoanBackedList",
  components: {
    addQuestion,
    advanceLoanAmt,
    protocolSettled,
    protocolSettledOne,
    updateQueDialog,
    readDetail,
    offineTransfer,
    ownerBankBind,
  },
  data() {
    return {
      flag: false,
      isShow: true,
      isNeedAudit: true,
      activeNames: ['1', '2', '7', '8'],
      page: {
        current: 1,
        size: 10,
        total: 0
      },
      pages: {
        current: 1,
        size: 10,
        total: 0
      },
      customerPage: {
        current: 1,
        size: 10,
        total: 0
      },
      collectPage: {
        current: 1,
        size: 10,
        total: 0
      },
      loanBackedList: [],
      customerFeedList: [],
      collectFeedList: [{
        collectContact: '',
      }],
      loanLogCustom: [],
      loanResultLists: [],
      ownerBank: [{
        bankAccount: '',
        clientNo: '',
        ownerName: '',
        cardLogList: [],
      }],
      loanUserBasicList: [{
        name: '',
        idCard: '',
        phone: '',
      }],
      basicInfo: [{
        houseAddress: '',
        firstName: '',
        firstPhone: '',
        clientNo: '',
        name: '',
        idCard: '',
        phone: '',
      }],
      identifyInfo: [{
        address: '',
        issuedBy: '',
        frontFile: '',
        backFile: '',
        natureFile: '',
      }],
      loanApplyList: [{
        planNo: '',
        planIndex: '',
        planAmt: '',
        backedBen: '',
        backedFu: '',
        planXi: '',
        planFa: '',
        planDate: '',
        status: '',
      }],
      companyInfo: [{
        companyName: '',
        companyAddress: '',
      }],
      loanModel: [{
        gmtCreated: '',
        raiseDate: '',
        bankAccount: '',
        loanAmt: '',
        serviceAmt: '',
        rateAmt: '',
        loanLife: '',
        contractAmt: '',
        cardBankAccount: '',
        cardBankCodeStr: '',
        status: '',
        loanNo: '',
        orderNo: '',
      }],
      loanVo: [{
        alrAmt: '',
        surAmt: ''
      }],
      formInline: {
        clientCell: '',
      },
      ui: {
        addQuestion: {
          clientNo: '',
          visible: false
        },
        updateQueDialog: {
          visible: false,
          feedNo: '',
          feedType: '',
          feedStatus: '',
          feedContent: '',
          clientNo: '',
          creater: '',
          finishContent: '',
        },
        ownerBankBind: {
          visible: false,
          cardLogList: [],
        },
        readDetail: {
          visible: false,
          planNo: '',
          planIndex: '',
          planAmt: '',
          backedBen: '',
          backedFu: '',
          planXi: '',
          loanLimit: '',
          planFu: '',
          backedXi: '',
          planBen: '',
        },
        offineTransfer: {
          visible: false,
          orderNo: '',
          loanNo: '',
          periodNo: '',
          planAmt: '',
          planFu: '',
          planBen: '',
          planXi: '',
          planNo: '',
          accountAmt: '',
        },
        advanceLoanAmt: {
          visible: false,
          orderNo: '',
          loanNo: '',
          planAmt: '',
          planFu: '',
          planBen: '',
          planXi: '',
          planNo: '',
        },
        protocolSettled: {
          visible: false,
          loanNo: '',
          bizType: '',
          clientNo: '',
        },
        protocolSettledOne: {
          visible: false,
          loanNo: '',
          bizType: '',
          clientNo: '',
          periodNo: '',
          remainAmt: '',
          planAmt: '',
        },
        loanNos: '',
        clientNos: '',
        clientCells: '',
        clientProducts: '',
      },
    }
  },
  filters: {

    dateFilter: function (row) {

      var exp = row
      if (!exp || typeof (exp) === undefined || typeof (exp) === null) {
        return ''
      }
      return moment(exp).format("YYYY-MM-DD")
    },

  },
  created() {
    this.clientNos = this.$route.query.clientNo;
    this.clientProducts = this.$route.query.clientProductName;
    this.clientCells = this.$route.query.phoneNo;
    this.backedData(this.$route.query.phoneNo, this.$route.query.clientNo, this.$route.query.clientProductName);
    this.addLoanDetail(this.$route.query.loanNo);
  },
  methods: {
    // 反馈弹窗
    addQuestion() {
      this.ui.addQuestion = {
        clientNo: this.$route.query.clientNo,
        visible: true,
      };
    },
    readDetail(record) {
      this.ui.readDetail = {
        visible: true,
        planNo: record.planNo,
        planIndex: record.planIndex,
        planAmt: record.planAmt,
        backedBen: record.backedBen,
        backedFu: record.backedFu,
        planXi: record.planXi,
        planBen: record.planBen,
        loanLimit: record.loanLimit,
        planFu: record.planFu,
        backedXi: record.backedXi,
      };
    },
    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,
      };
    },

    // 线下提前结清
    advanceLoanAmt() {
      this.ui.advanceLoanAmt = {
        visible: true,
        loanNo: this.loanModel.loanNo,
        orderNo: this.loanModel.orderNo,
      };
    },

    //代扣提前结清
    protocolSettleAll() {
      this.ui.protocolSettled = {
        visible: true,
        loanNo: this.loanModel.loanNo,
        bizType: this.advanceLoanAmt.bizType,
        clientNo: this.advanceLoanAmt.clientNo,
      };
    },

    //代扣当期
    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,
      };
    },
    //返回上一页
    goBack() {
      this.$router.push({
        path: 'ByhService',
        query: {
          clientNo: this.$route.query.clientNo,
          clientName: this.$route.query.clientName,
          clientCell: this.$route.query.clientCell,
          productName: this.$route.query.productName,
          certNo: this.$route.query.certNo,
          loanNo: this.$route.query.loanNo,
          orderNo: this.$route.query.orderNo,
          page: this.$route.query.current
        }
      })
    },

    /** 加载数据 */
    backedData(phoneNo, clientNo, clientProductName) {
      this.loanDetail(phoneNo, clientNo, clientProductName)
    },

    loanDetail(phoneNo, clientNo, clientProductName) {
      let urlStr = 'clientNo=' + clientNo + '&productName=' + clientProductName;
      // 个人信息
      this.$$get('/detail/clientDetailInfo?' + urlStr).then(res => {
        if (res.data.code != 200) {
          this.$message.error(res.data.message);
          return
        } else {
          if (res.data.result != null) {
            this.basicInfo = res.data.result ? res.data.result : '';
            // 多个用户银行卡信息
            if (res.data.result.cardList != null) {
              this.ownerBank = res.data.result.cardList ? res.data.result.cardList : '';
            }
          }
        }
      });


      //操作信息
      this.clientDailyInfo(this.$route.query.clientNo);

      // 请求当前的反馈问题/customer/getQuestionList/

      // 请求当前日志
      this.$$post('/feed/feedPageList',
          {clientCell: phoneNo,
            feedProduct: clientProductName,
            feedSource: 'CUSTOMER',
            size: this.customerPage.size,
            current: this.customerPage.current,
            sort: 'id desc'}).then(res => {
        if (res.data.code != 200) {
          this.$message.error(res.data.message);
          return
        }
        if (res.data.result.records != null) {
          this.customerFeedList = res.data.result.records ? res.data.result.records : '';
          this.customerPage.total = res.data.result.total;
        }
      }).catch(error => {
        this.$message.error(error || '系统异常');
      });


      // 请求当前日志
      this.$$post('/feed/feedPageList',
          {clientCell: phoneNo,
            feedProduct: 'GXD',
            feedSource: 'COLLECT',
            size: this.collectPage.size,
            current: this.collectPage.current,
            sort: 'id desc'}).then(res => {
        if (res.data.code != 200) {
          this.$message.error(res.data.message);
          return
        }
        if (res.data.result.records != null) {
          this.collectFeedList = res.data.result.records ? res.data.result.records : '';
          this.collectPage.total = res.data.result.total;
        }
      }).catch(error => {
        this.$message.error(error || '系统异常');
      });


      this.$$post('/loan/getLoanListByClientNo/' + clientNo).then(res => {
        if (res.data.code != 200) {
          // this.isShow = false;
          this.$message.error(res.data.message);
          return
        } else {
          if (res.data.result != null) {
            this.loanResultLists = res.data.result ? res.data.result : '';
          }
        }
      }).catch(error => {
        this.$message.error(error || '网络异常，请稍后。。。');
      });

    },

    //操作信息
    clientDailyInfo(clientNo) {
      // 请求当前日志
      this.$$post('/detail/getDaily', this.buildParam(clientNo)).then(res => {
        if (res.data.code != 200) {
          this.$message.error(res.data.message);
          return
        }
        if (res.data.result.data != null) {
          this.loanLogCustom = res.data.result.data ? res.data.result.data : '';
          this.pages.total = res.data.result.size;
        }
      }).catch(error => {
        this.$message.error(error || '系统异常');
      });
    },

    //客服反馈信息
    customerInfo(phoneNo) {
      // 请求当前日志
      this.$$post('/feed/feedPageList',
          {clientCell: phoneNo,
            feedProduct: this.clientProducts,
            feedSource: 'CUSTOMER',
            size: this.customerPage.size,
            current: this.customerPage.current,
            sort: 'id desc'}).then(res => {
        if (res.data.code != 200) {
          this.$message.error(res.data.message);
          return
        }
        if (res.data.result.records != null) {
          this.customerFeedList = res.data.result.records ? res.data.result.records : '';
          this.customerPage.total = res.data.result.total;
        }
      }).catch(error => {
        this.$message.error(error || '系统异常');
      });
    },

    //客户催收信息
    collectInfo(phoneNo) {
      // 请求当前日志
      this.$$post('/feed/feedPageList',
          {clientCell: phoneNo,
            feedProduct: 'GXD',
            feedSource: 'COLLECT',
            size: this.collectPage.size,
            current: this.collectPage.current,
            sort: 'id desc'}).then(res => {
        if (res.data.code != 200) {
          this.$message.error(res.data.message);
          return
        }
        if (res.data.result.records != null) {
          this.collectFeedList = res.data.result.records ? res.data.result.records : [];
          this.collectPage.total = res.data.result.total;
        }
      }).catch(error => {
        this.$message.error(error || '系统异常');
      });
    },

    //根据借款信息查借款所有信息
    addLoanDetail(record) {
      this.isNeedAudit = true;
      this.$$get('/detail/customer/' + record).then(res => {
        if (res.data.code != 200) {
          // this.isShow = false;
          this.$message.error(res.data.message);
          return
        } else {
          //打开借款的面板
          this.activeNames = ['1', '2', '3', '4', '5', '8'];
          //还款计划
          if (res.data.result.planVo == null) {
            this.loanApplyList = [];
            this.isNeedAudit = false;
          } else {
            this.loanApplyList = res.data.result.planVo ? res.data.result.planVo : '';
            this.advanceLoanAmt.loanNo = res.data.result.applyVo.loanNo;
            this.advanceLoanAmt.bizType = res.data.result.applyVo.bizType;
            this.advanceLoanAmt.clientNo = res.data.result.applyVo.clientNo;
            this.clientNos = res.data.result.applyVo.clientNo;
            this.loanNos = res.data.result.applyVo.loanNo;
          }
          //借款信息
          if (res.data.result.loanVo == null) {
            this.loanVo = [];
          } else {
            this.loanVo = res.data.result.loanVo ? res.data.result.loanVo : '';
          }
          //借款信息放款信息
          this.loanModel = res.data.result.applyVo ? res.data.result.applyVo : '';
          //还款信息
          this.loanBackedData(res.data.result.applyVo.loanNo);
          /*if(res.data.result.backedVo == null){
            this.loanBackedList = [];
          }else {
            this.loanBackedList = res.data.result.backedVo ? res.data.result.backedVo : '';
          }*/
        }
        //操作信息
        this.clientDailyInfo(res.data.result.applyVo.clientNo);

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

    loanBackedData(record) {
      this.$$post('/back/detailPageList', {
        bizNo: record,
        size: this.page.size,
        current: this.page.current
      }).then(res => {
        if (res.data.code != 200) {
          // this.isShow = false;
          this.$message.error(res.data.message);
        } else {
          if (res.data.result == null) {
            this.loanBackedList = [];
          } else {
            this.loanBackedList = res.data.result.data ? res.data.result.data : '';
            this.page.total = res.data.result.total;
          }
        }
      }).catch(error => {
        this.$message.error(error || '网络异常，请稍后。。。');
      });
    },

    //  绑卡记录
    ownerBankBind(record) {
      this.ui.ownerBankBind = {
        visible: true,
        cardLogList: record.cardLogList,
      };

    },
    // 修改用户的反馈问题
    updateQueDialog(record) {
      this.ui.updateQueDialog = {
        visible: true,
        feedNo: record.feedNo,
        feedType: record.feedType,
        feedStatus: record.feedStatus,
        feedContent: record.feedContent,
        clientNo: record.clientNo,
        creater: record.creater,
        finishContent: record.finishContent,
      };
    },

    dateFormatText: function (param) {
      return moment(param).format("YYYY-MM-DD");
    },

    getDate(param, num) {
      if (param && param[num] !== '') {
        return moment(param[num]).format("YYYY-MM-DD")
      }
      return ""
    },

    //借款单状态
    loanStatusFormat: function (row, column) {
      let status = row['status'];
      return this.$enumUtils.toMsg('LoanStatuEnums', status);
    },

    capitalCodeFormat: function (row, column) {
      let capitalCode = row['capitalCode'];
      return this.$enumUtils.toMsg('CapitalEnums', capitalCode);
    },


    /*日期*/
    dateFormats: function (row, column) {
      let date = row[column.property]
      if (date == undefined) {
        return ''
      }
      return moment(date).format("YYYY-MM-DD")
    },

    mergeDate(param1, param2) {
      if (param1 == "") {
        return ""
      }
      let array = new Array();
      array[0] = new Date(param1)
      array[1] = new Date(param2)
      return array;
    },
    //参数
    buildParam(clientNo) {
      let return_hash = {
        size: this.pages.size,
        current: this.pages.current,
      };
      if (clientNo != '') {
        return_hash['clientNo'] = clientNo
      }
      return return_hash;
    },
    // 合并日期
    dateCompare: function (row, column) {
      let date = row[column.property]
      if (date == undefined) {
        return ''
      }
      return moment(date).format("YYYY-MM-DD ") + row.backedTime
    },

    /*日期*/
    dateFormat: function (row, column) {
      let date = row[column.property]
      if (date == undefined) {
        return ''
      }
      return moment(date).format("YYYY-MM-DD HH:mm:ss")
    },

    /*日期*/
    collectDateFormat: function (row, column) {
      let date = row.collectContact.created;
      if (date == undefined || date == null) {
        return ''
      }
      return moment(date).format("YYYY-MM-DD HH:mm:ss")
    },

    collectStatueFormat: function (row, column) {
      let status = row.collectContact.state;
      if (status == null || status == '' || status == undefined) {
        return ''
      }
      return this.$enumUtils.toMsg('CollectFeedStatue', status);
    },

    collectResultFormat: function (row, column) {
      let resultType = row.collectContact.resultType;
      if (resultType == null || resultType == '' || resultType == undefined) {
        return ''
      }
      return this.$enumUtils.toMsg('CollectFeedResult', resultType);
    },

    formatSeconds: function (row, column) {
      let callSeconds = row.collectContact.callSeconds;
      if (callSeconds == null || callSeconds == '' || callSeconds == undefined) {
        return ''
      }
      let theTime = parseInt(callSeconds);// 秒
      let middle = 0;// 分
      let hour = 0;// 小时

      if (theTime > 60) {
        middle = parseInt(theTime / 60);
        theTime = parseInt(theTime % 60);
        if (middle > 60) {
          hour = parseInt(middle / 60);
          middle = parseInt(middle % 60);
        }
      }
      let result = "" + parseInt(theTime) + "秒";
      if (middle > 0) {
        result = "" + parseInt(middle) + "分" + result;
      }
      if (hour > 0) {
        result = "" + parseInt(hour) + "小时" + result;
      }
      return result;
    },

    // 计算已还金额
    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)
    },
    // 银行信息拼接
    cardBankFormat: function (row, column) {
      return row.cardBankAccount + "(" + row.cardBankName + ")";
    },
    // 还款结果
    resultBankFormat: function (row, column) {
      return row.resultStr + "(" + row.confirmDesc + ")";
    },
    // 合同金额

    // 计算小数
    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
    },

    //客服状态
    serviceFormat: function (row, column) {
      let status = row['feedStatus'];
      return this.$enumUtils.toMsg('FeedStatus', status);
    },

    /** 处理分页操作*/
    handleCurrentChange() {
      this.loanBackedList = this.loanBackedData(this.loanNos);
    },

    handleSizeChange(row) {
      this.page.size = row
      this.page.current = 1;
      this.loanBackedData(this.loanNos);
    },

    /** 处理分页操作*/
    handleCurrentChangeClient() {
      this.loanLogCustom = this.clientDailyInfo(this.clientNos);
    },

    handleSizeChangeClient(row) {
      this.pages.size = row
      this.pages.current = 1;
      this.clientDailyInfo(this.clientNos);
    },

    /** 客服反馈处理分页操作*/
    customerHandleCurrentChange() {
      this.customerFeedList = this.customerInfo(this.clientCells);
    },
    customerHandleSizeChange(row) {
      this.customerPage.size = row
      this.customerPage.current = 1;
      this.customerInfo(this.clientCells);
    },


    /** 客户催收处理分页操作*/
    collectHandleCurrentChange() {
      this.collectFeedList = this.collectInfo(this.clientCells);
    },
    collectHandleSizeChange(row) {
      this.collectPage.size = row
      this.collectPage.current = 1;
      this.collectInfo(this.clientCells);
    },

    //结果状态
    resultFormat: function (row, column) {
      let result = row['result'];
      if (result != null) {
        return this.$enumUtils.toMsg('SuccessAndFail', result);
      } else {
        return '未处理';
      }
    },
  }
}


</script>

<style scoped>

</style>
