<template>
  <div class="currentDetails">
    <div class="title">*进入本场所，请使用镇合意APP、微信、支付宝扫描下方镇江通行码*</div>
    <div class="img">
      <div class="qrcode">
        <vue-qr
          style="display: block; margin: auto"
          :logoSrc="downloadData.icon"
          :text="downloadData.url"
          :size="300"
          :logoScale="20"
        ></vue-qr>
      </div>
    </div>

    <div class="details">
      <span>{{ this.addDetails }}</span>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import vueQr from "vue-qr";
import { config } from "@/utils/request";
import { Icon } from "vant";
Vue.use(Icon);
export default {
  components: {
    vueQr,
  },
  data() {
    return {
      area: this.$route.query.area,
      street: this.$route.query.street,
      address: this.$route.query.address,
      place: this.$route.query.place,
      permitCode: this.$route.query.permitCode,
      placeName: this.$route.query.placeName,
      addDetails: "",
      downloadData: {
        url: "",
        icon: require("./img/icon.png"),
      },
    };
  },
  methods: {
    getAdd() {
      let s = this.area + this.street + this.address + '(' + this.placeName + ')';
      this.addDetails = s;
      return this.addDetails;
    },
    reload() {
      if (process.env.NODE_ENV === "production") {

        this.downloadData.url = encodeURI(
          `${config.baseH5}report/index?area=${this.area}street=${this.street}address=${this.address}(${this.placeName})place=${this.place}permitCode=${this.permitCode}`
        );
      } else {
        this.downloadData.url = encodeURI(
          `http://192.168.1.104:8080/#/report/index?area=${this.area}street=${this.street}address=${this.address}(${this.placeName})place=${this.place}permitCode=${this.permitCode}`
        );
      }
    },
  },
  created() {
    this.getAdd();
  },
  mounted() {
    this.reload();
  },
};
</script>

<style lang="stylus" scoped>
.currentDetails {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 50px 10px;

  .title {
    text-align: center;
    font-size: 40px;
    color: red;
    padding: 20px 0;
    line-height: 50px;
  }

  .img {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 20px 0;
  }

  .details {
    width: 600px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
    font-size: 40px;
    padding: 20px 0;
  }
}
</style>