<template>
  <Modal visible title="编辑" :width="700" @ok="onSave" @cancel="onCancel">
    <MonacoEditor style="width: 100%; height: 370px" theme="vs" v-model="monacoValue" language="json" />
  </Modal>
</template>

<script setup lang="ts">
  import { MonacoEditor } from '@jdlinker/ui';
  import { modify } from '../../../../api/edge/resource';
  import { onlyMessage } from '@jdlinker/utils';
  import { ref, watchEffect, unref } from 'vue';
  // @ts-ignore
  import { Modal } from 'linker-ui-components';

  const props = defineProps({
    data: {
      type: Object,
      default: () => {}
    }
  });
  const emit = defineEmits(['close', 'save']);

  const monacoValue = ref<string>('{}');

  watchEffect(() => {
    // @ts-ignore
    monacoValue.value = props.data?.metadata || '{}';
  });

  const onSave = async () => {
    // @ts-ignore
    const resp = await modify(props.data.id, { metadata: unref(monacoValue) });
    if (resp.status === 200) {
      emit('save');
      onlyMessage('操作成功', 'success');
    }
  };

  const onCancel = () => {
    emit('close');
  };
</script>

<style lang="less" scoped></style>
