import React from 'react'
import {amisRender, commonInfo, horizontalFormOptions} from '../util/amis.tsx'

function Creator() {
  return (
    <div className="creator">
      {amisRender(
        {
          type: 'page',
          title: 'AI创作',
          body: [
            {
              debug: true,
              type: 'form',
              ...horizontalFormOptions(),
              wrapWithPanel: false,
              canAccessSuperData: false,
              body: [
                {
                  type: 'textarea',
                  name: 'outline',
                  label: '故事概述',
                  clearable: true,
                  required: true,
                  trimContents: true,
                  showCounter: true,
                },
                {
                  type: 'textarea',
                  name: 'world',
                  label: '世界观',
                  clearable: true,
                  required: true,
                  trimContents: true,
                  showCounter: true,
                },
                {
                  type: 'input-tag',
                  name: 'tags',
                  label: '标签',
                  placeholder: '',
                  clearable: true,
                  source: `${commonInfo.baseUrl}/book/tags`,
                  max: 10,
                  joinValues: false,
                  extractValue: true,
                },
                {
                  type: 'combo',
                  name: 'characters',
                  label: '故事人物',
                  multiLine: true,
                  addable: true,
                  removable: true,
                  multiple: true,
                  subFormMode: 'horizontal',
                  subFormHorizontal: {
                    leftFixed: 'sm',
                  },
                  items: [
                    {
                      type: 'uuid',
                      name: 'id',
                    },
                    {
                      type: 'input-text',
                      name: 'name',
                      label: '名称',
                      clearable: true,
                      required: true,
                      trimContents: true,
                    },
                    {
                      type: 'select',
                      name: 'sex',
                      label: '性别',
                      required: true,
                      options: [
                        {
                          label: '男',
                          value: 'male',
                        },
                        {
                          label: '女',
                          value: 'female',
                        },
                      ],
                    },
                    {
                      type: 'input-number',
                      name: 'age',
                      label: '年龄',
                      min: 10,
                      step: 1,
                      precision: 0,
                      required: true,
                    },
                    {
                      type: 'textarea',
                      name: 'appearance',
                      label: '外形',
                      clearable: true,
                      required: true,
                      trimContents: true,
                      showCounter: true,
                    },
                    {
                      type: 'textarea',
                      name: 'disposition',
                      label: '性格',
                      clearable: true,
                      required: true,
                      trimContents: true,
                      showCounter: true,
                    },
                    {
                      type: 'textarea',
                      name: 'clothes',
                      label: '衣着',
                      clearable: true,
                      trimContents: true,
                      showCounter: true,
                    },
                    {
                      type: 'textarea',
                      name: 'experience',
                      label: '经历',
                      clearable: true,
                      trimContents: true,
                      showCounter: true,
                    },
                    {
                      type: 'textarea',
                      name: 'family',
                      label: '家庭',
                      clearable: true,
                      trimContents: true,
                      showCounter: true,
                    },
                    {
                      type: 'input-kvs',
                      name: 'extra2',
                      label: '更多信息',
                      draggable: false,
                      keyItem: {
                        type: 'input-text',
                        label: '属性名称',
                        clearable: true,
                        trimContents: true,
                        mode: 'horizontal',
                        horizontal: {
                          leftFixed: 'sm',
                        },
                      },
                      valueItems: [
                        {
                          type: 'textarea',
                          name: 'value',
                          label: '属性内容',
                          clearable: true,
                          required: true,
                          trimContents: true,
                          showCounter: true,
                          mode: 'horizontal',
                          horizontal: {
                            leftFixed: 'sm',
                          },
                        },
                      ],
                    },
                  ],
                },
              ],
            },
          ],
        },
      )}
    </div>
  )
}

export default React.memo(Creator)