<template>
  <div :class="$style.logWrapper">
    <a-skeleton v-if="!flowData.processActiveLogInfo" active />
    <div v-else>
      <sd-card-collapse v-model="opinionLogExpand" title="审批意见">
        <sd-opinion-log
          :data-source="parentOpinionInfo"
          filter-steps
          :get-filter-container="() => $refs.filterStepEL"
        />
        <template slot="extra">
          <a
            v-if="flowData.parentFlowInstanceId"
            @click.stop="
              () => {
                showParentFlowInfo = true
              }
            "
          >
            查看主流程
          </a>
          <div ref="filterStepEL" :class="$style.opinionFilter" @click.stop></div>
        </template>
      </sd-card-collapse>
      <sd-card-collapse v-model="processLogExpand" title="流转记录">
        <sd-process-info
          :process-log-info="flowData.processLogInfo"
          :process-active-log-info="flowData.processActiveLogInfo"
        />
      </sd-card-collapse>
    </div>
    <a-modal
      :destroy-on-close="true"
      title="主流程信息"
      width="65%"
      :visible="showParentFlowInfo"
      :footer="null"
      @ok="() => (showParentFlowInfo = false)"
      @cancel="() => (showParentFlowInfo = false)"
    >
      <sd-parent-flow-log :inst-id="flowData.parentFlowInstanceId" :sub-inst-id="instId" />
    </a-modal>
  </div>
</template>

<script>
import FlowService from '@/webflow/flow-service'
import { Message } from 'ant-design-vue'
import cloneDeep from 'lodash.clonedeep'
import axios from '@/common/services/axios-instance'
import components from './_import-components/sd-parent-flow-log-import'

export default {
  name: 'SdParentFlowLog',
  metaInfo: {
    title: 'SdParentFlowLog',
  },
  components,
  props: {
    instId: {
      type: Number,
      default: -1,
    },
    subInstId: {
      type: Number,
      default: -1,
    },
  },
  data() {
    return {
      showParentFlowInfo: false,
      flowData: {
        parentFlowInstanceId: undefined,
        processLogInfo: [],
        processActiveLogInfo: [],
      },
      opinionLogExpand: true,
      processLogExpand: true,
    }
  },
  computed: {
    parentOpinionInfo() {
      let opinionInfo = [...this.flowData.processLogInfo, ...this.flowData.processActiveLogInfo]
      opinionInfo = cloneDeep(opinionInfo)
      const filterOpinions = (opinions) => {
        return (opinions || []).filter((item) => {
          if (item.subFlowLogInfo?.length) {
            item.subFlowLogInfo = filterOpinions(item.subFlowLogInfo)
            if (item.subFlowLogInfo.length === 0) {
              delete item.subFlowLogInfo
            }
          }
          return item.opinion || item.processLogAttachments?.length || item.subFlowLogInfo?.length
        })
      }
      return filterOpinions(opinionInfo)
    },
  },
  created() {
    FlowService.getProcessInstance(this.instId).then((res) => {
      const parentFlowInstanceId = res.parentInfo?.flowInstanceId
      if (parentFlowInstanceId) {
        this.flowData.parentFlowInstanceId = Number(parentFlowInstanceId)
      }
    })

    axios
      .get(
        `api/framework/v1/task-form-process/inst-logs-process/${this.instId}?subInstIdStr=${this.subInstId}`
      )
      .then((res) => {
        this.flowData.processLogInfo = res.data.processLogInfo
        this.flowData.processActiveLogInfo = res.data.processActiveLogInfo
      })
      .catch(() => {
        Message.error({ content: '获取流程信息失败，请重新尝试' })
      })
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
.log-wrapper {
  :global(.ant-card) {
    margin-bottom: $padding-lg;
  }
}
.opinion-filter {
  display: inline-block;
  margin-top: -5px;
}
</style>
