<template>
  <view class="qrcode-page">

    <view class="qrcode-wrap">
      <view class="qrcode-box">
        <!-- 调用uqrcode组件 -->
        <uqrcode 
          :value="qrcodeValue" 
          :size="400" 
          :logo="'/static/logo.png'"
          :logoSize="0.2"
          canvasId="visitor-qrcode"
          @success="onQrcodeSuccess"
        ></uqrcode>
        <!-- 二维码边框装饰 -->
        <view class="qrcode-border border-top"></view>
        <view class="qrcode-border border-right"></view>
        <view class="qrcode-border border-bottom"></view>
        <view class="qrcode-border border-left"></view>
      </view>

      <text class="qrcode-desc">桂花园（别墅）东门通行二维码</text>
      <text class="qrcode-tips">分享此二维码给访客，可扫码开门，单次有效</text>
    </view>

    <view class="btn-wrap">
      <button class="send-btn" @click="sendToFriend">发送给好友</button>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
// import { navigateBack, showToast, share } from '@dcloudio/uni-app';
// 引入本地uqrcode组件
import uqrcode from '@/components/uqrcode/uqrcode.vue';

// 二维码内容（替换为实际的通行链接）
const qrcodeValue = ref('https://your-domain.com/visitor/123456');
// 生成的二维码临时图片地址
const qrcodeImage = ref('');

// 二维码生成成功回调
const onQrcodeSuccess = (tempFilePath) => {
  qrcodeImage.value = tempFilePath;
  uni.showToast({ title: '二维码生成成功', icon: 'success' });
};

// 分享给好友
const sendToFriend = () => {
  if (!qrcodeImage.value) {
    uni.showToast({ title: '二维码生成中...', icon: 'none' });
    return;
  }
  
  uni.share({
    provider: 'weixin',
    type: 0,
    title: '访客通行二维码',
    imageUrl: qrcodeImage.value,
    success: () => uni.showToast({ title: '分享成功' }),
    fail: () => uni.showToast({ title: '分享失败', icon: 'none' })
  });
};
</script>

<style scoped>
.qrcode-page {
  /* background-color: #f8f8f8; */
  min-height: 100vh;
}
.qrcode-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 60rpx;
}
.qrcode-box {
  position: relative;
  width: 400rpx;
  height: 400rpx;
}
/* 二维码边框样式 */
.qrcode-border {
  position: absolute;
  width: 40rpx;
  height: 40rpx;
  border: 4rpx solid #007aff;
}
.border-top { top: 0; left: 0; border-right: none; border-bottom: none; }
.border-right { top: 0; right: 0; border-left: none; border-bottom: none; }
.border-bottom { bottom: 0; right: 0; border-left: none; border-top: none; }
.border-left { bottom: 0; left: 0; border-right: none; border-top: none; }
/* 文字样式 */
.qrcode-desc {
  font-size: 32rpx;
  font-weight: 600;
  margin-top: 30rpx;
  color: #333;
}
.qrcode-tips {
  font-size: 24rpx;
  color: #999;
  margin-top: 10rpx;
}
/* 按钮样式 */
.btn-wrap {
  margin: 80rpx 20rpx 20rpx;
}
.send-btn {
  background-color: #007aff;
  color: #fff;
  border-radius: 8rpx;
  height: 88rpx;
  font-size: 32rpx;
}
</style>