<template>
  <el-drawer
      title="审批详情"
      size="500px"
      v-model="approveOpen"
      direction="rtl">
    <div v-loading="loadingDetails">
      <div v-if="!loadingDetails">
        <div class="top">
          <div class="top_left">
            <el-avatar size="large" :src="processInstanceData.userInfo.avatar"></el-avatar>
            <span
                style="text-align: center;color: #19191a;font-size: 14px;">{{processInstanceData.userInfo.name}}</span>
          </div>
          <div class="top_right" v-if="!loadingDetails">
            <div style="margin-bottom: 12px">
              <span style="font-size: 15px;margin-right: 15px;">{{ instance.deploymentName }}</span>
              <tag dict-type="process_state" :value="instance.state"/>
              <el-tooltip class="item" effect="dark" content="查看详细流程" placement="top-start">
                <el-icon style="float: right;font-size: 20px;cursor: pointer"
                         @click.native="processDiagramViewer = true">
                  <View/>
                </el-icon>
              </el-tooltip>
            </div>
            <div>
              <span style="color: rgb(108, 108, 108);">编号: {{ instance.processInstanceId }}</span>
            </div>
          </div>
        </div>
        <div style="height: 15px;background:#f5f5f5;"></div>
<!--        <form-render ref="taskViewForm" :form-items="processInstanceData.formItems"-->
<!--                     v-model:value="processInstanceData.formData"/>-->
        <div style="height: 15px;background:#f5f5f5;"></div>
        <operation-render :operation-list="processInstanceData.operationList"
                          :state="instance.state"/>
      </div>
    </div>
  </el-drawer>
  <el-dialog title="流程详情" v-model="processDiagramViewer" :close-on-click-modal="true">
    <process-diagram-viewer v-if="processDiagramViewer"/>
    <div style="height: 70px;"></div>
  </el-dialog>
</template>

<script setup>
import Tag from '@/components/Tag.vue'
// import FormRender from '@/views/workflow/form/FormRender.vue'
import OperationRender from '@/views/workflow/common/OperationRender.vue'
import ProcessDiagramViewer from '@/views/workflow/common/ProcessDiagramViewer.vue'
import {getInitiatedInstanceInfo} from "@/api/workflow/process-instance.js";
import {defineProps, defineExpose} from 'vue'
import {useCacheStore} from '@/stores/cache.js'

useCacheStore().setCacheKey(['process_state'])
import {useProcessStore} from '@/stores/processStore.js'

const processStore = useProcessStore()

const props = defineProps({
  instance: {
    type: Object,
    default: {}
  }
})

const approveOpen = ref()
const loadingDetails = ref(true)
const processDiagramViewer = ref(false)
const processInstanceData = ref()


const loadProcessInstance = async (processInstanceId) => {
  getInitiatedInstanceInfo(processInstanceId).then(res => {
    let data = res.data
    processInstanceData.value = data
    processStore.setDesign(data)
    processStore.runningList.value = data.runningList;
    processStore.endList.value = data.endList;
    processStore.noTakeList.value = data.noTakeList;
    processStore.refuseList.value = data.refuseList;
    processStore.passList.value = data.passList;
    nextTick(() => {
      loadingDetails.value = false;
    })
  })
}
const init = () => {
  approveOpen.value = true
  loadingDetails.value = true
  loadProcessInstance(props.instance.processInstanceId)
}

defineExpose({
  init
})

</script>
