<!-- eslint-disable @typescript-eslint/no-explicit-any -->
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import type { Config, Handle } from '@form-create/designer'
import { formConfig, formSubmitSave } from './form.config.ts'
import FcDesigner from '@form-create/designer'
// 组件
import { RcSelect } from './plugins/components/rc-select.config.ts'
import { RcRadio } from './plugins/components/rc-radio.config.ts'
import { RcCheckbox } from './plugins/components/rc-checkbox.config.ts'
// 菜单
import { MenuOptions } from './plugins/menu/options.ts'

import type { FcDesignerInstance } from '@form-create/designer' // 注册组件
import type { Options, Rule } from '@form-create/element-ui'
import type { Option } from './components/rc-options/createOptions.ts'

/**
 * @see https://view.form-create.com/methods
 */
declare global {
  interface Window {
    __QIANKUN__EVENT__: {
      on: (name: string, fn: (...arg: any[]) => void) => void
      emit: (name: string, ...arg: any[]) => boolean
    } // 事件中心
    __QIANKUN__REQUSET__: any // 请求API接口
    __QIANKUN__GUID__: () => string // 获取唯一标识
    __QIANKUN__OPEN__TAG__: (tags: Option['tags']) => void // 打开标签页
    __QIANKUN__QUITE__: () => void // 返回页面
  }
}
// 表单实例
const designer = ref<FcDesignerInstance | null>(null)
const api = ref(null)
// 表单模板元素
// 判断是独立运行的还是qiankun子应用
const height = ref('100vh')
const config = ref<Config>(formConfig)
// 顶部更多操作按钮
const handle = ref<Handle>([])

let id = ''

const onSave = async (config: { options: string; rule: string }) => {
  const rule = config.rule
  const options = config.options

  formSubmitSave({
    rule: JSON.parse(rule),
    options: JSON.parse(options),
    original: config,
    id,
    onSuccess() {
      window.__QIANKUN__QUITE__()
    },
  })
}

window.__QIANKUN__EVENT__.on('formCoverChange', (cover: string) => {
  const newRule = designer.value!.getRule() as Rule[]
  if (!cover) {
    newRule.shift()
    designer.value?.setRule(newRule)
    return
  }
  const firstType = newRule[0]?.type
  if (firstType === 'rc-image') {
    newRule[0]!.props!.cover = cover
  } else {
    newRule.unshift({
      type: 'rc-image',
      props: {
        cover,
      },
    } as Rule)
  }

  designer.value?.setRule(JSON.stringify(newRule)) // 重新赋值
})

onMounted(async () => {
  console.log(window.__QIANKUN__EVENT__)

  // 注册拖拽规则
  designer.value?.addMenu(MenuOptions)
  designer.value?.addComponent(RcSelect)
  designer.value?.addComponent(RcRadio)
  designer.value?.addComponent(RcCheckbox)

  id = location.search?.substring(1).split('=')[1] || ''
  if (!id) return

  window.__QIANKUN__REQUSET__.CustomrForm._getDetail({ id }).then(
    (res: { data: { rule: string; options: string } }) => {
      if (!res) return
      // 设置拖拽规则
      designer.value?.setRule(res.data.rule)
      designer.value?.setOptions(res.data.options as Options) // 重新赋值
    },
  )
})
</script>

<template>
  <fc-designer
    ref="designer"
    :height="height"
    :handle="handle"
    :config="config"
    v-model:api="api"
    @save="onSave"
  />
</template>
