<template>
  <div class="steps" v-if="!/\/detail/.test($route.path) && logs.length > 0">
    <el-tooltip effect="dark" content="退回原因点击节点标题查看" placement="top-end">
      <i class="el-icon-question steps__ask"></i>
    </el-tooltip>

    <el-steps :space="120" finish-status="success" align-center>
      <el-step
        v-for="(logGroup, index) in groupedLogs"
        v-if="!(logGroup[0].flow_node_id === currentNode.id && isLastGroup(index))"
        :title="logGroup[0].node ? logGroup[0].node.name : '节点已调整'"
        :status="logGroup[0].status !== -1 ? 'success' : 'error'"
        icon="el-icon-circle-check"
      >
        <template #title>
          <template v-if="logGroup[0].status === -1">
            <el-tooltip effect="dark" :content="logGroup[0].reason" placement="bottom">
              <span>{{ logGroup[0].node ? logGroup[0].node.name : '节点已调整' }}</span>
            </el-tooltip>
          </template>
          <template v-else>
            {{ logGroup[0].node ? logGroup[0].node.name : '节点已调整' }}
          </template>
        </template>
      </el-step>
      <el-step status="finish" :title="currentNode.name + '（正在办理）'" icon="el-icon-edit"></el-step>
      <el-step v-if="currentNode.nextNodes && currentNode.nextNodes.length" status="wait" icon="el-icon-right">
        <template #title>
          <div style="max-width: 180px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">
            <span v-for="(nextNode, index) in ((currentNode.nextNodes && currentNode.nextNodes instanceof Array) ? currentNode.nextNodes : [])">{{ index === 0 ? '' : ',' }}{{ nextNode.name }}</span>
          </div>
          <div v-if="currentNode.nextNodes">（{{ currentNode.nextNodes.length }}种流程）</div>
        </template>
      </el-step>
    </el-steps>

    <el-divider></el-divider>
  </div>
</template>

<script>
export default {
  props: {
    logs: {
      type: Array,
      default: () => []
    },
    currentNode: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {}
  },
  methods: {
    // 判断是否是最后一组
    isLastGroup(index) {
      return index === this.groupedLogs.length - 1;
    }
  },
  computed: {
    groupedLogs() {
      const groups = {};
      this.logs.forEach(log => {
        const key = log.jointly_sign_id;
        if (!groups[key]) {
          groups[key] = [];
        }
        groups[key].push(log);
      });
      return Object.values(groups);
    }
  },
}
</script>

<style scoped lang="scss">
::v-deep .el-step__title:has(.el-tooltip) {
  cursor: pointer;
}
::v-deep .el-step__title {
  font-size: 14px;
  line-height: 1.5;
}
::v-deep .el-step__icon.is-icon {
  border-radius: 100%;
  box-shadow: 2px 0 8px 0 rgba(29, 35, 41, 0.05);
  width: 36px;
  height: 36px;
  border: solid 2px;
}
::v-deep .el-step.is-center .el-step__line {
  top: 50%;
}
.steps {
  position: relative;

  &__ask {
    position: absolute;
    right: 0;
    top: 0;
  }
}
@media (max-width: 768px) {
  ::v-deep .el-steps--horizontal {
    display: flex;
    flex-wrap: wrap;
  }
}
</style>
