<script setup>
import { onMounted } from "vue";
import Container from "@/components/Container.vue";
import { renderText, renderRankTitle, renderLine } from "@/util.js";

const saveImage = () => {
  uni.canvasToTempFilePath({
    canvasId: "shareCanvas",
    success: (res) => {
      const tempFilePath = res.tempFilePath;

      // 保存图片到相册
      uni.saveImageToPhotosAlbum({
        filePath: tempFilePath,
        success: () => {
          uni.showToast({ title: "保存成功" });
        },
        fail: () => {
          uni.showToast({ title: "保存失败", icon: "error" });
        },
      });
    },
  });
};

onMounted(() => {
  var ctx = uni.createCanvasContext("shareCanvas");
  const width = 302;
  const height = 535;
  ctx.drawImage("../static/share-bg.png", 0, 0, 302, 534);
  ctx.drawImage("../static/avatar.png", 20, 20, 35, 35);
  ctx.drawImage("../static/avatar-frame.png", 15, 15, 45, 45);
  renderText(ctx, "用户名称", 14, "#fff", 70, 35);
  renderRankTitle(ctx, "钻石1级");
  ctx.drawImage(
    "../static/first-try-title.png",
    (width - 200) / 2,
    155,
    200,
    53
  );
  renderText(ctx, "正式开启弓箭手之路", 22, "#fff", 53, 230);
  renderText(ctx, "共", 16, "#fff", 124, 300);
  renderText(ctx, "50", 16, "#fed847", 144, 300);
  renderText(ctx, "环", 16, "#fff", 166, 300);
  renderLine(ctx, 80);
  renderLine(ctx, 192);
  for (let i = 0; i < 6; i++) {
    ctx.drawImage("../static/score-bg.png", 16 + i * 46, 320, 40, 40);
    renderText(ctx, "9", 25, "#fed847", 29 + i * 46, 349);
  }
  for (let i = 0; i < 6; i++) {
    ctx.drawImage("../static/score-bg.png", 16 + i * 46, 366, 40, 40);
    renderText(ctx, "9", 25, "#fed847", 29 + i * 46, 395);
  }
  ctx.drawImage(
    "../static/device-icon.png",
    width * 0.06,
    height * 0.87,
    55,
    55
  );
  renderText(ctx, "射灵平台", 16, "#fff", width * 0.28, height * 0.9);
  renderText(
    ctx,
    "快加入我们一起玩吧~",
    11,
    "rgba(255, 255, 255, 0.5)",
    width * 0.28,
    height * 0.93
  );
  renderText(
    ctx,
    "后羿就是这样练成的",
    11,
    "rgba(255, 255, 255, 0.5)",
    width * 0.28,
    height * 0.96
  );
  ctx.drawImage("../static/qr-code.png", width * 0.75, height * 0.86, 60, 60);
  ctx.draw();
});
</script>

<template>
  <Container>
    <view class="content">
      <canvas
        style="width: 302px; height: 534px"
        canvas-id="shareCanvas"
        id="firstCanvas"
      ></canvas>
      <view class="footer">
        <view>
          <image src="../static/wechat-outline.png" mode="widthFix" />
          <text>微信好友</text>
        </view>
        <view>
          <image src="../static/wechat-moment.png" mode="widthFix" />
          <text>朋友圈</text>
        </view>
        <view @click="saveImage">
          <image src="../static/download.png" mode="widthFix" />
          <text>保存到相册</text>
        </view>
      </view>
    </view>
  </Container>
</template>

<style scoped>
.content {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 20px;
}
.footer {
  width: 100%;
  display: flex;
  justify-content: space-around;
  margin-top: 50px;
}
.footer > view {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #fff;
  font-size: 12px;
}
.footer > view > image {
  width: 45px;
  margin-bottom: 10px;
}
</style>
