<template>
  <div>
    <div class="card" v-for="(item, index) in detail" :key="index">
      <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.spcode }}</p>
      </div>
      <div class="cell">
        <p class="label">证件类型</p>
        <p class="text">{{ item.zjlxname }}</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.spkhrq }}</p>
      </div>
      <div class="cell">
        <p class="label">缴存年月</p>
        <p class="text">{{ item.zghjny }}</p>
      </div>
      <div class="cell">
        <p class="label">缴存基数</p>
        <p class="text">{{ item.spgz }}</p>
      </div>
      <div class="cell">
        <p class="label">缴存比例</p>
        <p class="text">{{ item.spsingl }}</p>
      </div>
      <div class="cell">
        <p class="label">公积金月缴存额</p>
        <p class="text">{{ item.spmfact }}</p>
      </div>
      <div class="cell">
        <p class="label">缴存单位名称</p>
        <p class="text">{{ item.snname }}</p>
      </div>
      <div class="cell">
        <p class="label">征缴状态</p>
        <p class="text">{{ item.hjstatus }}</p>
      </div>
      <div class="cell">
        <p class="label">汇缴年月</p>
        <p class="text">{{ item.spjym }}</p>
      </div>
      <div class="cell">
        <p class="label">余额</p>
        <p class="text">{{ item.spmend }}</p>
      </div>
    </div>
    <no-data v-if="nodata" text="您当前还没有公积金缴纳信息"></no-data>
  </div>
</template>

<script>
import { fundInfo } from "@/api/fund";
import NoData from "@/components/NoData";
export default {
  components: { NoData },
  data() {
    return {
      idCard: null,
      nodata: false,
      detail: [],
    };
  },
  methods: {
    init() {
      this.$toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        message: "加载中...",
      });
      fundInfo({ spidno: this.idCard })
        .then((res) => {
          this.$toast.clear();
          if (res.data.total > 0) {
            this.detail = res.data.list.acc_info;
          } else {
            this.detail = [];
            this.nodata = true;
          }
        })
        .catch((err) => {
          console.log(err);
          this.nodata = true;
        });
    },
  },
  created() {
    let res = sessionStorage.getItem("ZJCD-UserInfo");
    this.idCard = JSON.parse(res).idCardNo;
    if (this.idCard) {
      this.init();
    }
  },
};
</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>
