<template>
  <PageWrapper :class="prefixCls">
    <a-tabs v-model:activeKey="activeName">
      <a-tab-pane key="form" tab="表单信息">

      </a-tab-pane>
      <a-tab-pane key="flow" tab="流程信息" force-render>
        <div class="process-design" :style="'display: flex; height:' + designerData.height">
          <process-viewer :key="`designer-${id}`" :xml="flowContent" :flowViewer="flowViewer"/>
        </div>
      </a-tab-pane>
    </a-tabs>

  </PageWrapper>

</template>

<script lang="ts" setup>
  import { h, ref, provide, reactive, onMounted, defineProps, computed, defineEmits, onBeforeMount } from 'vue';
  import ProcessViewer from '@/components/ProcessViewer/index.vue';
  import { PageWrapper } from '@/components/Page';
  import { SendOutlined, SaveOutlined, CloseCircleOutlined, ZoomInOutlined, RotateLeftOutlined, RotateRightOutlined, ClearOutlined } from '@ant-design/icons-vue';
  import { getBPMN } from '@/api/sys/WFProcess'
  import { getLoadMyUserList } from '@/api/sys/WFDelegate'
  import { useRoute } from 'vue-router'
  import { useMultipleTabStore } from '@/store/modules/multipleTab';
  import { useRouter } from 'vue-router';
  import { buildGUID } from '@/utils/uuid';
  import { useMessage } from '/@/hooks/web/useMessage';
  const { createConfirm, createMessage } = useMessage();

  const prefixCls = 'preview-box'
  const tabStore = useMultipleTabStore();
  const router = useRouter();
  const content = ref('')
  const flowContent = ref('')
  const flowViewer = ref({})
  const route = useRoute()
  const id = route.query.id
  const designerOpen = ref(false)
  const formRef = ref();
  const labelCol = { span: 7 };
  const wrapperCol = { span: 13 };

  const designerData = reactive({
    loading: false,
    xmlString: '',
    controlForm: {
      prefix: 'flowable',
    },
    height: document.documentElement.clientHeight - 230.5 + "px;",
    midVisible: false,
    isCustmerTitle: false,
    nodeUsers: [],
    selectUsersVisible: false,

    isDraft: false,
    delegateUsers: []
  })
  const activeName = ref('flow')
  async function getDetailInfo() {
    let data = await getBPMN({ id: id })
    flowContent.value = data.flowContent
    flowViewer.value = data.flowViewer
    // var result = {
    //   // 流程图xml
    //   flowContent: "",
    //   // 流程图节点id
    //   flowViewer: {
    //     // 完成节点id集合
    //     finishedTaskSet: [],
    //     // 完成线条节点id集合
    //     finishedSequenceFlowSet: [],
    //     // 当前节点id集合
    //     unfinishedTaskSet: [],
    //     // 拒绝节点id集合（暂无示例）
    //     rejectedTaskSet: [],
    //   }
    //   // 后续还需确定需不需要节点的一些审核信息，需要的话还需要增加返回字段
    // }
  }
  function closePreview() {
    if (!id) {
      tabStore.closeTabByKey('/dashboard/task_preview/detail', router);
    } else {
      // /dashboard/create_preview/add?id=测试1
      tabStore.closeTabByKey('/dashboard/task_preview/detail?id=' + id, router);
    }
  }
  onBeforeMount(() => {
    getDetailInfo()
  })
</script>
<style lang="less" scoped>
  .preview-box {
    background-color: @component-background;

    .btn-box {
      padding: 10px;
      justify-content: flex-end;
      display: flex;

    }
  }

  .form-box {
    width: 480px;
  }
</style>