import { api } from "@nice/client"
import { apiClient } from "@web/src/utils"
import { Button, Tag } from "antd"
import { useEffect, useMemo, useState } from "react"

function HomePage() {
  const { data: staffData } = api.staff.findMany.useQuery({
    take: 10
  })
  // 建议为不同的查询结果使用不同的变量名
  const { data: goodsData } = api.goods.hello.useQuery({
    name: "123"
  })

  const [counter, setCounter] = useState<number>(0)
  const counterText = useMemo(() => {
    return `当前计数为：${counter}`
  }, [counter])

  const getData = async () => {
    // 第一种写法
    // const res = await apiClient.get("/goods/hello")
    // console.log(res)
    //第二种写法
    apiClient.get("/goods/hello")
      .then(res => {
        console.log(res)
      })
  }
  useEffect(() => { getData() }, [])
  return <div className="p-2 space-y-2">
    <Tag>{counterText}</Tag>
    <div className="space-x-2" >
      <Button type="primary" onClick={() => {
        setCounter(counter + 1)
      }}>加1</Button>
      <Button danger
        onClick={() => {
          setCounter(counter - 1)
        }}
      >减1</Button>
    </div>

    <div className="flex flex-wrap">{
      staffData?.map(i => {
        return <div className="p-2 rounded border shadow" key={i.id}>
          <Tag>{i.username}</Tag>
        </div>
      })
    } </div>
    <Tag className="text-2xl">{goodsData}</Tag>
  </div>
}
// export { HomePage }
export default HomePage