<template>
  <div class="page-user-detail">
    <el-page-header style="margin-bottom: 20px" @back="goBack" content="客户详情"/>

    <!--操作按钮-->
    <div class="block-box">
      <el-button-group>
        <el-button size="mini" type="primary" @click="handleClick('AddQuestion','新增反馈记录')">新增反馈记录</el-button>
        <el-button size="mini" type="primary" @click="handleClick('LoanInfo','借款信息')">借款信息</el-button>
        <el-button size="mini" type="primary" @click="handleClick('ApplyInfo','申请信息')">申请信息</el-button>
        <el-button size="mini" v-if="$permissionUtils.rolePermission('customBoss')" type="primary"
                   @click="handleClick('ContractList','合同列表')">借款合同
        </el-button>
        <el-button size="mini" type="primary" @click="handleClick('BillList','账单详情')">账单详情</el-button>
        <el-button size="mini" type="primary" @click="handleClick('RePayList','还款情况')">还款情况</el-button>
        <el-button size="mini" type="primary" @click="handleClick('FeedList','反馈记录')">反馈记录</el-button>
        <el-button size="mini" type="primary" @click="handleClick('UrgeList','催收记录')">催收记录</el-button>
        <el-button size="mini" type="primary" @click="handleClick('OperateLog','操作日志')">操作日志</el-button>
        <el-button size="mini" type="primary" @click="handleClick('RiskInfo','风险等级')">风险等级</el-button>
      </el-button-group>
    </div>

    <block-header title="基本信息"/>
    <div class="block-box">
      <table class="table">
        <tr>
          <td>姓名:</td>
          <td>{{ basicInfo.name }}</td>
          <td>身份证号:</td>
          <td>{{ basicInfo.idCard }}</td>
          <td>手机号:</td>
          <td>{{ basicInfo.phone }}</td>
        </tr>
        <tr>
          <td>实名认证:</td>
          <td>
            <el-tag size="mini" type="danger" v-if="basicInfo.isIdentity==='未认证'"> {{ basicInfo.isIdentity }}</el-tag>
            <el-tag size="mini" type="success" v-else> {{ basicInfo.isIdentity }}</el-tag>
          </td>
          <td>基础信息认证:</td>
          <td>
            <el-tag size="mini" type="danger" v-if="basicInfo.isIdentity==='未认证'"> {{ basicInfo.isBasicInfo }}</el-tag>
            <el-tag size="mini" type="success" v-else> {{ basicInfo.isBasicInfo }}</el-tag>
          </td>
          <td>活体认证:</td>
          <td>
            <el-tag size="mini" type="danger" v-if="basicInfo.isIdentity==='未认证'"> {{ basicInfo.isFace }}</el-tag>
            <el-tag size="mini" type="success" v-else> {{ basicInfo.isFace }}</el-tag>
          </td>
        </tr>
        <tr>
          <td>客户单位名称:</td>
          <td>{{ basicInfo.companyName }}</td>
          <td>客户单位地址:</td>
          <td>{{ basicInfo.companyAddress }}</td>
          <td>住宅地址:</td>
          <td>{{ basicInfo.houseAddress }}</td>
        </tr>
        <tr>
          <td>第一联系人姓名:</td>
          <td>{{ basicInfo.firstName }}</td>
          <td>第一联系人电话:</td>
          <td colspan="3">{{ basicInfo.firstPhone }}</td>
        </tr>
      </table>
    </div>
    <block-header title="银行卡列表"/>
    <div class="block-box">
      <el-table
          :header-row-class-name="headerStyle"
          :highlight-current-row="true"
          border
          size="small"
          :data="ownerBank"
          stripe style="width: 100%;">
        <el-table-column align="center" prop="bankAccount" label="银行卡号"></el-table-column>
        <el-table-column align="center" prop="openBankName" label="银行名称"></el-table-column>
        <el-table-column align="center" prop="ownerName" label="姓名"></el-table-column>
        <el-table-column align="center" prop="payChannelApi" label="渠道名称"></el-table-column>
        <el-table-column align="center" prop="gmtCreated" label="绑定时间" :formatter="dateFormat"></el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="ownerBankBind(scope.row)">绑卡记录</el-button>
          </template>
        </el-table-column>
      </el-table>
    </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>

    <!--  弹框组件-->
    <template v-if="visible">
      <component
          @handleClose="visible = false"
          :is="activeComponents"
          :dialogVisible="visible"
          :params="params"
          :title="title"/>
    </template>

  </div>
