<template>
  <!-- 新增编辑 -->
  <a-modal
    style="min-width: 900px; height: calc(100% - 45px)"
    width="80%"
    :maskClosable="false"
    :visible="props.visible"
    :confirm-loading="loading"
    :forceRender="true"
    title="数据加载事件"
    :body-style="{ paddingBottom: '8px', height: 'calc(100% - 110px)', overflowY: 'auto' }"
    @update:visible="updateVisible"
    @ok="save"
    class="common-modal"
    @close="updateVisible(false)"
  >
    <a-row class="wh100" :gutter="12">
      <a-col :span="10" class="wh100">
        <a-tabs v-model:activeKey="leftActiveKey">
          <a-tab-pane key="1" tab="数据结构">
            <json-editor-vue currentMode="view" class="editor wh100" v-model="setValueData" :modeList="[]"></json-editor-vue>
          </a-tab-pane>
          <a-tab-pane key="2" tab="使用参考">
            <a-collapse v-model:activeKey="referActiveKey" accordion>
              <a-collapse-panel key="1" header="赋值">
                <p>formObj.formData.userName = '张三'</p>
              </a-collapse-panel>
              <a-collapse-panel key="2" header="编辑">
                <p>formObj.userName.itemEditFlag = true</p>
              </a-collapse-panel>
              <a-collapse-panel key="3" header="禁用">
                <p>formObj.userName.itemEditFlag = false</p>
              </a-collapse-panel>
              <a-collapse-panel key="4" header="隐藏">
                <p>formObj.userName.itemHiddenFlag = true</p>
              </a-collapse-panel>
              <a-collapse-panel key="5" header="使用接口">
                <p>Request.get(url, params).then(res => { console.log(res) })</p>
              </a-collapse-panel>
            </a-collapse>
          </a-tab-pane>
          <a-tab-pane key="3" tab="事件使用教程">
            <a-collapse v-model:activeKey="eventActiveKey" accordion>
              <a-collapse-panel key="1" header="数据加载前">
                <p>页面加载完成后，加载默认数据时，使用</p>
              </a-collapse-panel>
              <a-collapse-panel key="2" header="数据加载后">
                <p>详情页面加载完成后，页面的默认操作</p>
              </a-collapse-panel>
            </a-collapse>
          </a-tab-pane>
        </a-tabs>
      </a-col>
      <a-col :span="14" class="wh100">
        <a-tabs v-model:activeKey="activeKey">
          <a-tab-pane key="1" tab="数据加载前">
            <monaco-code-editor style="height: 100%;" v-model="initBefore" language="js"></monaco-code-editor>
          </a-tab-pane>
          <a-tab-pane key="2" tab="数据加载后">
            <monaco-code-editor style="height: 100%;" v-model="initAfter" language="js"></monaco-code-editor>
          </a-tab-pane>
        </a-tabs>
      </a-col>
    </a-row>
  </a-modal>
</template>

<script setup name="FormCustomData">
import { ref, onMounted } from 'vue';
import JsonEditorVue from 'json-editor-vue3';
import { pick } from 'lodash-es';

const props = defineProps({
  visible: Boolean,
  formConfig: Object
});

const emits = defineEmits(['update:visible']);
// 弹框加载
const loading = ref(false);
// 左侧tab选中
const leftActiveKey = ref('1');
// tabs选中
const activeKey = ref('1');
// 使用参考key
const referActiveKey = ref('1');
// 事件使用教程
const eventActiveKey = ref('1');

// 加载前
const initBefore = ref('');

// 加载后
const initAfter = ref('');

// 总数据
const formObj = ref({});

// 可以设置的值
const setValueData = ref({});
// 需要展示的字段列表
const showFieldList = ref([
  'componentCode',
  'itemLabelName',
  'itemEditFlag',
  'itemRequiredFlag',
  'itemHiddenFlag',
  'fieldCode',
  'children',
  'itemId',
  'columnList',
  'dictList',
  'formItemDialog',
]);

onMounted(() => {
  if (props.formConfig.config?.initBefore) {
    initBefore.value = props.formConfig.config.initBefore;
  }
  if (props.formConfig.config?.initAfter) {
    initAfter.value = props.formConfig.config.initAfter;
  }

  // 设置
  formObj.value.formData = {};
  ergodicItem(props.formConfig.formItems, formObj.value);
  setValueData.value = { formObj: formObj.value };
});

// 更改弹框状态
const updateVisible = value => {
  emits('update:visible', value);
};

// 点击保存
const save = () => {
  props.formConfig.config.initBefore = initBefore.value;
  props.formConfig.config.initAfter = initAfter.value;
  updateVisible(false);
};

// 遍历每一项
const ergodicItem = (arr, formObj) => {
  let otherCode = ['grid', 'collapse', 'col']
  if (arr?.length > 0) {
    arr.forEach(item => {
      if (!['title', 'divide-line', 'pure-text', 'carousel', 'breadcrumb'].includes(item.componentCode)) {
        if (['select', 'custom-select', 'tree', 'tree-select', 'link-select', 'transfer', 'select-modal'].includes(item.componentCode)) {
          item.dictList = [];
        }
        item = pick(item, showFieldList.value);
        if (otherCode.includes(item.componentCode)) {
          formObj[item.componentCode + '_' + item.itemId] = item;
        } else {
          formObj[item.fieldCode] = item;
        }
        if (item?.children?.length > 0) {
          item.children = item.children.map(d => pick(d, showFieldList.value));
          let itemKey = otherCode.includes(item.componentCode) ? item.componentCode + '_' + item.itemId  : item.fieldCode;
          ergodicItem(item.children, formObj[itemKey]);
        }
      }
    });
  }
};
</script>

<style lang="less" scoped>
.wh100 {
  width: 100%;
  height: 100%;
}
:deep(.ant-tabs) {
  width: 100%;
  height: 100%;
}
:deep(.ant-tabs-content) {
  width: 100%;
  height: 100%;
}
:deep(.ant-tabs-content-holder) {
  overflow-y: auto;
  width: 100%;
  height: 100%;
}
:deep(.full-screen) {
  display: none;
}
</style>
