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

function StockList() {
  const navigate = useNavigate()
  return (
    <div className="stock-list">
      {amisRender(
        {
          type: 'page',
          title: '股票列表',
          body: [
            {
              type: 'crud',
              api: {
                method: 'post',
                url: `${commonInfo.baseUrl}/stock/list`,
                data: {
                  query: {
                    contain: {
                      code: '${filter_code|default:undefined}',
                      name: '${filter_keyword|default:undefined}',
                      fullname: '${filter_keyword|default:undefined}',
                    },
                    inside: {
                      market: '${filter_market|default:undefined}',
                      industry: '${filter_industry|default:undefined}',
                    },
                  },
                  page: {
                    index: '${page}',
                    size: '${perPage}',
                  },
                  sort: [
                    {
                      column: 'code',
                      direction: 'ASC',
                    },
                  ],
                },
              },
              ...crudCommonOptions(),
              ...paginationTemplate(15, undefined, ['filter-toggler']),
              filterTogglable: true,
              filterDefaultVisible: false,
              filter: {
                title: '快速搜索',
                mode: 'default',
                columnCount: 4,
                body: [
                  {
                    type: 'input-text',
                    name: 'filter_code',
                    label: '编号',
                    placeholder: '请输入编号',
                    clearable: true,
                  },
                  {
                    type: 'input-text',
                    name: 'filter_keyword',
                    label: '关键字',
                    placeholder: '请输入关键字',
                    clearable: true,
                  },
                  {
                    name: 'filter_market',
                    label: '市场',
                    ...remoteOptions('select', 'stock_market'),
                    multiple: true,
                    extractValue: true,
                    joinValues: false,
                    clearable: true,
                    checkAll: true,
                    checkAllBySearch: true,
                    defaultCheckAll: true,
                  },
                  {
                    name: 'filter_industry',
                    label: '行业',
                    ...remoteOptions('select', 'stock_industry'),
                    searchable: true,
                    multiple: true,
                    extractValue: true,
                    joinValues: false,
                    clearable: true,
                    checkAll: true,
                    checkAllBySearch: true,
                  },
                ],
              },
              columns: [
                {
                  name: 'code',
                  label: '编号',
                  width: 150,
                },
                {
                  name: 'name',
                  label: '简称',
                  width: 150,
                },
                {
                  name: 'fullname',
                  label: '全名',
                },
                {
                  name: 'market',
                  label: '市场',
                  width: 100,
                  align: 'center',
                  ...remoteMappings('stock_market', 'market'),
                },
                {
                  name: 'industry',
                  label: '行业',
                  width: 150,
                },
                {
                  type: 'operation',
                  label: '操作',
                  width: 100,
                  buttons: [
                    {
                      type: 'action',
                      label: '详情',
                      level: 'link',
                      onEvent: {
                        click: {
                          actions: [
                            {
                              actionType: 'custom',
                              // @ts-ignore
                              script: (context, action, event) => {
                                navigate(`/stock/detail/${context.props.data['id']}`)
                              },
                            },
                          ],
                        },
                      },
                    },
                  ],
                },
              ],
            },
          ],
        },
      )}
    </div>
  )
}

export default React.memo(StockList)