import React from 'react'
import {useNavigate, useParams} from 'react-router'
import {amisRender, commonInfo, crudCommonOptions, mappingField, mappingItem} from '../../../util/amis.tsx'

const statusMapping = [
  mappingItem('解析中', 'RUNNING', 'bg-warning'),
  mappingItem('使用中', 'FINISHED', 'bg-success'),
]

const DataDetail: React.FC = () => {
  const {knowledge_id} = useParams()
  const navigate = useNavigate()
  return (
    <div className="import-detail h-full">
      {amisRender(
        {
          className: 'h-full',
          type: 'page',
          title: {
            type: 'wrapper',
            size: 'none',
            body: [
              '数据详情 （知识库：',
              {
                type: 'service',
                className: 'inline',
                api: `${commonInfo.baseAiUrl}/knowledge/${knowledge_id}/name`,
                body: {
                  type: 'tpl',
                  tpl: '${name}',
                },
              },
              '）',
            ],
          },
          size: 'lg',
          actions: [],
          body: [
            {
              type: 'crud',
              api: {
                method: 'post',
                url: `${commonInfo.baseAiUrl}/knowledge/group/list`,
                data: {
                  query: {
                    equal: {
                      'knowledge/id': knowledge_id,
                    }
                  },
                  page: {
                    index: '${page}',
                    size: '${perPage}',
                  }
                }
              },
              ...crudCommonOptions(),
              headerToolbar: [
                'reload',
                {
                  type: 'action',
                  icon: 'fa fa-plus',
                  label: '',
                  tooltip: '新增',
                  tooltipPlacement: 'top',
                  onEvent: {
                    click: {
                      actions: [
                        {
                          actionType: 'custom',
                          // @ts-ignore
                          script: (context, action, event) => {
                            navigate(`/ai/knowledge/import/${knowledge_id}`)
                          },
                        },
                      ],
                    },
                  },
                },
                {
                  type: 'action',
                  icon: 'fa fa-magnifying-glass',
                  label: '',
                  tooltip: '命中测试',
                  tooltipPlacement: 'top',
                  actionType: 'dialog',
                  dialog: {
                    title: '命中测试',
                    size: 'lg',
                    actions: [],
                    body: [
                      {
                        type: 'input-text',
                        addOn: {
                          type: 'action',
                          label: '检索',
                          icon: 'fa fa-magnifying-glass',
                        },
                      },
                      {
                        name: '182e8657-5352-42ad-9ab4-8252d33eef91',
                        type: 'crud',
                        source: '${search_items}',
                        ...crudCommonOptions(),
                        canAccessSuperData: false,
                        columns: [
                          {
                            name: 'text',
                            label: '内容',
                          },
                        ],
                      },
                    ],
                  },
                },
              ],
              columns: [
                {
                  name: 'id',
                  hidden: true,
                },
                {
                  name: 'name',
                  label: '文件名',
                },
                {
                  name: 'status',
                  label: '状态',
                  width: 50,
                  align: 'center',
                  ...mappingField('status', statusMapping),
                },
                {
                  type: 'operation',
                  label: '操作',
                  width: 100,
                  buttons: [
                    {
                      type: 'action',
                      label: '查看',
                      level: 'link',
                      size: 'sm',
                      onEvent: {
                        click: {
                          actions: [
                            {
                              actionType: 'custom',
                              // @ts-ignore
                              script: (context, action, event) => {
                                navigate(`/ai/knowledge/detail/${knowledge_id}/segment/${context.props.data['id']}`)
                              },
                            },
                          ],
                        },
                      },
                    },
                    {
                      type: 'action',
                      label: '删除',
                      className: 'text-danger btn-deleted',
                      level: 'link',
                      size: 'sm',
                      actionType: 'ajax',
                      api: `get:${commonInfo.baseAiUrl}/knowledge/group/remove/\${id}`,
                      confirmText: '确认删除',
                      confirmTitle: '删除',
                    },
                  ],
                },
              ],
            },
          ],
        },
        {
          name: name,
        },
      )}
    </div>
  )
}

export default DataDetail