<template>
  <div class="details">
    <div class="address">
      <img src="https://www.smart-zj.cn:55901/imagems/7f7612f4-4ca5-47b5-8c11-1074203af38d.png"
        style="width:100%;height:180px" />
    </div>
    <div class="content">
      <div class="place">
        <img class="placeImg" src="./img/place.png" />
        <div class="placeText1">{{ this.address }}</div>
      </div>
      <div class="info">
        <div class="bottom">
          <img v-if="(this.healthType == 1 || this.healthType == 4) && this.isolatedState == 0" class="sucessImg"
            src="./img/success.gif" alt />
          <img
            v-if="(this.healthType == 1 || this.healthType == 4) && this.isolatedState != 0 && this.isolatedState != 4"
            class="sucessImg" src="./img/warning.gif" alt />
          <img v-if="this.healthType == 2" class="sucessImg" src="./img/warning.gif" alt />
          <img v-if="this.healthType == 3" class="sucessImg" src="./img/filed.gif" alt />
          <div class="success" v-if="(this.healthType == 1 || this.healthType == 4) && this.isolatedState == 0"
            style="color:#29A400;">上报成功</div>
          <div class="success" v-if="(this.healthType == 1 || this.healthType == 4) && this.isolatedState != 0"
            style="color:#f9ae3d;">请勿入内</div>
          <div class="success" v-if="this.healthType == 2" style="color:#f9ae3d;">涉疫风险人员，禁止进入本场所</div>
          <div class="success" v-if="this.healthType == 3" style="color:#eb4e3f;">涉疫风险人员，禁止进入本场所</div>
          <div class="time">{{ this.time }}</div>
          <div v-if="(this.healthType == 1 || this.healthType == 4)" class="tips"
            style="font-size: 16px; line-height: 2; color: #29a400">苏康码为绿色</div>
          <div v-if="this.healthType == 2" class="tips" style="font-size: 16px; line-height: 2; color: #f9ae3d">苏康码为黄色
          </div>
          <div v-if="this.healthType == 3" class="tips" style="font-size: 16px; line-height: 2; color: #eb4e3f">苏康码为红色
          </div>
          <div v-if="this.healthType != 3 && this.isolatedState != 0 && this.isolatedState != 4" class="tips"
            style="font-size: 16px; line-height: 2; color: #f9ae3d">刚返回镇江,应居家监测</div>
          <div v-if="this.healthType == 3 && this.isolatedState != 0 && this.isolatedState != 4" class="tips"
            style="font-size: 16px; line-height: 2; color: #eb4e3f">刚返回镇江,应居家监测</div>
          <div v-if="this.isolatedState == 4" class="tips" style="font-size: 16px;line-height: 2; color: #EB4E3F;">
            您正处于健康管控期间,请勿进入公共场所</div>
        </div>
        <div class="center" v-if="this.mockData && this.mockData.isFortyEight == true">
          <div class="content">
            <img src="./img/48hours.png" alt />
          </div>
          <div class="title">核酸证明</div>
          <div class="card">
            <div class="name">姓名：</div>
            <div class="nameName">{{ mockData.xm }}</div>
          </div>
          <div class="card">
            <div class="name">检测结果：</div>
            <div class="jcjg">{{ mockData.hsjcjg }}</div>
          </div>
          <div class="card">
            <div class="name">采样时间：</div>
            <div class="cysj">{{ mockData.hsjcsj }}</div>
          </div>
          <div class="card">
            <div class="name">采样点：</div>
            <div class="cyd">{{ mockData.hsjcjgmc }}</div>
          </div>
        </div>
        <div class="top">
          <div class="nameCard">
            <div class="left">
              <img class="nameImg" src="./img/name.png" alt />
              <div class="name">{{ this.name }}</div>
            </div>
          </div>
          <div class="phoneCard">
            <div class="phoneName">手机号：</div>
            <div class="phone">{{ this.phone }}</div>
          </div>
          <div class="idCard">
            <div class="idName">身份证：</div>
            <div class="id">{{ this.idCard1 }}</div>
          </div>
        </div>
      </div>
      <div class="card">
        <div class="smallCard healthCard" @click="jump">
          <img class="healthImg" src="./img/health.png" alt />
          <div class="health">苏康码</div>
        </div>
        <!-- <div class="smallCard tripCard" @click="jumpTrip">
          <img class="tripImg" src="./img/trip.png" alt />
          <div class="health">行程卡</div>
        </div> -->
        <div class="smallCard healthCard" @click="jumpProve">
          <img class="healthImg" src="./img/prove.png" alt />
          <div class="health">核酸证明</div>
        </div>
      </div>
      <div class="notice">
        <div style="margin-top: 20px">关注“镇江发布”公众号</div>
        <div style="margin: 10px 0">了解权威防控信息</div>
        <img style="width:200px;height:190px;margin-bottom:20px;" src="./img/qrcode.png" alt />
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import { encryptByDES } from "@/utils/utils";

