import {useState} from "react";
import Taro, {useDidShow} from '@tarojs/taro'
import {Button, Cell, CellGroup, Space, Empty, ConfigProvider, Avatar} from '@nutui/nutui-react-taro'
import {ArrowRight} from '@nutui/icons-react-taro'
import {AppUser} from "@/api/app/appUser/model";
import {listAppUser} from "@/api/app/appUser";

const AppUserList = () => {
  const [list, setList] = useState<AppUser[]>([])

  const reload = () => {
    listAppUser({})
      .then(data => {
        setList(data || [])
      })
      .catch(() => {
        Taro.showToast({
          title: '获取数据失败',
          icon: 'error'
        });
      })
  }

  useDidShow(() => {
    reload()
  });

  if (list.length == 0) {
    return (
      <ConfigProvider>
        <div className={'h-full flex flex-col justify-center items-center'} style={{
          height: 'calc(100vh - 300px)',
        }}>
          <Empty
            style={{
              backgroundColor: 'transparent'
            }}
            description="暂无数据"
          />
        </div>
      </ConfigProvider>
    )
  }

  return (
    <ConfigProvider>
      <CellGroup>
        {list.map((item) => (
          <Cell
            key={item.id}
            title={item.userName || item.nickName || '未命名用户'}
            description={item.email}
            align="center"
            rightIcon={<ArrowRight />}
            onClick={() => Taro.navigateTo({url: `/app/appUser/add?id=${item.id}`})}
          />
        ))}
      </CellGroup>
    </ConfigProvider>
  );
};

export default AppUserList;
