<template>
  <view class="input-form-layout">
    <view class="step-header">
      <u-steps :list="stepList" :current="currentStep" active-color="#6acdbb"></u-steps>
    </view>
    <scroll-view scroll-y class="form-scroll" :style="scrollStyle">
      <slot />
    </scroll-view>
    <view class="footer-actions">
      <slot name="footer-extra" />
      <u-button v-if="currentStep > 0" class="btn-prev" @click="$emit('prev')">上一步</u-button>
      <u-button
        v-if="currentStep < maxStep"
        class="btn-next"
        type="primary"
        :custom-style="primaryStyle"
        @click="$emit('next')"
      >下一步</u-button>
      <u-button
        v-if="currentStep === maxStep"
        class="btn-submit"
        type="primary"
        :custom-style="primaryStyle"
        @click="$emit('submit')"
      >{{ submitLabel }}</u-button>
    </view>
  </view>
</template>

<script>
export default {
  name: 'InputFormLayout',
  props: {
    stepList: { type: Array, required: true },
    currentStep: { type: Number, default: 0 },
    submitLabel: { type: String, default: '确认保存' },
    scrollHeight: { type: String, default: 'calc(100vh - 480rpx)' },
    primaryStyle: {
      type: Object,
      default: () => ({
        backgroundColor: '#6acdbb',
        color: '#ffffff',
        borderColor: '#6acdbb',
      }),
    },
  },
  computed: {
    maxStep() {
      return Math.max(0, (this.stepList || []).length - 1)
    },
    scrollStyle() {
      return { height: this.scrollHeight }
    },
  },
}
</script>

<style scoped>
.step-header { background-color: #fff; padding: 30rpx 40rpx; margin-bottom: 20rpx; }
.form-scroll { box-sizing: border-box; }
.footer-actions {
  display: flex;
  flex-wrap: wrap;
  padding: 40rpx 24rpx 80rpx;
  gap: 24rpx;
  background: transparent;
}
.btn-prev { flex: 1; }
.btn-next, .btn-submit { flex: 2; }
</style>