export default {
  data() {
    return {
      name: this.$route.query.name,
      address: this.$route.query.address,
      time: "",
      time1: "",
      phone: this.$route.query.phone,
      idCard: this.$route.query.idCard,
      idCard1: this.$route.query.idCard.replace(/^(.{3})(?:\d+)(.{4})/, '$1***********$2'),
      version: null,
      edition: "",
      isolatedState: "",
      healthType: "",
      mockData: {}
    };
  },
  methods: {
    init() {
      axios({
        url: 'https://appointment.smart-zj.cn/applet/applet/epidemic/queryExamineResult',
        method: 'get',
        headers: {
          'Content-Type': "application/json",
        },
        params: {
          idCard: encryptByDES(this.$route.query.idCard, "MnuYbhGv"),
          name: this.$route.query.name
        }
      }).then((res) => {
        if (res.data.status == 100) {
          this.mockData = res.data.data
        }
      }).catch({})
    },
    getTime() {
      let y = new Date().getFullYear();
      let m =
        new Date().getMonth() + 1 < 10
          ? "0" + (new Date().getMonth() + 1)
          : new Date().getMonth() + 1;
      let d =
        new Date().getDate() < 10
          ? "0" + new Date().getDate()
          : new Date().getDate();
      let h =
        new Date().getHours() < 10
          ? "0" + new Date().getHours()
          : new Date().getHours();
      let mm =
        new Date().getMinutes() < 10
          ? "0" + new Date().getMinutes()
          : new Date().getMinutes();
      let s =
        new Date().getSeconds() < 10
          ? "0" + new Date().getSeconds()
          : new Date().getSeconds();
      let res = y + "年" + m + "月" + d + "日";
      let res1 = h + "时" + mm + "分" + s + "秒";
      console.log(res, res1);
      this.time = res;
      this.time1 = res1;
      return this.time, this.time1;
    },
    jump() {
      window.location = "localroute://suKangCode";
    },
    jumpTrip() {
      window.location = "https://xc.caict.ac.cn/#/login";
    },
    jumpProve() {
      this.$router.push({
        name: 'ReportHealth',
        query: {
          name: this.name,
          idCard: this.idCard
        },
      })
    },
    // 比较版本
    check() {
      let arr = this.version.split(".");
      if (
        arr[0] * 1 > 5 ||
        (arr[0] * 1 == 5 && arr[1] * 1 > 2) ||
        (arr[0] * 1 == 5 && arr[1] * 1 == 2 && arr[2] * 1 >= 8)
      ) {
        this.edition = 1;
      }
    },
    getVersion(res) {
      this.version = res;
      // alert(this.version);
      this.check();
    },
  },
  created() {
    this.isolatedState = this.$route.query.isolatedState,
      this.healthType = this.$route.query.healthType,
      this.getTime();
    this.init();
    //获取当前版本号
    if (window.android !== undefined) {
      this.version = window.android.getVersion();
      this.check();
      // alert(this.version)
    } else {
      window.webkit &&
        window.webkit.messageHandlers.getVersion.postMessage("getVersion");
    }
  },
  mounted() {
    window.getVersion = this.getVersion;
    // alert(this.version);
    // alert('123123')
    // let arr = this.version.split(".")
    // if (
    //     arr[0] * 1 > 5 ||
    //     (arr[0] * 1 == 5 && arr[1] * 1 >2) ||
    //     (arr[0] * 1 == 5 && arr[1] * 1 == 2 && arr[2] * 1 >= 8)
    // ) {
    //     this.edition = 1
    // }
  },
};
</script>

