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

    <!--选项卡-->
    <div class="box">
      <el-tabs v-model="activeComponents" type="card" @tab-click="handleTabClick">
        <el-tab-pane name="BaseInfo" label="基本信息"></el-tab-pane>
        <el-tab-pane name="RiskInfo" label="风险等级"></el-tab-pane>
        <el-tab-pane name="LoanInfo" label="借款信息"></el-tab-pane>
        <el-tab-pane name="FeedList" label="反馈记录"></el-tab-pane>
        <el-tab-pane name="UrgeList" label="催收记录"></el-tab-pane>
        <el-tab-pane name="OperateLog" label="操作日志"></el-tab-pane>
        <el-tab-pane name="Messages" label="短信信息"></el-tab-pane>
      </el-tabs>
      <div class="box-right">

      </div>
    </div>

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

      <!--修改窗口-->
      <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>

    </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 BaseInfo from "./componments/BaseInfo";
import LoanInfo from "./componments/LoanInfo";
import RiskInfo from "./componments/RiskInfo";
import FeedList from "./componments/FeedList";
import UrgeList from "./componments/UrgeList";
import OperateLog from "./componments/OperateLog";

import AddQuestion from "./componments/AddQuestion";
import updateQueDialog from "./componments/UpdateQueDialog";
import Messages from "./componments/Messages";


export default {
  name: "ByhLoanBackedList",
  components: {
    BaseInfo,
    LoanInfo,
    RiskInfo,
    FeedList,
    UrgeList,
    OperateLog,
    Messages,
    AddQuestion,
    updateQueDialog
  },
  data() {
    return {
      visible: false,
      activeComponents: "BaseInfo",
      title: "基本信息",
      params: {},
      firstLoanNo: '',
      loan: {},
      query: {},
      basicInfo: {},
      clientNos: "",
      clientProducts: "",
      clientCells: "",


      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: '',
      },
    }
  },
  async created() {
    // console.log(this.$route.query,'上一页');
    const {
      clientNo,
      clientProductName,
      phoneNo,
      loanNo
    } = this.$route.query;
    this.query = this.$route.query

    if (clientNo && clientProductName && phoneNo) {
      this.clientNos = clientNo;
      this.clientProducts = clientProductName;
      this.clientCells = phoneNo;

      // 初始化客户信息
      await this.initUserInfo(phoneNo, clientNo, clientProductName);

    }
  },
  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
        }
      })
    },

    // 初始化用户详情
    async initUserInfo(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;

        // 手动点击第一个Tab
        this.handleTabClick({
          name: "BaseInfo",
          label: "基础信息"
        })
      }
    },

    //根据借款信息查借款所有信息
    async initLoanInfo(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;
        }

        //借款信息
        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 ""
    },



    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
    },


    /*日期*/
    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);
    },

    //结果状态
    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
      };
    },

    // 切换选项卡
    handleTabClick(tab) {
      this.activeComponents = tab.name;
      this.visible = true;
      this.title = tab.label;
      this.params = {
        ...this.loan,
        ...this.loanModel,
        ...this.basicInfo,
        ...this.$route.query,
        basicInfo: this.basicInfo,
        firstLoanNo: this.firstLoanNo
      };
    }
  }
}


</script>

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

  .box{
    position: relative;
    .box-right{
      position: absolute;
      right: 0;
      top:5px;
    }
  }
}


</style>
