<template>
  <view class="share">
    <!-- 海报内容区域 -->
    <view class="bg_color_fff border_radius_20 save-area" id="saveArea">
      <view class="merchant-info">
        <image class="merchant-logo" :src="merchantInfo.merchantLogo" mode="aspectFill"></image>
        <view class="merchant-detail">
          <view class="merchant-name">{{merchantInfo.merchantNameNew}}</view>
        </view>
      </view>
      <view class="big-merchant-logo">
        <image class="merchant-logo" :src="merchantInfo.merchantLogo" mode="aspectFill"></image>
      </view>
      <view class="qrCodeInfo">
        <view class="left">
          <view class="title">{{ merchantInfo.merchantDescribeNew }}</view>
          <view class="subTitle">扫码加入<text class="dot"></text>{{merchantInfo.merchantNameNew}}</view>
        </view>
        <view class="right">
          <image class="qrCode" :src="qrCode" mode="widthFix"></image>
        </view>
      </view>
    </view>

    <!-- 操作按钮 -->
    <view class="flex-center-between padding30">
      <view class="order_btn flex-center save-btn" @click="saveToAlbum">
        <view class="flex-center-between">
          <image
              src="/static/img/xiazai.png"
              mode="widthFix"
              class="share_img mr20"
          ></image>
          <text>保存海报</text>
        </view>
      </view>
      <button class="order_btn flex-center share-btn" open-type="share">
        <view class="flex-center-between">
          <image
              src="/static/img/fenxiang_w.png"
              mode="widthFix"
              class="share_img mr20"
          ></image>
          <text>分享海报</text>
        </view>
      </button>
    </view>

    <!-- 用于绘制海报的Canvas -->
    <canvas
        canvas-id="posterCanvas"
        id="posterCanvas"
        style="position: fixed; top: -9999px; left: -9999px;"
        :style="{ width: canvasWidth + 'px', height: canvasHeight + 'px' }"
    ></canvas>
  </view>
</template>

<script setup>
import { ref, reactive, onMounted, getCurrentInstance } from 'vue'
import { onLoad } from "@dcloudio/uni-app";
import { getQrcode } from "@/api/user.js"

// 响应式数据
const merchantInfo = ref({})
const qrCode = ref("")
const canvasWidth = ref(600) // 根据参考图片调整宽度
const canvasHeight = ref(800) // 根据参考图片调整高度

// 获取二维码方法
const QRCodeGenerationFn = async () => {
  uni.showLoading({ title: "正在获取二维码..." })
  try {
    let data = {
      id: merchantInfo.value.id
    }
    const response = await getQrcode(data)
    console.log("getQrcode", response)
    qrCode.value = response.message
  } catch (err) {
    console.error("获取二维码失败", err)
    uni.showToast({ title: "获取二维码失败", icon: "none" })
  } finally {
    uni.hideLoading()
  }
}

// 绘制圆角矩形
const drawRoundRect = (ctx, x, y, width, height, radius) => {
  ctx.beginPath()
  ctx.moveTo(x + radius, y)
  ctx.arcTo(x + width, y, x + width, y + height, radius)
  ctx.arcTo(x + width, y + height, x, y + height, radius)
  ctx.arcTo(x, y + height, x, y, radius)
  ctx.arcTo(x, y, x + width, y, radius)
  ctx.closePath()
}

// 绘制圆角图片
const drawRoundImage = (ctx, imgPath, x, y, width, height, radius) => {
  // 保存当前状态
  ctx.save()

  // 创建圆角路径
  drawRoundRect(ctx, x, y, width, height, radius)
  ctx.clip()

  // 绘制图片
  ctx.drawImage(imgPath, x, y, width, height)

  // 恢复状态
  ctx.restore()
}