<style lang="stylus" scoped>
.details {
  width: 100vw;
  height: 100vh;
  background-color: #F3F6F9;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  overflow: scroll;
  .address {
    display: flex;
    align-items: flex-start;
    width: 100%;
  }

  .content {
    width: 95%;
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 30px;
  }
  .place {
    width: 95%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin: 0 20px;

    .placeImg {
      width: 32px;
      min-width: 32px;
      height: 32px;
    }
    .placeText1{
      display: flex;
      flex-wrap: wrap;
      font-size: 32px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      margin-left: 10px;
      color: #FFFFFF;
    }
  }
  .info {
		width: 100%;
		padding: 20px 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
		border-radius: 4px;
    .bottom {
      background-color: #FFFFFF;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 30px 0;
      margin: 20px;
      box-shadow: 0px 4px 30px 0px rgba(255, 44, 44, 0.2);
      .successImg {
        width: 240px;
        height: 230px;
      }
      .success {
        font-size: 38px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 600;
        margin: 20px 0;
      }
      .time {
        font-size: 34px;
      }
    }
    .center {
      background #EBFCF2;
      border-radius: 4px;
      border: 1px solid #29A400;
      font-size: 30px;
      margin: 20px 20px 0 20px;
      padding: 20px;
      position relative;
      .content{
        position: absolute;
        width 30%;
        right: 0;
        top: 0
        img{
          width 170px;
          height 180px;
        }
      }
      .title {
        font-size: 34px;
        font-weight: 600;
      }
      .card{
        width: 100%;
        margin-top: 20px
        display: flex;
        justify-content: flex-start;
        align-items: center;
        .name{
          width: 25%;
        }
        .cysj {
          color: #ED0000;
        }
        .jcjg{
          color: #29A400;
        }
      }
    }
    .top {
      background-color: #FFFFFF;
      display: flex;
      flex-direction: column;
      margin: 20px 20px 0 20px;
      padding: 20px;
      .nameCard {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .left {
          display: flex;
          align-items: center;
          .nameImg {
            width: 40px;
            height: 40px;
          }
          .name {
            font-size: 40px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 600;
            margin-left: 20px;
          }
        }
      }
      .phoneCard {
        display: flex;
        align-items: center;
        margin: 30px 0;
        font-weight: 400;
        color: #666666;
        font-size: 30px;
      }

      .idCard {
        display: flex;
        align-items: center;
        font-weight: 400;
        color: #666666;
        font-size: 30px;
      }
    }
	}
  .card {
		width: 95%;
		display: flex;
		justify-content: space-between;
		align-items: center;
    .smallCard {
      width: 48%;
      background-color: #FFFFFF;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-around;
      padding: 20px 0;
      box-sizing: border-box;
      border-radius: 4px;
      .healthImg {
        width: 100px;
        height: 100px;
      }

      .tripImg {
        width: 100px;
        height: 100px;
      }

      .health {
        font-size: 30px;
        margin-top: 15px;
      }
    }
	}
  .notice {
		font-size: 30px;
		background-color: #F3F6F9;
		width: 100%;
		margin: 20px 20px 0 20px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
}
</style>