<script setup>
import { ref, onMounted, computed } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import Container from "@/components/Container.vue";
import BowTargetEdit from "@/components/BowTargetEdit.vue";
import ScreenHint from "@/components/ScreenHint.vue";
import RingBarChart from "@/components/RingBarChart.vue";

import { getPointBookDetailAPI, addNoteAPI } from "@/api";
// import { generateShareImage } from "@/util";

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

const selectedIndex = ref(0);
const showTip = ref(false);
const showTip2 = ref(false);
const showTip3 = ref(false);
const data = ref({});
const targetId = ref(0);
const targetSrc = ref("");
const arrows = ref([]);
const notes = ref("");
const draftNotes = ref("");
const record = ref({
  groups: [],
  user: {},
});
const shareType = ref(1);

const openTip = (index) => {
  if (index === 1) showTip.value = true;
  else if (index === 2) showTip2.value = true;
  else if (index === 3) showTip3.value = true;
};

const closeTip = () => {
  showTip.value = false;
  showTip2.value = false;
  showTip3.value = false;
};

const saveNote = async () => {
  notes.value = draftNotes.value;
  draftNotes.value = "";
  showTip3.value = false;
  if (record.value.id) {
    await addNoteAPI(record.value.id, notes.value);
  }
};

const onSelect = (index) => {
  selectedIndex.value = index;
  data.value = record.value.groups[index];
  arrows.value = record.value.groups[index].list.filter(
    (item) => item.x && item.y
  );
};

const goBack = () => {
  const pages = getCurrentPages();
  if (pages.length > 1) {
    const currentPage = pages[pages.length - 2];
    uni.navigateBack({
      delta: currentPage.route === "pages/point-book" ? 1 : 2,
    });
  } else {
    uni.redirectTo({
      url: "/pages/index/index",
    });
  }
};

const ringRates = computed(() => {
  const rates = new Array(12).fill(0);
  arrows.value.forEach((item) => {
    if (item.ring === -1) rates[11] += 1;
    else rates[item.ring] += 1;
  });
  return rates.map((r) => r / arrows.value.length);
});

const loading = ref(false);
const shareImage = async () => {
  if (loading.value) return;
  loading.value = true;
  await generateShareImage("shareImageCanvas");
  loading.value = false;
};

onLoad(async (options) => {
  if (options.id) {
    const result = await getPointBookDetailAPI(options.id || 209);
    record.value = result;
    notes.value = result.remark || "";
    const config = uni.getStorageSync("point-book-config");
    config.targetOption.some((item) => {
      if (item.id === result.targetType) {
        targetId.value = item.id;
        targetSrc.value = item.icon;
      }
    });
    if (result.groups) {
      data.value = result.groups[0];
      arrows.value = result.groups[0].list;
    }
  }
});
</script>

