<template>
  <div class="wrapper">
    <div class="box">
      <img src="@/assets/fund/fund1.png" class="icon" @click="jump('1')" />
      <p class="title">公积金缴纳信息</p>
    </div>
    <div class="box">
      <img src="@/assets/fund/fund2.png" class="icon" @click="jump('2')" />
      <p class="title">公积金缴纳明细</p>
    </div>
    <div class="box">
      <img src="@/assets/fund/fund3.png" class="icon" @click="jump('3')" />
      <p class="title">公积金贷款信息</p>
    </div>
    <div class="box">
      <img src="@/assets/fund/fund4.png" class="icon" @click="jump('4')" />
      <p class="title">公积金贷款还款明细</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userInfo: {},
    };
  },
  methods: {
    back() {
      if (window.android !== undefined) {
        window.android.backHome();
      } else {
        window.webkit && window.webkit.messageHandlers.backHome.postMessage("");
      }
    },
    JSBgetUserInfo() {
      if (window.android !== undefined) {
        const res = window.android.getUserInfo();
        this.verify(res);
      } else if (window.webkit) {
        window.webkit &&
          window.webkit.messageHandlers.getUserInfo.postMessage("getUserInfo");
      } else {
        this.$toast("请先登录镇合意app");
        // let userInfo = {
        //   mobileNo: 17372670270,
        //   userId: 37393,
        //   userName: "孙辉",
        //   realName: "孙涵",
        //   // idCardNo: "K6btm7WPGZj8eLFjTy1a1+P7Z0zFoM/r",
        //   idCardNo: "a/c2v64lTy9MC0QgqjzJxjOp0yG+B96Q",
        // };
        // this.verify(JSON.stringify(userInfo));
      }
    },
    getUserInfo(res) {
      this.verify(res);
    },
    verify(res) {
      sessionStorage.setItem("ZJCD-UserInfo", res);
      let userInfo = JSON.parse(res);
      if (!userInfo.idCardNo) {
        this.$dialog
          .confirm({
            message: "请进入“我的”完成实名认证！",
            showCancelButton: false,
          })
          .then(() => {
            this.back();
          });
        return;
      }
      this.userInfo = userInfo;
    },
    jump(type) {
      if (this.userInfo.idCardNo) {
        if (type === "1") {
          this.$router.push({
            name: "FundCard",
          });
        } else if (type === "2") {
          this.$router.push({
            name: "FundPayment",
          });
        } else if (type === "3") {
          this.$router.push({
            name: "FundLoanInfo",
          });
        } else if (type === "4") {
          this.$router.push({
            name: "FundLoanDetail",
          });
        }
      } else {
        this.$toast("请进入“我的”完成实名认证！");
      }
    },
  },
  mounted() {
    window.getUserInfo = this.getUserInfo;
  },
  created() {
    let res = sessionStorage.getItem("ZJCD-UserInfo");
    this.userInfo = JSON.parse(res) || {};
    if (!this.userInfo.idCardNo) {
      this.$dialog
        .confirm({
          message:
            "该模块数据由镇江市公积金中心提供，您需要授权APP使用个人信息查询公积金余额等信息。",
        })
        .then(() => {
          this.JSBgetUserInfo();
        })
        .catch(() => {
          this.back();
        });
    }
  },
};
</script>

<style lang="stylus" scoped>
.wrapper {
  padding 20px 30px;
  display: flex;
  flex-wrap: wrap;
  background-color: #FFF;

  .box {
    width 33%;
    height 160px;
    display flex;
    flex-direction column
    align-items center;
    justify-content center

    .icon {
      width 80px;
      height 80px
    }

    .title {
      font-size: 24px;
      margin-top: 16px;
      color: #333333;
    }
  }
}
</style>
