import React from "react"
import {amisRender, commonInfo, crudCommonOptions, paginationTemplate} from '../../util/amis.tsx'
import {useNavigate} from 'react-router'

function StockCollectionList() {
  const navigate = useNavigate()
  return (
    <div className="stock-collection-list">
      {amisRender(
        {
          type: 'page',
          title: '股票列表',
          body: [
            {
              type: 'crud',
              api: {
                method: 'get',
                url: `${commonInfo.baseUrl}/stock_collection/list`,
              },
              ...crudCommonOptions(),
              ...paginationTemplate(15, undefined, ['filter-toggler']),
              columns: [
                {
                  name: 'name',
                  label: '名称',
                  width: 200,
                },
                {
                  name: 'description',
                  label: '描述',
                },
                {
                  name: 'count',
                  label: '股票数量',
                  align: 'center',
                  width: 100,
                },
                {
                  type: 'operation',
                  label: '操作',
                  width: 100,
                  buttons: [
                    {
                      type: 'action',
                      label: '详情',
                      level: 'link',
                      onEvent: {
                        click: {
                          actions: [
                            {
                              actionType: 'custom',
                              // @ts-ignore
                              script: (context, action, event) => {
                                navigate(`/stock/collection/detail/${context.props.data['id']}`)
                              },
                            },
                          ],
                        },
                      },
                    },
                  ],
                },
              ],
            },
          ],
        },
      )}
    </div>
  )
}

export default React.memo(StockCollectionList)