</template>

<script>
import * as moment from "moment";
import AddQuestion from "./componments/AddQuestion";
import LoanInfo from "./componments/LoanInfo";
import ApplyInfo from "./componments/ApplyInfo";
import RiskInfo from "./componments/RiskInfo";
import ContractList from "./componments/ContractList";
import FeedList from "./componments/FeedList";
import UrgeList from "./componments/UrgeList";
import OperateLog from "./componments/OperateLog";
import RePayList from "./componments/RePayList";
import BillList from "./componments/BillList";


import advanceLoanAmt from "./componments/AdvanceLoanAmt";


import protocolSettled from "./componments/ProtocolSettled";
import updateQueDialog from "./componments/UpdateQueDialog";
import readDetail from "./componments/readDetail";
import offineTransfer from "./componments/offineTransfer";
import protocolSettledOne from "./componments/ProtocolSettledOne";
import ownerBankBind from "./componments/OwnerBankBind";
import clone from "../../mixins/clone";
import BlockHeader from "@/components/byh/componments/blockHeader";

export default {
  name: "ByhLoanBackedList",
  components: {
    BlockHeader,
    AddQuestion,
    LoanInfo,
    ApplyInfo,
    RiskInfo,
    ContractList,
    FeedList,
    UrgeList,
    OperateLog,
    RePayList,
    BillList,

    advanceLoanAmt,
    protocolSettled,
    protocolSettledOne,
    updateQueDialog,
    readDetail,
    offineTransfer,
    ownerBankBind,
  },
  data() {
    return {
      visible: false,
      activeComponents: "",
      title: "",
      params: {},
      firstLoanNo: '',
      loan:{},

      tableStatus: [{text: '成功', value: "SUCCESS"}, {text: '失败', value: "FAIL"}],
      backValue: null,
      flag: false,
      isShow: true,
      isNeedAudit: true,
      activeNames: [],
      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: '',
      }],
      contractList: [{
        contractName: '',
        contractUrl: '',
      }],

      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: '',
      },
    }
  },
  created() {
    this.clientNos = this.$route.query.clientNo;
    this.clientProducts = this.$route.query.clientProductName;
    this.clientCells = this.$route.query.phoneNo;

    // 初始化客户信息
    this.loanDetail(this.$route.query.phoneNo, this.$route.query.clientNo, this.$route.query.clientProductName);

    // 初始化借款信息
    this.addLoanDetail(this.$route.query.loanNo);
  },
  methods: {
    headerStyle() {
      return "tableHeaderStyle";
    },
    // 反馈弹窗
    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
        }
      })
    },

    // 初始化详情
    async loanDetail(phoneNo, clientNo, clientProductName) {
      let urlStr = 'clientNo=' + clientNo + '&productName=' + clientProductName;
      // 个人信息
      const res = await this.$$get('/detail/clientDetailInfo?' + urlStr);
      const {success, result} = res.data;
      if (success && result !== null) {
        const {cardList} = result;
        this.basicInfo = result;
        if (cardList) this.ownerBank = cardList;
      }
    },

    //根据借款信息查借款所有信息
    async addLoanDetail(record) {
      this.isNeedAudit = true;
      const res = await this.$$get('/detail/customer/' + record);
      const {success, result} = res.data;
      if (success && result !== null) {
        this.loan = result;

        //打开借款的面板
        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;

          console.log(this.loanNos,'沃日')
        }

        //借款信息
        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.firstLoanNo = result.applyVo.loanNo;
      }
    },


    //绑卡记录
    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);
    },


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

    //  显示组件
    handleClick(com, title) {
      this.visible = true;
      this.activeComponents = com;
      this.title = title;
      this.params = {
        ...this.loan,
        ...this.loanModel,
        ...this.basicInfo,
        ...this.$route.query,
        firstLoanNo: this.firstLoanNo
      };
    }
  }
}


</script>

<style lang="less">
.page-user-detail {
  .block-box {
    margin-bottom: 15px;
  }

  .table {
    width: 100%;
    color: #666;
    border-collapse: collapse;
    background-color: #fff;

    td {
      position: relative;
      padding: 9px 15px;
      overflow: hidden;
      font-size: 14px;
      line-height: 20px;
      text-overflow: ellipsis;
      white-space: nowrap;
      border: 1px solid #e6e6e6;

      &:nth-child(odd) {
        width: 15%;
        text-align: right;
        background-color: #f7f7f7;
      }
    }
  }
}


</style>
