<template>
  <el-dialog
    :model-value="visible"
    title="JSON详情"
    width="600px"
    :append-to-body="true"
    :destroy-on-close="true"
    @open="onOpen"
    @close="onClose"
  >
    <el-input type="textarea" :rows="20" v-model="val" :readonly="mode === 'show'" />
    <template #footer>
      <el-button type="primary" @click="onSave" v-if="mode !== 'show'">确定</el-button>
      <el-button @click="onClose">取消</el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const props = defineProps<{
  visible: boolean
  mode: string
  json: string
}>()
const emits = defineEmits<{
  (e: 'on-close'): void
  (e: 'on-save', val: string): void
}>()

const val = ref(props.json)

function onOpen() {
  val.value = props.json
}
function onSave() {
  emits('on-save', val.value)
}
function onClose() {
  emits('on-close')
}
</script>
