<template>
  <view class="make-page" :style="{ paddingTop: getBavBarHeight() + 'px' }">
    <!-- 预览卡片 -->
    <view class="card-preview">
      <image class="card-bg" :src="currentTemplate.cover" mode="aspectFill" />
      <view class="card-overlay">
        <view class="title">
          <text class="main">新春快乐</text>
          <text class="sub">2026 YEAR OF THE HORSE</text>
        </view>
        <view class="bubble" @tap="editBlessing">
          <text class="bubble-text">{{ blessingText }}</text>
        </view>
        <view class="user">
          <image class="avatar" src="https://file.lihailezzc.com/resource/1463f294244c11cf274a5eaae115872a.jpeg" mode="aspectFill" />
          <view class="user-info">
            <text class="user-name">陈小明</text>
            <text class="user-desc">送上祝福</text>
          </view>
        </view>
      </view>
    </view>

    <view class="tip-line">
      <text>点击卡片内容即可编辑</text>
    </view>

    <!-- 编辑工具区 -->
    <view class="editor-panel">
      <view class="drag-handle"></view>

      <!-- 功能入口 -->
      <view class="tools">
        <view
          v-for="(tool, idx) in tools"
          :key="idx"
          class="tool-item"
          :class="{ active: activeTool === tool.type }"
          @tap="activeTool = tool.type"
        >
          <view class="tool-icon">{{ tool.icon }}</view>
          <text class="tool-text">{{ tool.text }}</text>
        </view>
      </view>

      <!-- 模板区 -->
      <view v-if="activeTool === 'template'" class="section">
        <view class="section-title">
          <text>热门模板</text>
          <text class="more" @tap="showMore">查看更多 ></text>
        </view>
        <scroll-view scroll-x class="tpl-scroll" show-scrollbar="false">
          <view class="tpl-wrap">
            <view
              v-for="(tpl, i) in templates"
              :key="i"
              class="tpl-card"
              :class="{ selected: tpl.id === currentTemplate.id }"
              @tap="applyTemplate(tpl)"
            >
              <image :src="tpl.cover" class="tpl-cover" mode="aspectFill" />
              <view class="tpl-name">{{ tpl.name }}</view>
              <view v-if="tpl.id === currentTemplate.id" class="tpl-check">✔</view>
            </view>
          </view>
        </scroll-view>
      </view>

      <!-- 文字编辑 -->
      <view v-if="activeTool === 'text'" class="section">
        <view class="section-title"><text>编辑祝福语</text></view>
        <textarea
          class="text-area"
          v-model="blessingText"
          placeholder="请输入你的新春祝福语～"
          :maxlength="100"
          auto-height
          show-confirm-bar="false"
        />
      </view>

      <!-- 图片/背景 -->
      <view v-if="activeTool === 'image'" class="section">
        <view class="section-title"><text>替换背景</text></view>
        <view class="row">
          <button class="btn" @tap="pickImage">从相册选择</button>
          <button class="btn" @tap="resetBackground">重置为模板背景</button>
        </view>
      </view>

      <!-- 头像挂饰 -->
      <view v-if="activeTool === 'avatar'" class="section">
        <view class="section-title"><text>头像挂饰</text></view>
        <view class="row">
          <button class="btn" @tap="toggleAvatarDecor">切换挂饰</button>
        </view>
      </view>

      <!-- 底部操作 -->
      <view class="bottom-actions">
        <button class="btn secondary" @tap="preview">预览</button>
        <button class="btn primary" @tap="shareOrSave">分享 / 保存</button>
      </view>
    </view>

    <canvas
  canvas-id="cardCanvas"
  class="hidden-canvas"
  style="width: 540px; height: 960px;"
/>

  </view>
</template>

<script setup>
import { ref } from 'vue'
import { getBavBarHeight } from '@/utils/system'

const blessingText = ref('祝您在新的一年里：\n身体健康，万事如意！\n马到成功，财源广进！\n一马当先，前程似锦！\n龙马精神，阖家安康！\n骏马奔腾，福运常在！\n策马扬鞭，步步高升!')

