<template>
  <div class="timeline-wrapper" ref="timelineContent" style="white-space: nowrap; overflow-x: auto">
    <!-- 动态渲染时间轴段落 -->
    <template v-for="(segment, segmentIndex) in getTimelineSegments()">

      <!-- 主时间轴段落 -->
      <div v-if="segment.type === 'main'" :key="'main-' + segmentIndex" class="timeline-section main-timeline">
        <a-steps
          :current="getCurrentStepInSection(segment.steps)"
          :initial="1">
          <template #progressDot="{index}">
            <span v-if="!changeAble" class="step-label in-steps"><i :class="['step-icon', getStepIconColor(index, segment.steps)]"></i></span>
            <span v-else :key="displayStepId" :class="['step-icon-filled digital', getStepIconColor(index, segment.steps)]">
              <a-icon v-if="isStepCompleted(segment.steps[index - 1])" type="check-circle" theme="filled" :class="['step-icon-filled icon', getStepIconColor(index, segment.steps)]" />
              <span v-else :class="['step-icon-filled digital', getStepIconColor(index, segment.steps)]">{{ getStepNumber(segmentIndex, index) }}</span>
            </span>
          </template>

          <a-step
            v-for="item in segment.steps"
            :key="item.id"
            class="step-item"
            @click.stop="onStepClick(item.id)"
            @contextmenu.native="handleStepContextMenu($event, item)"
          >
            <template #title>
              <div class="step-title-container">
                <h3 v-if="item.name">{{ item.name }}</h3>
                <!-- 判断节点特殊标识 -->
                <div v-if="item.type === 'condition'" class="condition-indicators">
                  <a-tag color="purple" size="small" class="condition-tag">
                    <a-icon type="branches" /> 条件节点
                  </a-tag>
                  <a-tooltip title="此节点根据条件判断后续流程走向">
                    <a-icon type="question-circle" class="condition-help" />
                  </a-tooltip>
                </div>
              </div>
            </template>
            <template #description>
              <div>
                <p v-if="item.handler">负责人：
                  <trim-text-tail :text="item.handler" :length="14"/>
                </p>
                <p v-if="item.date">填报时间：{{ formatDate(item.date, 'yyyy-MM-dd hh:mm') }}</p>
                <p v-if="item.deadline" :class="{ 'text-red': item.id === currentStepId && isOverdue }">截止时间：{{ formatDate(item.deadline, 'yyyy-MM-dd hh:mm') }}</p>
                <p v-if="item.note">备注：
                  <trim-text-tail :text="item.note" :length="15"/>
                </p>
              </div>
            </template>
          </a-step>
        </a-steps>
      </div>

      <!-- 并行分支段落 -->
      <div v-else-if="segment.type === 'parallel'" :key="'parallel-' + segmentIndex" class="parallel-section">
        <!-- 左侧连接线 -->
        <div class="connection-line left-line"></div>

        <!-- 并行分支容器 -->
        <div class="parallel-branches-container">
          <!-- 并行节点标题 -->
          <a-tag color="cyan" size="small" class="parallel-node-title">
            <a-icon type="apartment" /> 并行节点
          </a-tag>
          <!-- 动态渲染并行分支 -->
          <div
            v-for="(branch, branchIndex) in segment.branches"
            :key="'segment-' + segmentIndex + '-branch-' + branchIndex"
            class="branch-row">
            <!-- 分支时间轴 -->
            <div :class="['branch-timeline', getBranchTimelineClass(branch)]">
              <a-steps size="small" class="branch-steps">
                <a-step
                  v-for="step in branch"
                  :key="'segment-' + segmentIndex + '-branch-' + branchIndex + '-step-' + step.id"
                  :class="['branch-step', getBranchStepClass(step)]"
                  @click.stop="onStepClick(step.id)"
                  @contextmenu.native="handleStepContextMenu($event, step)">
                  <template #title>
                    <a-popover placement="top" trigger="hover" :mouseEnterDelay="0.3">
                      <template #content>
                        <div class="branch-step-popover">
                          <div class="popover-item" v-if="step.handler">
                            <span class="popover-label">负责人：</span>
                            <span class="popover-value">{{ step.handler }}</span>
                          </div>
                          <div class="popover-item" v-if="step.date">
                            <span class="popover-label">填报时间：</span>
                            <span class="popover-value">{{ formatDate(step.date, 'yyyy-MM-dd hh:mm') }}</span>
                          </div>
                          <div class="popover-item" v-if="step.deadline">
                            <span class="popover-label">截止时间：</span>
                            <span class="popover-value">{{ formatDate(step.deadline, 'yyyy-MM-dd hh:mm') }}</span>
                          </div>
                          <div class="popover-item" v-if="step.note">
                            <span class="popover-label">备注：</span>
                            <span class="popover-value">{{ step.note }}</span>
                          </div>
                          <div class="popover-item no-data" v-if="!step.handler && !step.date && !step.deadline && !step.note">
                            <span class="popover-value">暂无详细信息</span>
                          </div>
                        </div>
                      </template>
                      <template #title>
                        <div class="popover-title">
                          <a-icon type="info-circle" />
                          {{ step.name }} - 详细信息
                        </div>
                      </template>
                      <span class="branch-step-title">{{ step.name }}</span>
                    </a-popover>
                  </template>
                  <template #description>
                    <div class="branch-step-desc">
                      <p v-if="step.handler">{{ step.handler }}</p>
                      <p v-if="step.date">{{ formatDate(step.date, 'MM-dd hh:mm') }}</p>
                    </div>
                  </template>
                </a-step>
              </a-steps>
            </div>
          </div>
        </div>

        <!-- 右侧连接线 -->
        <div class="connection-line right-line"></div>
      </div>

    </template>

    <!-- 当步骤被截断时显示省略状态 -->
    <div class="more-steps-section" v-if="hasMoreSteps">
      <a-steps :current="1" :initial="1">
        <a-step
          key="more-steps"
          class="step-item more-steps-item">
          <template #title>
            <div class="more-steps-container">
              <h3>后续步骤</h3>
            </div>
          </template>
          <template #description>
            <div class="more-steps-desc">
              <p>根据上述条件判断结果，将继续执行相应的后续流程</p>
              <p class="steps-count">剩余 {{ remainingStepsCount }} 个步骤</p>
            </div>
          </template>
          <template #icon>
            <a-icon type="more" style="color: #d9d9d9;" />
          </template>
        </a-step>
      </a-steps>
    </div>

    <!-- 右键菜单 -->
    <a-dropdown
      :visible="contextMenuVisible"
      :trigger="[]"
      @visibleChange="val => !val && closeContextMenu()"
    >
      <div
        v-show="contextMenuVisible"
        :style="{
          position: 'fixed',
          left: contextMenuX + 'px',
          top: contextMenuY + 'px',
          width: '1px',
          height: '1px'
        }"
      ></div>
      <a-menu slot="overlay" @click="closeContextMenu">
        <a-menu-item @click="reloadFromStep">
          <a-icon type="reload" />
          从此节点重新加载
        </a-menu-item>
      </a-menu>
    </a-dropdown>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { formatDate } from '@vue2-client/utils/util'
