<route lang="json">
{ "style": { "navigationStyle": "custom" } }
</route>
<script setup lang="ts">
import Card from '@/components/card.vue'

import { useUserStore } from '../../../../store'
import { storeToRefs } from 'pinia'
import dayjs from 'dayjs'
import NavbarEvo from '@/components/navbar-evo.vue'
import { NetImages } from '../../../../core/libs/enums'
import {
  getPointsFlow,
  getPointsDetails,
  getUserInfoById,
} from '../../../../core/libs/agent-requests'
import PageHelperEvo from '@/components/page-helper-evo.vue'
import { getBroker } from '../../../../core/libs/requests'

const userStore = useUserStore()
const { userInfo } = storeToRefs(userStore)
const yearState = ref(true)
const id = ref()
const year = ref(dayjs().toDate().getTime())
const query = computed(() => ({
  stylistId: id.value,
  year: dayjs(year.value).format('YYYY'),
}))

const { data, run: setData } = useRequest(() => getUserInfoById(id.value))
const handleSelect = () => {
  yearState.value = false
}
onLoad(async (query: { id: string }) => {
  id.value = query.id
  await setData()
})
</script>
<template>
  <div class="flex-grow">
    <NavbarEvo title="积分明细" transparent dark></NavbarEvo>
    <div class="relative aspect-[3/1]">
      <div class="aspect-[1.25/1] absolute top-0 w-full">
        <div class="relative w-full h-full">
          <div class="absolute top-0 left-0 right-0">
            <wd-img
              width="100%"
              :src="NetImages.DefaultPointsHeadBg"
              mode="widthFix"
              custom-class=""
            ></wd-img>
          </div>
        </div>
      </div>
    </div>
    <div class="relative px-3.5">
      <div class="flex items-end px-3.5 mb-5">
        <div class="text-white text-sm font-normal font-['PingFang_SC'] leading-relaxed">
          当前积分
        </div>
        <div>
          <span class="text-white text-4xl font-normal font-['D-DIN_Exp'] leading-9">
            {{ data.point }}
          </span>
        </div>
        <div class="flex-1"></div>
        <div></div>
        <wd-datetime-picker type="year" v-model="year" use-default-slot>
          <div class="text-[white] text-sm font-normal font-['PingFang_SC'] leading-relaxed">
            {{ dayjs(year).format('YYYY') }}
            <wd-icon name="arrow-down" size="12" class="text-[#ffffff]"></wd-icon>
          </div>
        </wd-datetime-picker>
      </div>
      <Card custom-class="relative">
        <PageHelperEvo :request="getPointsDetails" :query="query">
          <template #default="{ source }">
            <div class="flex flex-col gap-4">
              <template v-for="(it, i) in source?.list" :key="i">
                <div class="flex items-center py-4">
                  <div class="flex-1 flex flex-col">
                    <div
                      class="text-black/90 text-base font-normal font-['PingFang_SC'] leading-relaxed"
                    >
                      {{ it.name }}
                    </div>
                    <div
                      class="text-black/40 text-sm font-normal font-['PingFang_SC'] leading-relaxed"
                    >
                      <!-- 2024/08/10 14:21:54 -->
                      {{ dayjs(it.createTime).format('YYYY/MM/DD HH:mm:ss') }}
                    </div>
                  </div>
                  <div>
                    <div
                      class="text-lg font-normal font-['D-DIN_Exp'] leading-relaxed"
                      :class="`${it.pointsType === '1' ? 'text-[#ef4343]' : 'text-black'}`"
                    >
                      <!-- 8200 -->
                      {{ { '1': '+', '2': '-' }[it.pointsType] }}
                      {{ it.points }}
                    </div>
                  </div>
                </div>
                <div class="h-0.25 bg-[#dadada]" v-if="i !== (source?.list.length ?? 0) - 1"></div>
              </template>
            </div>
          </template>
        </PageHelperEvo>
      </Card>
    </div>
  </div>
</template>