const tools = [
  { type: 'template', text: '模板', icon: '▦' },
  { type: 'text', text: '文字', icon: '文' },
  { type: 'image', text: '图片/背景', icon: '图' },
  { type: 'avatar', text: '头像挂饰', icon: '饰' }
]
const activeTool = ref('template')

const templates = ref([
  { id: 1, name: '金典红金', cover: 'https://file.lihailezzc.com/20260109082842_666_1.jpg' },
  { id: 2, name: '富贵花开', cover: 'https://file.lihailezzc.com/20260108222141_644_1.jpg' },
  { id: 3, name: '大气字法', cover: 'https://file.lihailezzc.com/20260108222141_644_1.jpg' },
  { id: 4, name: '萌趣马年', cover: 'https://file.lihailezzc.com/20260109082842_666_1.jpg' }
])

const currentTemplate = ref(templates.value[0])

const applyTemplate = (tpl) => {
  currentTemplate.value = tpl
}

const editBlessing = () => {
  uni.showModal({
    title: '编辑祝福语',
    editable: true,
    content: blessingText.value,
    success: ({ confirm, content }) => {
      if (confirm && content !== undefined) blessingText.value = content
    }
  })
}

const pickImage = () => {
  uni.chooseImage({
    count: 1,
    success: (res) => {
      const path = res.tempFilePaths?.[0]
      if (path) currentTemplate.value = { ...currentTemplate.value, cover: path }
    }
  })
}

const resetBackground = () => {
  currentTemplate.value = templates.value[0]
}

const toggleAvatarDecor = () => {
  uni.showToast({ title: '挂饰功能即将上线～', icon: 'none' })
}

const preview = () => {
  uni.showToast({ title: '预览生成中…', icon: 'none' })
}

const shareOrSave = () => {
    saveByCanvas()
  uni.showToast({ title: '已保存到相册并可分享', icon: 'none' })
}

const showMore = () => {
  uni.showToast({ title: '更多模板即将上线～', icon: 'none' })
}

const saveByCanvas = async () => {
  const ctx = uni.createCanvasContext('cardCanvas')

  // 画布尺寸（rpx 转 px）
  const W = 540
  const H = 960

  // 1️⃣ 画背景
   // ⭐ 先加载背景图
  const bgPath = await loadImage(currentTemplate.value.cover)
  const avatarPath = await loadImage('https://file.lihailezzc.com/resource/1463f294244c11cf274a5eaae115872a.jpeg')
  console.log(111111, bgPath)

  ctx.drawImage(
    bgPath,
    0,
    0,
    W,
    H
  )

  // 2️⃣ 半透明遮罩（和你 UI 一致）
  ctx.setFillStyle('rgba(0,0,0,0.08)')
  ctx.fillRect(0, 0, W, H)

  // 3️⃣ 标题
  ctx.setFillStyle('#ffffff')
  ctx.setFontSize(42)
  ctx.setTextAlign('center')
  ctx.fillText('新春快乐', W / 2, 120)

  ctx.setFontSize(22)
  ctx.setGlobalAlpha(0.9)
  ctx.fillText('2026 YEAR OF THE HORSE', W / 2, 165)
  ctx.setGlobalAlpha(1)

  // 4️⃣ 祝福语气泡
  drawBubbleText(ctx, {
  text: blessingText.value,
  x: 70,
  y: 260,
  maxWidth: 400,
  fontSize: 32,
  lineHeight: 46,
  backgroundColor: 'rgba(255,255,255,0.85)'
})

  // 5️⃣ 用户信息
  ctx.save()
  ctx.beginPath()
  ctx.arc(80, H - 80, 32, 0, Math.PI * 2)
  ctx.clip()
  ctx.drawImage(
    avatarPath,
    48,
    H - 112,
    64,
    64
  )
  ctx.restore()

  ctx.setFillStyle('#ffffff')
  ctx.setFontSize(24)
  ctx.fillText('zzc', 150, H - 85)

  ctx.setFontSize(20)
  ctx.setGlobalAlpha(0.6)
  ctx.fillText('送上祝福', 150, H - 55)
  ctx.setGlobalAlpha(1)

  // 6️⃣ 输出
  ctx.draw(false, () => {
    uni.canvasToTempFilePath({
      canvasId: 'cardCanvas',
      success: res => {
        saveImage(res.tempFilePath)
      }
    })
  })
}

