<script lang="ts" setup>
import { SettingItemBox } from '@/components/Pages/ChartItemSetting';
import { MonacoEditor } from '@/components/Pages/MonacoEditor';
import { NTag } from 'naive-ui';

defineProps<{
  value: string
}>()

const emits = defineEmits(['update:value'])

const updateValue = (value: string) => {
  emits('update:value', value)
}

</script>

<template>
  <section>
    <NTag type="warning">需要后台提供专门处理sql的接口</NTag>
    <SettingItemBox name="键名">
      <NTag type="success" style="width: fit-content;">sql</NTag>
    </SettingItemBox>
    <SettingItemBox name="键值">
      <MonacoEditor v-model:modelValue="value" @update:modelValue="updateValue" width="600px" height="200px"
        language="sql" />
    </SettingItemBox>
  </section>
</template>