<template>
  <div>
    <div class="report" v-if="show1">
      <div class="text">
        <img class="title" src="./img/title.png" alt="">
      </div>
      <div class="button">
        <div class="text-area">
          <button class="text-button" @click="jump('ReportMyReport')">个人出行登记</button>
        </div>
        <div class="text-area">
          <button class="text-button" @click="jump('ReportReplacereport')">代他人出行登记</button>
        </div>
        <div class="text-area">
          <button class="text-button" @click="jump('ReportGatreport')">港澳台及外籍用户登记</button>
        </div>
        <div class="tianbao">
          请如实填报，如虚假填报，将对产生的不良影响承担法律责任
        </div>
      </div>
    </div>
    <van-overlay :show="isManageUser">
      <div class="wrapper" :show="!isManageUser">
        <div class="block">
          <van-button @click="change" type="primary" style="width: 70%; margin: 40px 0 15px 0">扫码上报</van-button>
          <van-button @click="tongji" type="info" style="width: 70%; margin: 15px 0 40px 0">扫码统计</van-button>
        </div>
      </div>
    </van-overlay>
  </div>
</template>

<script>
// import axios from "axios";
import { decryptByDES } from "@/utils/utils";
import Vue from "vue";
import { Field, Button, CellGroup, Form, Overlay } from "vant";
// import BaiDuMap from "@/components/baidumap/Main.vue";
import { addPermitStatistics, queryCacheUser, isManageUser } from "@/api/epidemic";
import { config } from "@/utils/request";
Vue.use(Field).use(Button).use(CellGroup).use(Form).use(Overlay);
export default {
  components: {
    // BaiDuMap,
  },
  data() {
    return {
      area: "",
      address: "",
      place: "",
      userInfo: {},
      permitCode: "",
      name: "",
      name1: "",
      mobileNo: "",
      idCard: "",
      show1: false,
      realInfo: '',
      healthType: '',
      isolatedState: '',
      riskArea: '',
      isManageUser: false,
      isPushType: '',
    };
  },
  methods: {
    // 是否为管理员
    initType() {
      isManageUser({ mobile: this.userInfo.mobileNo }).then((res) => {
        if (res.data == true) {
          this.isManageUser = true
        } else {
          this.isManageUser = false
        }
      })
    },
    change() {
      this.isManageUser = false
    },
    tongji() {
      this.$router.push({
        name: 'ReportDetail',
        query: {
          permitCode: this.permitCode
        }
      })
    },
    // 扫码次数
    init() {
      let params = {
        code: this.permitCode,
        userId: this.userInfo.userId,
      };
      addPermitStatistics(params).then((res) => {
        console.log(res);
      });
    },
    jump(name) {
      this.$router.push({
        name: name,
        query: {
          area: this.area,
          address: this.address,
          place: this.place,
          permitCode: this.permitCode,
          realInfo: this.realInfo,
          name1: this.name1,
          isPushType: this.isPushType ? this.isPushType : 0
        },
      });
    },
    // 初始化获取userInfo
    JSBgetUserInfo() {
      if (window.android !== undefined) {
        const res = window.android.getUserInfo(); // 这是一个json字符串
        sessionStorage.setItem("ZJCD-UserInfo", res);
        if (!JSON.parse(res).idCardNo) {
          this.realInfo = false
          this.userInfo = JSON.parse(res);
          this.mobileNo = JSON.parse(res).mobileNo ? JSON.parse(res).mobileNo : '';
          this.initType();
          queryCacheUser({}).then((res) => {
            if (res.data) {
              this.name = res.data.name;
              this.name1 = res.data.name;
              this.idCard = decryptByDES(res.data.idCard, "MnuYbhGv");
              this.mobileNo = res.data.mobile;
            }
          })
        } else {
          this.realInfo = true;
          this.userInfo = JSON.parse(res);
          this.encryption();
          this.initType();
        }
      } else if (window.webkit) {
        window.webkit &&
          window.webkit.messageHandlers.getUserInfo.postMessage("getUserInfo");
      } else {
        window.receiveLocation(
          JSON.stringify({ code: 0, data: { lat: 39.983744, lng: 116.276063 } })
        );
        this.$toast("请先登录镇合意app");
      }
    },
    getUserInfo(res) {
      sessionStorage.setItem("ZJCD-UserInfo", res);
      if (!JSON.parse(res).idCardNo) {
        this.realInfo = false
        this.userInfo = JSON.parse(res);
        this.mobileNo = JSON.parse(res).mobileNo ? JSON.parse(res).mobileNo : '';
        this.initType();
        queryCacheUser({}).then((res) => {
          if (res.data) {
            this.name = res.data.name;
            this.name1 = res.data.name;
            this.idCard = decryptByDES(res.data.idCard, "MnuYbhGv");
            this.mobileNo = res.data.mobile;
          }
        })
      } else {
        this.realInfo = true;
        this.userInfo = JSON.parse(res);
        this.encryption();
        this.initType();
      }
    },
    // 手机号加密 身份证号加密 脱敏处理
    encryption() {
      let phone = JSON.parse(JSON.stringify(this.userInfo.mobileNo));
      let reg = /(\d{3})\d{4}(\d{4})/;
      phone = phone.replace(reg, "$1****$2");
      this.mobileNo = phone;
      let card = decryptByDES(this.userInfo.idCardNo, "MnuYbhGv");
      this.idCard = card.replace(/^(.{3})(?:\d+)(.{4})/, '$1***********$2')
    },
  },
  mounted() {
    window.getUserInfo = this.getUserInfo;
  },
  created() {
    function whatWebView() {
      var e = window.navigator.userAgent.toLowerCase();
      var t = -1 < e.indexOf("dtdreamweb"),
        r = -1 < e.indexOf("hanweb") && !t,
        n = -1 < e.indexOf("micromessenger"),
        o = -1 < e.indexOf("alipayclient"),
        i =
          (-1 < e.indexOf("miniprogram") || -1 < e.indexOf("alipayide")) &&
          -1 < e.indexOf("alipay"),
        a = -1 < e.indexOf("eshiminapp"),
        s = -1 < e.indexOf("iflytek_mmp"),
        c = -1 < e.indexOf("miniprogram") && -1 < e.indexOf("dingtalk"),
        u = -1 < e.indexOf("dingtalk"),
        l = -1 < e.indexOf("000001@jcss");
      return t
        ? "dtdream"
        : r
          ? "hanweb"
          : a
            ? "eshimin"
            : s
              ? "iflytek"
              : n
                ? "wetchat"
                : c
                  ? "dingtalkMini"
                  : u
                    ? "dingtalk"
                    : i
                      ? "alipayMini"
                      : o
                        ? "alipay"
                        : l
                          ? "JCSS"
                          : "other";
    }
    if (whatWebView() !== "wetchat" && whatWebView() !== "alipay") {
      this.show1 = true;
    }
    // 辖区 位置  场所类型截取
    let a = this.$route.query.area;
    let b = a.substring(a.indexOf("=") + 1, a.indexOf("p"));
    let c = a.substring(a.indexOf("l") + 5, a.indexOf("m") - 3);
    this.area = a.substring(0, a.indexOf("s"));
    this.address =
      b.substring(0, b.indexOf("a")) + b.substring(b.indexOf("=") + 1);
    this.place = c;
    this.permitCode = a.substring(a.lastIndexOf("=") + 1);
    this.isPushType = this.$route.query.isPushType
    // alert(`alipays://platformapi/startapp?appId=2021003118695313&page=pages/index/index`+encodeURIComponent(`?area=${this.area}&address=${this.address}&place=${this.place}&permitCode=${this.permitCode}`))
    if (whatWebView() === "alipay") {
      // let query = {
      //   area: this.area,
      //   address: this.address,
      //   place
      // }
      const A = document.createElement("a");
      A.href = `alipays://platformapi/startapp?appId=2021003118695313&page=pages/index/index` + encodeURIComponent(`?isPushType=${this.isPushType}&area=${this.area}&address=${this.address}&place=${this.place}&permitCode=${this.permitCode}`)
      const ready = function (callback) {
        // 如果jsbridge已经注入则直接调用
        if (window.AlipayJSBridge) {
          callback && callback();
        } else {
          // 如果没有注入则监听注入的事件
          document.addEventListener("AlipayJSBridgeReady", callback, false);
        }
      };
      ready(function () {
        A.click();
        window.AlipayJSBridge.call("popWindow");
      });
    } else if (whatWebView() === "wetchat") {
      // alert(`${config.baseH5}`)
      let link = `${config.baseH5}report/index?isPushType=${this.isPushType}&` + 'area=' + this.area + '&address=' + this.address + '&place=' + this.place + '&permitCode=' + this.permitCode
      location.replace(link);
    } else if (
      window.android?.getUserInfo ||
      window.webkit?.messageHandlers?.getUserInfo
    ) {
      this.JSBgetUserInfo();
      this.init();
    } else {
      const A = document.createElement("a");
      A.href = `alipays://platformapi/startapp?appId=2021003118695313&page=pages/index/index&area=${decodeURIComponent(this.area)}&address=${decodeURIComponent(this.address)}&place=${decodeURIComponent(this.place)}&permitCode=${decodeURIComponent(this.permitCode)}`;
      location.href = A.href
      this.$router.go(-1);
    }
  },
};
</script>

