<template>
  <Dialog title="配置字段" v-model="dialogVisible" width="80%">
    <!-- 表单设计器 -->
    <FcDesigner ref="designer" height="780px"  :config="config">
      <template #handle>
        <el-button round size="small" type="primary" @click="handleSave">
          <Icon class="mr-5px" icon="ep:plus" />
          保存
        </el-button>
      </template>
    </FcDesigner>
  </Dialog>
</template>
<script lang="ts" setup>
import FcDesigner from '@form-create/designer'
import { decodeFields, encodeConf, encodeFields, setConfAndFields } from '@/utils/formCreate'
import { useTagsViewStore } from '@/store/modules/tagsView'
import { useTwinsFormCreateDesigner } from '@/components/FormCreate/twins'
import { ChatModelApi} from "@/api/ai/model/chatModel";
import { ApiKeyApi } from "@/api/ai/model/apiKey";
import { ref , nextTick  } from "vue";
defineOptions({ name: 'TwinEditor' })
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const { push, currentRoute } = useRouter() // 路由
const { query } = useRoute() // 路由信息
const { delView } = useTagsViewStore() // 视图操作
const designer = ref() // 表单设计器
const emit = defineEmits(['submitFiled']);
useTwinsFormCreateDesigner(designer) // 表单设计器增强
let dialogVisible = ref(false) // 弹窗是否展示

const config =ref( {
  //隐藏拖拽操作按钮
  hiddenDragMenu: true,
  //隐藏拖拽按钮
  hiddenDragBtn: false,
  //是否显示保存按钮
  showSaveBtn: false,
  //是否显示右侧的配置界面
  showConfig: true,
  //是否显示组件的基础配置表单
  showBaseForm: true,
  //是否显示组件联动
  showControl: false ,
  //是否显示模块管理
  showPageManage: false,
  //是否显示组件的高级配置表单
  showAdvancedForm: false ,
  //是否显示组件的属性配置表单
  showPropsForm: true,
  //是否显示组件的样式配置表单
  showStyleForm: true,
  //是否显示组件的事件配置表单
  showEventForm: false,
  //是否显示组件的验证配置表单
  showValidateForm: false,
  //是否显示表单配置
  showFormConfig: true,
  //是否显示左侧的模板列表
  showTemplate: false,
  //是否显示多端适配选项
  showDevice: false,

  hiddenItem: ['input', 'password'],

  hiddenMenu: ['subform','main'],

  switchType: [
    ['input',  'select']
  ],
})
/** 处理保存按钮 */
const handleSave = () => {
  emit('submitFiled',shpItem.value ,designer.value.getRule(),designer.value.getOption());
  dialogVisible.value = false
}

let shpItem = ref();

/** 打开弹窗 */
const open = async (item : any,shpItemField : any,shpItemConf : any) => {
  dialogVisible.value = true
  shpItem.value = item;
  console.log(shpItemField,shpItemConf)
  //   // 等待 DOM 更新
  await nextTick()
  // 移除不需要的菜单
  changeMenu()
  designer.value?.setRule(shpItemField)
  designer.value?.setOption(shpItemConf)
}
const changeMenu = () => {
  designer.value?.removeMenuItem('upload')
  // 移除自带的富文本组件规则，使用 editorRule 替代
  designer.value?.removeMenuItem('fc-editor')
  designer.value?.removeMenuItem('fcRow')
  designer.value?.removeMenuItem('elTreeSelect')
  designer.value?.removeMenuItem('tree')
  designer.value?.removeMenuItem('colorPicker')
  designer.value?.removeMenuItem('group')
  designer.value?.removeMenuItem('subForm')
  designer.value?.removeMenuItem('elButton')
  designer.value?.removeMenuItem('text')
  designer.value?.removeMenuItem('elAlert')
  designer.value?.removeMenuItem('subform')
  designer.value?.removeMenuItem('text')
  designer.value?.removeMenuItem('slider')
  designer.value?.removeMenuItem('rate')
  designer.value?.removeMenuItem('inputNumber')
  designer.value?.removeMenuItem('cascader')
  designer.value?.removeMenuItem('datePicker')
  designer.value?.removeMenuItem('el-transfer')
  designer.value?.removeMenuItem('dataTable')
  designer.value?.removeMenu('layout')
  designer.value?.removeMenu('aide')
}


defineExpose({ open })
</script>
<style  lang="scss" scoped >


:deep(._fc-m-tools .el-button + .el-button) {
  margin-left: 10px;
  display: none;
}
:deep(._fc-l) {
  display: none !important;
}
</style>
