<template>
  <BasicModal
    v-bind="$attrs"
    destroyOnClose
    @register="registerModal"
    :title="getTitle"
    @ok="handleSubmit"
    :defaultFullscreen="true"
  >
    <Tabs v-model:activeKey="activeKey">
      <template v-for="item in codeTypeData" :key="item.key">
        <TabPane :tab="item.key">
          <div>
            <div class="code-content">
              <CodeEditor v-model:value="item.value" :mode="item.mode" />
            </div>
          </div>
        </TabPane>
      </template>
    </Tabs>
  </BasicModal>
</template>
<script lang="ts" setup>
  import { ref } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { genPreviewTableId } from '/@/api/sys/sysGenApi';
  import { Tabs, TabPane } from 'ant-design-vue';
  import { CodeEditor } from '/@/components/CodeEditor';
  defineEmits(['register']);
  const getTitle = ref('代码预览');
  const rowId = ref();
  const activeKey = ref('index.vue.vm');
  const codeTypeData = ref([]) as any;
  const { createMessage } = useMessage();
  const [registerModal, { setModalProps, closeModal }] = useModalInner(async data => {
    setModalProps({ confirmLoading: false });
    codeTypeData.value = [];
    getTitle.value = `代码预览  - ${data.record.tableComment}`;
    rowId.value = data.record.tableId;
    const resData = await genPreviewTableId(data.record.tableId);
    for (const i in resData) {
      const key = i.split('/')[2];
      const nameData = key.split('.');
      let mode = '';
      if (nameData.length == 2) {
        mode = nameData[0];
      }
      if (nameData.length == 3) {
        mode = nameData[1];
      }
      if (mode == 'js' || mode == 'ts' || mode == 'vue') {
        mode = 'javascript';
      }
      if (mode == 'java') {
        mode = 'java';
      }
      codeTypeData.value.push({
        key,
        value: resData[i],
        mode,
      });
    }
    console.log(
      '🚀 ~ file: PreviewModal.vue ~ line 41 ~ const[registerModal,{setModalProps,closeModal}]=useModalInner ~ codeTypeData.value',
      codeTypeData.value,
    );
  });

  // 提交按钮事件
  async function handleSubmit() {
    createMessage.success('关闭');
    closeModal();
    setModalProps({ confirmLoading: false });
  }
</script>
<style lang="less" scoped>
  .code-content {
    height: calc(100vh - 176px);
    width: 100%;
    overflow-x: hidden;
    overflow-y: auto;
  }
</style>
