<template>
  <div class="bg">
    <div v-if="placeType === 2 && role == 5" class="container">
      <el-row :gutter="40">
        <el-col :span="8">
          <div class="app-container">
            <div class="title">{{ qrcodeTitle }}-微信</div>
            <div class="flex-center">
              <img class="qrcode" src="../../assets/buildingCode.png" alt="">
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="app-container">
            <div class="title">{{ qrcodeTitle }}-支付宝</div>
            <div class="flex-center">
              <img class="qrcode" src="../../assets/zfbBuildingCode.jpg" alt="">
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- 普通场景 -->
    <div
      v-if="genericCode || regularCode || zfbGenericCode || zfbRegularCode"
      class="container"
    >
      <el-row :gutter="40">
        <el-col v-if="genericCode" :span="8">
          <div class="app-container">
            <div class="title">{{ qrcodeTitle }} - 微信通用码</div>
            <div class="flex-center">
              <el-image :src="genericCode" alt="加载失败" class="qrcode" />
            </div>
          </div>
        </el-col>
        <el-col v-if="regularCode" :span="8">
          <div class="app-container">
            <div class="title">{{ qrcodeTitle }} - 微信员工码</div>
            <div class="flex-center">
              <el-image :src="regularCode" class="qrcode" alt="加载失败" />
            </div>
          </div>
        </el-col>
        <el-col v-if="zfbFkjCode" :span="8">
          <div class="app-container">
            <div class="title">{{ qrcodeTitle }} - 访客机开门二维码</div>
            <div class="flex-center">
              <el-image :src="zfbFkjCode" class="qrcode" alt="加载失败" />
            </div>
          </div>
        </el-col>
        <el-col v-if="zfbGenericCode" :span="8">
          <div class="app-container">
            <div class="title">{{ qrcodeTitle }} - 支付宝通用码</div>
            <div class="flex-center">
              <el-image :src="zfbGenericCode" class="qrcode" alt="加载失败" />
            </div>
          </div>
        </el-col>
        <el-col v-if="zfbRegularCode" :span="8">
          <div class="app-container">
            <div class="title">{{ qrcodeTitle }} - 支付宝员工码</div>
            <div class="flex-center">
              <el-image :src="zfbRegularCode" class="qrcode" alt="加载失败" />
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <!-- 预约场景 -->
    <div v-if="reservationCode" class="container">
      <el-row :gutter="40">
        <el-col :span="8">
          <div class="app-container">
            <div class="title">{{ qrcodeTitle }} - 内宾码</div>
            <div class="flex-center">
              <el-image class="qrcode" :src="reservationCode" alt="加载失败" />
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="app-container">
            <div class="title">
              {{ qrcodeTitlePinYin }} - Foreign guests code
            </div>
            <div class="flex-center">
              <el-image
                class="qrcode"
                :src="reservationEnCode"
                alt="加载失败"
              />
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <!-- 楼宇场景 -->
    <div v-if="buildingCode || buildingRegularCode" class="container">
      <el-row :gutter="40">
        <el-col v-if="buildingCode" :span="8">
          <div class="app-container">
            <div class="title">{{ qrcodeTitle }} - 微信通用码</div>
            <div class="flex-center">
              <el-image class="qrcode" :src="buildingCode" alt="加载失败" />
            </div>
          </div>
        </el-col>
        <el-col v-if="ZFBbuildingCode" :span="8">
          <div class="app-container">
            <div class="title">{{ qrcodeTitle }} - 支付宝通用码</div>
            <div class="flex-center">
              <el-image class="qrcode" :src="ZFBbuildingCode" alt="加载失败" />
            </div>
          </div>
        </el-col>
        <el-col v-if="zfbFkjCode" :span="8">
          <div class="app-container">
            <div class="title">{{ qrcodeTitle }} - 访客机开门二维码</div>
            <div class="flex-center">
              <el-image :src="zfbFkjCode" class="qrcode" alt="加载失败" />
            </div>
          </div>
        </el-col>
        <el-col v-if="buildingRegularCode" :span="8">
          <div class="app-container">
            <div class="title">{{ qrcodeTitle }} - 微信员工码</div>
            <div class="flex-center">
              <el-image
                class="qrcode"
                :src="buildingRegularCode"
                alt="加载失败"
              />
            </div>
          </div>
        </el-col>
        <el-col v-if="ZFBbuildingRegularCode" :span="8">
          <div class="app-container">
            <div class="title">{{ qrcodeTitle }} - 支付宝员工码</div>
            <div class="flex-center">
              <el-image
                class="qrcode"
                :src="ZFBbuildingRegularCode"
                alt="加载失败"
              />
            </div>
          </div>
        </el-col>
        <el-col v-if="placeType == 3" :span="8">
          <div class="app-container">
            <div class="title">{{ qrcodeTitle }} - 支付宝入库码</div>
            <div class="flex-center">
              <el-image class="qrcode" :src="schoolCode" alt="加载失败" />
            </div>
          </div>
        </el-col>
      </el-row>
    </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: "",
      zfbGenericCode: null,
      zfbRegularCode: "",
      zfbFkjCode: null,
      reservationCode: "",
      reservationEnCode: "",
      buildingCode: "",
      ZFBbuildingCode: "",
      buildingRegularCode: "",
      ZFBbuildingRegularCode: "",
      schoolCode:
        "https://tx.hz-hanghui.com:8088/yx-fyzd/file/upload/imagesnew/20230912/417855998988910592.jpg",
    };
  },
  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;
        }
        this.zfbGenericCode = data.adminDetail
          ? data.adminDetail.zfbGenericCode
          : null;
        this.zfbRegularCode = data.adminDetail
          ? data.adminDetail.zfbRegularCode
          : null;
        this.zfbFkjCode = data.adminDetail ? data.adminDetail.zfbFkjCode : null;
        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.ZFBbuildingCode = data.adminDetail.zfbBuildingCode;
        this.buildingRegularCode = data.adminDetail.buildingRegularCode;
        this.ZFBbuildingRegularCode = data.adminDetail.zfbBuildingRegularCode;
        // }
      });
    },
  },
};
</script>

<style scoped>
.el-col {
  display: flex;
  justify-content: center;
}
.bg {
  min-height: calc(100vh - 50px);
  height: 100%;
  background-image: url("../../assets/bg.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.container {
  padding: 0 80px;
  /* height: calc(100vh - 60px); */
}
.app-container {
  flex: none;
  width: 313px;
  padding: 28px 20px;
  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;
}
.el-col {
  padding-top: 60px;
}
.el-col:nth-of-type(n + 4) {
  padding-top: 30px;
}
.title {
  color: #000000;
  font-size: 27px;
  font-weight: 500;
  text-align: center;
  line-height: 40px;
}
.flex-center {
  margin-top: 24px;
}
.qrcode {
  width: 220px;
  height: 220px;
}
.btn-area {
  padding: 50px 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
</style>

