<script setup>
import { ref, computed, onMounted, onBeforeUnmount } from "vue";
import { onShow, onShareAppMessage, onShareTimeline } from "@dcloudio/uni-app";
import Container from "@/components/Container.vue";
import PointRecord from "@/components/PointRecord.vue";
import SModal from "@/components/SModal.vue";
import Signin from "@/components/Signin.vue";

import {
  getHomeData,
  getPointBookConfigAPI,
  getPointBookListAPI,
  getPointBookStatisticsAPI,
} from "@/apis";

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

const isIOS = computed(() => {
  const systemInfo = uni.getDeviceInfo();
  return systemInfo.osName === "ios";
});

const showModal = ref(false);
const data = ref({
  weeksCheckIn: [],
});

const list = ref([]);

const toListPage = () => {
  uni.navigateTo({
    url: "/pages/point-book-list",
  });
};

onShow(async () => {
  const result = await getPointBookListAPI(1);
  list.value = result;
  const result2 = await getPointBookStatisticsAPI();
  data.value = result2;
});

const onSignin = () => {
  showModal.value = true;
};

const startScoring = () => {
  if (user.value.id) {
    uni.navigateTo({
      url: "/pages/point-book-create",
    });
  } else {
    showModal.value = true;
  }
};

onMounted(async () => {
  uni.$on("point-book-signin", onSignin);
  const token = uni.getStorageSync(
    `${uni.getAccountInfoSync().miniProgram.envVersion}_token`
  );
  if (!user.value.id && token) {
    const data = await getHomeData();
    if (data.user) updateUser(data.user);
  }
  const config = await getPointBookConfigAPI();
  uni.setStorageSync("point-book-config", config);
});

onBeforeUnmount(() => {
  uni.$off("point-book-signin", onSignin);
});

onShareAppMessage(() => {
  return {
    title: "高效记录每一次射箭，深度分析助你提升！",
    path: "pages/point-book-create",
    imageUrl:
      "https://static.shelingxingqiu.com/attachment/2025-09-22/dcz4m4nbgycqqwknrv.png",
  };
});
onShareTimeline(() => {
  return {
    title: "高效记录每一次射箭，深度分析助你提升！",
    query: "from=timeline",
    imageUrl:
      "https://static.shelingxingqiu.com/attachment/2025-09-22/dcz4m4nbgycqqwknrv.png",
  };
});
</script>

