<template>
  <div>
    <bpmn-model
      :xml="xml"
      :is-view="false"
      @save="save"
      @goback="handleSuccess"
      @showXML="showXML"
    />
    <!-- 在线查看xml -->
    <a-drawer
      v-model:open="xmlOpen"
      class="custom-class"
      root-class-name="root-class-name"
      :root-style="{ color: 'blue' }"
      style="color: white;"
      :title="xmlTitle"
      placement="right"
      width="70%"
    >
      <a-scrollbar>
        <div style="background-color: black;">
          <pre><code class="xml" v-html="highlightedXml"></code></pre>
        </div>
      </a-scrollbar>
    </a-drawer>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, computed } from 'vue'
import { readXml, saveXml } from "/@/components/Process/api/definition"
import BpmnModel from '/@/components/Process/index.vue'

import * as vkbeautify from 'vkbeautify'
import hljs from 'highlight.js'
import { useRouter, useRoute } from 'vue-router'

import "highlight.js/styles/atom-one-dark.css"


const router = useRouter()
const route = useRoute()

// 定义类型
interface ProcessData {
  process: {
    name: string
    category: string
  }
  xml: string
}

interface SaveParams {
  name: string
  category: string
  xml: string
}

// 响应式数据
const xml = ref<string>('')
const xmlOpen = ref<boolean>(false)
const xmlTitle = ref<string>('')
const xmlData = ref<string>('')

// 计算属性，用于高亮显示的XML
const highlightedXml = computed(() => {
  if (!xmlData.value) return ''
  return hljs.highlight(xmlData.value, { language: 'xml' }).value
})

// 获取XML数据
const getXmlData = async (deployId: string) => {
  try {
    xml.value = await readXml(deployId)
  } catch (error) {
    console.error('Failed:', error)
  }
}

// 保存XML
const save = async (data: ProcessData) => {
  const params: SaveParams = {
    name: data.process.name,
    category: data.process.category,
    xml: data.xml
  }
  
  try {
    const res = await saveXml(params)
    await handleSuccess()
  } catch (error) {
    console.error('Failed to save XML:', error)
  }
}

const handleSuccess = async () => {
  router.push({ path: '/flowable/definition/index' })
}

// 展示XML
const showXML = (xmlContent: string) => {
  xmlTitle.value = 'XML查看'
  xmlOpen.value = true
  
  // 修改2: 使用正确的大小写和调用方式
  try {
    // 第一种方式: 使用 default 导出（如果库是这种方式）
    if (vkbeautify && typeof vkbeautify === 'object' && vkbeautify.xml) {
      xmlData.value = vkbeautify.xml(xmlContent)
    } else {
      // 如果 vkbeautify 本身就是函数
      xmlData.value = vkbeautify(xmlContent)
    }
  } catch (error) {
    console.error('Failed to format XML:', error)
    // 如果格式化失败，使用原始XML内容
    xmlData.value = xmlContent
  }
}

onMounted(() => {
  const deployId = route.query?.deployId as string
  if (deployId) {
    getXmlData(deployId)
  }
})
</script>

<style lang="scss" scoped>
.content-box {
  line-height: 10px;
}

// 修改对话框高度
.showAll_dialog {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  
  :deep(.ant-modal) {
    margin: 0 auto !important;
    height: 80%;
    overflow: hidden;
    background-color: #ffffff;
    
    .ant-modal-body {
      position: absolute;
      left: 0;
      top: 54px;
      bottom: 0;
      right: 0;
      z-index: 1;
      overflow: hidden;
      overflow-y: auto;
      color: #ffffff;
      padding: 0 15px;
    }
  }
}

// 确保代码块样式正确
pre {
  margin: 0;
  padding: 16px;
  // background-color: #282c34;
  border-radius: 4px;
  
  code {
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: 14px;
    line-height: 1.5;
  }
}
</style>