<route lang="json">
{ "style": { "navigationBarTitleText": "销售明细", "navigationBarBackgroundColor": "#fff" } }
</route>
<script setup lang="ts">
import SectionHeading from '@/components/section-heading.vue'
// import {
//   getDesignerInfo,
//   getBrowseHistories,
//   getReserveHistory,
//   countThisYear,
// } from '../../../../core/libs/requests'
import { storeToRefs } from 'pinia'
import Card from '@/components/card.vue'
import PageHelper from '@/components/page-helper.vue'
import dayjs from 'dayjs'
import PageHelperEvo from '@/components/page-helper-evo.vue'
import { useUserStore } from '@/store'
import { getSalesOrders, getSalesOrdersCount } from '@/core/libs/agent-requests'

const userStore = useUserStore()
const { userInfo } = storeToRefs(userStore)
const id = ref()
const current = ref('累计')
const info = computed(() => [
  {
    label: '订单数',
    value:
      current.value === '累计' ? (data.value?.orderCount ?? 0) : (data.value?.orderCountYear ?? 0),
    unit: '',
  },
  {
    label: '订单金额',
    value:
      current.value === '累计' ? (data.value?.salesAmount ?? 0) : (data.value?.salesAmountYtd ?? 0),
    unit: '¥',
  },
])
const query = computed(() => ({ isYear: current.value === '本年', userId: id.value }))
const { data, run: setData } = useRequest(() => getSalesOrdersCount({ userId: id.value }))
onLoad(async (query?: Record<string | 'id', string>) => {
  id.value = query?.id
  await setData()
})
</script>
<template>
  <div class="flex-grow flex flex-col gap-5 px-3.5 py-6">
    <Card>
      <SectionHeading title="销售数据">
        <template #append>
          <div>
            <wd-segmented
              v-model:value="current"
              :options="['累计', '本年']"
              @change="setData"
            ></wd-segmented>
          </div>
        </template>
      </SectionHeading>
      <div class="flex mt-7">
        <template v-for="(it, i) in info" :key="i">
          <div class="flex-1 flex flex-col items-center gap-2">
            <div class="flex items-end flex-row-reverse gap-0.5">
              <div class="text-black text-2xl font-medium font-['D-DIN-PRO'] leading-6">
                {{ it.value }}
              </div>
              <div class="text-[#333333] text-sm font-normal font-['PingFang_SC']">
                {{ it.unit }}
              </div>
            </div>
            <div class="text-black/40 text-xs font-normal font-['PingFang_SC'] leading-normal">
              {{ it.label }}
            </div>
          </div>
        </template>
      </div>
    </Card>
    <PageHelperEvo :request="getSalesOrders" :query="query">
      <template #default="{ source }">
        <div class="flex flex-col gap-4">
          <template v-for="(it, index) in source?.list" :key="index">
            <Card>
              <div class="grid grid-cols-[90px_1fr] gap-2.5">
                <template
                  v-for="(item, i) in [
                    { label: '材料商', value: it.materials },
                    { label: '品牌', value: it.materialsBrand },
                    { label: '项目名称', value: it.projectName },
                    { label: '客户姓名', value: it.customerName },
                    { label: '客户电话', value: it.customerPhone },
                    { label: '订单金额', value: it.orderMoney + '元' },
                  ]"
                  :key="i"
                >
                  <div class="text-black/40 text-sm font-normal font-['PingFang_SC'] leading-none">
                    {{ item.label }}
                  </div>
                  <div class="text-black/60 text-sm font-normal font-['PingFang_SC'] leading-none">
                    {{ item.value }}
                  </div>
                </template>
              </div>
              <div class="bg-[#f4f4f4] h-.25 my-4"></div>
              <div class="text-black/60 text-sm font-normal font-['PingFang_SC'] leading-normal">
                {{ dayjs(it.createTime).format('YYYY-MM-DD HH:mm') }}
              </div>
            </Card>
          </template>
        </div>
      </template>
    </PageHelperEvo>
  </div>
</template>
