<template>
  <div class="app-container">
    <div class="header">
      <h2>创建订单/意向</h2>
      <div class="price-box">
        <span>预计总价：</span>
        <span class="price">300万</span>
      </div>
    </div>
    <el-steps :active="stepForStepsBar" finish-status="success" align-center>
      <el-step title="选择客户信息" description="选择销售客户对象" />
      <el-step title="选择商品规格" description="根据客户需求选择商品" />
      <el-step
        title="录入商务信息"
        description="根据客户要求录入商务信息"
        :status="step3Status"
      />
      <el-step title="完成创建" description="完成订单/意向" />
    </el-steps>
    <component
      :is="currentStepComponent"
      :form="form"
      :selected-car-type="selectedCarType"
      @next-step="handleNextStep"
      @prev-step="handlePrevStep"
    />
  </div>
</template>

<script setup>
import { ref, computed } from "vue";
import Step1 from "./Step1.vue";
import Step2 from "./Step2.vue";
import Step3 from "./Step3.vue";
import Step4 from "./Step4.vue";

const step = ref(1);
const form = ref({
  customerName: "",
  customerAddress: "",
  zip: "",
  linkman: "",
  linkway: "",
  selectedCarType: "其他",
  planCount: "",
});

const selectedCarType = computed(() => form.value.selectedCarType);

const currentStepComponent = computed(() => {
  if (step.value === 1) return Step1;
  if (step.value === 2) return Step2;
  if (step.value === 3) return Step3;
  if (step.value === 4) return Step4;
  return Step1;
});

// 步骤条动态高亮/置灰
const stepForStepsBar = computed(() => {
  // 车型为其他且在step2时，步骤条高亮到2，step4时高亮到4
  if (selectedCarType.value === "其他") {
    if (step.value === 2) return 2;
    if (step.value === 4) return 4;
  }
  return step.value;
});
const step3Status = computed(() => {
  // 车型为其他且在step2或step4时，步骤三置灰
  if (
    selectedCarType.value === "其他" &&
    (step.value === 2 || step.value === 4)
  ) {
    return "wait";
  }
  return undefined;
});

function handleNextStep() {
  // 车型为其他时直接跳到step4
  if (step.value === 2 && selectedCarType.value === "其他") {
    step.value = 4;
  } else if (step.value < 4) {
    step.value++;
  }
}
function handlePrevStep() {
  if (step.value === 2) {
    step.value = 1;
  } else if (step.value === 3) {
    step.value = 2;
  } else if (step.value === 4) {
    if (selectedCarType.value === "其他") {
      step.value = 2;
    } else {
      step.value = 3;
    }
  }
}
</script>

<style scoped lang="scss">
.app-container {
  max-width: 1200px;
  margin: 0 auto;
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .price-box {
      margin-top: 10px;
      font-size: 20px;
    }
    .price {
      background: #a6a6fa;
      color: #fff;
      padding: 4px 16px;
      border-radius: 4px;
      font-size: 28px;
      margin-left: 8px;
    }
  }
}
</style> 