<template>
  <div class="app-container">
    <a-card class="box-card">
      <template #title>
        <span><FileTextOutlined /> 待办任务</span>
        <div style="float: right">
          <a-tag style="margin-left: 10px">发起人:{{ startUser }}</a-tag>
          <a-tag>任务节点:{{ taskName }}</a-tag>
        </div>
      </template>

      <a-tabs v-model:activeKey="activeName" @tabClick="handleClick">
        <!--表单信息-->
        <a-tab-pane key="1" tab="主表单信息">
          <div v-show="formUrl" class="iframe-container">
            <iFrame :src="formUrl" class="responsive-iframe"></iFrame>
          </div>
          <div v-show="!formUrl" style="margin:10px;width:100%">
              <FlowInnerForm  ref="refInnerForm"></FlowInnerForm>
          </div>
        </a-tab-pane>

        <!--流程流转记录-->
        <a-tab-pane key="2" tab="流转记录">
          <div class="block">
            <a-steps direction="vertical" size="small">
              <a-step
                v-for="(item, index) in flowRecordList"
                :key="index"
                :status="getStepStatus(item.finishTime)"
        
              >
                <template #title>
                  <div style="margin: 5px">
                    <span style="margin-right: 50px;">节点名称：{{ item.taskName }} </span>
                    <a-button type="link" @click="showNodeFormData(item)">查看表单</a-button>
                  </div>
                </template>
                <template #description>
                  <a-card :body-style="{ padding: '0px', marginTop: '0px' }">
                    <a-descriptions
                      class="margin-top"
                      :column="1"
                      size="small"
                      bordered
                    >
                      <a-descriptions-item
                        v-if="item.assigneeName"
                        label="办理人"
                      >
                        <template #label>
                          <UserOutlined />
                          办理人
                        </template>
                        {{ item.assigneeName }}
                        <a-tag color="gray" size="small">{{
                          item.deptName
                        }}</a-tag>
                      </a-descriptions-item>
                      <a-descriptions-item
                        v-if="item.candidate"
                        label="候选办理"
                      >
                        <template #label>
                          <UserOutlined />
                          候选办理
                        </template>
                        {{ item.candidate }}
                      </a-descriptions-item>
                      <a-descriptions-item label="接收时间">
                        <template #label>
                          <CalendarOutlined />
                          接收时间
                        </template>
                        {{ item.createTime }}
                      </a-descriptions-item>
                      <a-descriptions-item
                        v-if="item.finishTime"
                        label="处理时间"
                      >
                        <template #label>
                          <CalendarOutlined />
                          处理时间
                        </template>
                        {{ item.finishTime }}
                      </a-descriptions-item>
                      <a-descriptions-item
                        v-if="item.duration"
                        label="耗时"
                      >
                        <template #label>
                          <ClockCircleOutlined />
                          耗时
                        </template>
                        {{ item.duration }}
                      </a-descriptions-item>
                      <a-descriptions-item
                        v-if="item.comment?.comment"
                        label="处理意见"
                      >
                        <template #label>
                          <FormOutlined />
                          处理意见
                        </template>
                        {{ item.comment.comment }}
                      </a-descriptions-item>
                    </a-descriptions>
                  </a-card>
                </template>
              </a-step>
            </a-steps>
          </div>
        </a-tab-pane>
        <!--流程图-->
        <a-tab-pane key="3" tab="流程图">
          <bpmn-viewer :flowData="flowData" :procInsId="taskForm.procInsId" />
        </a-tab-pane>
      </a-tabs>
    </a-card>
    <ShowFormModal @register="registerShowFormModal" />
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive,nextTick } from 'vue'

import {
  FileTextOutlined,
  UserOutlined,
  CalendarOutlined,
  ClockCircleOutlined,
  FormOutlined,
} from '@ant-design/icons-vue'
import { flowRecord } from "/@/components/Process/api/finished"
import { flowXmlAndNode } from "/@/components/Process/api/definition"
import { findFlowFormVal} from "/@/components/Process/api/todo"
import { useModal } from '/@/components/Modal';
import { flowFormData } from "/@/components/Process/api/process"
import BpmnViewer from '/@/components/Process/viewer/index.vue'
import FlowInnerForm from '/@/views/flowable/task/components/FlowInnerForm.vue'
import ShowFormModal from '/@/views/flowable/task/components/ShowFormModal.vue'