// 保存海报到相册
const saveToAlbum = async () => {
  uni.showLoading({ title: "正在生成海报..." })

  try {
    // 检查必要的图片资源
    if (!merchantInfo.value.merchantLogo) {
      throw new Error("商家Logo不能为空")
    }

    if (!qrCode.value) {
      throw new Error("二维码不能为空")
    }

    // 创建 Canvas 上下文
    const ctx = uni.createCanvasContext('posterCanvas', getCurrentInstance())

    // 1. 绘制白色背景
    ctx.setFillStyle("#ffffff")
    ctx.fillRect(0, 0, canvasWidth.value, canvasHeight.value)

    // 3. 加载并绘制商家Logo（小头像）
    await new Promise((resolve, reject) => {
      uni.getImageInfo({
        src: merchantInfo.value.merchantLogo,
        success: (logoRes) => {
          // 绘制圆形商家头像
          const avatarSize = 80
          const avatarX = 60
          const avatarY = 60
          const radius = 10 // 设置圆角半径为10

          // ctx.drawImage(logoRes.path, avatarX, avatarY, avatarSize, avatarSize)
          // ctx.restore()
          drawRoundImage(ctx, logoRes.path, avatarX, avatarY, avatarSize, avatarSize, radius)

          resolve()
        },
        fail: (err) => {
          reject(new Error('获取商家Logo失败: ' + err.errMsg))
        }
      })
    })

    // 4. 绘制商家名称
    const merchantName = merchantInfo.value.merchantNameNew || "商家名称"
    ctx.setFontSize(28)
    ctx.setFillStyle("#333333")
    ctx.setTextAlign("left")
    ctx.fillText(merchantName, 160, 110)

    // 5. 绘制主体内容区域
    const contentStartY = 200

    // 6. 加载并绘制商家Logo（大头像）
    await new Promise((resolve, reject) => {
      uni.getImageInfo({
        src: merchantInfo.value.merchantLogo,
        success: (logoRes) => {
          // 绘制圆形商家头像
          const avatarSize = 400
          const avatarX = 100
          const avatarY = contentStartY
          const radius = 10
          // ctx.drawImage(logoRes.path, avatarX, contentStartY, avatarSize, avatarSize)
          // ctx.restore()
          drawRoundImage(ctx, logoRes.path, avatarX, avatarY, avatarSize, avatarSize, radius)

          resolve()
        },
        fail: (err) => {
          reject(new Error('获取商家Logo失败: ' + err.errMsg))
        }
      })
    })

    // 9. 绘制"好久不见"标题
    const bottomStartY = contentStartY + 80+400
    ctx.setFontSize(32)
    ctx.setFillStyle("#333333")
    ctx.setTextAlign("left")
    ctx.fillText(merchantInfo.value.merchantDescribeNew, 40, bottomStartY)

    // 10. 绘制副标题
    ctx.setFontSize(20)
    ctx.setFillStyle("#787878")
    const subTitle = `扫码加入 · ${merchantInfo.value.merchantNameNew}`
    ctx.fillText(subTitle, 40, bottomStartY + 50)

    // 11. 加载并绘制二维码
    await new Promise((resolve, reject) => {
      uni.getImageInfo({
        src: qrCode.value,
        success: (qrRes) => {
          const qrSize = 150
          const qrX = canvasWidth.value-210;
          const qrY = contentStartY+400+20
          ctx.drawImage(qrRes.path, qrX, qrY, qrSize, qrSize)
          ctx.restore()

          resolve()
        },
        fail: (err) => {
          reject(new Error('获取二维码失败: ' + err.errMsg))
        }
      })
    })


    // 等待绘制完成
    await new Promise((resolve) => {
      ctx.draw(false, () => {
        setTimeout(() => {
          resolve()
        }, 800) // 增加等待时间确保绘制完成
      })
    })

    // 13. 导出Canvas为临时文件
    const tempFilePath = await new Promise((resolve, reject) => {
      uni.canvasToTempFilePath({
        canvasId: 'posterCanvas',
        fileType: 'png',
        quality: 1,
        width: canvasWidth.value,
        height: canvasHeight.value,
        success: (res) => {
          resolve(res.tempFilePath)
        },
        fail: (err) => {
          reject(new Error('生成图片失败: ' + err.errMsg))
        }
      }, getCurrentInstance())
    })

    // 14. 保存到相册
    await new Promise((resolve, reject) => {
      uni.saveImageToPhotosAlbum({
        filePath: tempFilePath,
        success: () => {
          resolve()
        },
        fail: (err) => {
          if (err.errMsg.includes('auth deny') || err.errMsg.includes('auth denied')) {
            uni.showModal({
              title: '提示',
              content: '需要授权保存图片到相册',
              showCancel: false,
              confirmText: '去设置',
              success: () => {
                uni.openSetting()
              }
            })
          }
          reject(new Error('保存失败: ' + err.errMsg))
        }
      })
    })

    uni.hideLoading()
    uni.showToast({ title: '保存成功', icon: 'success' })

  } catch (error) {
    uni.hideLoading()
    console.error('保存海报失败:', error)
    uni.showToast({
      title: error.message || '保存失败',
      icon: 'none',
      duration: 3000
    })
  }
}