<template>
  <Container title="" :onBack="goBack">
    <view class="container">
      <!-- <canvas
        class="share-canvas"
        canvas-id="shareImageCanvas"
        style="width: 375px; height: 860px"
      ></canvas> -->
      <view class="detail-data">
        <view>
          <view
            :style="{ display: 'flex', alignItems: 'center' }"
            @click="() => openTip(1)"
          >
            <text>Stability</text>
            <image
              src="/static/s-question-mark.png"
              mode="widthFix"
              class="question-mark"
            />
          </view>
          <text>{{ Number((data.stability || 0).toFixed(2)) }}</text>
        </view>
        <view>
          <view>Yellow Rate</view>
          <text>{{ Number((data.yellowRate * 100).toFixed(2)) }}%</text>
        </view>
        <view>
          <view>Gold Rings</view>
          <text>{{ data.tenRings }}</text>
        </view>
        <view>
          <view>Avg Rings</view>
          <text>{{ Number((data.averageRing || 0).toFixed(2)) }}</text>
        </view>
        <view>
          <view>Total Rings</view>
          <text>{{ data.userTotalRing }}/{{ data.totalRing }}</text>
        </view>
        <button
          hover-class="none"
          @click="() => openTip(3)"
          v-if="user.id === record.user.id"
        >
          <image src="/static/edit.png" mode="widthFix" />
          <text>Notes</text>
        </button>
      </view>
      <view class="title-bar">
        <view />
        <text>Distribution</text>
        <!-- <button hover-class="none" @click="() => openTip(2)">
          <image
            src="/static/s-question-mark.png"
            mode="widthFix"
            class="question-mark"
          />
        </button> -->
      </view>
      <view :style="{ transform: 'translateY(-45rpx)' }">
        <BowTargetEdit
          :id="targetId"
          :src="targetSrc"
          :arrows="arrows.filter((item) => item.x && item.y)"
        />
      </view>
      <view :style="{ transform: 'translateY(-60rpx)' }">
        <view :style="{ padding: '0 30rpx' }">
          <RingBarChart :data="ringRates" />
        </view>
        <view class="ring-text-groups">
          <view v-for="(item, index) in record.groups" :key="index">
            <view v-if="selectedIndex === 0 && index !== 0">
              <text>{{ index }}：</text>
              <text>{{ item.userTotalRing }}</text>
              <text>Ring</text>
            </view>
            <view
              v-if="
                (selectedIndex === 0 && index !== 0) ||
                (selectedIndex !== 0 && index === selectedIndex)
              "
            >
              <text
                v-for="(arrow, index2) in item.list"
                :key="index2"
                :style="{
                  color:
                    arrow.ring === 0 || arrow.ring === 10 ? '#FFA118' : '#666',
                }"
              >
                {{
                  arrow.ring === 0 ? "X" : arrow.ring === -1 ? "M" : arrow.ring
                }}
              </text>
            </view>
          </view>
        </view>
        <view
          class="btns"
          :style="{
            gridTemplateColumns: `repeat(${
              user.id === record.user.id ? 1 : 1
            }, 1fr)`,
          }"
        >
          <button hover-class="none" @click="goBack">Close</button>
          <!-- <button
            hover-class="none"
            @click="shareImage"
            v-if="user.id === record.user.id"
          >
            分享
          </button> -->
        </view>
      </view>
      <ScreenHint
        :show="showTip || showTip2 || showTip3"
        :onClose="!notes && showTip3 ? null : closeTip"
      >
        <view class="tip-content">
          <block v-if="showTip">
            <text>Stability Description</text>
            <text
              >The stability of archery is measured by calculating the average
              distance of each arrow to other arrows. The smaller the number,
              the more stable the archery. This data can only be generated when
              the user marks the landing point.</text
            >
          </block>
          <block v-if="showTip2">
            <text>Distribution Description</text>
            <text>Show the user's archery points in a practice session</text>
          </block>
          <block v-if="showTip3">
            <text>Notes</text>
            <text v-if="notes">{{ notes }}</text>
            <textarea
              v-if="!notes"
              v-model="draftNotes"
              maxlength="300"
              rows="4"
              class="notes-input"
              placeholder="写下本次射箭的补充信息与心得"
              placeholder-style="color: #ccc;"
            />
            <view v-if="!notes">
              <button hover-class="none" @click="showTip3 = false">
                Cancel
              </button>
              <button hover-class="none" @click="saveNote">Save Notes</button>
            </view>
          </block>
        </view>
      </ScreenHint>
    </view>
  </Container>
</template>

