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

function Chapter() {
  // const navigate = useNavigate()
  const {id} = useParams()
  return (
    <div className="chapter">
      {amisRender(
        {
          type: 'page',
          title: '章节详情',
          initApi: `${commonInfo.baseUrl}/chapter/detail/${id}`,
          body: [
            {
              type: 'property',
              title: '${name}',
              items: [
                {label: '序号', content: '${sequence}'},
                {label: '名称', content: '${name}', span: 2},
                {label: '描述', content: '${description}', span: 3},
              ],
            },
            {
              type: 'crud',
              api: {
                method: 'post',
                url: `${commonInfo.baseUrl}/line/list`,
                convertKeyToPath: false,
                data: {
                  query: {
                    equal: {
                      'chapter.id': id,
                    },
                  },
                  page: {
                    index: '${page}',
                    size: '${perPage}',
                  },
                  sort: [
                    {
                      column: 'sequence',
                      direction: 'ASC',
                    },
                    {
                      column: 'modifiedTime',
                      direction: 'DESC',
                    },
                  ],
                },
              },
              ...crudCommonOptions(),
              ...paginationTemplate(
                50,
                undefined,
                [
                  {
                    type: 'action',
                    label: '',
                    icon: 'fa fa-book-open-reader',
                    actionType: 'ajax',
                    tooltip: '序号重排',
                    tooltipPlacement: 'top',
                    api: `get:${commonInfo.baseUrl}/line/generate_sequence/${id}`,
                    confirmText: '确认重排序号？',
                    confirmTitle: '序号重拍',
                  },
                  {
                    type: 'action',
                    label: '',
                    icon: 'fa fa-glasses',
                    actionType: 'dialog',
                    tooltip: '全文阅读',
                    tooltipPlacement: 'top',
                    dialog: {
                      title: '全文查看',
                      size: 'md',
                      ...readOnlyDialogOptions(),
                      body: {
                        type: 'service',
                        size: 'none',
                        api: `${commonInfo.baseUrl}/chapter/content/${id}`,
                        body: {
                          type: 'markdown',
                          value: '${detail}',
                          options: {
                            breaks: true,
                          },
                        },
                      },
                    },
                  },
                ],
              ),
              columns: [
                {
                  name: 'sequence',
                  label: '序号',
                  width: 80,
                  align: 'center',
                },
                {
                  name: 'text',
                  label: '章节名称',
                },
                {
                  type: 'operation',
                  label: '操作',
                  width: 100,
                  fixed: 'right',
                  buttons: [
                    {
                      type: 'action',
                      label: '修改',
                      level: 'link',
                      size: 'sm',
                      actionType: 'dialog',
                      dialog: {
                        title: '修改',
                        size: 'md',
                        body: {
                          type: 'form',
                          ...horizontalFormOptions(),
                          api: `post:${commonInfo.baseUrl}/line/save`,
                          body: [
                            {
                              type: 'hidden',
                              name: 'id',
                            },
                            {
                              type: 'hidden',
                              name: 'chapterId',
                              value: id,
                            },
                            {
                              type: 'editor',
                              name: 'text',
                              label: '章节内容',
                              required: true,
                              clearable: true,
                              options: {
                                wordWrap: 'on',
                              },
                            },
                          ],
                        },
                      },
                    },
                    {
                      className: 'text-danger btn-deleted',
                      type: 'action',
                      label: '删除',
                      level: 'link',
                      actionType: 'ajax',
                      api: `get:${commonInfo.baseUrl}/line/remove/\${id}`,
                      confirmText: '确认删除行？',
                      confirmTitle: '删除',
                    },
                  ],
                },
              ],
            },
          ],
        },
      )}
    </div>
  )
}

export default React.memo(Chapter)