<template>
  <div class="center">
    <el-select placeholder="请选择省" style="width: 100px" v-model="provCode" @change="provChange">
      <el-option
        v-for="item in provList"
        :key="item.regionId"
        :label="item.regionName"
        :value="item.regionId"
      />
    </el-select>
    <el-select
      placeholder="请选择市"
      style="width: 100px"
      :disabled="!provCode"
      v-model="cityCode"
      @change="cityChange"
    >
      <el-option
        v-for="item in cityList"
        :key="item.regionId"
        :label="item.regionName"
        :value="item.regionId"
      />
    </el-select>
    <el-select
      placeholder="请选择区"
      style="width: 100px"
      :disabled="!cityCode"
      v-model="areaCode"
      @change="areaChange"
    >
      <el-option
        v-for="item in areaList"
        :key="item.regionId"
        :label="item.regionName"
        :value="item.regionId"
      />
    </el-select>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from "vue";
import { getRegion } from "@/api/common";

const provList = ref<any[]>([]);
const cityList = ref<any[]>([]);
const areaList = ref<any[]>([]);

const provCode = defineModel("provCode", {
  type: String,
  default: "",
});

// 监听省份code变化
watch(
  provCode,
  async (n, o) => {
    await getRegionAjax();
    if (n && n !== undefined) {
      provChange(n, true);

      // 监听市区code变化
      watch(
        cityCode,
        async (n, o) => {
          if (n !== undefined && n) {
            cityChange(n, true);
          }
        },
        {
          immediate: true, // 可选：初始化立即执行，验证是否监听到初始值
        }
      );
    }
  },
  {
    immediate: true, // 可选：初始化立即执行，验证是否监听到初始值
  }
);

const cityCode = defineModel("cityCode", {
  type: String,
  default: "",
});

const areaCode = defineModel("areaCode", {
  type: String,
  default: "",
});

const prov = defineModel("prov", {
  type: String,
  default: "",
});

const city = defineModel("city", {
  type: String,
  default: "",
});

const area = defineModel("area", {
  type: String,
  default: "",
});

const wxProvinceCode = defineModel("wxProvinceCode", {
  type: String,
  default: "",
});

// 省份变化 e code isEcho是否回显
function provChange(e: string, isEcho: boolean = false) {
  if (!isEcho) {
    cityCode.value = "";
    areaCode.value = "";
    cityList.value = [];
    areaList.value = [];
  }
  const provObj = provList.value.find((item) => item.regionId == e);
  prov.value = provObj ? provObj.regionName : "";
  if (provObj && provObj.children) {
    cityList.value = provObj.children;
  }
}

// 市区变化
function cityChange(e: string, isEcho: boolean = false) {
  if (!isEcho) {
    areaCode.value = "";
    areaList.value = [];
  }
  const cityObj = cityList.value.find((item) => item.regionId == e);

  city.value = cityObj ? cityObj.regionName : "";
  if (cityObj && cityObj.children) {
    areaList.value = cityObj.children;
    wxProvinceCode.value = cityObj.wxProvinceCode;
  }
}

// 区变化
function areaChange(e: string) {
  const areaObj = areaList.value.find((item) => item.regionId == e);
  area.value = areaObj ? areaObj.regionName : "";
}

// 获取省市区数据
async function getRegionAjax() {
  try {
    const res = await getRegion();
    provList.value = res;
  } catch (error) {
    console.error("获取省市区数据失败：", error);
  }
}
</script>

<style scoped lang="scss">
.center {
  display: flex;
  align-items: center;
  gap: 14px;
}
</style>
