<!--
 * @Author: nxy
 * @Date: 2024-08-07 10:01:53
-->
<template>
  <!-- 新增编辑 -->
  <a-modal
    width="80%"
    :maskClosable="false"
    :visible="props.visible"
    :confirm-loading="loading"
    :forceRender="true"
    style="top: 40px"
    title="导出sql"
    :body-style="{ paddingTop: '10px', height: 'calc(100vh - 180px)' }"
    @update:visible="updateVisible"
    :footer="null"
    @close="updateVisible(false)"
    class="common-modal"
  >
    <div class="wh100">
      <a-tabs v-model:activeKey="activeKey" size="small" @change="tabChange">
        <a-tab-pane :key="item.fileName" :tab="item.fileName" v-for="item in sqlList"> </a-tab-pane>
      </a-tabs>
      <div class="content">
        <monaco-code-editor v-model="activeContent" style="height: calc(100% - 46px)" language="sql" :options="{ readOnly: true }" />
      </div>
    </div>
  </a-modal>
</template>

<script setup name="SheetExportSql">
import { ref, onMounted } from 'vue';
import { ModelApi } from '../../api/ModelApi';

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

const emits = defineEmits(['update:visible', 'done']);
// 弹框加载
const loading = ref(false);

const sqlList = ref([]);

// 激活tab
const activeKey = ref('');

// 内容
const activeContent = ref('');

onMounted(() => {
  getSqlData();
});

// 获取sql数据
const getSqlData = async () => {
  sqlList.value = await ModelApi.createTableSql({ modelId: props.data.metaModelId });
  if (sqlList.value?.length > 0) {
    activeKey.value = sqlList.value[0].fileName;
    activeContent.value = sqlList.value[0].fileContent;
  }
};

// tab切换
const tabChange = key => {
  const item = sqlList.value.find(s => s.fileName == key);
  if (item) {
    activeContent.value = item.fileContent;
  }
};

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

<style scoped lang="less">
.wh100 {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.content {
  flex: auto;
}
</style>
