<template>
  <a-modal
    width="80%"
    :maskClosable="false"
    :visible="props.visible"
    :confirm-loading="loading"
    :forceRender="true"
    style="top: 40px"
    title="生成java枚举"
    :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" class="task-tabs" @change="activeKeyChange" style="height: 62px">
        <a-tab-pane :key="item.fileName" :tab="item.fileName" v-for="item in javaList" />
      </a-tabs>
      <div class="content">
        <monaco-code-editor v-model="fileContent" style="height: 100%;" language="sql" :options="{ readOnly: true }" />
      </div>
    </div>
  </a-modal>
</template>

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

const props = defineProps({
  visible: Boolean,
  businessId: {
    type: String,
    default: ''
  },
  businessCategoryId: {
    type: String,
    default: ''
  }
});

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

const activeKey = ref('');

const fileContent = ref('');

const javaList = ref([]);

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

// 获取sql数据
const getSqlData = async () => {
  const res = await BusinessDictApi.javaEnums({ businessId: props.businessId, metaUserDictId: props.businessCategoryId });
  javaList.value = res.data;
  if (res.data?.length > 0) {
    activeKey.value = res.data[0].fileName;
    fileContent.value = res.data[0].fileContent;
  }
};

const activeKeyChange = key => {
  let currentData = javaList.value.find(item => item.fileName == key);
  if (currentData) {
    fileContent.value = currentData.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;
  height: calc(100% - 62px);
}
</style>
