<template>
  <view class="qrcode-page">
    <view class="qrcode-wrap">
      <!-- 显示后台返回的二维码图片 -->
      <view class="qrcode-box">
        <image :src="qrcodeUrl" mode="widthFix" class="qrcode-img" />
        
        <!-- 四角装饰边框保留 -->
        <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">{{houseName}}通行二维码</text>
      <text class="qrcode-tips">分享此二维码给访客，可扫码开门，单次有效</text>
    </view>

    <view class="btn-wrap">
      <button class="send-btn"  open-type="share" :image-url="qrcodeUrl">发送给好友</button>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';

// 直接接收图片URL
const qrcodeUrl = ref('');
const qrcodeImage = ref('');
const houseName = ref('')

onLoad((option) => {
  if (option.qrcodeUrl) {
    // 接收后台返回的二维码图片链接
    qrcodeUrl.value = decodeURIComponent(option.qrcodeUrl);
    qrcodeImage.value = qrcodeUrl.value;
	houseName.value = option.villageName
    console.log('最终二维码图片：', qrcodeUrl.value);
  }
});

// 分享给好友
// 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 {
  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-img {
  width: 100%;
  height: 100%;
}
/* 边框装饰 */
.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 40rpx 20rpx;
}
.send-btn {
  background-color: #007aff;
  color: #fff;
  border-radius: 8rpx;
  height: 88rpx;
  font-size: 28rpx;
  line-height: 88rpx;
}
</style>