<template>
  <div v-if="act == 1">
    <div class="main">
      <div
        class="card"
        v-for="(item, index) in options"
        :key="index"
        @click="change(item.modelName)"
      >
        <div class="img">
          <img src="@/assets/talents/type1.png" alt="" />
        </div>
        <div class="name">{{ item.modelName }}</div>
      </div>
    </div>
  </div>
  <div class="main" v-else>
    <div class="cell">
      <p class="label">认定类型</p>
      <p class="value">{{ detail.categoryName }}</p>
    </div>
    <div class="cell">
      <p class="label">认定内容</p>
      <p class="value">{{ detail.contentName }}</p>
    </div>
    <div class="step"></div>
    <div class="cell">
      <p class="label">头像</p>
      <img
        class="img"
        :src="detail.headPortrait"
        alt=""
        @click="imgpreview(detail.headPortrait)"
      />
    </div>
    <div class="cell">
      <p class="label">姓名</p>
      <p class="value">{{ detail.name }}</p>
    </div>
    <div class="cell">
      <p class="label">身份证(护照)</p>
      <p class="value">{{ detail.idCard }}</p>
    </div>
    <div class="cell">
      <p class="label">年龄</p>
      <p class="value">{{ detail.age }}</p>
    </div>
    <div class="cell">
      <p class="label">单位名称</p>
      <p class="value">{{ detail.unitName }}</p>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import {
  getCodeDetails,
  addBehavior,
  userScanPermission,
  addAccumulationFundScan,
  queryUser
} from "@/api/talents";
import { encryptByDES } from "@/utils/utils";
import { ImagePreview } from "vant";

Vue.use(ImagePreview);

export default {
  data() {
    return {
      time: "",
      talentCode: "",
      detail: {},
      userInfo: {},
      act: "",
      name: "",
      options: [],
    };
  },
  methods: {
    initData() {
      let params = {
        userId: encryptByDES(this.userInfo.userId, "MnuYbhGv")
      };
      queryUser(params).then(() => {
        userScanPermission({userId: this.userInfo.userId}).then((res) => {
          if (!res || res.length == 0) {
            this.$dialog
              .confirm({
                message: "扫描权限不足，不能扫描人才码信息！",
                showCancelButton: false,
              })
              .then(() => {
                this.back();
              });
          } else {
            if (res.length == 2) {
              this.act = 1;
              this.options = res;
            } else {
              this.act = 2;
              this.name = res[0].modelName;
              this.init();
            }
          }
        });
      }).catch(() => {
        this.$dialog
        .confirm({
          message: "请先实名认证！",
          showCancelButton: false,
        })
        .then(() => {
          this.back();
        });
      })
    },
    change(val) {
      this.act = 2;
      this.name = val;
      this.init();
    },
    back() {
      if (window.android !== undefined) {
        window.android.backHome();
      } else {
        window.webkit && window.webkit.messageHandlers.backHome.postMessage("");
      }
    },
    init() {
      this.$toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        message: "查询中...",
      });
      getCodeDetails({
        appId: 1234,
        talentCode: this.talentCode,
        userId: this.userInfo.userId,
      }).then((res) => {
        this.$toast.clear();
        this.detail = res;
        if (this.name == "人才码扫描") {
          addBehavior({
            appId: 1234,
            talentCode: this.talentCode,
            userId: this.userInfo.userId,
          }).then((res) => {
            console.log("res---", res);
          });
        } else {
          addAccumulationFundScan({
            appId: 1234,
            talentCode: this.talentCode,
            userId: this.userInfo.userId,
          }).then((res) => {
            console.log("res---", res);
          });
        }
        // 只有状态为3才能展示详情
        // if (res.state === 3) {
        //   this.detail = res;
        // } else {
        //   this.$dialog
        //     .confirm({
        //       message: "人才码申请还未通过，无法展示详情！",
        //       showCancelButton: false,
        //     })
        //     .then(() => {
        //       this.back();
        //     });
        // }
      });
    },
    imgpreview(url) {
      ImagePreview({
        images: [url],
      });
    },
    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.$dialog
          .confirm({
            message: "请先登录！",
            showCancelButton: false,
          })
          .then(() => {
            this.back();
          });
        // let userInfo = {
        //   mobileNo: 17372670270,
        //   userId: 37393,
        //   userName: "孙辉",
        //   realName: "孙涵",
        //   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.userId) {
        this.$dialog
          .confirm({
            message: "请先登录！",
            showCancelButton: false,
          })
          .then(() => {
            this.back();
          });
        return;
      }
      this.userInfo = userInfo;
      this.initData();
    },
  },
  mounted() {
    window.getUserInfo = this.getUserInfo;
  },
  created() {
    this.time = this.$route.query.time;
    this.talentCode = this.$route.query.talentCode;
    let now = new Date().getTime();
    if (now - this.time > 5 * 60 * 1000) {
      this.$dialog
        .confirm({
          message: "人才码已过期，请手动刷新人才码！",
          showCancelButton: false,
        })
        .then(() => {
          this.back();
        });
    } else {
      this.JSBgetUserInfo();
    }
  },
};
</script>

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

  .card {
    display: flex;
    margin: 10px;
    background: linear-gradient(270deg, #FF8C4B 0%, #FFB64E 100%);
    height: 260px;
    align-items: center;
    justify-content: space-around;

    .name {
      width: 380px;
      font-size: 50px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 600;
      color: #FFFFFF;
    }
  }

  .cell {
    background: #fff;
    padding: 30px;
    display: flex;
    border-bottom: 1px solid #eee;

    .label {
      width: 170px;
      font-size: 28px;
      font-weight: 400;
      color: #666666;
    }

    .value {
      margin-left: 30px;
      font-size: 28px;
      color: #333333;
    }

    .img {
      margin-left: 30px;
      max-width: 400px;
      max-height: 300px;
    }

    .info {
      margin-left: 30px;

      .item {
        width: 100%;
        font-size: 28px;
        text-align: left;
        color: #000;
        margin-bottom: 10px;
      }

      .item:last-child {
        margin-bottom: 0;
      }
    }
  }

  .cell:last-child {
    border-bottom: 0;
  }

  .step {
    height: 20px;
  }
}
</style>
