<template>
  <div>
    <ele-card style="border-radius: 0">
      <ele-text type="heading" size="lg">分步表单</ele-text>
      <ele-text type="placeholder" style="margin-top: 6px">
        将一个冗长或用户不熟悉的表单任务分成多个步骤，指导用户完成。
      </ele-text>
    </ele-card>
    <ele-page>
      <ele-card class="step-card">
        <div style="max-width: 800px; margin: 0 auto; padding: 10px 0 16px 0">
          <ele-steps
            :active="active"
            finish-status="success"
            type="inline"
            :items="[
              { title: '第一步', description: '填写转账信息' },
              { title: '第二步', description: '确认转账信息' },
              { title: '第三步', description: '转账成功' }
            ]"
            style="margin: 0 0 30px 0"
          />
          <step-edit v-if="active === 0" @done="handleDone" />
          <step-confirm
            v-if="active === 1"
            :data="form"
            @done="handleNext"
            @back="handleBack"
          />
          <step-success v-if="active === 2" :data="form" @back="handleBack" />
        </div>
        <template v-if="active === 0">
          <el-divider style="margin: 0 0 26px 0; opacity: 0.6" />
          <ele-alert :closable="false">
            <ele-text size="lg" style="margin-bottom: 12px">说明</ele-text>
            <ele-text size="md" style="margin-bottom: 8px">
              转账到支付宝
            </ele-text>
            <ele-text style="margin-bottom: 12px">
              如果需要，这里可以放一些关于产品的常见问题说明。如果需要，
              这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明。
            </ele-text>
            <ele-text size="md" style="margin-bottom: 8px">转账到微信</ele-text>
            <ele-text style="margin-bottom: 8px">
              如果需要，这里可以放一些关于产品的常见问题说明。如果需要，
              这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明。
            </ele-text>
          </ele-alert>
        </template>
      </ele-card>
    </ele-page>
  </div>
</template>

<script lang="ts" setup>
  import { ref, reactive } from 'vue';
  import StepEdit from './components/step-edit.vue';
  import StepConfirm from './components/step-confirm.vue';
  import StepSuccess from './components/step-success.vue';
  import type { StepForm } from './model';

  defineOptions({ name: 'FormStep' });

  /** 选中步骤 */
  const active = ref(0);

  /** 表单数据 */
  const form = reactive<StepForm>({});

  /** 表单编辑完成事件 */
  const handleDone = (data: StepForm) => {
    Object.assign(form, data);
    active.value = 1;
  };

  /** 下一步 */
  const handleNext = () => {
    active.value = 2;
  };

  /** 上一步 */
  const handleBack = () => {
    active.value = 0;
  };
</script>

<style lang="scss" scoped>
  @media screen and (max-width: 768px) {
    .step-card :deep(.ele-card-body) {
      padding: 4px 8px 16px 8px;

      .el-form {
        padding-right: 8px !important;
      }

      .el-result {
        padding: 0;

        .el-result__extra {
          max-width: 100%;
        }
      }
    }
  }
</style>
