<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";
import { querySfbUserInfo } from "@/api/talents";

export default {
  components: {
    // NavHeader
  },
  data() {
    return {
      menus: [
        {
          imgUrl: require("@/assets/coldfood/orderin_icon.png"),
          name: "预约入库",
          tips: "填写申报入库申请",
          path: "Report",
        },
        {
          imgUrl: require("@/assets/coldfood/self_report_icon.png"),
          name: "自主信息录入",
          tips: "具备省内其他城市有效《出库证明》",
          path: "SelfReport",
        },
        {
          imgUrl: require("@/assets/coldfood/myorder_icon.png"),
          name: "我的预约",
          tips: "我的预约入库申请",
          path: "MyReport",
        },
        // {
        //   imgUrl: require("@/assets/coldfood/review_icon.png"),
        //   name: "货物流向追溯",
        //   tips: "集中监管仓冷链食品流向追溯",
        //   path: "Review",
        // },
      ],
      userInfo: {},
      selfReport: {},
    };
  },
  methods: {
    back() {
      if (window.android !== undefined) {
        window.android.backHome();
      } else {
        window.webkit && window.webkit.messageHandlers.backHome.postMessage("");
      }
    },
    jump(name, type) {
      if (!this.userInfo.userId) {
        this.$toast("请先登录镇合意app");
        return;
      }
      this.$router.push({ name, query: { type } });
    },
    JSBgetUserInfo() {
      if (window.android !== undefined) {
        console.log(1);
        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) {
        console.log(2);
        window.webkit &&
          window.webkit.messageHandlers.getUserInfo.postMessage("getUserInfo");
      } else {
        this.$toast("请先登录镇合意app");
        // this.userInfo = {
        //   mobileNo: 17372670270,
        //   userId: 37393,
        //   userName: "孙辉",
        //   realName: "孙涵",
        // };
        // 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);
    },
    initInfo(val) {
      console.log(val);
      querySfbUserInfo({
        ticket: val,
      }).then((res) => {
        console.log(res);
        if (!res) {
          this.$dialog
            .confirm({
              message: "请先登录！",
              showCancelButton: false,
            })
            .then(() => {
              this.back();
            });
          return;
        } else {
          // alert(JSON.stringify(res))
          sessionStorage.setItem("ZJCD-UserInfo", JSON.stringify(res));
          this.userInfo = res;
        }
      });
    },
  },
  mounted() {
    window.getUserInfo = this.getUserInfo;
  },
  created() {
    if (this.$route.query.ticket) {
      if (sessionStorage.getItem("ZJCD-UserInfo")) {
        this.userInfo = JSON.parse(sessionStorage.getItem("ZJCD-UserInfo"));
      } else {
        // 对接江苏政务服务网
        this.initInfo(this.$route.query.ticket);
      }
    } else {
      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>
