<template>
    <!-- 积分列表 -->
  <div class="points-list-container">
    <div class="points-list-title">
    <img
      class="points-icon"
      src="@/assets/Points.png"
      mode="scaleToFill"
    />
    <div class="points-text">
      我的积分:{{ user.points }}
      <div class="points-alwaysnum">
        
      </div>
    </div>
    </div>
    <div class="points-list" style="overflow: auto;">
    <div class="points-list-item" v-for="(item, index) in pointsList" :key="index">
      <div class="points-list-content" :style="{background: item.status == 1 ? '#DFFEFC':'#FBECE9'}">
        <div class="Event">
          {{ item.info }}
        </div>
        <div class="points-num">
          {{ item.number }}
        </div>
        <div class="time">
         {{TimestamptolocalTime(item.time*1000) }}
        </div>
      </div>
    </div>
  </div>

  </div>
</template>

<script setup>
import {
  ref, // 响应式基础
  watch, // 侦听器
  onMounted, // 组件挂载完成后执行
  onUpdated, // 组件更新后执行
  onUnmounted, // 组件销毁前执行
} from "vue";
import {getIntegralDetail} from "@/api/account";
import { ElMessage } from "element-plus";
import {getPromiseStorage } from "@/utils/storage.js";
import { TimestamptolocalTime } from "../../utils/timeConversion";
const pointsList = ref([]);
const user = ref({});//用户信息
const page = ref(0);

//获取积分数据
function getPointsList () {
  getIntegralDetail({
    page: page.value,
    size: 30,
    userId: user.value.id,
  }).then((res) => {
    console.log(res);
    pointsList.value.push(...res);
  })
}

// 组件挂载完成后执行
onMounted(() => {
  getPromiseStorage("user")
    .then((res) => {
      user.value = res;
      getPointsList()
    })
    .catch((err) => {
      console.log(err);
    });
});

onUpdated(() => {
  // 组件更新后执行
});
onUnmounted(() => {
  // 组件销毁前执行
});
const refname = ref('');
watch(refname, async (newQuestion, oldQuestion) => {
  // 变化后执行
});
</script>

<style scoped lang="less">
.points-list-container{
  width: 100%;
  height: 100%;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.points-list{
  width: 100%;
  height: calc(100% - 70px);
}
.points-list-title{
  width: 100%;
  height: 70px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.points-text{
  margin-top: 10px;
  color: #666666;
  font-size: 24px;
  display: flex;
  align-items: center;
}
.points-alwaysnum{
  color: #333333;
  font-size: 24px;
  font-weight: bold;
}
.points-icon{
  width: 52px;
  height: 52px;
  margin-right: 18px;
}
.points-list-item{
  width: 100%;
  height: 60px;
  margin-top: 10px;
  margin-bottom: 10px;
  display: flex;
  justify-content:center;
  align-items: center;
}
.points-list-content{
  width: 90%;
  height: 100%;
  border-radius: 10px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.Event{
  color: @Supplementary-text-color;
  font-size: 16px;
}
.points-num{
  color: @font-color;
  font-size: 18px;
  font-weight: bold;
}
.time{
  color:@Prompt-text-color;
  font-size: 16px;
  }
</style>