<template>
  <form @submit.prevent="submitForm">
    <el-form :model="formData" :rules="formRules" ref="formData" label-width="100px">
      <el-form-item label="姓名" prop="name">
        <el-input v-model="formData.name"></el-input>
      </el-form-item>
      <el-form-item label="手機(jī)號(hào)" prop="phone">
        <el-input v-model="formData.phone"></el-input>
      </el-form-item>
      <el-form-item label="年齡" prop="age">
        <el-input v-model.number="formData.age"></el-input>
      </el-form-item>
      <el-form-item label="學(xué)校" prop="school">
        <el-input v-model="formData.school"></el-input>
      </el-form-item>
      <el-form-item label="性別" prop="gender">
        <el-radio-group v-model="formData.gender">
          <el-radio label="male">男</el-radio>
          <el-radio label="female">女</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="地點(diǎn)" prop="location">
        <el-radio-group v-model="locationType">
          <el-radio :label="'district'" @change="handleLocationTypeChange">省市區(qū)</el-radio>
          <el-radio :label="'street'" @change="handleLocationTypeChange">街道</el-radio>
        </el-radio-group>
        <div v-if="locationType === 'district'">
          <!-- 展示省市區(qū)組件 -->
          <el-cascader
            v-model="formData.district"
            :options="districtOptions"
            @change="handleDistrictChange"
            placeholder="請(qǐng)選擇省市區(qū)"
          ></el-cascader>
        </div>
        <div v-else-if="locationType === 'street'">
          <!-- 展示街道多選組件 -->
          <el-select
            v-model="formData.street"
            multiple
            filterable
            remote
            reserve-keyword
            :remote-method="loadStreets"
            placeholder="請(qǐng)輸入街道名稱"
          ></el-select>
        </div>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" native-type="submit">提交</el-button>
      </el-form-item>
    </el-form>
  </form>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import axios from 'axios';
const formData = ref({
  name: '',
  phone: '',
  age: undefined,
  school: '',
  gender: 'male', // 默認(rèn)選項(xiàng)
  district: [], // 省市區(qū)選擇結(jié)果
  street: [], // 街道選擇結(jié)果（多選）
});
const formRules = ref({
  name: [{ required: true, message: '請(qǐng)輸入姓名', trigger: 'blur' }],
  phone: [
    { required: true, message: '請(qǐng)輸入手機(jī)號(hào)', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '請(qǐng)輸入正確的手機(jī)號(hào)', trigger: 'blur' },
  ],
  age: [
    { required: true, message: '請(qǐng)輸入年齡', trigger: 'blur' },
    { type: 'number', min: 1, max: 150, message: '請(qǐng)輸入1-150之間的數(shù)字', trigger: 'blur' },
  ],
  school: [{ required: true, message: '請(qǐng)輸入學(xué)校名稱', trigger: 'blur' }],
  gender: [{ required: true, message: '請(qǐng)選擇性別', trigger: 'change' }],
  district: [{ required: true, message: '請(qǐng)選擇省市區(qū)', trigger: 'change' }],
  street: [{ required: true, message: '請(qǐng)選擇街道', trigger: 'change' }],
});
const locationType = ref('district'); // 默認(rèn)選擇省市區(qū)
const districtOptions = ref([]); // 省市區(qū)選項(xiàng)
// 加載街道列表
const loadStreets = async (query: string) => {
  try {
    const response = await axios.get(`/api/streets?query=${query}`);
    return response.data.streets.map((street: any) => ({
      label: street.name,
      value: street.id,
    }));
  } catch (error) {
    console.error('Error loading streets:', error);
    return [];
  }
};
// 處理地點(diǎn)類型變化
const handleLocationTypeChange = () => {
  // 清空之前選擇的值
  formData.street = [];
};
// 處理省市區(qū)選擇變化
const handleDistrictChange = () => {
  // 根據(jù)選擇的省市區(qū)加載街道數(shù)據(jù)（這里可以根據(jù)實(shí)際需求進(jìn)行調(diào)整）
};
// 提交表單
const submitForm = async () => {
  try {
    await $refs.formData.validate();
    if (formData.value.locationType === 'district') {
      // 處理省市區(qū)數(shù)據(jù)
    } else if (formData.value.locationType === 'street') {
      // 處理街道數(shù)據(jù)
    }
    // 提交表單邏輯，例如調(diào)用后端接口
    console.log('Form data:', formData.value);
    // 使用 axios 發(fā)送表單數(shù)據(jù)到后端
    await axios.post('/api/submit', formData.value);
  } catch (error) {
    console.error('Submit error:', error);
  }
};
</script>