<script setup>
import { ref, watch, nextTick } from "vue";
import { useRoute } from "vue-router";
import { useStore } from "vuex";
import { bannerGetQrcode } from "@/api/report";

const route = useRoute();
const imgBg = ref("");
const bannerId = ref("");
const enable = ref("");
const title = ref("");
const store = useStore();


const qrcodeImg = ref("");

console.log(store.state.userInfo);
watch(
  () => route.query.imgBg,
  (e) => {
    if (e) {
      nextTick(() => {
        imgBg.value = route.query.imgBg;
        bannerId.value = route.query.id;
        enable.value = route.query.enable;
        title.value = route.query.title;
        qrcodeImg.value = '';
        console.log(enable.value);
        enable.value == 1 && store.state.userInfo && getQrcCode();
      });
    }
  },
  {
    immediate: true,
    deep: true,
  }
);

// // 获取code 二维码
async function getQrcCode() {
  const res = await bannerGetQrcode({
    UserId: store.state.userInfo.user_id,
    BannerId: bannerId.value,
    Remark: title.value,
  });
  if (res.code == 200) {
    qrcodeImg.value = res.data;
  }
}
</script>

<template>
  <div class="container-disseminate">
    <img class="bg-img" v-if="imgBg" :src="imgBg" alt="" />
    <img class="qrcode-img" v-if="qrcodeImg" :src="qrcodeImg" alt="" />
  </div>
</template>

<style lang="scss" scoped>
.container-disseminate {
  position: relative;
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
  .bg-img {
    width: 820px;
    height: 100%;
  }
  .qrcode-img {
    position: absolute;
    width: 150px;
    height: 150px;
    left: 50%;
    bottom: 90px;
    transform: translateX(-50%);
  }
}
</style>
