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

function StockCollectionDetail() {
  const {id} = useParams()
  return (
    <div className="stock-collection-detail">
      {amisRender(
        {
          type: 'page',
          title: '股票集详情',
          initApi: `get:${commonInfo.baseUrl}/stock_collection/detail/${id}`,
          body: [
            {
              type: 'crud',
              source: '${scores}',
              ...crudCommonOptions(),
              ...paginationTemplate(100, undefined, ['filter-toggler']),
              columns: stockListColumns(
                undefined,
                [
                  {
                    className: 'white-space-pre',
                    name: 'score',
                    label: '得分',
                    width: 50,
                    align: 'center',
                    type: 'tpl',
                    tpl: '${score}',
                    popOver: {
                      trigger: 'click',
                      showIcon: false,
                      body: {
                        type: 'tpl',
                        tpl: '${extra|raw}',
                      },
                    },
                  },
                ],
              ),
            },
          ],
        },
      )}
    </div>
  )
}

export default React.memo(StockCollectionDetail)