<template>
  <div class="home">
    <!-- <nav-header title="冷链食品申报管理" @back="back" /> -->
    <div class="main">
      <div
        class="card"
        v-for="(item, index) in menus"
        :key="index"
        @click="jump(item.path, item.type)"
      >
        <div class="info">
          <img
            :src="item.imgUrl"
            alt=""
          />
          <div>
            <p class="name">{{ item.name }}</p>
            <p class="tips">{{ item.tips }}</p>
          </div>
        </div>
        <img
          class="icon"
          src="@/assets/common/enter_icon.png"
          alt=""
        />
      </div>
    </div>
  </div>
</template>

<script>
// import NavHeader from "@/components/NavHeader";

export default {
  components: {
    // NavHeader
  },
  data() {
    return {
      menus: [
        {
          imgUrl: require("@/assets/coldfood/inandout_icon.png"),
          name: "出入库管理",
          tips: "仓库管理系统",
          path: "Password",
          type: 1,
        },
        {
          imgUrl: require("@/assets/coldfood/check_icon.png"),
          name: "核酸检测管理",
          tips: "核酸检测管理",
          path: "Password",
          type: 4,
        },
        {
          imgUrl: require("@/assets/coldfood/disinfect_icon.png"),
          name: "消杀管理",
          tips: "消杀管理",
          path: "Password",
          type: 7,
        },
        {
          imgUrl: require("@/assets/coldfood/destroy_icon.png"),
          name: "灭活管理",
          tips: "灭活管理",
          path: "Password",
          type: 8,
        },
      ],
      userInfo: {},
    };
  },
  methods: {
    back() {
      if (window.android !== undefined) {
        window.android.backHome();
      } else {
        window.webkit && window.webkit.messageHandlers.backHome.postMessage("");
      }
    },
    jump(name, type) {
      if (!this.userInfo.idCardNo) {
        this.$dialog
          .confirm({
            message: "请进入“我的”完成实名认证！",
            showCancelButton: false,
          })
          .then(() => {
            this.back();
          });
        return;
      }
      this.$router.push({ name, query: { type } });
    },
    JSBgetUserInfo() {
      if (window.android !== undefined) {
        const res = window.android.getUserInfo(); // 这是一个json字符串
        sessionStorage.setItem("ZJCD-UserInfo", res);
        this.userInfo = JSON.parse(res);
        sessionStorage.setItem("token", this.userInfo.token);
      } else if (window.webkit) {
        window.webkit &&
          window.webkit.messageHandlers.getUserInfo.postMessage("getUserInfo");
      } else {
        this.$toast("请先登录镇合意app");
        // this.userInfo = {
        //   mobileNo: 17372670270,
        //   userId: 37393,
        //   userName: "孙辉",
        //   realName: "孙涵",
        //   idCardNo: "a/c2v64lTy9MC0QgqjzJxjOp0yG+B96Q",
        // };
        // sessionStorage.setItem("ZJCD-UserInfo", JSON.stringify(this.userInfo));
      }
    },
    getUserInfo(res) {
      sessionStorage.setItem("ZJCD-UserInfo", res);
      this.userInfo = JSON.parse(res);
      sessionStorage.setItem("token", this.userInfo.token);
    },
  },
  mounted() {
    window.getUserInfo = this.getUserInfo;
  },
  created() {
    this.JSBgetUserInfo();
  },
};
</script>

<style lang="stylus" scoped>
.home {
  .main {
    height: 100vh;
    overflow-y: auto;

    .card {
      height: 160px;
      margin: 30px;
      padding: 0 20px 0 40px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: #fff;
      box-shadow: 0px 2px 4px 0px #DDDDDD;
      border-radius: 4px;

      .info {
        display: flex;
        align-items: center;

        img {
          width: 90px;
          height: 90px;
          margin-right: 40px;
        }

        .name {
          font-size: 32px;
          font-weight: 600;
          color: #333333;
        }

        .tips {
          margin-top: 20px;
          font-size: 24px;
          font-weight: 400;
          color: #666666;
        }
      }

      .icon {
        width: 30px;
        height: 31px;
      }
    }
  }
}
</style>