interface FlowRecordItem {
  taskName: string
  finishTime: string | null
  assigneeName: string
  deptName: string
  candidate: string
  createTime: string
  duration: string
  comment: {
    comment: string
  }
}

interface TaskForm {
  returnTaskShow: boolean
  delegateTaskShow: boolean
  defaultTaskShow: boolean
  comment: string
  procInsId: string
  instanceId: string
  deployId: string
  taskId: string
  procDefId: string
  targetKey: string
  variables: Record<string, any>
  executionId?: string
}

const flowData = ref({})
const activeName = ref('1')
const formUrl = ref();
const refInnerForm = ref();


const [registerShowFormModal, { openModal, setModalProps }] = useModal();

// 遮罩层
const loading = ref(true)
const flowRecordList = ref<FlowRecordItem[]>([]) 
const taskForm = reactive<TaskForm>({
  returnTaskShow: false,
  delegateTaskShow: false,
  defaultTaskShow: true,
  comment: '',
  procInsId: '',
  instanceId: '',
  deployId: '',
  taskId: '',
  procDefId: '',
  targetKey: '',
  variables: {},
})



const taskName = ref<string | null>(null) // 任务节点
const startUser = ref<string | null>(null) // 发起人信息

const handleClick = (key: string) => {
if (key === '3') {
      flowXmlAndNode({
        procInsId: taskForm.procInsId,
        deployId: taskForm.deployId,
      }).then((res) => {
        flowData.value = res
        console.log("xml",JSON.stringify(res))
      })
  }
}


// 修改 setColor 方法为 getStepStatus
const getStepStatus = (finishTime: string | null) => {
  if (finishTime) {
    return 'finish'  // 已完成
  } else {
    return 'wait'    // 等待中
  }
}

const setFlowRecordList =  async (procInsId: string, deployId: string) => {
  const params = { procInsId, deployId }
  await flowRecord(params)
    .then((res) => {
      console.log("flowList",res)
      flowRecordList.value = res.flowList
    })
    .catch(() => {
      //goBack()
    })
}

const taskDataObj = ref()
const iniData = async (data) => {
    taskDataObj.value = data
    taskName.value = data.taskName as string
    startUser.value = data.startUserName as string
    taskForm.deployId = data.deployId as string
    taskForm.taskId = data.taskId as string
    taskForm.procInsId = data.procInsId as string
    taskForm.executionId = data.executionId as string
    taskForm.instanceId = data.procInsId as string

    //console.log('taskForm.taskId:', taskForm.taskId);
 
    await flowFormData({deployId: taskForm.deployId, taskId:taskForm.taskId}).then(resData => {
      nextTick(() => {
        if(resData.formUrl) {
          formUrl.value = resData.formUrl
        } else {
          formUrl.value = ""
          refInnerForm.value.iniData(resData)
        }
      })
    })

    if(taskForm.taskId) {
      await findFlowFormVal({taskId: taskForm.taskId }).then((resValues) => {
        nextTick(() => {
          refInnerForm.value.setFormData(resValues)
        })
      })
    }

    setFlowRecordList(taskForm.procInsId, taskForm.deployId)
  
   
}

const showNodeFormData = (data) => {
  openModal(true, {
      showFooter: true,
      data
    });
}

defineExpose({
  iniData,
})

</script>


<style lang="scss" scoped>

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both
}

.app-container {
  height: calc(100vh - 150px);
  margin: 0px;
  padding: 5px;
}

.my-label {
  background: #E1F3D8;
}

.iframe-container {
  height: calc(100vh - 200px);
  width: 100%;
}
.responsive-iframe {
  width: 100%;
  height: 100%;
  border: none;
}
</style>