import { useState, useEffect } from 'react'
import { Table, Select, Input, Button, Space } from 'antd'
import type { ColumnsType } from 'antd/es/table'
import { PermButton } from '../../components/PermButton'
import UserFormDrawer from './UserFormDrawer'
import { getUserList } from '../../api/usr'
import type { PageVO, UserListItemVO } from '../../api/usr'

const QUERY_FIELDS = [
  { value: 'username', label: '用户名' },
  { value: 'staffName', label: '员工名' },
  { value: 'userCode', label: '用户号' },
  { value: 'department', label: '部门' },
  { value: 'userType', label: '用户类型' },
  { value: 'disabled', label: '作废' },
  { value: 'lastLoginDate', label: '登录日期' },
  { value: 'creator', label: '制单人' },
]

const MATCH_TYPES = [
  { value: 'contains', label: '包含' },
  { value: 'notContains', label: '不包含' },
  { value: 'equals', label: '等于' },
]

const columns: ColumnsType<UserListItemVO> = [
  { title: '用户名', dataIndex: 'sUsername' },
  { title: '员工名', dataIndex: 'sStaffName' },
  { title: '用户号', dataIndex: 'sUserCode' },
  { title: '部门', dataIndex: 'sDepartment' },
  { title: '用户类型', dataIndex: 'sUserType' },
  { title: '语言', dataIndex: 'sLanguage' },
  { title: '作废', dataIndex: 'bIsDisabled', render: (v: number) => v ? '是' : '否' },
  { title: '登录日期', dataIndex: 'tLastLoginDate' },
  { title: '制单人', dataIndex: 'sCreatorUsername' },
  { title: '制单日期', dataIndex: 'tCreateDate' },
]

export default function UserListPage() {
  const [drawerOpen, setDrawerOpen] = useState(false)
  const [data, setData] = useState<PageVO<UserListItemVO> | null>(null)
  const [queryField, setQueryField] = useState('username')
  const [matchType, setMatchType] = useState('contains')
  const [queryValue, setQueryValue] = useState('')
  const [currentPage, setCurrentPage] = useState(1)

  const load = (pg = 1) => {
    setCurrentPage(pg)
    getUserList({ queryField, matchType, queryValue, page: pg, pageSize: 20 }).then(setData)
  }

  useEffect(() => {
    load()
  }, [])

  return (
    <div>
      <Space style={{ marginBottom: 16 }} wrap>
        <Select
          value={queryField}
          onChange={setQueryField}
          options={QUERY_FIELDS}
          style={{ width: 120 }}
        />
        <Select
          value={matchType}
          onChange={setMatchType}
          options={MATCH_TYPES}
          style={{ width: 100 }}
        />
        <Input
          value={queryValue}
          onChange={e => setQueryValue(e.target.value)}
          placeholder="查询值"
          style={{ width: 160 }}
        />
        <Button type="primary" onClick={() => load(1)}>搜索</Button>
        <PermButton
          permission="usr:create"
          type="primary"
          onClick={() => setDrawerOpen(true)}
        >
          新增
        </PermButton>
      </Space>
      <Table
        dataSource={data?.list ?? []}
        columns={columns}
        rowKey="sId"
        pagination={{
          total: data?.total ?? 0,
          pageSize: 20,
          current: currentPage,
          onChange: load,
        }}
      />
      <UserFormDrawer
        open={drawerOpen}
        onClose={() => setDrawerOpen(false)}
        onSuccess={() => { setDrawerOpen(false); load(1) }}
      />
    </div>
  )
}