<template>
  <common-modal
    width="80%"
    :maskClosable="false"
    :visible="props.visible"
    :confirm-loading="loading"
    :forceRender="true"
    style="top: 40px"
    title="导出字典sql"
    :body-style="{ paddingTop: '10px' }"
    @update:visible="updateVisible"
    :footer="null"
    @close="updateVisible(false)"
    wrapClassName="project-modal h80"
  >
    <div class="wh100">
      <div class="content">
        <monaco-code-editor v-model="activeContent" style="height: 100%;" language="sql" :options="{ readOnly: true }" />
      </div>
    </div>
  </common-modal>
</template>

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

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

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

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

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

// 获取sql数据
const getSqlData = async () => {
  const res = await MetaUserDictApi.summaryCreateDictSql({ businessId: props.businessId, metaUserDictId: props.businessCategoryId });
  activeContent.value = res.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>
