/* eslint-disable @typescript-eslint/no-explicit-any */
import type { Config } from '@form-create/designer'
import { debounce } from './utils/debouce'
import { ElMessage } from 'element-plus'

// 配置项
export const formConfig: Config = {
  //配置设计区域显示方式
  device: 'mobile',
  // 隐藏所有子表单组件
  hiddenMenu: ['subform', 'aide', 'layout'],
  /**
   * 隐藏组件
   * @see https://view.form-create.com/hidden-item#%E5%86%85%E7%BD%AE%E7%BB%84%E4%BB%B6
   */
  hiddenItem: [
    'password',
    'inputNumber',
    'rate',
    'slider',
    'datePicker',
    'colorPicker',
    'cascader',
    'fcEditor',
    'elTreeSelect',
    'tree',
    'elTransfer',
    'timePicker',
    'switch',
    'upload',
    'timeRange',
    'dateRange',
    'select',
    'radio',
    'checkbox',
  ],
  //是否显示组件的编号
  showComponentName: false,
  //是否显示国际化配置
  showLanguage: false,
  //是否显示json预览按钮
  showJsonPreview: false,
  // 展示编辑按钮
  showInputData: false,
  //隐藏组件的部分配置项
  hiddenItemConfig: {
    default: [
      'field', // 组件id
      'info', // 组件提示
      'labelWidth', // 标签的宽度
    ],
    select: [
      'remote', // 远程数据
      'allowCreate', // 是否允许用户创建新条目
      'remoteMethod', // 自定义远程搜索方法
      'reserveKeyword', // 多选且可搜索时，是否在选中一个选项后保留
      'defaultFirstOption', // 在输入框按下回车，选择第一个匹配项
      'collapseTags', // 多选时是否将选中值按文字的形式展示
    ],
    checkbox: [
      'textColor', // 当按钮为活跃状态时的字体颜色
      'fill', // 当按钮为活跃状态时的边框和背景颜色
    ],
    radio: [
      'textColor', // 当按钮为活跃状态时的字体颜色
      'fill', // 当按钮为活跃状态时的边框和背景颜色
    ],
    textarea: [
      'showWordLimit', // 是否显示统计字数
    ],
  },
  //定义表单配置默认值
  formOptions: {
    form: {
      labelWidth: '100px',
      labelPosition: 'top',
    },
  },
  // 修改组件的默认信息
  updateDefaultRule: {},
  //是否显示保存按钮
  showSaveBtn: true,
  showDevice: false, // 隐藏多端适配选项
  showStyleForm: false, // 隐藏组件的样式配置
  showControl: false, // 隐藏组件的联动数据配置
  // showPropsForm: false, // 隐藏组件的属性配置
  switchType: false, // 是否可以切换类型
  showEventForm: false, // 隐藏组件的事件配置
  showCustomProps: false, //是否显示自定义props按钮
  // 自定义右侧菜单
  componentRule: {
    default: {
      prepend: true,
      rule(rule) {
        return [
          {
            type: 'input',
            field: 'defaultValue',
            label: '默认值',
            title: '默认值',
            on: {
              change: (val: string) => {
                rule.value = val
              },
            },
          },
        ]
      },
    },
    input: {
      append: true,
      rule(rule) {
        return [
          {
            type: 'rc-switch',
            field: 'synchronize_field',
            label: '高级功能',
            title: '高级功能',
            props: {
              rule,
            },
          },
        ]
      },
    },
    textarea: {
      append: true,
      rule(rule) {
        return [
          {
            type: 'rc-switch',
            field: 'synchronize_field',
            label: '高级功能',
            title: '高级功能',
            props: {
              rule,
            },
          },
        ]
      },
    },
  },
  // 自定义表单事件
  formRule() {
    return [
      {
        type: 'input',
        field: 'formName',
        label: '表单名称',
        title: '表单名称',
      },
      {
        type: 'upload',
        field: 'cover',
        label: '头图',
        title: '头图',
        props: {
          limit: 1,
          accept: 'image/*',
          action: '/openwork/media/uploadimg',
          drag: true,
          data: {
            access_token_openwork: localStorage.getItem('access_token_openwork'),
          },
          onSuccess(res: { data: { url: string } }, file: { url: string }) {
            file.url = res.data.url
            window.__QIANKUN__EVENT__.emit('formCoverChange', res.data.url)
          },
          onRemove() {
            window.__QIANKUN__EVENT__.emit('formCoverChange')
          },
        },
      },
    ]
  },
}

// 提交表单

// 格式化参数
const formatOptions = (result: any) => {
  const hasOptionsType = ['radio', 'checkbox', 'select']
  return {
    id: result.id,
    title: result.options.form.formName,
    name: result.options.form.formName,
    cover: result.options.form.cover,
    rule: result.original.rule,
    options: result.original.options,
    form_content: result.rule
      .map((item: any) => {
        const formContentValue = {
          field_name: item.title, // 字段名称
          field_type: item.type.substring(3), // rc- 前缀
          default_text: item.value, // 默认文本
          is_required: item.$required ? 1 : 0, // 是否必填
          field_options: item.options?.map((op: any) => ({
            count: 0,
            option_name: op.label,
            tags: op.tags.map((i: any) => i.tag_id),
          })),
          synchronize_field: item.synchronize_field,
        }

        // 处理选项类型
        if (!hasOptionsType.includes(formContentValue.field_type!)) {
          delete formContentValue.field_options
        }
        return formContentValue
      })
      .filter((i: any) => i.field_type !== 'image'),
  }
}

export const formSubmitSave = debounce((result: any) => {
  const formated = formatOptions(result)
  if (!formated.name) {
    ElMessage({
      message: '表单标题不能为空',
      type: 'error',
    })
    return
  }
  const requestMethod = result.id
    ? window.__QIANKUN__REQUSET__.CustomrForm._edit
    : window.__QIANKUN__REQUSET__.CustomrForm._add

  requestMethod
    .bind(window.__QIANKUN__REQUSET__.CustomrForm)(formated)
    .then((res: any) => {
      if (!res) return
      ElMessage({
        message: result.id ? '修改成功' : '保存成功',
        type: 'success',
        onClose: () => {
          result.onSuccess?.()
        },
      })
    })
}, 300)
