<template>
  <PageWrapper
    title="SQL执行"
    dense
    contentFullHeight
    fixedHeight

    @back="goBack"
  >
    <div style="padding-top: 20px">
      <BasicForm @register="registerForm">
        <template #formFooter>
          <div style="display: flex; justify-content: space-between">
            <!--          新窗口运行-->
            <Tooltip placement="top" title="新窗口运行">
              <a-button
                type="primary"
                style="margin-right: 10px; margin-left: 700px"
                @click="handleExecute"
              >
                <Icon icon="si:play-forward-duotone" :size="20" />
              </a-button>
            </Tooltip>

            <!--          运行-->
            <Tooltip placement="top" title="运行">
              <a-button type="primary" style="margin-right: 10px" @click="handleExecute">
                <Icon icon="si:play-line" :size="20" />
              </a-button>
            </Tooltip>

            <!--          执行记录-->
            <Tooltip placement="top" title="执行记录">
              <a-button type="primary" style="margin-right: 10px" @click="handleRecord">
                <Icon icon="si:clock-alt-line" :size="20" />
              </a-button>
            </Tooltip>

            <!--          提交版本-->
            <Tooltip placement="top" title="提交版本">
              <a-button type="primary" style="margin-right: 10px" @click="handleSubmit">
                <Icon icon="majesticons:file-plus-line" :size="20" />
              </a-button>
            </Tooltip>

            <!--          版本管理-->
            <Tooltip placement="top" title="版本管理">
              <a-button type="primary" style="margin-right: 10px" @click="handleVersion">
                <Icon icon="majesticons:file-search-line" :size="20" />
              </a-button>
            </Tooltip>

            <!--          参数配置-->
            <Tooltip placement="top" title="参数配置">
              <a-button type="primary" style="margin-right: 10px" @click="handleOptions">
                <Icon icon="majesticons:link-circle-line" :size="20" />
              </a-button>
            </Tooltip>

            <!--          格式化-->
            <Tooltip placement="top" title="格式化">
              <a-button type="primary" style="margin-right: 10px" @click="handleChange">
                <Icon icon="gg:align-left" :size="20" />
              </a-button>
            </Tooltip>

            <!--          保存-->
            <Tooltip placement="top" title="保存">
              <a-button type="primary" style="margin-right: 10px" @click="handleSubmit">
                <Icon icon="majesticons:save-line" :size="20" />
              </a-button> </Tooltip
          ></div>
        </template>
      </BasicForm>
      <CodeEditor v-model:value="jsonData" :mode="MODE.JSON" />
    </div>
    <optionsModal @register="registerModal" />
    <resultModal @register="registerResultModal" />
    <RecordModal @register="registerRecordModal" />
    <versionManagementModal @register="registerVersionManagementModal" />
  </PageWrapper>
</template>
<script lang="ts" setup>
  import { Tooltip } from 'ant-design-vue';
  import { ref, nextTick, watch, onMounted } from 'vue';
  import { PageWrapper } from '@/components/Page';
  import { jsonData } from '../sqlDevelopmentData';
  import { formSchema } from '../data';
  import { useGo } from '@/hooks/web/usePage';
  import { CodeEditor, MODE } from '@/components/CodeEditor';
  import { BasicForm, useForm } from '@/components/Form';
  import optionsModal from './optionsModal.vue';
  import { useModal } from '@/components/Modal';
  import resultModal from './resultModal.vue';
  import { useMessage } from '@/hooks/web/useMessage';
  import Icon from '@/components/Icon/Icon.vue';
  import RecordModal from './executeRecordModal.vue';
  import versionManagementModal from './versionManagementModal.vue';

  defineOptions({ name: 'AccountManagement' });

  const { createMessage } = useMessage();
  const go = useGo();
  const [registerModal, { openModal }] = useModal();
  const [registerResultModal, { openModal: openResultModal }] = useModal();
  const [registerVersionManagementModal, { openModal: openVersionManagementModal }] = useModal();
  const [registerRecordModal, { openModal: openRecordModal }] = useModal();
  const [registerForm] = useForm({
    labelWidth: 100,
    baseColProps: { lg: 6, md: 4 },
    schemas: formSchema,
    showActionButtonGroup: false,
  });
  function handleOptions() {
    openModal(true, {
      title: '参数配置',
    });
  }
  function handleExecute() {
    openResultModal(true, {
      title: '执行结果',
    });
  }
  function handleRecord() {
    openRecordModal(true, {
      title: '执行记录',
    });
  }
  function handleVersion() {
    openVersionManagementModal(true, {
      title: '版本管理',
    });
  }
  function handleSubmit() {
    createMessage.success('保存成功');
  }
  function handleChange() {
    createMessage.success('格式化成功');
  }

  // 页面左侧点击返回链接时的操作
  function goBack() {
    // 本例的效果时点击返回始终跳转到账号列表页，实际应用时可返回上一页
    go('/scriptDevelopment/sqlDevelopment/index');
  }
  onMounted(() => {});
</script>