<script setup>
import { ref, onMounted } from "vue";
import Container from "@/components/Container.vue";
import PointRankItem from "@/components/PointRankItem.vue";
import { getPointBookRankListAPI } from "@/apis";
import { capsuleHeight } from "@/util";
import { wxShare, debounce } from "@/util";
import { sharePointData } from "@/canvas";

import useStore from "@/store";
import { storeToRefs } from "pinia";
const { user } = storeToRefs(useStore());

const list = ref([]);
const mine = ref({
  averageRing: 0,
});
const sharing = ref(false);

const shareImage = async () => {
  if (!mine.value.id || sharing.value) return;
  sharing.value = true;
  try {
    await sharePointData("shareCanvas", mine.value);
    await wxShare("shareCanvas");
  } catch (e) {
    uni.showToast({
      title: "海报生成失败，请稍后重试",
      icon: "none",
    });
  } finally {
    sharing.value = false;
  }
};

onMounted(async () => {
  const result = await getPointBookRankListAPI();
  mine.value = result.my;
  list.value = result.list;
});
</script>

<template>
  <Container :bgType="5" bgColor="#F5F5F5" :whiteBackArrow="false">
    <view class="top-part">
      <view>
        <image src="https://static.shelingxingqiu.com/shootmini/static/point-champion.png" mode="widthFix" />
        <image
          :src="list[0] && list[0].avatar ? list[0].avatar : ''"
          mode="widthFix"
        />
      </view>
      <block v-if="list[0]">
        <text>{{ list[0].name }}占领了封面</text>
        <text>整整消耗了{{ Math.round(list[0].weekArrow * 1.6) }}大卡!</text>
      </block>
    </view>
    <view class="rank-title-bar">
      <text>排行</text>
      <text>用户</text>
      <text>本周箭数</text>
      <text>消耗</text>
    </view>
    <view
      class="data-list"
      :style="{ marginBottom: '20rpx' }"
      v-if="user.id && mine"
    >
      <PointRankItem :data="mine" :borderWidth="0" />
    </view>
    <view class="data-list">
      <PointRankItem v-for="item in list" :key="item.id" :data="item" />
    </view>
    <view :style="{ height: '30rpx' }"></view>
    <button
      hover-class="none"
      class="share-btn"
      @click="shareImage"
      v-if="user.id"
    >
      <image src="../static/share-icon.png" mode="widthFix" />
    </button>
    <canvas
      class="share-canvas"
      id="shareCanvas"
      type="2d"
      style="width: 375px; height: 460px"
    ></canvas>
  </Container>
</template>

<style scoped lang="scss">
.container {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}
.top-part {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  font-size: 26rpx;
  color: #333333;
  height: 450rpx;
}
.top-part > view:first-child {
  width: 310rpx;
  height: 310rpx;
  position: relative;
}
.top-part > view:first-child > image:first-child {
  width: 100%;
}
.top-part > view:first-child > image:nth-child(2) {
  position: absolute;
  width: 140rpx;
  height: 140rpx;
  border-radius: 50%;
  top: calc(50% - 70rpx);
  left: calc(50% - 70rpx);
}
.top-part > text {
  margin-bottom: 15rpx;
}
.rank-title-bar {
  font-size: 24rpx;
  color: #777777;
  display: flex;
  align-items: center;
  text-align: center;
  width: calc(100% - 80rpx);
  line-height: 80rpx;
  padding: 0 40rpx;
}
.rank-title-bar > text:nth-child(1) {
  width: 60rpx;
}
.rank-title-bar > text:nth-child(2) {
  flex: 1;
}
.rank-title-bar > text:nth-child(3) {
  width: 18%;
}
.rank-title-bar > text:nth-child(4) {
  width: 24%;
}
.data-list {
  background: $uni-white;
  border-radius: 25rpx;
  margin: 0 25rpx;
}
.share-btn {
  position: fixed;
  right: 25rpx;
  bottom: 25rpx;
}
.share-btn > image {
  width: 116rpx;
  height: 116rpx;
}
</style>
