<template>
  <div class="list">
    <no-data v-if="nodata" text="暂无数据~"></no-data>
    <div class="card" v-for="item in list" :key="item.code">
      <div class="info">
        <div class="status">
          <img src="@/assets/common/idcard_icon.png" alt="" />
          <p class="name">{{ item.name }}</p>
          <van-tag v-if="item.faceVerify !== 2" color="#6A799D" plain>未授权</van-tag>
          <van-tag v-else color="#4FB24B" plain>已授权</van-tag>
        </div>
        <van-button
          :disabled="!item.state"
          class="button"
          color="#EB4E3F"
          @click="verify(item)"
          >授权</van-button
        >
      </div>
      <p class="idCard">{{ item.idCard }}</p>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Button, Tag } from "vant";
import { getCheckList, updateFace } from "@/api/guarantee";
import { decryptByDES } from "@/utils/utils";
import NoData from "@/components/NoData";

Vue.use(Button).use(Tag);

export default {
  components: { NoData },
  computed: {
    code() {
      return this.$store.state.guarantee.code;
    },
  },
  data() {
    return {
      identifier: "",
      idCard: "",
      list: [],
      nodata: false,
      record: {}, // 记录下审核的那条用户信息
    };
  },
  methods: {
    init() {
      getCheckList({ code: this.code, idCard: this.idCard }).then((res) => {
        if (res.length <= 0) {
          this.nodata = true;
          this.list = [];
        } else {
          this.nodata = false;
          this.list = res;
        }
        console.log("list", this.list);
      });
    },
    verify(item) {
      console.log(item);
      this.record = item;
      if (window.android !== undefined) {
        window.android.checkIdentity(item.name, item.idCard);
      } else if (window.webkit) {
        let params = {
          name: item.name,
          idCard: item.idCard,
        };
        window.webkit && window.webkit.messageHandlers.checkIdentity.postMessage(params);
      }
    },
    checkIdentityResult(result) {
      let res = JSON.parse(result);
      if (res.code === "200") {
        let parmas = {
          code: this.record.code,
          identifier: this.record.identifier,
          verify: 2,
        };
        updateFace(parmas).then((res) => {
          console.log(res);
          // alert(JSON.stringify(res));
          this.init();
        });
      } else {    
        this.$toast(res.msg);
      }
    },
  },
  mounted() {
    window.checkIdentityResult = this.checkIdentityResult;
  },
  created() {
    let res = sessionStorage.getItem("ZJCD-UserInfo");
    let userInfo = JSON.parse(res);
    this.idCard = decryptByDES(userInfo.idCardNo, "MnuYbhGv");
    this.identifier = parseInt(this.$route.query.identifier);
    if (this.code) {
      this.init();
    }
  },
};
</script>

<style lang="stylus" scoped>
.list {
  height 100vh
  overflow-y auto

  .card {
    margin 20px;
    padding 30px 20px;
    background #ffffff

    .info {
      display flex;
      align-items center
      justify-content space-between;

      .status {
        display flex;
        align-items center

        img {
          width 40px;
          height 40px;
          margin-right 20px;
        }
        .name {
          margin-right 20px;
          font-size: 32px;
          font-weight: 500;
          color: #333333;
        }
      }

      .button {
        height 40px;
      }
    }

    .idCard {
      margin-top 20px;
      margin-left 60px;
      font-size: 28px;
      font-weight: 400;
      color: #666666;
    }
  }
}
</style>
