<template>
  <view class="qr-merge"  :class="{ 'qr-merge--elder': $uiStyle === 'elder' }">
    <view class="qrs">
      <view class="qr" @click="checkDetail">
        <image
          class="qr-icon"
          mode="aspectFit"
          src="/static/images/common/zhongan_code.png"
        />
        <view class="qr-name">众安码</view>
      </view>
      <view v-for="qr in qrsInfo" :key="qr" class="qr qr-gray">
        <image class="qr-icon" mode="aspectFit" :src="completeUrl(qr)" />
        <view class="qr-name">{{ qr.label }}</view>
      </view>
    </view>
    <!--  <view class="qr" @click="checkDetail">
      <image
        class="qr-icon"
        mode="aspectFit"
        src="/static/images/common/zhongan_code.png"
      />
      <view class="qr-name">众安码</view>
    </view> -->
  </view>
</template>

<script>
import { DOOR_TYPE } from "@/utils/const";
const app = getApp();

export default {
  name: "qrMerge",
  components: {},
  props: {},
  data() {
    return {
      doorplateType: "",
      tyshxydm: "",
      qrsInfo: [
        { label: "租房码", name: "zufang" },
        { label: "安心码", name: "anxin" },
        { label: "场所码", name: "changsuo" },
        { label: "环保码", name: "huanbao" },
        { label: "企业码", name: "qiye" },
        { label: "危房码", name: "weifang" },
      ],
    };
  },
  onLoad() {
    const doorInfo = app.globalData.doorInfo;
    this.doorplateType = doorInfo.baseInfo.type;
    this.tyshxydm = doorInfo.ownerCorpInfo&&doorInfo.ownerCorpInfo.tyshxydm;
  },
  methods: {
    completeUrl(urlInfo) {
      return `/static/images/common/${urlInfo.name}_code.jpg`;
    },
    checkDetail() {
      if (this.doorplateType === DOOR_TYPE.ENTERPRISE.VALUE) {
        if (!this.tyshxydm) {
          uni.showToast({
            title: "请先进行码户绑定",
            icon: "none",
          });
        } else {
          app.globalData.jumpUrl = `https://yq.zsacloud.zhonshian.com/statusweb/h5/fengHuaH5/#/?uniscid=${this.tyshxydm}`;
          uni.navigateTo({
            url: "/subPages/pages/webview/webview",
          });
        }
      } else {
        uni.showToast({
          title: "非企业门牌",
          icon: "none",
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.qr-merge {
  height: 100%;
  background-color: #fff;
  .qrs {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    .qr {
      flex: 0 0 33.3%;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 20px;
      .qr-icon {
        width: 60px;
        height: 60px;
      }
      .qr-name {
        line-height: 30px;
        font-size: 15px;
        color: #999999;
      }
    }
    .qr-gray {
      -webkit-filter: grayscale(80%);
      -moz-filter: grayscale(100%);
      -ms-filter: grayscale(100%);
      -o-filter: grayscale(100%);
      filter: grayscale(100%);
      filter: gray;
      opacity: 0.7;
    }
  }
}
.qr-merge--elder{
  .qr-name{
      font-size: calc(15px * $zlb-elder-font-scale) !important;
  }
}
</style>
