<template>
  <div>
    <!-- 菜单栏 -->
    <van-tabbar v-model="active" class="custom-tabbar" route active-color="#f7e087" inactive-color="#a5a29e">
      <van-tabbar-item  icon="home-o" to="/">工单</van-tabbar-item>
      <van-tabbar-item  icon="apps-o" to="/found">所属机构</van-tabbar-item>
      <van-tabbar-item  icon="shopping-cart-o" to="/publish">消息</van-tabbar-item>
      <van-tabbar-item  icon="user-o" to="/mine">我的</van-tabbar-item>
    </van-tabbar>

    <!-- 中间二维码按钮 -->
    <input type="hidden" value="444" v-model="text" placeholder="请输入要生成二维码的内容">
    <div class="qrcode-button"  @click="showQRCodeDialog">
      <img src="@/assets/qr.png" alt="Qrcode" />
    </div>
    <van-dialog
      v-model:show="dialogVisible"
      title="二维码"
      width="80%"
      :before-close="handleClose"
    >
    <div class="qrcode-container">
    <div id="qrcode"></div>
  </div>
    </van-dialog>


  </div>
</template>

<script setup>
import { ref } from 'vue';
import { Tabbar, Tab } from 'vant';
import QRCode from 'qrcodejs2-fix';
const text = ref('44444');
const dialogVisible = ref(false);

const active = ref('/');

const generateQRCode = () => {
  const qrcodeContainer = document.getElementById('qrcode');
  console.log('qrcodeContainer:', qrcodeContainer);
  if (!qrcodeContainer) {
    console.error('DOM element for QR code is not found.');
    return;
  }
  qrcodeContainer.innerHTML = ''; // 清空之前的二维码
  const qrCodeInstance = new QRCode(qrcodeContainer, {
    text: text.value,
    width: 200,
    height: 200
  });
};

const showQRCodeDialog = () => {
  dialogVisible.value = true; // 显示对话框
  generateQRCode(); // 生成二维码
};

const handleClose = () => {
  dialogVisible.value = false; // 关闭对话框时清空二维码
};

</script>

<style>
.custom-tabbar {
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 1;
}

.qrcode-button {
  position: fixed;
  left: 50%;
  bottom: 60px; /* 调整按钮距离底部的距离 */
  transform: translateX(-50%);
  cursor: pointer;
  z-index: 2;
}

.qrcode-button img {
  width: 88px; /* 调整二维码图片大小 */
  height: 88px; /* 调整二维码图片大小 */
  border-radius: 50%;
}

.qrcode-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%; /* 如果需要垂直居中，可以设置容器高度为100% */
}
</style>
