<template>
  <el-dialog
    v-model="dialogVisible"
    :close-on-click-modal="false"
    :title="parameter.title"
    :destroy-on-close="true"
    :width="parameter.width"
    draggable
  >
    <preview-code v-if="flag" :code="parameter.code" :type="parameter.type" :is-show-line-numbers="parameter.isShowLineNumbers"> </preview-code>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" v-if="parameter.isEdit" :loading="butLoading">导出</el-button>
        <el-button @click="handleCancel">取消</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts" name="FormDialog">
import PreviewCode from '@/components/Highlight/index.vue'

export interface HighlightProps {
  code?: string // 内容
  type: string // 代码类型
  title: string //标题
  width?: number // 宽度
  isEdit?: boolean // 是否是编辑状态
  api?: (params: any) => Promise<any> // 表单提交api
  isShowLineNumbers?: boolean // 是否显示行号
  getTableList?: () => void // 获取表格数据的Api
}
// dialog状态
const dialogVisible = ref(false)
const butLoading = ref(false)
// 父组件传过来的参数
const parameter = ref<HighlightProps>({
  title: '',
  width: 500,
  type: 'xml',
  isEdit: false,
  isShowLineNumbers: false
})

// 取消按钮，重置表单，关闭弹框
const handleCancel = () => {
  butLoading.value = false
  dialogVisible.value = false
}

// 接收父组件参数
const openDialog = (params: HighlightProps) => {
  parameter.value = { ...parameter.value, ...params }
  butLoading.value = false
  dialogVisible.value = true
}
let flag = ref(true)
watch(
  () => parameter.value.code,
  () => {
    flag.value = false
    nextTick(() => {
      flag.value = true
    })
  }
)

defineExpose({
  openDialog
})
</script>