<template>
  <Container :bgType="2" bgColor="#F5F5F5" :whiteBackArrow="false" title="">
    <view class="container">
      <view class="daily-signin">
        <view>
          <image src="../static/week-check.png" mode="widthFix" />
        </view>
        <view>
          <image
            v-if="data.weeksCheckIn[0]"
            src="../static/checked-green2.png"
            mode="widthFix"
          />
          <view v-else></view>
          <text>周一</text>
        </view>
        <view>
          <image
            v-if="data.weeksCheckIn[1]"
            src="../static/checked-green2.png"
            mode="widthFix"
          />
          <view v-else></view>
          <text>周二</text>
        </view>
        <view>
          <image
            v-if="data.weeksCheckIn[2]"
            src="../static/checked-green2.png"
            mode="widthFix"
          />
          <view v-else></view>
          <text>周三</text>
        </view>
        <view>
          <image
            v-if="data.weeksCheckIn[3]"
            src="../static/checked-green2.png"
            mode="widthFix"
          />
          <view v-else></view>
          <text>周四</text>
        </view>
        <view>
          <image
            v-if="data.weeksCheckIn[4]"
            src="../static/checked-green2.png"
            mode="widthFix"
          />
          <view v-else></view>
          <text>周五</text>
        </view>
        <view>
          <image
            v-if="data.weeksCheckIn[5]"
            src="../static/checked-green2.png"
            mode="widthFix"
          />
          <view v-else></view>
          <text>周六</text>
        </view>
        <view>
          <image
            v-if="data.weeksCheckIn[6]"
            src="../static/checked-green2.png"
            mode="widthFix"
          />
          <view v-else></view>
          <text>周日</text>
        </view>
      </view>
      <view class="statistics">
        <view>
          <text>{{ data.todayTotalArrow }}</text>
          <text>今日射箭（箭）</text>
        </view>
        <view>
          <text>{{ data.totalArrow }}</text>
          <text>累计射箭（箭）</text>
        </view>
        <view>
          <text>{{ data.totalDay }}</text>
          <text>已训练天数（天）</text>
        </view>
        <view>
          <text>{{ data.averageRing }}</text>
          <text>平均环数（箭）</text>
        </view>
        <view>
          <text>{{ data.yellowRate * 100 }}</text>
          <text>黄心率（%）</text>
        </view>
        <view>
          <button hover-class="none" @click="startScoring">
            <image src="../static/start-scoring.png" mode="widthFix" />
          </button>
        </view>
      </view>
      <view class="title">
        <image src="../static/point-book-title1.png" mode="widthFix" />
      </view>
      <view class="title">
        <image src="../static/point-book-title2.png" mode="widthFix" />
      </view>
      <block v-for="(item, index) in list" :key="index">
        <PointRecord :data="item" />
      </block>
      <view
        class="see-more"
        @click="toListPage"
        v-if="list.length"
        :style="{ marginBottom: isIOS ? '10rpx' : 0 }"
      >
        <text>查看所有记录</text>
        <image src="../static/enter-arrow-blue.png" mode="widthFix" />
      </view>
    </view>
    <SModal :show="showModal" :onClose="() => (showModal = false)" :noBg="true">
      <Signin :onClose="() => (showModal = false)" :noBg="true" />
    </SModal>
  </Container>
</template>

<style scoped>
.container {
  width: calc(100% - 50rpx);
  padding: 25rpx;
}
.statistics {
  border-radius: 25rpx;
  border-bottom-left-radius: 50rpx;
  border-bottom-right-radius: 50rpx;
  border: 1rpx solid #fed847;
  background: #fff;
  font-size: 22rpx;
  display: flex;
  flex-wrap: wrap;
  padding: 25rpx;
  margin-bottom: 25rpx;
}
.statistics > view {
  width: 33.33%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.statistics > view:nth-child(-n + 3) {
  margin-bottom: 25rpx;
}
.statistics > view:nth-child(2),
.statistics > view:nth-child(5) {
  border-left: 1rpx solid #eeeeee;
  border-right: 1rpx solid #eeeeee;
  box-sizing: border-box;
}
.statistics > view > text {
  text-align: center;
  font-size: 22rpx;
  color: #333333;
}
.statistics > view > text:first-child {
  font-weight: 500;
  font-size: 40rpx;
  margin-bottom: 10rpx;
}
.statistics > view:last-child > button > image {
  width: 164rpx;
}
.daily-signin {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 12rpx;
  border-radius: 20rpx;
  margin-bottom: 25rpx;
}
.daily-signin > view {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 12rpx;
  box-sizing: border-box;
}
.daily-signin > view:not(:first-child) {
  background: #f8f8f8;
  padding: 15rpx 8rpx;
}
.daily-signin > view:not(:first-child) > image {
  width: 32rpx;
  height: 32rpx;
}
.daily-signin > view:not(:first-child) > view {
  width: 32rpx;
  height: 32rpx;
  border-radius: 50%;
  box-sizing: border-box;
  border: 1rpx solid #333;
}
.daily-signin > view > text {
  font-size: 24rpx;
  /* color: #333; */
  color: #999999;
  font-weight: 500;
  text-align: center;
  margin-top: 12rpx;
}
.daily-signin > view:first-child > image {
  width: 100%;
}
.title {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 20rpx;
}
.title > image {
  width: 566rpx;
}
</style>
