import React from 'react'
import styled from 'styled-components'
import {
  amisRender,
  commonInfo,
  crudCommonOptions,
  mappingField,
  mappingItem,
  pictureFromIds
} from '../../../util/amis.tsx'

const FeedbackDiv = styled.div`
    .feedback-list-images {
        margin-top: 10px;

        .antd-Img-container {
            width: 32px;
            height: 32px;
        }
    }
`

const statusMapping = [
  mappingItem('分析中', 'ANALYSIS_PROCESSING', 'label-warning'),
  mappingItem('分析完成', 'ANALYSIS_SUCCESS', 'label-primary'),
  mappingItem('处理完成', 'FINISHED', 'label-success'),
]

const Feedback: React.FC = () => {
  return (
    <FeedbackDiv className="feedback">
      {amisRender(
        {
          type: 'page',
          title: '报障清单',
          body: [
            {
              type: 'crud',
              api: {
                method: 'post',
                url: `${commonInfo.baseAiUrl}/feedback/list`,
                data: {
                  page: {
                    index: '${page}',
                    size: '${perPage}',
                  }
                }
              },
              ...crudCommonOptions(),
              headerToolbar: [
                'reload',
                {
                  type: 'action',
                  label: '',
                  icon: 'fa fa-plus',
                  tooltip: '新增',
                  tooltipPlacement: 'top',
                  actionType: 'dialog',
                  dialog: {
                    title: '新增报账单',
                    size: 'md',
                    body: {
                      debug: commonInfo.debug,
                      type: 'form',
                      api: `${commonInfo.baseAiUrl}/feedback/save`,
                      body: [
                        {
                          type: 'editor',
                          required: true,
                          label: '故障描述',
                          name: 'source',
                          language: 'plaintext',
                          options: {
                            lineNumbers: 'off',
                            wordWrap: 'bounded',
                          },
                        },
                        {
                          type: 'input-image',
                          name: 'pictures',
                          label: '相关截图',
                          autoUpload: false,
                          multiple: true,
                          joinValues: false,
                          extractValue: true,
                          // 5MB 5242880
                          // 100MB 104857600
                          // 500MB 524288000
                          // 1GB 1073741824
                          maxSize: 5242880,
                          receiver: `${commonInfo.baseAiUrl}/upload`,
                        },
                      ],
                    },
                  },
                },
              ],
              columns: [
                {
                  name: 'id',
                  label: '编号',
                  width: 150,
                },
                {
                  label: '故障描述',
                  type: 'flex',
                  direction: 'column',
                  items: [
                    {
                      type: 'tpl',
                      className: 'white-space-pre',
                      tpl: '${source}',
                    },
                    {
                      className: 'feedback-list-images',
                      type: 'images',
                      enlargeAble: true,
                      enlargeWithGallary: true,
                      source: pictureFromIds('pictures'),
                      showToolbar: true,
                    },
                  ],
                },
                {
                  label: '状态',
                  width: 80,
                  align: 'center',
                  ...mappingField('status', statusMapping),
                },
                {
                  type: 'operation',
                  label: '操作',
                  width: 200,
                  buttons: [
                    {
                      visibleOn: '${status === \'ANALYSIS_SUCCESS\'}',
                      type: 'action',
                      label: '重新分析',
                      level: 'link',
                      size: 'sm',
                      actionType: 'ajax',
                      api: `get:${commonInfo.baseAiUrl}/feedback/reanalysis/\${id}`,
                      confirmText: '确认执行重新分析？',
                      confirmTitle: '重新分析',
                    },
                    {
                      disabledOn: '${status === \'ANALYSIS_PROCESSING\'}',
                      type: 'action',
                      label: '详情',
                      level: 'link',
                      size: 'sm',
                      actionType: 'dialog',
                      dialog: {
                        title: '报障详情',
                        size: 'lg',
                        closeOnOutside: true,
                        actions: [
                          {
                            visibleOn: '${status !== \'FINISHED\'}',
                            type: 'action',
                            actionType: 'close',
                            label: '取消',
                          },
                          {
                            visibleOn: '${status !== \'FINISHED\'}',
                            type: 'submit',
                            label: '确认',
                            level: 'primary',
                          },
                        ],
                        body: {
                          debug: commonInfo.debug,
                          type: 'form',
                          mode: 'normal',
                          api: {
                            method: 'post',
                            url: `${commonInfo.baseAiUrl}/feedback/conclude`,
                            data: {
                              id: '${id}',
                              conclusion: '${conclusion|default:undefined}',
                            },
                          },
                          body: [
                            {
                              type: 'textarea',
                              name: 'source',
                              label: '报障描述',
                              static: true,
                            },
                            {
                              type: 'control',
                              name: 'pictures',
                              label: '相关截图',
                              body: {
                                type: 'images',
                                enlargeAble: true,
                                enlargeWithGallary: true,
                                showToolbar: true,
                                source: pictureFromIds('pictures'),
                              },
                            },
                            {
                              type: 'control',
                              name: 'analysis',
                              label: 'AI辅助分析',
                              body: {
                                type: 'markdown',
                              },
                            },
                            {
                              visibleOn: '${status !== \'FINISHED\'}',
                              type: 'textarea',
                              name: 'conclusion',
                              label: '结论',
                            },
                            {
                              visibleOn: '${status === \'FINISHED\'}',
                              type: 'textarea',
                              name: 'conclusion',
                              label: '结论',
                              static: true,
                            },
                          ],
                        },
                      },
                    },
                    {
                      disabledOn: '${status === \'ANALYSIS_PROCESSING\'}',
                      type: 'action',
                      label: '删除',
                      className: 'text-danger btn-deleted',
                      level: 'link',
                      size: 'sm',
                      actionType: 'ajax',
                      api: `get:${commonInfo.baseAiUrl}/feedback/remove/\${id}`,
                      confirmTitle: '删除',
                      confirmText: '删除后将无法恢复，确认删除？',
                    },
                  ],
                },
              ],
            },
          ],
        },
      )}
    </FeedbackDiv>
  )
}

export default Feedback