<style scoped>
.container {
  width: 100%;
}
.detail-data {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 3vw;
  margin: 10rpx 30rpx;
  margin-top: 20rpx;
}
.detail-data > view,
.detail-data > button {
  border-radius: 10px;
  background-color: #fff;
  margin-bottom: 20rpx;
  padding: 15rpx 24rpx;
}
.detail-data > view > view {
  font-size: 13px;
  color: #999;
  margin-bottom: 6rpx;
}
.detail-data > view > view > text {
  word-break: keep-all;
}
.detail-data > view > text {
  font-weight: 500;
  color: #000;
}
.detail-data > button {
  display: flex;
  align-items: center;
  font-size: 26rpx;
  color: #999999;
}
.detail-data > button > image {
  width: 28rpx;
  height: 28rpx;
  margin-right: 10rpx;
  margin-left: 20rpx;
}
.question-mark {
  width: 28rpx;
  height: 28rpx;
  margin-left: 3px;
}
.title-bar {
  width: 100%;
  display: flex;
  align-items: center;
  font-size: 13px;
  color: #999;
  position: relative;
  z-index: 10;
}
.title-bar > view:first-child {
  width: 8rpx;
  height: 28rpx;
  border-radius: 10px;
  background-color: #fed847;
  margin-right: 7px;
  margin-left: 15px;
}
.title-bar > button {
  height: 34rpx;
}
.tip-content {
  width: 100%;
  padding: 50rpx 44rpx;
  display: flex;
  flex-direction: column;
  color: #000;
  overflow: hidden;
}
.tip-content > text {
  width: 100%;
}
.tip-content > text:first-child {
  text-align: center;
}
.tip-content > text:last-child {
  font-size: 13px;
  margin-top: 20px;
  opacity: 0.8;
}
.tip-content > view {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.tip-content > view > input {
  width: 80%;
  height: 44px;
  border-radius: 22px;
  border: 1px solid #eeeeee;
  padding: 0 12px;
  font-size: 14px;
  color: #000;
}
.tip-content > view > button {
  width: 48%;
  background: linear-gradient(180deg, #fbfbfb 0%, #f5f5f5 100%);
  border-radius: 22px;
  border: 1px solid #eeeeee;
  padding: 12px 0;
  font-size: 14px;
  color: #000;
}
.tip-content > view > button:last-child {
  background: #fed847;
}
.ring-text-groups {
  display: flex;
  flex-direction: column;
  padding: 20rpx;
  padding-top: 40rpx;
  font-size: 24rpx;
  color: #999999;
}
.ring-text-groups > view {
  display: flex;
  justify-content: center;
}
.ring-text-groups > view > view:first-child:nth-last-child(2) {
  margin-top: 10rpx;
  margin-left: 30rpx;
  width: 90rpx;
  text-align: center;
  justify-content: flex-end;
  font-size: 20rpx;
  display: flex;
  color: #999;
}
.ring-text-groups > view > view:first-child:nth-last-child(2) > text {
  line-height: 30rpx;
}
.ring-text-groups
  > view
  > view:first-child:nth-last-child(2)
  > text:nth-child(2) {
  font-size: 40rpx;
  /* min-width: 45rpx; */
  color: #666;
  margin-right: 6rpx;
  margin-top: -5rpx;
}
.ring-text-groups > view > view:last-child {
  width: 80%;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 30rpx;
  transform: translateX(20rpx);
}
.ring-text-groups > view > view:last-child > text {
  width: 16.6%;
  text-align: center;
  margin-bottom: 10rpx;
  font-weight: 500;
  font-size: 26rpx;
}
.notes-input {
  width: calc(100% - 40rpx);
  min-width: calc(100% - 40rpx);
  margin: 25rpx 0;
  border: 1px solid #eee;
  border-radius: 5px;
  padding: 5px;
  color: #000;
  padding: 20rpx;
}
.btns {
  margin-bottom: 40rpx;
  display: grid;
  align-items: center;
  justify-content: center;
  column-gap: 20rpx;
  padding: 0 20rpx;
}
.btns > button {
  height: 84rpx;
  line-height: 84rpx;
  background: linear-gradient(180deg, #fbfbfb 0%, #f5f5f5 100%), #ffffff;
  border-radius: 44rpx;
  border: 2rpx solid #eeeeee;
  box-sizing: border-box;
  font-weight: 500;
  font-size: 30rpx;
  color: #000000;
}
.btns > button:nth-child(2) {
  background: #fed847;
  border: none;
}
</style>
