import { View } from '@tarojs/components';
import { useEffect, useState } from 'react';
import Table, { ColumnProps } from "tarojs-table";
// 内含 .css|.less|.scss 类型的样式文件，可自行选择引入
import "tarojs-table/lib/style.css";
// import 'tarojs-table/lib/style.less'
// import 'tarojs-table/lib/style.scss';

export default () => {
  const [loading, setLoading] = useState(false);
  const [dataSource, setDataSource] = useState<any[]>([]);

  useEffect(() => {
    // 模拟loading
    setLoading(true);

    setTimeout(() => {
      setLoading(false);
    }, 2000);

    setDataSource([
      { name: 'Margaret', gender: 'Female', age: 29, occupation: 'Financial Analyst', address: '789 Birch St' },
      { name: 'Michael', gender: 'Male', age: 42, occupation: 'Marketing Manager', address: '456 Pine Ave' },
      //{ ...其他数据 }
    ]);
  }, []);

  const columns: ColumnProps[] = [
    {
      title: '序号',
      dataIndex: 'index',
      key: 'index',
      width: 50,
      fixed: 'left',
      align: 'center',
      render: (text: any, record: any, index: number) => index + 1
    },
    // {...其他列}
    {
      title: '操作',
      dataIndex: 'action',
      key: 'action',
      width: 80,
      fixed: 'right',
      align: 'center',
      className: 'action-cell',
      render: (text: any, record: any, index: number) => <View style={{ color: "blue" }}>编辑</View>
    }
  ];

  return (
    <Table
      loading={loading}
      columns={columns}
      dataSource={dataSource}
      scroll={{ y: '100vh', x: '100vw' }}
    />
  );
};