<template>
  <el-form
    label-width="100px"
    class="step-form"
    style="max-width: 500px; margin: auto"
  >
    <el-form-item label="客户名称" required>
      <el-select v-model="form.customerName" placeholder="请选择客户名称">
        <el-option
          v-for="option in customerOptions.customerName"
          :key="option.value"
          :label="option.label"
          :value="option.value"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="客户地址" required>
      <el-select v-model="form.customerAddress" placeholder="请选择客户地址">
        <el-option
          v-for="option in customerOptions.customerAddress"
          :key="option.value"
          :label="option.label"
          :value="option.value"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="邮编">
      <el-input v-model="form.zip" placeholder="请输入邮编" />
    </el-form-item>
    <el-form-item label="联系人">
      <el-select v-model="form.linkman" placeholder="请选择联系人">
        <el-option
          v-for="option in customerOptions.linkman"
          :key="option.value"
          :label="option.label"
          :value="option.value"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="联系方式">
      <el-select v-model="form.linkway" placeholder="请选择联系方式">
        <el-option
          v-for="option in customerOptions.linkway"
          :key="option.value"
          :label="option.label"
          :value="option.value"
        />
      </el-select>
    </el-form-item>
    <div class="btn-row">
      <el-button type="primary" @click="$emit('next-step')">下一步</el-button>
    </div>
  </el-form>
</template>

<script setup>
import { customerOptions } from '@/data/stepMockData';

const props = defineProps({
  form: {
    type: Object,
    required: true,
  },
});
</script>

<style scoped>
.step-form {
  margin-top: 45px !important;
}
.btn-row {
  display: flex;
  justify-content: flex-end;
  gap: 16px;
  margin-top: 20px;
}
</style> 