<!--
 * 文件: stepHeader.vue
 * 功能: 多步骤表单头部（步骤导航），用于展示并切换流程模型创建/编辑的四个步骤（基本信息、表单设计、流程设计、更多设置）。
 * 主要逻辑:
 * - 接收父组件传入的 `current` prop，内部使用 `currentStep` 维护当前高亮步骤。
 * - 通过 `watch` 监听父组件的 `current` 值变化，保持内部状态与父组件同步。
 * - 定义 `steps` 数组表示各步的元信息（key/index/title），用于渲染步骤条目。
 * - 点击步骤项时触发 `change` 事件（`emit('change', index)`），由父组件执行实际的步骤切换与校验逻辑。
 * 注意事项:
 * - 父组件应在接收到 `change` 事件后做有效性校验（如表单校验）再决定是否切换步骤；
 * - 组件仅负责展示与事件触发，不包含表单校验或导航权限判断。
-->
<script setup lang="ts">
import { ref, watch } from 'vue';

defineOptions({
  name: 'StepHeader',
});

const props = defineProps<{ current: number }>();
const emit = defineEmits(['change']);
// 初始化（若父组件未传入则回退到 1）
const currentStep = ref<number>(props.current ?? 1);

// 监听父组件传入的 prop，当父组件的 curSp 改变时同步组件内部状态
watch(
  () => props.current,
  (val) => {
    if (typeof val === 'number' && val !== currentStep.value) {
      currentStep.value = val;
    }
  },
);
const steps = [
  {
    key: 'baseinfo',
    index: 1,
    title: '基本信息',
  },
  {
    key: 'forminfo',
    index: 2,
    title: '表单设计',
  },
  {
    key: 'flowdesign',
    index: 3,
    title: '流程设计',
  },
  {
    key: 'more',
    index: 4,
    title: '更多设置',
  },
];

function stepClick(index: number) {
  // currentStep.value = index;
  emit('change', index);
}
</script>

<template>
  <div flex items-center justify-between class="step-panel">
    <div v-for="item in steps" :key="item.key" class="step-item" flex items-center cursor-pointer :class="{ active: currentStep === item.index }" @click="stepClick(item.index)">
      <div class="x_icon">
        {{ item.index }}
      </div>
      <div class="x_step-text">
        {{ item.title }}
      </div>
      <div v-if="item.index !== 4" flex-1 class="x_line" />
    </div>
  </div>
</template>

<style scoped>
.step-item {
  flex: 1;
  &:last-child {
    flex: none;
  }
}
.x_icon {
  width: 32px;
  height: 32px;
  margin-right: 8px;
  font-size: 14px;
  line-height: 32px;
  text-align: center;
  background-color: #ffffff;
  border-color: rgba(0, 0, 0, 0.25);
  border-style: solid;
  border-width: 1px;
  border-radius: 32px;
}

.x_step-text {
  font-size: 16px;
  line-height: 32px;
  color: rgba(0, 0, 0, 0.45);
}
.x_line {
  /* width: 100%; */
  height: 1px;
  margin: 0 16px;
  background-color: rgba(5, 5, 5, 0.06);
}

.active .x_icon {
  color: #ffffff;
  background-color: #1890ff;
  border-color: #1890ff;
}

.active .x_step-text {
  color: rgba(0, 0, 0, 0.85);
}
</style>
