<template>
  <div class="page-dialog">
    <block-header title="借款记录"></block-header>
    <div class="block-box">
      <el-table
          border
          size="mini"
          :highlight-current-row="true"
          :header-row-class-name="headerStyle"
          :data="data" stripe style="width: 100%;">
        <el-table-column align="center" width="140" prop="loanNo" label="借款编号"></el-table-column>
        <el-table-column align="center" prop="gmtCreated" label="申请日期" :formatter="dateFormats"></el-table-column>
        <el-table-column align="center" prop="startDate" label="放款日期" :formatter="dateFormats"></el-table-column>
        <el-table-column align="center" prop="raiseAmt" label="放款本金"></el-table-column>
        <el-table-column align="center" prop="capitalCodeStr" label="放款资方"
                        ></el-table-column>
        <el-table-column align="center" prop="status" label="借款单状态">
          <template slot-scope="scope">
            <el-tag type="success" v-if="scope.row.status==='AUDITED'" size="small">{{ loanStatusFormat(scope.row) }}
            </el-tag>
            <el-tag v-else-if="scope.row.status==='SETTLED'" size="small">{{ loanStatusFormat(scope.row) }}</el-tag>
            <el-tag type="danger" v-else-if="scope.row.status==='OVERDUED'" size="small">
              {{ loanStatusFormat(scope.row) }}
            </el-tag>
            <el-tag type="warning" v-else-if="scope.row.status==='SUBMITED'" size="small">
              {{ loanStatusFormat(scope.row) }}
            </el-tag>
            <el-tag type="warning" v-else-if="scope.row.status==='BACKING'" size="small">
              {{ loanStatusFormat(scope.row) }}
            </el-tag>
            <el-tag type="info" v-else size="small">{{ loanStatusFormat(scope.row) }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="cancelMemo" label="备注"></el-table-column>
        <el-table-column align="center" label="查看详情">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleClick(scope.row)">详情</el-button>
            <template v-if="scope.row.status==='SETTLED' && scope.row.capitalCode !== 'OWNBUSINESS'">
              <el-button type="text" size="small" @click="handleShow(scope.row,'SettleReport','结清报告')">结清报告
              </el-button>
            </template>
            <template v-if="scope.row.status==='SETTLED' && scope.row.capitalCode == 'OWNBUSINESS'&&zyItem">
              <el-button type="text" size="small" @click="handleShow(scope.row,'GenerateSettleReport','结清报告')">结清报告
              </el-button>
            </template>
          </template>
        </el-table-column>
      </el-table>
    </div>


    <!--借款详情-->
    <template v-if="visible">
      <loan-detail
          @handleClose="visible=false"
          :title="title"
          :params="items"
          :dialogVisible="visible"/>
    </template>

    <!--  那啥-->
    <template v-if="mcDialogVisible">
      <component
          @handleClose="mcDialogVisible = false"
          :is="ActiveCom"
          :title="mcTitle"
          :params="mcItems"
          :visible="mcDialogVisible"/>
    </template>
  </div>
</template>

<script>
import LoanDetail from "./LoanDetail";
import SettleReport from "./SettleReport";
import GenerateSettleReport from './GenerateSettleReport.vue';
import * as moment from "moment";

export default {
  name: 'AddUserServiceDialog',
  components: {
    LoanDetail,
    SettleReport,
    GenerateSettleReport
  },
  props: {
    params: {
      type: Object,
      required: true
    },
  },
  data() {
    return {
      visible: false,
      activeComponents: "BaseInfo",
      title: "基本信息",
      items: {},
      mcDialogVisible: false,
      mcItems: null,
      mcTitle: "",
      ActiveCom: "",
      zyItem:"",
      data: []
    }
  },
  async created() {
    // console.log(localStorage.getItem('btnUrl'), 999888888);
    const btnUrl=localStorage.getItem('btnUrl');
    if(btnUrl){
      this.zyItem=btnUrl
    }else{
      this.zyItem=null
    }
    console.log(this.zyItem,'bynurl');
    const {clientNo, clientProductName} = this.params;
    const res = await this.$$post('/loan/getLoanListByClientNo/', {productName: clientProductName, clientNo: clientNo});
    const {success, result} = res.data;
    if (success && result !== null) {
      this.data = result;
    }
  },
  methods: {
    headerStyle() {
      return "tableHeaderStyle";
    },
    /*日期*/
    dateFormats: function (row, column) {
      let date = row[column.property]
      if (date === undefined) return '';
      return moment(date).format("YYYY-MM-DD")
    },
    //借款单状态
    loanStatusFormat: function (row) {
      let status = row['status'];
      return this.$enumUtils.toMsg('LoanStatuEnums', status);
    },
    capitalCodeFormat: function (row, column) {
      let capitalCodeStr = row['capitalCodeStr'];
      return this.$enumUtils.toMsg('CapitalEnums', capitalCodeStr);
    },
    // 切换选项卡
    handleClick(row) {
      // console.log(row, '一行信息');
      this.visible = true;
      this.title = '借款详情';
      this.items = {
        ...this.params,
        ...row
      };
    },
    handleShow(row, com, title) {
      console.log(row,com,title, '当前行')
      this.mcDialogVisible = true;
      this.mcItems = {
        ...this.params,
        ...row
      };
      console.log(this.params,'什么鬼');
      console.log(this.mcItems,'mmmcccc');
      this.mcTitle = title;
      this.ActiveCom = com;
    }
  }
}
</script>

<style>

</style>
