<template>
  <el-form
    ref="formRef"
    :model="modelValue"
    :rules="rules"
    :label-width="`${labelWidth}px`"
  >
    <el-row>
      <el-col :span="24">
        <el-form-item label="所在地:" required>
          <el-row type="flex" justify="space-between">
            <el-col :span="7">
              <el-form-item prop="province">
                <el-select
                  v-model="modelValue.province"
                  clearable
                  filterable
                  placeholder="请选择"
                  :disabled="provinceSelectList.length === 0"
                  @change="provinceChanged"
                >
                  <el-option
                    v-for="item in provinceSelectList"
                    :key="item.provinceCode"
                    :label="item.provinceName"
                    :value="item.provinceCode"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item prop="city">
                <el-select
                  v-model="modelValue.city"
                  clearable
                  filterable
                  :disabled="citySelectList.length === 0"
                  placeholder="请选择"
                  @change="cityChanged"
                >
                  <el-option
                    v-for="item in citySelectList"
                    :key="item.cityCode"
                    :label="item.cityName"
                    :value="item.cityCode"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item prop="district">
                <el-select
                  v-model="modelValue.district"
                  clearable
                  filterable
                  :disabled="districtSelectList.length === 0"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in districtSelectList"
                    :key="item.areaCode"
                    :label="item.areaName"
                    :value="item.areaCode"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>
<script setup name="CityOptions">
import { provinceList, cityList, districtList } from "@/api/config";
import { reactive, ref, toRefs } from "vue";

const props = defineProps({
  modelValue: Object,
  labelWidth: {
    type: Number,
    default: 120,
  },
});
const { modelValue, labelWidth } = toRefs(props);
const formRef = ref(null);
const provinceSelectList = ref([]); // 省
const citySelectList = ref([]); // 市
const districtSelectList = ref([]); // 区\
const data = reactive({
  rules: {
    province: [
      { required: true, message: "请选择", trigger: ["change", "blue"] },
    ],
    city: [{ required: true, message: "请选择", trigger: ["change", "blue"] }],
    district: [
      { required: true, message: "请选择", trigger: ["change", "blue"] },
    ],
  },
});
const { rules } = toRefs(data);
// 获取 省列表
const getProvinceList = async () => {
  const resp = await provinceList();
  provinceSelectList.value = resp.data.map((el) => {
    return { ...el, provinceCode: el.provinceCode.toString() };
  });
};
// 获取市列表
const getCityListByProvinceId = async (provinceId) => {
  const { data } = await cityList(provinceId);
  citySelectList.value = data.map((el) => {
    return {
      ...el,
      cityCode: el.cityCode.toString(),
    };
  });
};
// 根据市id获取县区列表
const getAreaListByCityId = async (cityId) => {
  const { data } = await districtList(cityId);
  districtSelectList.value = data.map((el) => {
    return {
      ...el,
      areaCode: el.areaCode.toString(),
    };
  });
};
// 当省改变时
const provinceChanged = () => {
  // 清除市县代码列表
  modelValue.value.city = undefined;
  modelValue.value.district = undefined;
  // 清除市县列表
  citySelectList.value = [];
  districtSelectList.value = [];
  // 重新请求城市列表
  modelValue.value.province &&
    getCityListByProvinceId(modelValue.value.province);
};
// 当市改变时
const cityChanged = () => {
  // 清除县区代码列表
  modelValue.value.district = undefined;
  districtSelectList.value = [];
  modelValue.value.city && getAreaListByCityId(modelValue.value.city);
};

const validateForm = async () => {
  try {
    return await formRef.value.validate();
  } catch (error) {
    return false;
  }
};

watch(modelValue, (val) => {
  if (val.province) {
    getCityListByProvinceId(val.province);
  }
  if (val.city) {
    getAreaListByCityId(val.city);
  }
});

getProvinceList();

defineExpose({
  validateForm,
});
</script>
