<template>
  <div class="wrapper">
    <div class="box">
      <img
        src="@/assets/insurance/endowment_insurance.png"
        class="icon"
        @click="jump('110')"
      />
      <p class="title">养老保险</p>
    </div>
    <div class="box">
      <img
        src="@/assets/insurance/medical_insurance.png"
        class="icon"
        @click="jump('310')"
      />
      <p class="title">医疗保险</p>
    </div>
    <div class="box">
      <img
        src="@/assets/insurance/injury_insurance.png"
        class="icon"
        @click="jump('410')"
      />
      <p class="title">工伤保险</p>
    </div>
    <div class="box">
      <img
        src="@/assets/insurance/unemployment_insurance.png"
        class="icon"
        @click="jump('210')"
      />
      <p class="title">失业保险</p>
    </div>
    <div class="box">
      <img
        src="@/assets/insurance/maternity_insurance.png"
        class="icon"
        @click="jump('510')"
      />
      <p class="title">生育保险</p>
    </div>
    <div class="box">
      <img src="@/assets/insurance/insured_info.png" class="icon" @click="jumpinfo" />
      <p class="title">参保信息</p>
    </div>
    <div class="box">
      <img src="@/assets/insurance/insurance_card.png" class="icon" @click="jumpcard" />
      <p class="title">社保卡信息</p>
    </div>
    <div class="box">
      <img src="@/assets/insurance/fund_comein_icon.png" class="icon" @click="jumpfund" />
      <p class="title">养老收支查询</p>
    </div>
    <div class="box">
      <img
        src="@/assets/insurance/personal_info_icon.png"
        class="icon"
        @click="jumpPersonalInfo"
      />
      <p class="title">个人档案查询</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      idCard: null,
      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",
        // };
        // 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) {
        this.$router.push({
          name: "InsuranceDetail",
          query: { type },
        });
      } else {
        this.$toast("请进入“我的”完成实名认证！");
      }
    },
    // 跳转参保信息
    jumpinfo() {
      if (this.userInfo.idCardNo) {
        this.$router.push({ name: "InsuranceInfo" });
      } else {
        this.$toast("请进入“我的”完成实名认证！");
      }
    },
    // 跳转社保卡信息
    jumpcard() {
      if (this.userInfo.idCardNo) {
        this.$router.push({ name: "InsuranceCard" });
      } else {
        this.$toast("请进入“我的”完成实名认证！");
      }
    },
    // 养老收支查询
    jumpfund() {
      if (this.userInfo.idCardNo) {
        this.$router.push({ name: "InsuranceBudget" });
      } else {
        this.$toast("请进入“我的”完成实名认证！");
      }
    },
    jumpPersonalInfo() {
      if (this.userInfo.idCardNo) {
        this.$router.push({ name: "InsurancePersonal" });
      } else {
        this.$toast("请进入“我的”完成实名认证！");
      }
    },
  },
  mounted() {
    window.getUserInfo = this.getUserInfo;
  },
  created() {
    let res = sessionStorage.getItem("ZJCD-UserInfo");
    console.log('res---',res);
    this.userInfo = JSON.parse(res) || {};
    if (!this.userInfo.idCardNo) {
      console.log(1);
      this.JSBgetUserInfo();
    } else {
      console.log(2);
      
      this.verify(res);
    }
  },
};
</script>

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

  .box {
    width 25%;
    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>
