<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" @click="saveToAlbum">保存图片到相册</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 saveToAlbum = () => {
  if (!qrcodeUrl.value) {
    uni.showToast({ title: '二维码加载中...', icon: 'none' });
    return;
  }

  uni.showLoading({ title: '保存中...', mask: true });

  const doSave = (filePath) => {
    uni.saveImageToPhotosAlbum({
      filePath,
      success: () => {
        uni.hideLoading();
        uni.showToast({ title: '保存成功', icon: 'success' });
      },
      fail: (err) => {
        uni.hideLoading();
        console.log('保存失败', err);

        const errMsg = (err.errMsg || err.message || '').toLowerCase();
        const isAuthError = errMsg.includes('auth') ||
                             errMsg.includes('deny') ||
                             errMsg.includes('permission') ||
                             errMsg.includes('拒绝') ||
                             err.errCode === '1' ||
                             err.errCode === 1;

        if (isAuthError) {
          uni.showModal({
            title: '提示',
            content: '保存图片需要相册权限，请在设置中开启',
            confirmText: '去设置',
            success: (res) => {
              if (res.confirm) uni.openSetting();
            }
          });
        } else {
          uni.showToast({ title: '保存失败', icon: 'none' });
        }
      }
    });
  };

  if (qrcodeUrl.value.startsWith('http')) {
    uni.downloadFile({
      url: qrcodeUrl.value,
      success: (res) => {
        if (res.statusCode === 200) {
          doSave(res.tempFilePath);
        } else {
          uni.hideLoading();
          uni.showToast({ title: '图片下载成功', icon: 'none' });
        }
      },
      fail: (err) => {
        uni.hideLoading();
        console.log('下载失败', err);
        uni.showToast({ title: '图片下载失败', icon: 'none' });
      }
    });
  } else {
    doSave(qrcodeUrl.value);
  }
};
</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>