// 页面加载时获取二维码
onLoad((options) => {
  if (options.merchantInfo) {
    merchantInfo.value = JSON.parse(decodeURIComponent(options.merchantInfo))
    // 修正语法错误
    merchantInfo.value.merchantNameNew = truncateText(merchantInfo.value.merchantName, 10) || ''
    merchantInfo.value.merchantDescribeNew = truncateText(merchantInfo.value.merchantDescribe, 10) || ''
        qrCode.value = merchantInfo.value.merchantCodeUrl || ''

    if (!qrCode.value) {
      QRCodeGenerationFn()
    }
  }
})

// 分享功能
const onShareAppMessage = () => {
  let keyInfo = `merchantCode=${merchantInfo.value?.merchantCode}`
  keyInfo = encodeURIComponent(keyInfo)
  return {
    title: `快来加入${merchantInfo.value?.merchantName || '我们'}~`,
    desc: merchantInfo.value.merchantDescribeNew,
    path: `/pages/index/index?scene=${keyInfo}`
  }
}
// 添加文本截取函数
const truncateText = (text, maxLength) => {
  if (!text) return ''
  if (text.length <= maxLength) return text
  return text.substring(0, maxLength) + '...'
}
// 暴露给模板
defineExpose({
  onShareAppMessage
})
</script>

<style lang="scss" scoped>
.share {
  padding: 30rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
  box-sizing: border-box;

  .save-area {
    padding: 40rpx;
    box-sizing: border-box;
    position: relative;
    margin-bottom: 30rpx;
  }

  .logo_img {
    width: 60rpx;
    height: 60rpx;
    border-radius: 50%;
  }

  .share_img {
    width: 40rpx;
    height: 40rpx;
  }

  .order_btn {
    padding: 20rpx;
    width: 45%;
    text-align: center;
    font-size: 32rpx;
    color: white;
    border-radius: 12rpx;
    border: none;
    background: #f0ad4e;
  }
}

.merchant-info {
  display: flex;
  align-items: center;
  margin-bottom: 30rpx;

  .merchant-logo {
    width: 120rpx;
    height: 120rpx;
    border-radius: 12rpx;
    margin-right: 30rpx;
  }

  .merchant-detail {
    flex: 1;

    .merchant-name {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
    }
  }
}

.big-merchant-logo {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  margin: 60rpx 0;

  .merchant-logo {
    width: 400rpx;
    height: 400rpx;
    border-radius: 20rpx;
    box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.1);
  }
}

.border_radius_20 {
  border-radius: 20rpx;
}

.bg_color_fff {
  background-color: #ffffff;
}

.qrCodeInfo {
  display: flex;
  align-items: center;
  margin-top: 60rpx;

  .left {
    flex: 1;

    .title {
      font-size: 36rpx;
      font-weight: bold;
      color: #333;
      line-height: 60rpx;
      margin-bottom: 16rpx;
    }

    .subTitle {
      font-size: 28rpx;
      color: #666;
      line-height: 40rpx;

      .dot {
        display: inline-block;
        vertical-align: middle;
        height: 8rpx;
        width: 8rpx;
        border-radius: 50%;
        background-color: #666;
        margin: 0 16rpx;
      }
    }
  }

  .right {
    width: 160rpx;
    text-align: center;

    .qrCode {
      width: 100%;
      border-radius: 12rpx;
    }
  }
}

.flex-center-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.padding30 {
  padding: 30rpx 0;
}

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.mr20 {
  margin-right: 20rpx;
}
</style>