<template>
  <div class="home">
    <div class="nav">
      <div class="iconBack"><i
          class="el-icon-arrow-left"
          style="color: white"
        ></i></div>
      <div class="pageName">
        <h2 class="tou">人员二维码</h2>
      </div>
    </div>

    <div class="content">
      <div
        class="place"
        ref="backgroundElement"
        :style="{
          backgroundImage: 'url(' + srcImgUrl + ')'
        }"
      >
        <div :style="{
          height: backimgheight + 'px'
        }">
          <div
            class="
        content-up"
            :style="{ width: backimgwidth + 'px' }"
          >
            <div
              class="upDiv"
              :style="{ width: backimgwidth + 'px', height: backimgheightUp + 'px', }"
            >
              <div
                class="hear"
                :style="{ fontSize: backimgFontSize * 0.9 + 'px', padding: backimgFontSize * 0.7 + 'px' }"
              >
                {{ currentTime }}
              </div>
              <div class="qr">
                <div
                  :style="{ paddingTop: backimgFontSize + 'px' }"
                  v-if="backimgwidth != 0"
                >
                  <vue-qr
                    :text="qrUrl"
                    :callback="qrCallBack"
                    :size="qrsize"
                    :margin="0"
                    :colorDark="fontColor"
                    colorLight="white"
                    :logoScale="0.2"
                    :dotScale="0.7"
                  >
                  </vue-qr>
                </div>

                <div
                  class="tip"
                  :style="{ 'color': fontColor, fontSize: backimgFontSize * 0.9 + 'px' }"
                >

                  <p v-if="WorkerInfo.safeScore >= 90">无风险</p>
                  <p v-if="WorkerInfo.safeScore >= 80 && WorkerInfo.safeScore < 90"><i
                      v-if="WorkerInfo.safeScore < 90"
                      class="el-icon-warning"
                      :style="{ 'color': fontColor }"
                    ></i>低风险</p>
                  <p v-if="WorkerInfo.safeScore < 80"><i
                      v-if="WorkerInfo.safeScore < 90"
                      class="el-icon-warning"
                      :style="{ 'color': fontColor }"
                    ></i>高风险</p>
                </div>
              </div>
            </div>
          </div>

          <div class="content-down">
            <div
              class="downDiv"
              style="text-align: center;"
              :style="{ height: backimgheightDown + 'px' }"
            >
              <div
                class="downHear"
                :style="{
          fontSize: backimgFontSize * 0.65 + 'px',
          width: backimgwidth + 'px',
          paddingTop: backimgFontSize * 0.4 + 'px',
          paddingBottom: backimgFontSize * 0.4 + 'px'
        }"
              >
                <div class="down-up">
                  <div class="left-downHear">姓名：</div>
                  <div class="right-downHear">{{ WorkerInfo.workerName | hideName }}</div>
                </div>
                <div class="down-up">
                  <div class="left-downHear">证件号码：</div>
                  <div class="right-downHear">{{ WorkerInfo.idCard | hideIdNum }}</div>
                </div>
              </div>

              <div
                class="text"
                v-if="WorkerInfo.safeScore >= 90 && backimgwidth != 0"
                :style="{ 'color': fontColor, paddingTop: backimgFontSize * 0.3 + 'px', height: backimgFontSize * 8.27 + 'px' }"
              >
                通过后台查询到，您无扣分风险
              </div>

              <div
                class="text2"
                v-if="WorkerInfo.safeScore < 90 && backimgwidth != 0"
                :style="{ 'color': fontColor, paddingTop: backimgFontSize * 0.3 + 'px', paddingBottom: backimgFontSize * 0.3 + 'px', height: backimgFontSize * 8.27 + 'px', width: backimgFontSize * 13.35 + 'px' }"
              >
                <div
                  class="text2-title"
                  :style="{ fontSize: backimgFontSize * 0.6 + 'px', }"
                >通过后台查询到，您有以下扣分记录：</div>
                <ul
                  class="text2-content"
                  v-infinite-scroll="load"
                  style="overflow:auto"
                  :style="{ fontSize: backimgFontSize * 0.5 + 'px', height: backimgFontSize * 7.5 + 'px', }"
                >
                  <li
                    class="text2-item"
                    v-for="( item, i ) in  scoreRecord "
                    :key="item.id"
                    :style="{ height: backimgFontSize * 2 + 'px', paddingTop: backimgFontSize * 0.33 + 'px', width: ((backimgFontSize * 13.35) - 25) + 'px' }"
                  >{{ i + 1 }}. {{ item.deductReason }}</li>
                </ul>
              </div>
              <div
                class="foot"
                v-if="WorkerInfo.safeScore >= 90"
                :style="{ 'color': fontColor, paddingTop: backimgFontSize * 0.4 + 'px', fontSize: backimgFontSize * 0.9 + 'px' }"
              >
                可通行
              </div>
              <div
                class="foot"
                v-if="WorkerInfo.safeScore >= 80 && WorkerInfo.safeScore < 90"
                :style="{ 'color': fontColor, paddingTop: backimgFontSize * 0.4 + 'px', fontSize: backimgFontSize * 0.9 + 'px' }"
              >
                安全分已经低于90分
              </div>
              <div
                class="foot"
                v-if="WorkerInfo.safeScore < 80"
                :style="{ 'color': fontColor, paddingTop: backimgFontSize * 0.4 + 'px', fontSize: backimgFontSize * 0.9 + 'px' }"
              >
                安全分已经低于80分
              </div>
            </div>
          </div>

        </div>

      </div>
    </div>
  </div>