const loadImage = (url) => {
  return new Promise((resolve, reject) => {
    uni.getImageInfo({
      src: url,
      success: res => {
        resolve(res.path) // 本地路径
      },
      fail: err => {
        reject(err)
      }
    })
  })
}

const getImageInfo = (url) => {
  return new Promise((resolve, reject) => {
    uni.getImageInfo({
      src: url,
      success: resolve,
      fail: reject
    })
  })
}

const drawImageCover = (ctx, imgPath, canvasW, canvasH, imgW, imgH) => {
  const scale = Math.max(canvasW / imgW, canvasH / imgH)

  const drawW = imgW * scale
  const drawH = imgH * scale

  const dx = (canvasW - drawW) / 2
  const dy = (canvasH - drawH) / 2

  ctx.drawImage(imgPath, dx, dy, drawW, drawH)
}

const saveImage = (path) => {
  uni.saveImageToPhotosAlbum({
    filePath: path,
    success() {
      uni.showToast({ title: '已保存到相册' })
    },
    fail() {
      uni.showModal({
        title: '提示',
        content: '请授权保存到相册'
      })
    }
  })
}


function drawBubbleText(ctx, options) {
  const {
    text,
    x,
    y,
    maxWidth = 400,
    padding = 84,
    lineHeight = 42,
    radius = 24,
    backgroundColor = 'rgba(255,255,255,0.9)',
    textColor = '#fff',
    fontSize = 32,
    fontFamily = 'PingFang SC'
  } = options

  if (!text) return

  ctx.setFontSize(fontSize)
  ctx.setFillStyle(textColor)
  ctx.font = `${fontSize}px ${fontFamily}`

  // 1️⃣ 文本自动换行
  const lines = []
  let currentLine = ''

  for (let i = 0; i < text.length; i++) {
    const testLine = currentLine + text[i]
    const metrics = ctx.measureText(testLine)
    if (metrics.width > maxWidth - padding * 2) {
      lines.push(currentLine)
      currentLine = text[i]
    } else {
      currentLine = testLine
    }
  }
  lines.push(currentLine)

  // 2️⃣ 计算气泡尺寸
  const bubbleWidth =
    Math.min(
      maxWidth,
      Math.max(
        ...lines.map(line => ctx.measureText(line).width)
      ) + padding * 2
    )

  const bubbleHeight = lines.length * lineHeight + padding * 2

  // 3️⃣ 绘制气泡（圆角矩形）
  drawRoundRect(
    ctx,
    x,
    y,
    bubbleWidth,
    bubbleHeight,
    radius,
    backgroundColor
  )

  // 4️⃣ 绘制文字
  ctx.setFillStyle(textColor)
  lines.forEach((line, index) => {
    ctx.fillText(
      line,
      x + padding,
      y + padding + (index + 1) * lineHeight - 10
    )
  })
}

function drawRoundRect(ctx, x, y, w, h, r, color) {
  ctx.beginPath()
//   ctx.setFillStyle(color)
ctx.fillStyle = 'rgba(255,255,255,0.18)'
ctx.fill()

// 描边（非常关键）
ctx.strokeStyle = 'rgba(255,255,255,0.35)'
ctx.lineWidth = 1
ctx.stroke()

  ctx.moveTo(x + r, y)
  ctx.lineTo(x + w - r, y)
  ctx.arcTo(x + w, y, x + w, y + r, r)
  ctx.lineTo(x + w, y + h - r)
  ctx.arcTo(x + w, y + h, x + w - r, y + h, r)
  ctx.lineTo(x + r, y + h)
  ctx.arcTo(x, y + h, x, y + h - r, r)
  ctx.lineTo(x, y + r)
  ctx.arcTo(x, y, x + r, y, r)
  ctx.closePath()
  ctx.fill()
}



</script>

<style lang="scss" scoped>
.make-page {
  min-height: 100vh;
  background: #fff;
  box-sizing: border-box;
}