import TrimTextTail from '@vue2-client/pages/WorkflowDetail/WorkflowPageDetail/TrimTextTail'

export default {
  components: { TrimTextTail },
  name: 'WorkFlowTimeline',
  props: {
    workflowId: {
      type: [String, Number],
      required: true
    },
    currentStepId: {
      type: Number,
      required: false,
      default: 1
    },
    activeStepId: {
      type: Number,
      required: false,
      default: 1
    },
    state: {
      type: [Boolean, Number],
      required: false,
      default: false
    },
    steps: {
      type: Array,
      required: true
    },
    changeAble: {
      type: Boolean,
      required: false,
      default: false
    }
  },
  data () {
    return {
      // 当前显示的步骤 id
      displayStepId: 1,
      // 当前任务是否逾期
      isOverdue: false,
      // 是否显示所有步骤（包括条件后的步骤）
      showAllSteps: false,
      // 右键菜单相关状态
      contextMenuVisible: false,
      contextMenuX: 0,
      contextMenuY: 0,
      selectedStepForMenu: null
    }
  },
  computed: {
    ...mapGetters('account', ['isDebugUser']),
        // 控制显示的步骤：当判断节点未执行时只显示到判断节点，执行后显示包括并行分支的所有步骤
    displaySteps () {
      const steps = this.steps || []

      // 如果用户选择显示所有步骤，直接返回
      if (this.showAllSteps) {
        return steps
      }

      // 找到第一个判断节点
      const firstConditionStepIndex = steps.findIndex(step => step.type === 'condition')

      // 如果没有找到判断节点，显示所有步骤
      if (firstConditionStepIndex === -1) {
        return steps
      }

      const firstConditionStep = steps[firstConditionStepIndex]

      // 如果当前步骤在第一个判断节点之前或等于判断节点，只显示到判断节点
      if (this.currentStepId <= firstConditionStep.id) {
        return steps.slice(0, firstConditionStepIndex + 1)
      }

      // 如果判断节点已经执行，显示所有步骤（包括并行分支）
      return steps
    },

        // 是否有更多步骤（被条件截断）
    hasMoreSteps () {
      // 如果已经显示所有步骤，则不显示"更多步骤"
      if (this.showAllSteps) return false

      const steps = this.steps || []
      const firstConditionStepIndex = steps.findIndex(step => step.type === 'condition')

      if (firstConditionStepIndex === -1) return false

      const firstConditionStep = steps[firstConditionStepIndex]
      return this.currentStepId <= firstConditionStep.id && firstConditionStepIndex < steps.length - 1
    },

    // 剩余步骤数量
    remainingStepsCount () {
      const steps = this.steps || []
      const firstConditionStepIndex = steps.findIndex(step => step.type === 'condition')

      if (firstConditionStepIndex === -1) return 0

      return steps.length - (firstConditionStepIndex + 1)
    }
  },
  mounted () {
    this.init()
    const timelineContent = this.$refs.timelineContent
    timelineContent.onmousewheel = function (e) {
      timelineContent.scrollLeft -= e.wheelDelta
      e.preventDefault()
    }
    // 添加全局点击事件，关闭右键菜单
    document.addEventListener('click', this.closeContextMenu)
  },
  beforeDestroy () {
    this.$refs.timelineContent.onmousewheel = null
    // 移除全局点击事件
    document.removeEventListener('click', this.closeContextMenu)
  },
  methods: {
    init () {
      this.displayStepId = this.activeStepId
      const currentStep = this.steps.find(step => step.id === this.currentStepId)
      if (currentStep && currentStep.deadline) {
        this.isOverdue = !this.state && this.formatDate(new Date(), 'yyyy-MM-dd hh:mm') > currentStep.deadline
      }
      this.$emit('activeStep', this.displayStepId)
    },

    // 获取时间轴段落数据
    getTimelineSegments () {
      const steps = this.displaySteps
      const segments = []
      let currentIndex = 0

            while (currentIndex < steps.length) {
        // 收集连续的主流程步骤（包括并行分支入口节点）
        const mainSteps = []
        while (currentIndex < steps.length && !this.isParallelStep(steps[currentIndex])) {
          mainSteps.push(steps[currentIndex])

          // 如果当前步骤是并行分支入口，处理完后跳出循环准备处理并行分支
          if (this.isParallelBranchEntry(steps[currentIndex])) {
            currentIndex++
            break
          }
          currentIndex++
        }

        if (mainSteps.length > 0) {
          segments.push({
            type: 'main',
            steps: mainSteps
          })
        }

        // 检查是否有并行分支需要处理
        if (currentIndex > 0 && this.isParallelBranchEntry(steps[currentIndex - 1])) {
          // 获取这个并行分支的所有步骤
          const branchIndex = steps[currentIndex - 1].properties.branchIndex
          const parallelSteps = this.getParallelStepsByBranchIndex(steps, branchIndex)

          if (parallelSteps.length > 0) {
            // 按branchPath分组
            const branches = this.groupParallelSteps(parallelSteps)
            segments.push({
              type: 'parallel',
              branches: branches
            })

            // 跳过已处理的并行步骤
            currentIndex = this.skipProcessedParallelSteps(steps, currentIndex, parallelSteps)
          }
        }
      }

      return segments
    },

    // 根据branchIndex获取并行步骤
    getParallelStepsByBranchIndex (steps, branchIndex) {
      return steps.filter(step =>
        step.properties &&
        step.properties.branchPath &&
        step.properties.branchPath.includes(`parallel_${branchIndex}_`)
      )
    },

    // 将并行步骤按branchPath分组
    groupParallelSteps (parallelSteps) {
      const branches = {}
      parallelSteps.forEach(step => {
        const branchPath = step.properties.branchPath
        if (!branches[branchPath]) {
          branches[branchPath] = []
        }
        branches[branchPath].push(step)
      })

      // 对每个分支内的步骤按id排序
      Object.keys(branches).forEach(branchPath => {
        branches[branchPath].sort((a, b) => a.id - b.id)
      })

      return Object.values(branches)
    },

    // 跳过已处理的并行步骤
    skipProcessedParallelSteps (steps, currentIndex, processedSteps) {
      const processedIds = new Set(processedSteps.map(step => step.id))
      while (currentIndex < steps.length && processedIds.has(steps[currentIndex].id)) {
        currentIndex++
      }
      return currentIndex
    },

    // 判断是否为并行分支入口
    isParallelBranchEntry (step) {
      return step.properties &&
             step.properties.branchType === 'parallelBranch'
    },

    // 判断是否为分支汇合节点
    isBranchExit (step) {
      return step.properties &&
             step.properties.flowRole === 'branchExit'
    },

    // 获取在某个section中的当前步骤索引
    getCurrentStepInSection (sectionSteps) {
      if (!sectionSteps || sectionSteps.length === 0) return 0

      const currentStepIndex = sectionSteps.findIndex(step => step.id === this.currentStepId)
      return currentStepIndex >= 0 ? currentStepIndex + 1 : 0
    },

        // 获取步骤编号
    getStepNumber (segmentIndex, stepIndex) {
      const segments = this.getTimelineSegments()
      let stepNumber = 0

      // 计算前面所有段落的步骤数
      for (let i = 0; i < segmentIndex; i++) {
        const segment = segments[i]
        if (segment.type === 'main') {
          stepNumber += segment.steps.length
        } else if (segment.type === 'parallel') {
          // 并行分支计算总步骤数
          stepNumber += segment.branches.reduce((total, branch) => total + branch.length, 0)
        }
      }

      return stepNumber + stepIndex
    },

    // 判断步骤是否已完成
    isStepCompleted (step) {
      if (!step) return false
      return this.isStepGreater(this.currentStepId, step.id) || this.state
    },

    // 判断第一环节是否再第二个环节之后
    isStepGreater (firstId, secondId) {
      const first = this.steps.find(item => item.id === firstId)
      const second = this.steps.find(item => item.id === secondId)
      // 优先使用 sequence，没有则用 id
      const firstValue = first?.sequence ?? first?.id
      const secondValue = second?.sequence ?? second?.id
      if (firstValue == null || secondValue == null) {
        console.warn('步骤不存在或无效:', { firstId, secondId })
        return false
      }
      return firstValue > secondValue
    },

    // 判断id是否为流程中最后一个
    isLastStep (stepId) {
      return stepId >= this.steps.length
    },

    // 判断是否为并行步骤
    isParallelStep (step) {
      return step.properties &&
             step.properties.branchPath &&
             step.properties.branchPath.includes('parallel_')
    },

    // 动态展示时间线节点颜色
    getStepIconColor (index, sectionSteps) {
      if (!sectionSteps || !sectionSteps[index - 1]) return 'gray'

      const stepId = sectionSteps[index - 1].id

      if (this.changeAble && stepId === this.displayStepId) {
        return 'yellow'
      } else if (!this.changeAble && stepId === this.currentStepId) {
        return this.state ? 'blue' : 'green'
      }
      if (this.isStepGreater(this.currentStepId, stepId) || this.state) {
        return 'blue'
      }
      if (stepId === this.currentStepId) {
        return this.isOverdue ? 'red' : 'blue'
      }
      return 'gray'
    },

    // 获取分支步骤的CSS类
    getBranchStepClass (step) {
      if (!step) return 'branch-step-gray'

      // 如果在可编辑状态下且是当前显示的步骤
      if (this.changeAble && step.id === this.displayStepId) {
        return 'branch-step-yellow'
      }

      // 根据 status 判断颜色
      switch (step.status) {
        case 0: // 未处理
          return 'branch-step-gray'
        case 1: // 正在处理
          // 检查是否逾期
          if (step.deadline && !this.state && this.formatDate(new Date(), 'yyyy-MM-dd hh:mm') > step.deadline) {
            return 'branch-step-red'
          }
          return 'branch-step-blue'
        case 2: // 已处理
          return 'branch-step-green'
        default:
          return 'branch-step-gray'
      }
    },

    // 获取分支时间轴的CSS类（根据分支中的步骤状态）
    getBranchTimelineClass (branch) {
      if (!branch || branch.length === 0) return 'branch-timeline-gray'

      // 检查分支中所有步骤的状态
      const hasCompleted = branch.some(step => step.status === 2) // 有已完成的
      const hasProcessing = branch.some(step => step.status === 1) // 有正在处理的
      const allPending = branch.every(step => step.status === 0 || step.status === undefined) // 全部未处理

      // 优先级：正在处理 > 已完成 > 未处理
      if (hasProcessing) {
        return 'branch-timeline-blue' // 正在进行
      } else if (hasCompleted) {
        return 'branch-timeline-green' // 已完成
      } else if (allPending) {
        return 'branch-timeline-gray' // 未抵达
      } else {
        return 'branch-timeline-gray' // 默认
      }
    },

    onStepClick (stepId) {
      if (!this.changeAble || stepId === this.displayStepId) {
        return
      }
      const curStep = this.steps.find(item => item.id === stepId)
      if (this.isStepGreater(stepId, this.currentStepId) && curStep.status !== 1 && curStep.status !== 2) {
        return this.$message.warn('请先完成当前步骤')
      }
      this.$emit('activeStep', stepId)
      this.displayStepId = stepId
    },

    // 处理节点右键点击
    handleStepContextMenu (e, step) {
      // 只有调试用户才能看到右键菜单
      if (!this.isDebugUser) {
        return
      }
      // 只有已完成的节点或当前节点才能右键
      if (!this.isStepCompleted(step) && step.id !== this.currentStepId) {
        return
      }

      e.preventDefault()
      e.stopPropagation()

      this.selectedStepForMenu = step
      this.contextMenuX = e.clientX
      this.contextMenuY = e.clientY
      this.contextMenuVisible = true
    },

    // 关闭右键菜单
    closeContextMenu () {
      this.contextMenuVisible = false
      this.selectedStepForMenu = null
    },

    // 从此节点重新加载
    reloadFromStep () {
      if (!this.selectedStepForMenu) return

      this.$emit('reloadFromStep', this.selectedStepForMenu.id)
      this.closeContextMenu()
    },

    formatDate,
  },
  watch: {
    activeStepId: function (newVal) {
      this.displayStepId = newVal
    }
  }
}
</script>