</template>

<script>
import vueQr from 'vue-qr'
// import imgerr from '../assets'
export default {
  name: 'myLogin',
  components: {
    vueQr
  },
  data () {
    return {
      //二维码大小
      qrsize: 230,

      //动态背景宽
      backimgwidth: 0,

      //动态背景高
      backimgheight: 0,

      //动态背景高(上)
      backimgheightUp: 0,

      //动态背景高(下)
      backimgheightDown: 0,

      //动态字体大小
      backimgFontSize: 0,

      //扣分记录
      scoreRecord: [],
      //当前时间
      currentTime: "",
      //名字
      name: "王富贵",
      idNum: "210811196005132133",
      //动态背景图片
      srcImgUrl: "",
      //背景图片
      // imgUrl: ["../../assets/健康.png", "../../assets/低险.png", "../../assets/危险.png"],
      imgUrl: {
        img1: require("../../assets/健康.png"),
        img2: require("../../assets/低险.png"),
        img3: require("../../assets/危险.png")
      },
      id: "",
      // 用于生成二维码的url
      qrUrl: "",
      // 下载数据base64
      qrDownloadUrl: "",
      //二维码颜色
      fontColor: "green",
      //下方结构
      flag: true,
      //劳务人员信息
      WorkerInfo: {},
    }
  },

  // beforeCreate () {
  //   this.getBackgroundImageSize();
  // },

  created () {
    this.updateTime();
    setInterval(() => {
      this.updateTime();
    }, 1);
    this.getId();
  },

  mounted () {
    this.setColor(this.WorkerInfo.safeScore);
    this.setImg(this.WorkerInfo.safeScore);
    this.getScoreRecord();

    setTimeout(() => {
      this.getBackgroundImageSize();
    }, 1000); // 延迟1秒钟执行，您可以根据实际情况调整延迟时间
  },

  methods: {
    getBackgroundImageSize () {
      var backgroundImage = new Image();
      var imageUrl = getComputedStyle(document.querySelector('.place')).backgroundImage.slice(4, -1).replace(/['"]/g, "");

      backgroundImage.src = imageUrl;

      var self = this; // 保存this指向到变量self

      backgroundImage.onload = function () {
        var containerWidth = document.querySelector('.place').clientWidth;
        var containerHeight = document.querySelector('.place').clientHeight;
        var imageWidth = backgroundImage.width;
        var imageHeight = backgroundImage.height;
        console.log("containerWidth :" + containerWidth);
        console.log("containerHeight :" + containerHeight);
        console.log("imageWidth :" + imageWidth);
        console.log("imageHeight :" + imageHeight);

        var scaleX = containerWidth / imageWidth;
        var scaleY = containerHeight / imageHeight;
        var displayWidth, displayHeight;

        if (scaleX < scaleY) {
          displayWidth = containerWidth;
          displayHeight = imageHeight * scaleX;
        } else {
          displayWidth = imageWidth * scaleY;
          displayHeight = containerHeight;
        }

        self.backimgwidth = displayWidth * 0.8;
        self.backimgheight = displayHeight;
        self.qrsize = displayWidth * 0.6;

        self.backimgheightUp = self.backimgheight * (53 / 100);
        self.backimgheightDown = self.backimgheight * (47 / 100);

        self.backimgFontSize = self.qrsize * 0.1;

        console.log("处理过的背景图宽度: " + self.backimgwidth);
        console.log("处理过的背景图高度: " + self.backimgheight);
        console.log("二维码大小: " + self.qrsize);
        console.log("动态字体大小: " + self.backimgFontSize);
      }
    },

    async getScoreRecord () {
      const params = {
        workerId: this.id,
      };
      const { data: res } = await this.$http.get('/xmgl/xzDeductScoreRecord/list', params);
      console.log(res);
      if (res.success == true && res.result.length != 0) {
        this.scoreRecord = res.result;
        console.log(this.scoreRecord);
      }

    },

    load () { },

    updateTime () {
      const date = new Date();
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      const hours = String(date.getHours()).padStart(2, '0');
      const minutes = String(date.getMinutes()).padStart(2, '0');
      this.currentTime = `${year}-${month}-${day} ${hours}:${minutes}`;
    },
    setImg (fenshu) {
      if (fenshu >= 90) {
        this.srcImgUrl = this.imgUrl.img1;
      } else if (fenshu >= 80 && fenshu < 90) {
        this.srcImgUrl = this.imgUrl.img2;
      } else if (fenshu < 80) {
        this.srcImgUrl = this.imgUrl.img3;
      }
    },

    setColor (fenshu) {
      if (fenshu >= 90) {
        this.fontColor = "green";
      } else if (fenshu >= 80 && fenshu < 90) {
        this.fontColor = "rgb(255, 230, 0)";
      } else if (fenshu < 80) {
        this.fontColor = "red";
      }
    },

    getId () {
      // console.log(this.$route.params);
      this.WorkerInfo = this.$route.params.WorkerInfo;
      console.log(this.WorkerInfo);
      this.qrUrl = this.WorkerInfo.id;
    },
    // 二维码刷新后调用
    qrCallBack (qrUrl) {
      this.qrDownloadUrl = qrUrl;
    },
    // 下载二维码
    downloadQrcode () {
      let a = document.createElement('a');
      a.download = '我的二维码';
      a.href = this.qrDownloadUrl;
      a.click();
    },
    //换颜色
    handleQrCode (type) {
      switch (type) {
        case 1:
          this.fontColor = 'green'
          break
        case 2:
          this.fontColor = 'orange'
          break
        case 3:
          this.fontColor = 'red'
          break
      }
    },
  },

  filters: {
    // 加密身份证号
    hideIdNum (val) {
      return `${val.substring(0, 3)}*************${val.substring(val.length - 2)}`
    },
    // 加密名字
    hideName (val) {
      return `${val.substring(0, 1)}**`
    }
  }
}
</script>

<style scoped>
.content {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: calc(100% - 3.33rem);
}

.place {
  width: 90%;
  height: 100%;
  background-image: url(../../assets/健康.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.content-up {
  width: 100%;
  height: 54.5%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.content-down {
  height: 45.5%;
}

.upDiv {
  /* background-color: yellow; */
  /* position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%); */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  /* height: 500px; */
}

.hear {
  display: flex;
  align-items: center;
  justify-content: center;
}

.qr {}

.tip {
  font-weight: bold;
  border-bottom: 0.16rem dashed gray;
}

.text2-title {
  display: flex;
  font-size: 0.6rem;
}

.text2-content {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  margin-top: 0;
}

.text2-item {
  /* display: flex;
  padding-left: 0; */
  float: left;
  /* 设置元素浮动 */
}

ul {
  padding-inline-start: 10px;
}

li {
  text-align: left;
  /* 保持文本从左边开始 */
}

.text2 {
  /* height: 40%; */
  /* line-height: 1rem; */
  /* font-size: 0.5rem; */
  font-weight: bold;
}

.text {
  /* height: 40%; */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: bold;
}

.foot {
  font-size: 1.3rem;
  font-weight: bold;
}

.down-up {
  display: flex;
  justify-content: space-between;
}



.downDiv {
  /* height: 100%; */

}

.downHear {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* height: 15%; */
  font-weight: bold;
  border-bottom: 1px solid gray;

}

.home {
  width: 100%;
  height: 100%;
}

.nav {
  background-color: rgb(0, 128, 255);
  width: 100%;
  height: 3.33rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.iconBack {
  position: absolute;
  left: 0;
  font-size: 2.08rem;
}

.warnToken {
  position: absolute;
  font-size: 2.08rem;
}

.pageName {}

.tou {
  margin: 0;
  color: white;
}
</style>