
<template>
  <div>
    <div class="left">
      <div class="flex user-top">
        <img class="user-img" :src="itemData.avatar" alt="">
        <div class="user-msg">
          <div class="one">{{ itemData.name }}</div>
          <div class="two">{{ itemData.passSn }}</div>
          <div class="three">{{ itemData.username }}</div>
        </div>
      </div>
      <div class="flex area-top">
        <span
          v-for="(item, index) in itemData.areaList"
          :key="index"
          :class="['area', item.choose ? 'choose-area' : '']"
        >
          {{ item.name }}
        </span>
      </div>
      <div class="flex1 time-top">
        <div class="time-box">
          <div v-if="itemData.extraAttributeList.indexOf(1) == -1" class="text">
            失效日期
          </div>
          <img
            v-if="itemData.drivingType == 1"
            class="type"
            :src="itemData.drivingType == 1 ? imgsrc1 : imgsrc2"
            alt=""
          >
          <div class="time">
            <!--<span v-if="itemData.extraAttributeList.indexOf(1) > -1">
               失效日期：</span
            > -->
            {{ itemData.endTime }}
          </div>
        </div>
        <div ref="smallCode" class="qrcode" alt="" @click="BlowUp" />
      </div>
    </div>
    <!-- 点击放大二维码 -->
    <div :class="[showBigCord ? 'big-box' : 'hidden']">
      <div class="BigCode">
        <div style="position: relative">
          <i class="el-icon-error" @click="minification" />
          <div ref="BigCode" class="big" alt="" @click="BlowUp" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import QRCode from 'qrcodejs2'
export default {
  components: {},
  filters: {},
  props: {
    itemData: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      imgsrc1: require('../../../assets/pass/longIerm-type-1.png'),
      imgsrc2: require('../../../assets/pass/longIerm-type-2.png'),
      qrCode: '',
      showBigCord: false
    }
  },
  computed: {},
  watch: {},
  created() {
    if (this.itemData.passSn) {
      this.getQRCode()
    }
  },
  methods: {
    getQRCode() {
      setTimeout(() => {
        new QRCode(this.$refs.smallCode, {
          text:
            'https://ldb-airport.hz-hanghui.com:9100/ldb-pass-management?passSn=' +
            this.itemData.passSn +
            '&idNumber=' +
            this.itemData.idNumber, // 二维码的内容
          width: 50,
          height: 50,
          colorDark: '#7ca5d6',
          colorLight: '#182d78',
          correctLevel: QRCode.CorrectLevel.H
        })
      }, 0)
      setTimeout(() => {
        new QRCode(this.$refs.BigCode, {
          text:
            'https://ldb-airport.hz-hanghui.com:9100/ldb-pass-management?passSn=' +
            this.itemData.passSn +
            '&idNumber=' +
            this.itemData.idNumber, // 二维码的内容
          width: 400,
          height: 400,
          colorDark: '#fff',
          colorLight: '#000',
          correctLevel: QRCode.CorrectLevel.H
        })
      }, 0)
    },
    BlowUp() {
      this.showBigCord = true
    },
    minification() {
      this.showBigCord = false
    }
  }
}
</script>
<style scoped lang="scss">
.user-top {
  margin-top: 55px;
}
.left {
  position: relative;
  width: calc(100% - 12px);
  height: 380px;
  background-color: #babdaf;
  padding: 10px 8px 9px 14px;
  margin: 4px 6px;
  background: url("../../../assets/pass/longIerm-bg.png") no-repeat;
  background-position: center 0px;
  background-size: 100% 100%;
  .user-img {
    width: 100px;
    height: 138px;
    margin-right: 20px;
  }
  .user-msg {
    color: #182d78;
    font-weight: 700;
    width: 77px;
    .one {
      font-size: 22px;
      // margin-top: 52px;
    }
    .two {
      font-size: 14px;
    }
    .three {
      font-size: 14px;
      margin-top: 11px;
    }
  }
}
.area-top {
  margin-top: 10px;
  height: 70px;
}
.area {
  width: calc((100% - 8px) / 5);
  height: 22px;
  line-height: 22.5px;
  border-radius: 2px;
  text-align: center;
  /* background: pink; */
  //margin-right: 3px;
  //margin-bottom: 2px;
  color: rgba(164, 194, 222, 0.5);
  font-size: 14px;
  font-weight: 900;
  margin-bottom: 4px;
  &:nth-child(11),&:nth-child(12),&:nth-child(13),&:nth-child(14),&:nth-child(15){
    margin-bottom: 0;
  }
}
.choose-area {
  color: #182d78;
}
.flex1 {
  display: flex;
  justify-content: space-between;
}
.time-top {
  width: calc(100% - 30px);
  position: absolute;
  bottom: 20px;
  padding: 0 10px;
  box-sizing: border-box;
}
.time-box {
  color: #182d78;
  font-size: 16px;
  font-weight: 700;
  .time {
    font-size: 11px;
  }
  .text {
    margin: 3px 0 8px 0;
  }
}
.qrcode {
  width: 50px;
  height: 50px;
  //margin-top: 5px;
}
.type {
  width: 117px;
  height: 34px;
}
.big-box {
  z-index: 2002;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.BigCode {
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.el-icon-error {
  font-size: 50px;
  position: absolute;
  top: -36px;
  right: -39px;
  z-index: 3000;
}
.hidden {
  opacity: 0;
  visibility: hidden;
  position: fixed;
}
</style>
