<template>
  <div>
    <div class="card" v-for="(item, index) in detail" :key="index">
      <div class="cell">
        <p class="label">借款人公积金账号</p>
        <p class="text">{{ item.spcode }}</p>
      </div>
      <div class="cell">
        <p class="label">借款人姓名</p>
        <p class="text">{{ item.spname }}</p>
      </div>
      <div class="cell">
        <p class="label">借款人身份证</p>
        <p class="text">{{ item.spidno }}</p>
      </div>
      <div class="cell">
        <p class="label">借款合同编号</p>
        <p class="text">{{ item.htbh }}</p>
      </div>
      <div class="cell">
        <p class="label">贷款发放额</p>
        <p class="text">{{ item.jkje }}</p>
      </div>
      <div class="cell">
        <p class="label">贷款发放日期</p>
        <p class="text">{{ item.fdrq }}</p>
      </div>
      <div class="cell">
        <p class="label">月还额</p>
        <p class="text">{{ item.yhje }}</p>
      </div>
      <div class="cell">
        <p class="label">已还年月</p>
        <p class="text">{{ item.yhym }}</p>
      </div>
      <div class="cell">
        <p class="label">借款合同利率</p>
        <p class="text">{{ item.jkyll }}</p>
      </div>
      <div class="cell">
        <p class="label">贷款期数</p>
        <p class="text">{{ item.jkqx }}</p>
      </div>
      <div class="cell">
        <p class="label">贷款状态</p>
        <p class="text">{{ item.htzt }}</p>
      </div>
      <div class="cell">
        <p class="label">还款账号</p>
        <p class="text">{{ item.hkzh }}</p>
      </div>
      <div class="cell">
        <p class="label">申请编号</p>
        <p class="text">{{ item.sqbh }}</p>
      </div>
    </div>
    <no-data v-if="nodata" text="您当前还没有公积金贷款信息"></no-data>
  </div>
</template>

<script>
import { getAccount, loanInfo } from "@/api/fund";
import NoData from "@/components/NoData";
import { encryptByDES } from "@/utils/utils";

export default {
  components: { NoData },
  data() {
    return {
      spcode: null,
      nodata: false,
      detail: [],
    };
  },
  methods: {
    initAccount(idCard) {
      this.$toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        message: "加载中...",
      });
      getAccount({ idCard }).then((res) => {
        this.spcode = res.spcode;
        if (this.spcode) {
          this.init();
        } else {
          this.nodata = true;
          this.$toast("您当前还没有公积金贷款信息");
        }
      });
    },
    init() {
      const spcode = encryptByDES(this.spcode, "MnuYbhGv");
      loanInfo({ spcode }).then((res) => {
        this.$toast.clear();
        if (res.data.total > 0) {
          this.detail = res.data.list.acc_info;
        } else {
          this.detail = [];
          this.nodata = true;
        }
      });
    },
  },
  created() {
    let res = sessionStorage.getItem("ZJCD-UserInfo");
    let idCard = JSON.parse(res).idCardNo;
    if (idCard) {
      this.initAccount(idCard);
    }
  },
};
</script>

<style lang="stylus" scoped>
.card {
  margin: 20px 10px;
  background #fff
  border-radius: 5px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 4px 10px 0 rgba(0, 0, 0, 0.19);

  .cell {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    margin: 0 20px;
    border-bottom: 1px solid #eee;
    .label {
      width: 35%;
      font-size: 24px;
      color: #333333;
    }
    .text {
      width: 62%;
      font-size: 24px;
      color: #333333;
    }
  }
  .cell:last-child {
    border-bottom: 0;
  }
}
</style>
