<script setup lang="tsx">
import { reactive, ref, unref } from 'vue'
import { getExtract } from '@/api/money'
import { useTable } from '@/hooks/web/useTable'
import { Table, TableColumn } from '@/components/Table'
import { ContentWrap } from '@/components/ContentWrap'
import { FormSchema } from '@/components/Form'
import { Search } from '@/components/Search'
import { searchTime } from '@/utils/searchTime'
import { searchWithdrawal } from '@/api/money/types'
const { tableRegister, tableState, tableMethods } = useTable({
  fetchDataApi: async () => {
    const res = await getExtract({
      ...searchParams.value,
      page: unref(currentPage) || 1,
      limit: unref(pageSize) || 10
    })
    return {
      list:
        res.data.data.data.map((ee) => {
          return ee
        }) || [],
      total: res.data.data.count || 0
    }
  }
})
const { dataList, loading, total, currentPage, pageSize } = tableState
const { getList } = tableMethods

const tableColumns = reactive<TableColumn[]>([
  {
    field: 'id',
    label: 'ID',
    align: 'center',
    width: 70
  },
  {
    field: 'nickname',
    label: '用户',
    minWidth: 100
  },
  {
    field: 'uid',
    label: '用户UID',
    align: 'center',
    headerAlign: 'center',
    minWidth: 80
  },
  {
    field: 'title',
    label: '类型',
    minWidth: 100
  },
  {
    field: 'number',
    label: '变动数量',
    minWidth: 100,
    slots: {
      default: (data: any) => {
        const row = data.row
        if (row.pm > 0) {
          return (
            <>
              <div class={'color-green'}>+{row.number}</div>
            </>
          )
        } else {
          return (
            <>
              <div class={'color-red'}>-{row.number}</div>
            </>
          )
        }
      }
    }
  },
  {
    field: 'balance',
    label: '变动后金额',
    minWidth: 100
  },
  {
    field: 'add_time',
    label: '时间',
    minWidth: 160
  },
  {
    field: 'mark',
    label: '备注',
    minWidth: 140
  },
  {
    field: 'status',
    label: '状态',
    width: 60,
    headerAlign: 'center',
    align: 'center',
    slots: {
      default: (data: any) => {
        const row = data.row
        if (row.status == 1) {
          return (
            <>
              <div class={'color-green'}>有效</div>
            </>
          )
        } else {
          return (
            <>
              <div class={'color-red'}>无效</div>
            </>
          )
        }
      }
    }
  }
])

const searchSchema = reactive<FormSchema[]>([
  {
    field: 'uid',
    label: 'uid',
    component: 'Input',
    componentProps: {
      type: 'number',
      placeholder: '请输入用户UID'
    }
  },
  {
    field: 'real_name',
    label: '用户昵称',
    component: 'Input',
    componentProps: {
      type: 'number',
      placeholder: '请输入用户昵称'
    }
  },
  {
    field: 'status',
    label: '状态',
    component: 'Select',
    componentProps: {
      placeholder: '请选择类型',
      options: [
        {
          label: '全部',
          value: ''
        },
        {
          label: '已通过',
          value: 1
        },
        {
          label: '待审核',
          value: 0
        },
        {
          label: '已拒绝',
          value: 0
        }
      ]
    }
  },
  searchTime
])
const searchParams = ref<searchWithdrawal>({
  uid: '',
  real_name: '',
  time: '',
  status: ''
})
const setSearchParams = (data: any) => {
  searchParams.value = data
  const search = searchParams.value
  if (data.time) {
    search.time = data.time.join('-')
  } else {
    search.time = ''
  }
  getList()
}
</script>

<template>
  <ContentWrap>
    <Search isCol :schema="searchSchema" @reset="setSearchParams" @search="setSearchParams" />
    <div class="mb-10px"> </div>
    <Table
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :columns="tableColumns"
      default-expand-all
      node-key="id"
      stripe
      :data="dataList"
      :loading="loading"
      @register="tableRegister"
      :pagination="{
        total
      }"
    />
  </ContentWrap>
</template>