<style lang="less" scoped>
.timeline-wrapper {
  display: flex;
  align-items: flex-start;
  gap: 0;

  .timeline-section {
    flex-shrink: 0;

    // 主时间轴自动填充剩余宽度
    &.main-timeline {
      flex: 1;
    }

    /deep/ .ant-steps-dot {
      margin-bottom: 6px;
      .ant-steps-item-tail {
        top: 7px;
        margin-left: 106px;
        width: calc(100% - 23px);
      }
      .ant-steps-item-icon {
        margin-left: 90px;
        width: 8px;
        height: 8px;
        line-height: 8px;
      }
      .ant-steps-item-content {
        min-width: 195px;
        margin-top: 24px;
        .ant-steps-item-description {
          text-align: left;
          background: #fff;
          border-radius: 4px;
          padding: 12px;
          position: relative;

          p {
            position: relative;
            padding: 8px 0;
            margin: 0;
            font-size: 13px;
            color: #595959;
            line-height: 1.5;
            white-space: nowrap;
            overflow: visible;

            &:first-child {
              border-top: 1px dotted #e8e8e8;
            }

            &:not(:last-child) {
              border-bottom: 1px dashed #f0f0f0;
            }

            &:last-child {
              padding-bottom: 0;
            }
          }
        }
      }
      &.ant-steps {
        padding-top: 8px;
      }
    }

    /deep/ .ant-steps-item-title {
      font-size: 14px;
      h3 {
        font-size: 14px;
        margin-bottom: 0;
      }
    }
  }

  .parallel-section {
    display: flex;
    align-items: flex-start;
    position: relative;

    .connection-line {
      width: 2rem;
      height: 0;
      flex-shrink: 0;
      margin-top: 1rem;

      &.left-line {
        margin-right: 0;
        position: relative;

        &::before {
          content: '';
          position: absolute;
          left: -4.8rem;
          top: -1px;
          width: 7rem;
          height: 3px;
          background: #f0f0f0;
        }
      }

      &.right-line {
        margin-left: 0;
        position: relative;

        &::before {
          content: '';
          position: absolute;
          right: -4.6rem;
          top: -1px;
          width: 6.8rem;
          height: 3px;
          background: #f0f0f0;
        }
      }
    }

    .parallel-branches-container {
      display: flex;
      flex-direction: column;  /* 竖直排列分支节点 */
      gap: 6px;  /* 缩小间距 */
      align-items: center;
      position: relative;
      border: 2px dotted #d9d9d9;
      border-radius: 8px;
      margin: 0 12px;
      background: #fff;
      padding-bottom: 14px;
      width: max-content;

      /* 为并行节点容器添加小标题 */
      .parallel-node-title {
        position: absolute;
        bottom: -10px;  /* 调整标题的上下位置 */
        left: 50%;  /* 水平居中 */
        transform: translateX(-50%);  /* 精确水平居中 */
        background: #fff;  /* 背景色与容器一致 */
        font-size: 12px;  /* 标题的字体大小 */
        border-radius: 4px;
      }
    }

    .branch-row {
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
      gap: 16px;

      :deep(.ant-steps-item-content) {
        text-align: left;
      }

      .branch-timeline {
        padding: 12px 16px;
        position: relative;
        min-width: 80px;
        text-align: center;
        transition: all 0.3s ease;  /* 平滑过渡 */
      }

      .branch-timeline:hover {
        transform: scale(1.01);  /* 鼠标悬停时放大 */
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      }

      .branch-step-title {
        font-size: 14px;
        font-weight: 500;
        color: #262626;
        cursor: pointer;
      }

      .branch-step-desc {
        p {
          margin: 0;
          padding: 4px 0;
          font-size: 12px;
          color: #666;
        }
      }

      /deep/ .ant-steps-icon {
        color: #fefefe;
      }

      // 分支步骤节点样式
      /deep/ .ant-steps-item-icon {
        width: 20px;
        height: 20px;
        line-height: 20px;
        border-radius: 20px;
      }

      /deep/ .ant-steps-item-title {
        line-height: 20px;
      }

      // 分支步骤状态颜色
      /deep/ .branch-step-gray .ant-steps-item-icon {
        background-color: #bfbfbf !important;
        border-color: #bfbfbf !important;
      }

      /deep/ .branch-step-blue .ant-steps-item-icon {
        background-color: #1890ff !important;
        border-color: #1890ff !important;
      }

      /deep/ .branch-step-green .ant-steps-item-icon {
        background-color: #52c41a !important;
        border-color: #52c41a !important;
      }

      /deep/ .branch-step-red .ant-steps-item-icon {
        background-color: #ff4d4f !important;
        border-color: #ff4d4f !important;
      }

      /deep/ .branch-step-yellow .ant-steps-item-icon {
        background-color: #faad14 !important;
        border-color: #faad14 !important;
      }
    }
  }

  @red: rgb(255, 77, 79);

  .step-icon-filled {
    position: absolute;
    top: -2px;
    left: -6px;
    @blue: rgb(24, 144, 255);
    @yellow: rgb(255, 164, 39);
    @gray: rgb(191, 191, 191);
    &.digital {
      width: 28px;
      line-height: 28px;
      border-radius: 50%;
      color: #ffffff;
      &.blue {
        background: @blue;
      }
      &.yellow {
        background: @yellow;
      }
      &.gray {
        background: @gray;
      }
      &.red {
        background: @red;
      }
    }
    &.icon {
      font-size: 28px;
      &.blue {
        color: @blue;
      }
      &.yellow {
        color: @yellow;
      }
      &.gray {
        color: @gray;
      }
    }
  }

  .step-item {
    cursor: pointer;
    &:hover {
      .ant-steps-item-description {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        transform: translateY(-1px);
        transition: all 0.3s ease;
      }
      p {
        color: #262626;
      }
    }
    .text-red {
      color: @red !important;
    }
  }

  .next-step-overdue {
    /deep/ .ant-steps-item-tail::after {
      background: @red;
    }
  }

  // 新增样式：步骤标题容器
  .step-title-container {
    .condition-indicators {
      margin-top: 8px;
      display: flex;
      align-items: center;
      gap: 8px;

      .condition-tag {
        margin: 0;
      }

      .condition-help {
        color: #999;
        cursor: pointer;
        &:hover {
          color: #1890ff;
        }
      }
    }
  }

  // 分支信息样式
  .branch-info {
    margin-top: 8px;
    padding: 8px;
    background: #f9f9f9;
    border-radius: 4px;
    border-left: 3px solid #722ed1;

    .branch-title {
      margin: 0 0 6px 0 !important;
      font-weight: bold;
      color: #722ed1;
      font-size: 12px;
      padding: 0 !important;
      border: none !important;
    }

    .branch-options {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;

      .branch-option-tag {
        margin: 0;
        font-size: 11px;
             }
     }
   }

   // 省略步骤样式
    .more-steps-section {
      flex-shrink: 0;
      // margin-top: 24px;

       .more-steps-item {
         opacity: 0.7;

         .more-steps-container {
           .pending-tag {
             margin-top: 8px;
             margin-left: 0;
           }
         }

         .more-steps-desc {
           p {
            //  font-style: italic;
             color: #999 !important;

             &.steps-count {
               font-weight: bold;
               color: #666 !important;
             }
           }
         }
       }
     }
}

// 分支步骤 Popover 样式
/deep/ .ant-popover {
  .popover-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    color: #1890ff;

    .anticon {
      font-size: 14px;
    }
  }

  .branch-step-popover {
    min-width: 200px;

    .popover-item {
      display: flex;
      align-items: flex-start;
      margin-bottom: 8px;

      &:last-child {
        margin-bottom: 0;
      }

      &.no-data {
        justify-content: center;
        font-style: italic;
        color: #999;
      }

      .popover-label {
        font-weight: 600;
        color: #262626;
        min-width: 70px;
        flex-shrink: 0;
      }

      .popover-value {
        color: #595959;
        word-break: break-all;
        flex: 1;
      }
    }
  }
}
</style>
