<template>
  <!-- 4步开始你的按需定制生意 -->
  <view class="steps-section">
    <text class="section-title">4步开始你的按需定制生意</text>

    <!-- 步骤卡片横向滚动 -->
    <scroll-view scroll-x class="steps-scroll" show-scrollbar="false">
      <view class="steps-list">
        <view
          class="step-card"
          :class="{ active: activeStep === index }"
          v-for="(item, index) in steps"
          :key="index"
          @tap="onStepTap(index)"
        >
          <text class="step-num">{{ item.step }}</text>
          <text class="step-title">{{ item.title }}</text>
          <text class="step-desc">{{ item.desc }}</text>
        </view>
      </view>
    </scroll-view>

    <!-- 预览大图 -->
    <view class="preview-wrap">
      <view class="preview-img-box">
        <image
          class="preview-img"
          src="/static/images/home/image_25_1484_1689.png"
          mode="widthFix"
        ></image>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'StepsFlow',
  props: {
    steps: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      activeStep: 0
    }
  },
  methods: {
    onStepTap(index) {
      this.activeStep = index
      this.$emit('change', index)
    }
  }
}
</script>

<style scoped>
.steps-section {
  width: 100%;
  padding: 60rpx 0 0 0;
  background: #ffffff;
}

/* 区块标题 - 设计稿 20px/400/#1a1a1a */
.section-title {
  display: block;
  padding: 0 32rpx;
  font-size: 38rpx;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 32rpx;
}

/* 步骤卡片横向滚动 */
.steps-scroll {
  width: 100%;
  white-space: nowrap;
}
.steps-list {
  display: inline-flex;
  gap: 20rpx;
  padding: 0 32rpx;
}
.step-card {
  flex-shrink: 0;
  width: 320rpx;
  padding: 28rpx 24rpx;
  background: #f8f8f8;
  border-radius: 12rpx;
  display: flex;
  flex-direction: column;
}
.step-card.active {
  background: #ff6800;
}
/* 步骤编号 - 设计稿 16px/900/#ff6800 (未选中) / #ffffff (选中) */
.step-num {
  font-size: 32rpx;
  font-weight: 900;
  color: #ff6800;
  line-height: 1;
  margin-bottom: 12rpx;
}
.step-card.active .step-num {
  color: #ffffff;
}
/* 步骤标题 - 设计稿 16px/400/#1a1a1a (未选中) / #ffffff (选中) */
.step-title {
  font-size: 28rpx;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 8rpx;
}
.step-card.active .step-title {
  color: #ffffff;
}
/* 步骤描述 - 设计稿 10px/400/#ffffff (选中态描述) */
.step-desc {
  font-size: 20rpx;
  color: #999999;
  line-height: 1.5;
  white-space: normal;
}
.step-card.active .step-desc {
  color: rgba(255, 255, 255, 0.85);
}

/* 预览大图 */
.preview-wrap {
  margin-top: 50rpx;
  padding: 0 32rpx;
}
.preview-img-box {
  width: 100%;
  background: #ff6800;
  border-radius: 12rpx;
  padding: 20rpx;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}
.preview-img {
  width: 100%;
  display: block;
}
</style>
