<template>
  <el-dialog
      width="70%"
      class="client-data-dialog"
      :title="title"
      :visible.sync="dialogVisible"
      :before-close="handleClose">

    <div class="page-dialog">
      <!--<block-header :title="title"></block-header>-->
      <table class="table">
        <tr>
          <td>申请日期:</td>
          <td>{{ loanModel.gmtCreated | dateFilter }}</td>
          <td>放款日期:</td>
          <td>{{ loanModel.raiseDate | dateFilter }}</td>
          <td>项目名称:</td>
          <td>{{ loanModel.bizTypeStr }}</td>
        </tr>
        <tr>
          <td>总应还金额:</td>
          <td>{{ loanModel.loanAmt }}</td>
          <td>申请期数:</td>
          <td>{{ loanModel.loanLimit }}</td>
          <td>
            <span v-if="loanModel.cardBankAccount">放款银行卡（所属银行）:</span>
            <span v-else>放款银行卡（所属银行）</span>
          </td>
          <td>
            <span v-if="loanModel.cardBankAccount">{{ loanModel.cardBankAccount }}（{{
                loanModel.cardBankCodeStr
              }}）</span>
            <span v-else>{{ loanModel.bankAccount }}</span>
          </td>
        </tr>
        <tr>
          <td>本金:</td>
          <td>{{ loanModel.raiseAmt }}</td>
          <td>总服务费:</td>
          <td>{{ loanModel.serviceAmt }}</td>
          <td>总利息:</td>
          <td>{{ loanModel.rateAmt }}</td>
        </tr>
        <tr>
          <td>总手续费:</td>
          <td colspan="5">{{ loanModel.accountAmt }}</td>
        </tr>
      </table>
    </div>

  </el-dialog>
</template>

<script>
import BlockHeader from "@/components/byh/componments/blockHeader";
import * as moment from "moment";

export default {
  name: 'AddUserServiceDialog',
  components: {
    BlockHeader
  },
  props: {
    dialogVisible: {
      type: Boolean,
      required: true,
    },
    title: {
      type: String,
      required: true,
    },
    params: {
      type: Object,
      required: true
    },
  },
  data() {
    return {
      loanModel: {}
    }
  },
  filters: {
    dateFilter: function (row) {
      const exp = row;
      if (!exp || typeof (exp) === undefined || typeof (exp) === null) {
        return ''
      }
      return moment(exp).format("YYYY-MM-DD")
    },
  },
  async created() {
    const {loanNo} = this.params;
    await this.init(loanNo)
  },
  methods: {
    headerStyle() {
      return "tableHeaderStyle";
    },
    async init(loanNo) {
      const res = await this.$$get('/detail/customer/' + loanNo)
      const {success, result} = res.data
      if (success && result != null) {
        const {applyVo} = result;
        this.loanModel = applyVo
      }
    },

    handleClose() {
      this.$emit("handleClose");
    }
  }
}
</script>

<style>

</style>
