web/src/app/admin/resources/page.tsx

'use client'
import {useEffect, useState} from 'react'
import {PageRecord} from '@/lib/api'
import {Resource} from '@/lib/models'
import {useStatus} from '@/lib/states'
import {listResourcePss} from '@/actions/resource'
import {Box, Eraser, Search, Timer} from 'lucide-react'
import {Select, SelectContent, SelectItem, SelectTrigger, SelectValue} from '@/components/ui/select'
import {Button} from '@/components/ui/button'
import DataTable from '@/components/data-table'
import {format, intlFormatDistance, isAfter, isEqual, parse} from 'date-fns'
import DatePicker from '@/components/date-picker'
import {Form, FormField} from '@/components/ui/form'
import {useForm} from 'react-hook-form'
import zod from 'zod'
import {zodResolver} from '@hookform/resolvers/zod'
import {Label} from '@/components/ui/label'
import {Input} from '@/components/ui/input'
import Page from '@/components/page'
import {useSearchParams} from 'next/navigation'

export type ResourcesPageProps = {}

export default function ResourcesPage(props: ResourcesPageProps) {

  // ======================
  // 查询
  // ======================

  const [status, setStatus] = useStatus()
  const [data, setData] = useState<PageRecord<Resource>>({
    page: 1,
    size: 10,
    total: 0,
    list: [],
  })

  const refresh = async (page: number, size: number) => {
    setStatus('load')
    try {
      const type = {
        all: undefined,
        expire: 1,
        quota: 2,
      }[form.getValues('type')]
      const create_after = form.getValues('create_after')
      const create_before = form.getValues('create_before')
      const expire_after = form.getValues('expire_after')
      const expire_before = form.getValues('expire_before')
      const resource_no = form.getValues('resource_no')

      const res = await listResourcePss({
        page, size,
        type,
        create_after,
        create_before,
        expire_after,
        expire_before,
        resource_no,
      })

      if (res.success) {
        console.log(res.data)
        setData(res.data)
        setStatus('done')
      }
      else {
        throw new Error('Failed to load resource pss')
      }
    }
    catch (e) {
      setStatus('fail')
    }
  }

  useEffect(() => {
    refresh(1, 10).then()
  }, [])

  // ======================
  // 筛选
  // ======================

  const filterSchema = zod.object({
    resource_no: zod.string().optional().default(''),
    type: zod.enum(['expire', 'quota', 'all']).default('all'),
    create_after: zod.date().optional(),
    create_before: zod.date().optional(),
    expire_after: zod.date().optional(),
    expire_before: zod.date().optional(),
  })

  type FilterSchema = zod.infer<typeof filterSchema>

  const params = useSearchParams()
  let paramType = params.get('type')
  if (paramType != 'all' && paramType != 'expire' && paramType != 'quota') {
    paramType = 'all'
  }

  const form = useForm<FilterSchema>({
    resolver: zodResolver(filterSchema),
    defaultValues: {
      resource_no: params.get('resource_no') || '',
      type: paramType as 'expire' | 'quota' | 'all',
      create_after: params.get('create_after') ? new Date(params.get('create_after')!) : undefined,
      create_before: params.get('create_before') ? new Date(params.get('create_before')!) : undefined,
      expire_after: params.get('expire_after') ? new Date(params.get('expire_after')!) : undefined,
      expire_before: params.get('expire_before') ? new Date(params.get('expire_before')!) : undefined,
    },
  })

  const onSubmit = async (value: FilterSchema) => {
    await refresh(1, data.size)
  }

  // ======================
  // render
  // ======================

  return (
    <Page>

      {/* 操作区 */}
      <section className={`flex justify-between flex-wrap`}>
        <div>

        </div>

        <Form form={form} onSubmit={onSubmit} className={`flex items-end gap-4 flex-wrap`}>
          <FormField name={`resource_no`} label={<span className={`text-sm`}>套餐编号</span>}>
            {({id, field}) => (
              <Input {...field} id={id} className={`h-9`}/>
            )}
          </FormField>
          <FormField name={`type`} label={<span className={`text-sm`}>类型</span>}>
            {({id, field}) => (
              <Select value={field.value} onValueChange={field.onChange}>
                <SelectTrigger className={`w-24`}>
                  <SelectValue placeholder={`选择套餐类型`}/>
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value={`all`}>全部</SelectItem>
                  <SelectItem value={`expire`}>包时</SelectItem>
                  <SelectItem value={`quota`}>包量</SelectItem>
                </SelectContent>
              </Select>
            )}
          </FormField>
          <div className={`flex flex-col gap-2`}>
            <Label className={`text-sm`}>开通时间</Label>
            <div className={`flex items-center`}>
              <FormField name={`create_after`}>
                {({field}) => (
                  <DatePicker
                    {...field}
                    className={`w-36`}
                    placeholder={`开始时间`}
                    format={`yyyy-MM-dd`}
                  />
                )}
              </FormField>
              <span className={`px-1`}>-</span>
              <FormField name={`create_before`}>
                {({field}) => (
                  <DatePicker
                    {...field}
                    className={`w-36`}
                    placeholder={`结束时间`}
                    format={`yyyy-MM-dd`}
                  />
                )}
              </FormField>
            </div>
          </div>
          <div className={`flex flex-col gap-2`}>
            <Label className={`text-sm`}>最后使用时间</Label>
            <div className={`flex items-center`}>
              <FormField name={`expire_after`}>
                {({field}) => (
                  <DatePicker
                    {...field}
                    className={`w-36`}
                    placeholder={`开始时间`}
                    format={`yyyy-MM-dd`}
                  />
                )}
              </FormField>
              <span className={`px-1`}>-</span>
              <FormField name={`expire_before`}>
                {({field}) => (
                  <DatePicker
                    {...field}
                    className={`w-36`}
                    placeholder={`结束时间`}
                    format={`yyyy-MM-dd`}
                  />
                )}
              </FormField>
            </div>
          </div>
          <div className={`flex gap-4`}>
            <Button className={`h-9`}>
              <Search/>
              <span>筛选</span>
            </Button>
            <Button theme={`outline`} className={`h-9`} onClick={() => form.reset({
              type: 'all',
              resource_no: '',
              create_after: undefined,
              create_before: undefined,
              expire_after: undefined,
              expire_before: undefined,
            })}>
              <Eraser/>
              <span>重置</span>
            </Button>
          </div>
        </Form>
      </section>

      {/* 数据表 */}
      <DataTable
        data={data.list}
        status={status}
        pagination={{
          total: data.total,
          page: data.page,
          size: data.size,
          onPageChange: async (page: number) => {
            await refresh(page, data.size)
          },
          onSizeChange: async (size: number) => {
            await refresh(data.page, size)
          },
        }}
        columns={[
          {
            accessorKey: 'resource_no', header: `套餐编号`,
          },
          {
            accessorKey: 'type', header: `类型`, cell: ({row}) => (
              <div className={`flex gap-2 items-center`}>
                {row.original.pss.type === 1 && (
                  <div className={`flex gap-2 items-center bg-green-50 w-fit px-2 py-1 rounded-md`}>
                    <Timer size={20}/>
                    <span>包时</span>
                  </div>
                )}
                {row.original.pss.type === 2 && (
                  <div className={`flex gap-2 items-center bg-blue-50 w-fit px-2 py-1 rounded-md`}>
                    <Box size={20}/>
                    <span>包量</span>
                  </div>
                )}
              </div>
            ),
          },
          {
            accessorKey: 'live', header: `IP 时效`, cell: ({row}) => (
              <span>
                              {row.original.pss.live / 60} 分钟
                          </span>
            ),
          },
          {
            accessorKey: 'expire', header: `使用情况`, cell: ({row}) => (
              <div className={`flex gap-1`}>
                {row.original.pss.type === 1 ? (
                  <div className={`flex gap-1`}>
                    {isAfter(row.original.pss.expire, new Date())
                      ? <span className={`text-green-500`}>正常</span>
                      : <span className={`text-red-500`}>过期</span>}
                    <span>|</span>
                    <span>今日限额：{row.original.pss.daily_used} / {row.original.pss.daily_limit}</span>
                    <span>|</span>
                    <span>{intlFormatDistance(row.original.pss.expire, new Date())} 到期</span>
                  </div>
                ) : row.original.pss.type === 2 ? (
                  <div className={`flex gap-1`}>
                    {row.original.pss.used < row.original.pss.quota
                      ? <span className={`text-green-500`}>正常</span>
                      : <span className={`text-red-500`}>已用完</span>}
                    <span>|</span>
                    <span>用量统计：{row.original.pss.used} / {row.original.pss.quota}</span>
                  </div>
                ) : (
                  <span>-</span>
                )}
              </div>
            ),
          },
          {
            accessorKey: 'daily_last', header: '最近使用时间', cell: ({row}) => {
              return (
                isEqual(row.original.pss.daily_last, parse('0001-01-01 00:05:43', 'yyyy-MM-dd HH:mm:ss', new Date()))
                  ? '-'
                  : format(row.original.pss.daily_last, 'yyyy-MM-dd HH:mm')
              )
            },
          },
          {
            accessorKey: 'created_at', header: '开通时间', cell: ({row}) => (
              format(row.getValue('created_at'), 'yyyy-MM-dd HH:mm')
            ),
          },
          {
            accessorKey: 'action', header: `操作`, cell: (item) => (
              <div className={`flex gap-2`}>
                -
              </div>
            ),
          },
        ]}
        classNames={{
          dataRow: `h-14`,
        }}
      />
    </Page>
  )
}