<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 vkBeautify from 'vkbeautify'
import hljs from 'highlight.js'
import { useRouter,useRoute } from 'vue-router'
const router = useRouter();
const route = useRoute();

// 使用一个存在的样式文件
import "highlight.js/styles/atom-one-dark.css"

// 定义类型
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 to fetch XML data:', 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 () => {

  //closeSameRoute("/flowable/definition/AddFlow")
  router.push({ path: '/flowable/definition/index'});
}


// 展示XML
const showXML = (xmlContent: string) => {
  xmlTitle.value = 'XML查看'
  xmlOpen.value = true
  xmlData.value = vkBeautify.xml(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>