<template>
  <div >
    <div style="display: flex;justify-content: flex-end;padding: 10px;">
      <el-button type="primary" @click="exportData">保存</el-button>
    </div>
    <FcDesigner ref="designerRef" style="width: 100vw;height:calc(100vh - 60px) " :field="field"
    :appId="appId"  :config="config"
    />
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { ElMessage } from 'element-plus-secondary'

import formCreate from "@form-create/element-ui";
import { useRoute } from 'vue-router'
import { moduleById,moduleUpdate } from '@/api/application/module'
const route = useRoute()
const appId:any = ref(route.query.appId)
if(route.query.appId == null){
    appId.value = '00'
}
const designerRef:any = ref();
const field:any = [{}]
const config:any = {
                fieldReadonly: false,
                showSaveBtn: true,
                // varList: [],
                // fieldList: []
            }
const exportData = () => {
  if (!designerRef.value) return;
  // 获取规则和配置
  const rules = JSON.stringify(designerRef.value.getRule()) ;
  const options = JSON.stringify(designerRef.value.getOption());
  let data = {
      id:route.query.moduleId,
      canvasStyleData:rules,
      componentData:options,
    }
    moduleUpdate(data).then((res) => {
      if(res.code == 0){
        ElMessage.success('修改成功')
      }else{
        ElMessage.error('修改失败')
      }

    }).catch(() => {

    })
};
onMounted(() => {

  if(route.query.moduleId == null){
    return
  }
  appId.value = route.query.moduleId
  route.query.moduleId
  moduleById(route.query.moduleId).then(res => {
    if(res.code ==0){
      if(res.data.data.canvas_style_data != null && res.data.data.canvas_style_data != ""){
        designerRef.value.setOption(formCreate.parseJson(res.data.data.component_data))
        designerRef.value.setRule( formCreate.parseJson(res.data.data.canvas_style_data))
      }
    }
  })
});
</script>

<style lang="scss">
</style>
<style>

/* ._fc-m-tools-l{
  display: none;
}
._fc-m-tools-r{
  display: none;
} */
</style>
