<template>
  <view class="stepper-container" :class="orientation">
    <view v-for="(step, index) in props.steps" :key="'step' + index" class="step">
      <view class="step-side">
        <view class="step-icon">{{ index < props.steps.length - 1 ? index + 1 : "" }}</view>
        <view v-if="index < props.steps.length - 1" class="step-line"></view>
      </view>
      <view class="step-content">
        <view :class="getStatusClass(step.status)" class="step-title">
          <slot name="stepTitle" :stepInfo="step"></slot>
        </view>
        <view class="content-wrap">
          <slot name="stepItem" :stepInfo="step"></slot>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import {defineProps} from 'vue';

const props = defineProps({
  orientation: {
    type: String,
    default: 'horizontal',
    validator: (value) => ['horizontal', 'vertical'].includes(value)
  },
  steps: {
    type: Array,
    required: true
  }
});

const statusClasses = {
  pending: 'text-gray-500',
  current: 'text-blue-500',
  success: 'text-green-500',
  error: 'text-red-500',
  disabled: 'text-gray-300'
};

const getStatusClass = (status) => {
  return statusClasses[status] || 'text-gray-500';
}

</script>
<script lang="ts">
export default {
  options: {
    styleIsolation: 'shared',
    name: "step-line"
  }
}
</script>
<style lang="scss">
.stepper-container {
  width: 100%;
  overflow: auto;
  display: flex;
  align-items: center;
  margin-top: $uni-block-gap;
}

.stepper-container.horizontal {
  flex-direction: row;
}

.stepper-container.vertical {
  flex-direction: column;
  align-items: flex-start;
}

.stepper-container.vertical .step {
  display: flex;
  width: 100%;

  &:last-child {
    .step-icon {
      background-color: $uni-bg-color;
      color: $uni-bg-color;
      border-width: 4rpx;
      box-sizing: border-box;
    }
  }
}

.stepper-container.vertical .step-side {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: column;
}

.stepper-container.vertical .step-line {
  width: 2rpx;
  height: calc(100% - 30rpx);
  background-color: $uni-color-primary;
}

.content-wrap {
  margin: $uni-text-gap 0;
}

.step-title {
  > view {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
  }

  .title-info {
    font-weight: bold;
    color: #000000;
  }

  .title-date {
    margin-left: auto;
    color: #909399;
  }
}

.step-icon {
  width: 30rpx;
  height: 30rpx;
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  border-radius: 30rpx;
  border: 3rpx solid $uni-color-primary;
  background-color: $uni-color-primary;
  color: #f2f1f1;
  font-weight: bold;
}

.step-content {
  flex: 1;
  height: auto;
  overflow: auto;
  display: flex;
  flex-direction: column;
  padding: 0 0 0 $uni-text-gap;
}

.step-connector {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.step-line {
  background-color: $uni-color-primary;
}

.step-number {
  font-weight: bold;
}

.text-gray-500 {
  color: #6b7280;
}

.text-blue-500 {
  color: #4299e1;
}

.text-green-500 {
  color: #48bb78;
}

.text-red-500 {
  color: #f56565;
}

.text-gray-300 {
  color: #d1d5db;
}

.bg-green-500 {
  background-color: #48bb78;
}

.bg-blue-500 {
  background-color: #4299e1;
}

.bg-gray-500 {
  background-color: #d1d5db;
}
</style>