<template>
  <div class="bg">
    <div class="container" v-if="placeType === 2 && role == 5">
      <div class="app-container" >
        <div class="title">{{ qrcodeTitle }}</div>
        <div class="flex-center">
          <img class="qrcode" src="../../assets/buildingCode.jpg" alt="加载失败" />
        </div>
      </div>
    </div>

    <!-- 普通场景 -->
    <div class="container" v-if="genericCode || regularCode">
      <div class="app-container" v-if="genericCode">
        <div class="title">{{ qrcodeTitle }} - 通用码</div>
        <div class="flex-center">
          <img class="qrcode" :src="genericCode" alt="加载失败" />
        </div>
      </div>

      <div class="app-container" v-if="regularCode">
        <div class="title">{{ qrcodeTitle }} - 员工码</div>
        <div class="flex-center">
          <img class="qrcode" :src="regularCode" alt="加载失败" />
        </div>
      </div>
    </div>
    <!-- 预约场景 -->
    <div class="container" v-if="reservationCode">
      <div class="app-container">
        <div class="title">{{ qrcodeTitle }} - 内宾码</div>
        <div class="flex-center">
          <img class="qrcode" :src="reservationCode" alt="加载失败" />
        </div>
      </div>

      <div class="app-container">
        <div class="title">{{ qrcodeTitlePinYin }} - Foreign guests code</div>
        <div class="flex-center">
          <img class="qrcode" :src="reservationEnCode" alt="加载失败" />
        </div>
      </div>
    </div>
    <!-- 楼宇场景 -->
    <div class="container" v-if="buildingCode || buildingRegularCode">
      <div class="app-container" v-if="buildingCode">
        <div class="title">{{ qrcodeTitle }} - 通用码</div>
        <div class="flex-center">
          <img class="qrcode" :src="buildingCode" alt="加载失败" />
        </div>
      </div>
      <div class="app-container" v-if="buildingRegularCode">
        <div class="title">{{ qrcodeTitle }} - 员工码</div>
        <div class="flex-center">
          <img class="qrcode" :src="buildingRegularCode" alt="加载失败" />
        </div>
      </div>
    </div>
    <!-- </div> -->
  </div>
</template>

<script>
import { getInfo } from "@/api/user";
import { pinyin } from "pinyin-pro";
export default {
  components: {},
  filters: {},
  data() {
    return {
      role: this.$store.getters.role,
      placeType: this.$store.getters.placeType,
      qrcodeTitle: "",
      qrcodeTitlePinYin: "",
      genericCode: null,
      regularCode: "",
      reservationCode: "",
      reservationEnCode: "",
      buildingCode: "",
      buildingRegularCode: "",
    };
  },
  created() {
    this.getWXQRCode();
  },
  methods: {
    pinyin,
    //获取微信二维码
    getWXQRCode() {
      getInfo().then(({ data }) => {
        this.qrcodeTitle = data.username;
        this.qrcodeTitlePinYin = pinyin(data.username, {
          toneType: "none",
          type: "array",
        })
          .map((item) => {
            return item.charAt(0).toUpperCase() + item.slice(1);
          })
          .join("");
        if (data.adminDetail.genericStatus) {
          this.genericCode = data.adminDetail.genericCode;
        }
        if (data.adminDetail.regularStatus) {
          this.regularCode = data.adminDetail.regularCode;
        }
        if (data.adminDetail.reservationStatus) {
          this.reservationCode = data.adminDetail.reservationCode;
          this.reservationEnCode = data.adminDetail.reservationEnCode;
        }
        if (
          this.$store.getters.role === 99 &&
          data.adminDetail.buildingStatus
        ) {
          this.buildingCode = data.adminDetail.buildingCode;
          this.buildingRegularCode = data.adminDetail.buildingRegularCode;
        }
      });
    },
  },
};
</script>

<style scoped>
.bg {
  height: calc(100vh - 50px);
  background-image: url("../../assets/bg.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.container {
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: calc(100vh - 80px);
  overflow: hidden;
}
.app-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  /* border: 10px solid green; */
  /* background-color: white; */
  background: rgba(255, 255, 255, 0.4);
  box-shadow: 0px 14px 23px rgba(12, 31, 128, 0.15);
  border-radius: 10px;
}
.title {
  font-size: 40px;
  font-weight: 700;
  margin-top: 50px;
}
.flex-center {
  margin-top: 50px;
}
.qrcode {
  width: 400px;
  height: 400px;
}
.btn-area {
  padding: 50px 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.title {
  width: 423px;
  word-break: break-all;
  text-align: center;
}
</style>

