<template>
  <Dialog :loading="loadingInterface" v-model="dialogVisible" diaTitle="编辑文件" show-footer>
    <div class="monaco-editor-box">
      <MonacoEditor
        :readonly="readonly"
        ref="monacoRef"
        @saveHandle="saveEdit"
        :fileId="fileId"
        :idIndex="idIndex"
      ></MonacoEditor>
    </div>
    <!-- <template #footer>
      <div>
        <el-button @click="closeFun">取消</el-button>
        <el-button type="primary" @click="confirmFun" :loading="loadingInterface">确定</el-button>
      </div>
    </template> -->
  </Dialog>
</template>

<script setup lang="ts">
import { ref, onBeforeUnmount, computed } from 'vue';
import MonacoEditor from '@/components/common/fileEdit/monacoEditor/index.vue';
import Dialog from '@/components/common/dialog/index.vue';

const props = withDefaults(
  defineProps<{
    idIndex: string;
    fileId: string;
    showDialog: boolean;
    readonly: boolean;
  }>(),
  {
    fileId: '',
    showDialog: false,
    idIndex: '',
    readonly: false,
  }
);
const emits = defineEmits(['update:showDialog', 'closeHandle', 'saveHandle']);

const loadingInterface = ref(false);

const dialogVisible = computed({
  get() {
    return props.showDialog;
  },
  set(val) {
    emits('update:showDialog', val);
  },
});

const monacoRef = ref();
const saveEdit = () => {
  // emits('closeHandle');
  emits('update:showDialog', false);
};

// const closeFun1 = () => {
//   const isChange = monacoRef.value.isChange;
//   if (isChange) {
//     ElMessageBox.confirm('当前数据未保存,是否放弃修改？', '提示', {
//       confirmButtonText: '放弃',
//       cancelButtonText: '取消',
//       type: 'warning',
//     })
//       .then(() => {
//         emits('update:showDialog', false);
//       })
//       .catch(() => {});
//   } else {
//     emits('update:showDialog', false);
//   }
// };

onBeforeUnmount(() => {});
defineExpose({
  monacoRef,
});
</script>

<style lang="scss" scoped>
.monaco-editor-box {
  height: 70vh;
}
</style>
