import React, { useState, useEffect, useCallback } from 'react'
import { Table } from 'antd'
import { useActions, useData, useCommit } from '@ttk/app-loader'

export default function Com(props) {
  const commit = useCommit()
  const actions = useActions(props)
  const treeData = useData([props, 'treeData']).toJS()

  useEffect(() => {
    actions.getTreeData() // 获取数据
  })

  const columns = [
    {
      title: '名称',
      width: 100,
      dataIndex: 'name',
      key: 'name',
      fixed: 'left',
    },
    {
      title: '年龄',
      width: 100,
      dataIndex: 'age',
      key: 'age',
      fixed: 'left',
    },
    { title: '列1', dataIndex: 'address', key: '1' },
    { title: '列2', dataIndex: 'address', key: '2' },
    { title: '列3', dataIndex: 'address', key: '3' },
    { title: '列4', dataIndex: 'address', key: '4' },
    { title: '列5', dataIndex: 'address', key: '5' },
    { title: '列6', dataIndex: 'address', key: '6' },
    { title: '列7', dataIndex: 'address', key: '7' },
    { title: '列8', dataIndex: 'address', key: '8' },
    {
      title: '操作',
      key: 'operation',
      fixed: 'right',
      width: 100,
      render: () => <a>编辑</a>,
    },
  ];

  return (
    <React.Fragment>
      <Table columns={columns} dataSource={treeData} bordered scroll={{ x: 1300, y: 240 }} />
    </React.Fragment>
  )
}


