<script setup>
import { ref,onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { getXmlInfo,addModeler } from './api'
import { ElMessage } from 'element-plus'
import { listUser } from "@/views/system/user/api";
import { listRole } from "@/views/system/role/api";
const { proxy } = getCurrentInstance();
const route = useRoute();
const xml = ref('');
const users = ref([])
const roles = ref([])
onMounted(() => {
  if( route.query.id ) getXml(route.query.id);
  // proxy.$router.push({ path: '/workflow/modeler' });
  listUser({}).then(res => {
    if(res.code === 200){
      users.value = res.data.list.map(item => {
        return {
          value: item.userId,
          label: item.userName
        }
      })
    }else{
      console.log('res.message :>> ', res.message);
    }
  })
  listRole({}).then(res => {
    if(res.code === 200){
      roles.value = res.data.list.map(item => {
        return {
          value: item.roleId,
          label: item.roleName
        }
      })
    }else{
      console.log('res.message :>> ', res.message);
    }
  })
})
const getXml = (id) => {
  getXmlInfo({ id }).then(res => {
    if(res.code === 200){
      xml.value = res.data.bpmn20Xml;
    }else{
      console.log('res.message :>> ', res.message);
    }
  })
}
const save = async (bpmnContent) => {
  // 创建 Blob 对象
  const bpmnBlob = new Blob([bpmnContent], { type: 'application/octet-stream' });
  const formData = new FormData();
  formData.append('content', bpmnBlob, 'process.bpmn');    // 文件名应以 .bpmn 结尾
  addModeler(formData).then(res => {
    if(res.code === 200){
      ElMessage.success('保存成功');
      setTimeout(() => {
        proxy.$router.go(-1)
      }, 1000);
    }else{
      console.log('res.message :>> ', res.message);
    }
  })
}
</script>

<template>
  <div class="app-container">
    <Bpmn :bpmnXml="xml" :users="users" :roles="roles" @save="save"></Bpmn>
  </div>
</template>

<style scoped>

</style>