/* 卡片预览 */
.card-preview {
  margin: 24rpx auto;
  height: 960rpx;
  width: 540rpx;
  border-radius: 30rpx;
  overflow: hidden;
  position: relative;
  box-shadow: 0 16rpx 40rpx rgba(0,0,0,0.12);
}
.card-bg {
  width: 100%;
  height: 100%;
}
.card-overlay {
  position: absolute;
  inset: 0;
  padding: 30rpx;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.card-overlay .title {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 60rpx;
}
.title .main {
  font-size: 42rpx;
  font-weight: 700;
}
.title .sub {
  margin-top: 8rpx;
  font-size: 22rpx;
  opacity: 0.9;
}
.bubble {
  margin-top: 80rpx;
  background: rgba(255, 255, 255, 0.18);
  border: 1rpx solid rgba(255, 255, 255, 0.35);
  border-radius: 26rpx;
  padding: 40rpx;
  max-width: 560rpx;
  backdrop-filter: blur(10rpx);
}
.bubble-text {
  font-size: 26rpx;
  line-height: 1.6;
}
.user {
    position: absolute;
    bottom: 40rpx;
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.18);
  border: 1rpx solid rgba(255, 255, 255, 0.35);
   border-radius: 9999rpx;
  padding: 15rpx;
  padding-left: 20rpx;
  padding-right: 20rpx;
}
.avatar {
  width: 64rpx;
  height: 64rpx;
  border-radius: 50%;
  margin-right: 14rpx;
  border: 2rpx solid rgba(255,255,255,0.6);
}
.user .user-info{
    display: flex;
    flex-direction: column;
}
.user-name { font-size: 24rpx; font-weight: 600; }
.user-desc { font-size: 20rpx; opacity: 0.6; }

/* 顶部提示 */
.tip-line {
  text-align: center;
  color: #999;
  font-size: 22rpx;
}

/* 编辑工具区 */
.editor-panel {
  margin: 20rpx 24rpx 40rpx;
  border-radius: 30rpx 30rpx 0 0;
  background: #fff;
  box-shadow: 0 -10rpx 30rpx rgba(0,0,0,0.06);
  padding-bottom: env(safe-area-inset-bottom);
}
.drag-handle {
  width: 120rpx; height: 8rpx; border-radius: 999rpx;
  background: #eee; margin: 12rpx auto;
}

/* 工具入口 */
.tools {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 16rpx 24rpx 8rpx;
}
.tool-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 14rpx 0;
  border-radius: 18rpx;
  color: #666;
}
.tool-item.active {
  background: #fff6f5;
  color: #ff3b30;
}
.tool-icon {
  width: 64rpx; height: 64rpx;
  border-radius: 16rpx;
  background: #fafafa;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 8rpx;
}
.tool-text { font-size: 22rpx; }

/* 模板区 */
.section { padding: 12rpx 24rpx 0; }
.section-title {
  display: flex; align-items: center;
}
.section-title .more {
  margin-left: auto;
  color: #ff3b30;
  font-size: 24rpx;
}
.tpl-scroll { margin-top: 12rpx; }
.tpl-wrap { display: flex; }
.tpl-card {
  width: 180rpx; height: 240rpx;
  border-radius: 18rpx; overflow: hidden;
  background: #fff; margin-right: 16rpx;
  position: relative;
  box-shadow: 0 8rpx 20rpx rgba(0,0,0,0.06);
}
.tpl-card.selected { outline: 4rpx solid #ff3b30; }
.tpl-cover { width: 100%; height: 160rpx; }
.tpl-name {
  font-size: 22rpx; color: #333;
  padding: 8rpx 12rpx;
}
.tpl-check {
  position: absolute; right: 10rpx; top: 10rpx;
  width: 36rpx; height: 36rpx; border-radius: 50%;
  background: #ff3b30; color: #fff; font-size: 22rpx;
  display: flex; align-items: center; justify-content: center;
}

/* 按钮区 */
.bottom-actions {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20rpx 24rpx 30rpx;
}
.btn {
  height: 88rpx; border-radius: 999rpx; padding: 0 40rpx;
  font-size: 28rpx;
}
.btn.secondary {
  background: #f5f5f5; color: #333;
}
.btn.primary {
  background: #ff3b30; color: #fff;
  box-shadow: 0 12rpx 24rpx rgba(255,59,48,0.35);
}
.hidden-canvas {
  position: fixed;
  left: -9999px;
  top: -9999px;
}
</style>