import { ref, reactive, onMounted, computed, watch, watchEffect, nextTick } from "vue";
import { ElMessageBox, ElMessage, ElLoading } from "element-plus";
import {
  getProviceByUid,
  getCityByUid,
  getCountryByUid,
  getStationByUid,
  getPowerByUid,
} from '@/api/station.js';


export default () => {
  const provice = ref("");
  const city = ref("");
  const country = ref("");
  const stationName = ref("");
  const powerId = ref("");
  const lockName = ref("");
  const proviceList = ref([]);
  const cityList = ref([]);
  const countryList = ref([]);
  const stationList = ref([]);
  const powerList = ref([]);

  onMounted(() => {
    getProviceList();
    getStationList();
    getPowerList();
  });

  watch(
    () => provice.value,
    (val) => {
      if (val) {
        city.value = "";
        getCityList();
      } else {
        cityList.value = [];
        city.value = "";
      }
      powerId.value = "";
      lockName.value = "";
      getPowerList();
    }
  );

  watch(
    () => city.value,
    (val) => {
      if (val) {
        country.value = "";
        getCountryList();
      } else {
        countryList.value = [];
        country.value = "";
      }
      powerId.value = "";
      lockName.value = "";
      getPowerList();
    }
  );

  watch(
    () => country.value,
    (val) => {
      if (val) {
        stationName.value = "";
        getStationList();
      } else {
        stationList.value = [];
        stationName.value = "";
      }
      powerId.value = "";
      lockName.value = "";
      getPowerList();
    }
  );

  watch(
    () => stationName.value,
    (val) => {
      if (val) {
        powerId.value = "";
        getPowerList();
      } else {
        powerList.value = [];
        powerId.value = "";
      }
      powerId.value = "";
      lockName.value = "";
      getPowerList();
    }
  );

  function getProviceList() {
    return getProviceByUid().then((res) => {
      let { code, data, data2 } = res;
      let _list = [];
      if (code && data) {
        _list = data2;
      }
      proviceList.value = _list;
      return _list;
    });
  }

  function getCityList() {
    return getCityByUid(provice.value).then((res) => {
      let { code, data, data2 } = res;
      let _list = [];
      if (code && data) {
        _list = data2;
      }
      cityList.value = _list;
      // city.value = "";
    });
  }

  function getCountryList() {
    return getCountryByUid(provice.value, city.value).then((res) => {
      let { code, data, data2 } = res;
      let _list = [];
      if (code && data) {
        _list = data2;
      }
      countryList.value = _list;
      // country.value = "";
    });
  }

  function getStationList() {
    let params = {
      provice: provice.value || undefined,
      city: city.value || undefined,
      country: country.value || undefined,
    };
    return getStationByUid(params).then((res) => {
      let { code, data, data2 } = res;
      let _list = [];
      if (code && data) {
        _list = data2;
      }
      stationList.value = _list;
      // stationName.value = "";
    });
  }

  function getPowerList() {
    let params = {
      provice: provice.value || undefined,
      city: city.value || undefined,
      country: country.value || undefined,
      stationName: stationName.value || undefined
    };
    return getPowerByUid(params).then((res) => {
      let { code, data, data2 } = res;
      let _list = [];
      if (code && data) {
        _list = data2;
      }
      powerList.value = _list;
      // powerId.value = "";
    });
  }

  return { provice, city, country, stationName, powerId, proviceList, cityList, countryList, stationList, powerList, getProviceList, getCityList, getCountryList, getStationList, getPowerList };
};