<template>
  <div>
    <a-button @click.stop="handleOpen">表头合并配置</a-button>
    <a-modal
      :width="700"
      v-model:visible="state.visible"
      title="表头合并配置"
      :maskClosable="false"
      :bodyStyle="state.modalBodyStyle"
      destroyOnClose
      @cancel="handleClose"
      @ok="handleSubmit"
    >
      <div v-if="state.visible">
        <NodeHead nodeName="是否开启表头合并：">
          <div class="switch-box">
            <a-switch v-model:checked="generatorConfig.listConfig.isHeaderMerging" />
          </div>
        </NodeHead>
        <Modal
          v-if="generatorConfig.listConfig.isHeaderMerging"
          :sourceData="sourceData"
          ref="HeaderMergingRef"
        />
      </div>
    </a-modal>
  </div>
</template>
<script lang="ts" setup>
  import { computed, inject, reactive, ref } from 'vue';
  import { NodeHead } from '/@/components/ModalPanel/index';
  import { TableMultipleHeadInfo } from '/@/components/Designer/src/types';
  import Modal from './headerMerging/Modal.vue';
  import { GeneratorConfig } from '/@/model/generator/generatorConfig';
  const generatorConfig = inject<GeneratorConfig>('generatorConfig') as GeneratorConfig;
  const HeaderMergingRef = ref();
  const emits = defineEmits(['changeHeaderMergingData']);
  const state = reactive({
    modalBodyStyle: {
      padding: '15px 15px 10px 10px',
      minHeight: '400px',
    },
    visible: false,
    headerMergingData: [] as Array<TableMultipleHeadInfo>,
  });
  const sourceData = computed(() => {
    if (
      generatorConfig?.listConfig?.columnConfigs &&
      Array.isArray(generatorConfig?.listConfig?.columnConfigs)
    ) {
      return generatorConfig?.listConfig?.columnConfigs;
    } else {
      return [];
    }
  });
  function handleOpen() {
    state.visible = true;
  }
  function handleClose() {
    state.visible = false;
  }

  function handleSubmit() {
    if (generatorConfig?.listConfig?.isHeaderMerging) {
      try {
        let val = HeaderMergingRef.value.handleSubmit();
        if (val && Array.isArray(val)) {
          emits('changeHeaderMergingData', val);
          handleClose();
        }
      } catch (error) {}
    } else {
      emits('changeHeaderMergingData', []);
      handleClose();
    }
  }
</script>
<style lang="less" scoped>
  .switch-box {
    display: flex;
    margin: 10px 0;
  }
</style>