<style lang="stylus" scoped>
.report {
  background-image: url('https://www.smart-zj.cn:55901/imagems/928e8918-bf23-456a-b454-0194078a68fb.jpg');
  background-size: 100% 100%;
  width: 750px;
  height: 100vh;
  background-position: center;
  display: flex;
  flex-direction: column;
  .text {
		position: relative;
		top: 160px;
		left: 160px;
		width: 400px;
    .title {
      height: 90px;
      width: 100%;
      margin-bottom: 80px;
    }
	}
  .button {
		display: flex;
		position: fixed;
		flex-direction: column;
		align-items: center;
    justify-content: center;
    width 100%;
		bottom: 70px;
		padding-bottom: env(safe-area-inset-bottom);
		padding-bottom: constant(safe-area-inset-bottom);
    .text-area {
      margin: 20px 0;
      .text-button {
        width: 500px;
        background-image: linear-gradient(to right, #FFB388, #ffffff);
        color: #F36938;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        font-size: 36px;
        border-radius: 60px;
        padding: 10px 0;
      }
    }
    .tianbao {
      font-size: 24px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #F4F4F5;
      line-height: 44px;
      margin-top: 30px;
    }
	}
}
.banner {
  width: 100%;
  height: 300px;
  padding: 0 0 20px 0;

  img {
    width: 100%;
    height: 100%;
  }
}

.wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }

  .block {
    width: 70%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    border-radius: 10px;
  }
</style>