<template>
  <div id="addressHorizontalSelect">
    <el-row :gutter="10">
      <el-col :span="span">
        <el-select
          size="small"
          v-model="provinceCode"
          @focus="getProvinces"
          @change="changeProvince"
          placeholder="省"
          filterable
        >
          <el-option
            v-for="item in provinceList"
            :key="item.iid"
            :label="item.name"
            :value="item.iid"
          >
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="span" v-if="!hideCity">
        <el-select
          size="small"
          v-model="cityCode"
          @focus="getCities"
          @change="changeCity"
          placeholder="市"
          filterable
        >
          <el-option
            v-for="item in cityList"
            :key="item.iid"
            :label="item.name"
            :value="item.iid"
          >
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="span" v-if="!hideCity && !hideArea">
        <el-select
          size="small"
          v-model="areaCode"
          @focus="getAreas"
          @change="changeArea"
          placeholder="区/县"
          filterable
        >
          <el-option
            v-for="item in areaList"
            :key="item.iid"
            :label="item.name"
            :value="item.iid"
          >
          </el-option>
        </el-select>
      </el-col>

      <el-col :span="span" v-if="!hideCity && !hideArea && !hideStreet">
        <el-select
          size="small"
          v-model="streetCode"
          @focus="getStreet"
          @change="changeStreet"
          placeholder="街道"
          filterable
        >
          <el-option
            v-for="item in streetList"
            :key="item.iid"
            :label="item.name"
            :value="item.iid"
          >
          </el-option>
        </el-select>
      </el-col>

      <!-- <el-col
        :span="span"
        v-if="!hideCity && !hideArea && !hideStreet && !hideStreet"
      >
        <el-select
          size="small"
          v-model="communityCode"
          @focus="getCommunity"
          @change="changeCommunity"
          placeholder="社区"
          filterable
        >
          <el-option
            v-for="item in communityList"
            :key="item.iid"
            :label="item.name"
            :value="item.iid"
          >
          </el-option>
        </el-select>
      </el-col> -->
    </el-row>
  </div>
</template>

<script>
export default {
  name: "addressHorizontalSelect",
  components: {},
  props: {
    value: {
      type: [String, Number, Array],
    },
    hideCity: {
      // 隐藏市
      type: Boolean,
      default: false,
    },
    hideArea: {
      // 隐藏区/县
      type: Boolean,
      default: false,
    },
    hideStreet: {
      // 隐藏街道
      type: Boolean,
      default: false,
    },

    hideCommunity: {
      // 隐藏社区
      type: Boolean,
      default: false,
    },
    addressCode: null, // 地址编码
  },

  model: {
    prop: "value",
    event: "addressSelect",
  },

  data() {
    return {
      provinceList: [], // 省份列表
      cityList: [], // 城市列表
      areaList: [], // 区/县列表
      streetList: [], // 街道列表
      communityList: [], // 社区列表
      provinceCode: "", // 省份编码
      cityCode: "", // 城市编码
      areaCode: "", // 区/县编码
      streetCode: "", // 街道编码
      communityCode: "", // 社区编码
      cityFlag: false, // 避免重复请求的标志
      provinceFlag: false,
      areaFlag: false,
      streetFlag: false,
      communityFlag: false,
      provinceName: "",
      cityName: "",
      areaName: "",
      streetName: "",
      communityName: "",
    };
  },

  computed: {
    span() {
      if (this.hideCity) {
        return 24;
      }
      if (this.hideArea) {
        return 12;
      }
      if (this.hideStreet) {
        return 8;
      }
      if (this.hideCommunity) {
        return 6;
      }
      return 3;
    },
  },
  created() {
    this.getProvinces();
  },

  methods: {
    fetchData(array, code) {
      var split = code.split("&");
      let parms = { pid: split[0], size: -1 };
      this.$post("/base/area/list", parms)
        .then((res) => {
          if (res.code == 1) {
            array.splice(0, array.length);
            res.data.data.map((i) => {
              let obj = {};
              obj.name = i.name;
              obj.iid = i.iid + "&" + i.areaCode;
              array.push(obj);
              return obj;
            });
          }
        })
        .catch((error) => {
          this.$message.error(error.message);
        });
    },
    // 根据国家编码获取省份列表
    getProvinces() {
      if (this.provinceFlag) {
        return;
      }
      this.fetchData(this.provinceList, "0&510000000000");
      this.provinceFlag = true;
    },
    // 省份修改，拉取对应城市列表
    changeProvince(val) {
      this.fetchData(this.cityList, this.provinceCode);
      this.cityFlag = true;
      this.cityCode = "";
      this.areaCode = "";
      this.streetCode = "";
      this.communityCode = "";

      this.cityName = "";
      this.areaName = "";
      this.streetName = "";
      this.communityName = "";

      var split = val.split("&");
      this.$emit("input", split[1]);
      this.$emit("addressSelect", split[1]);
    },
    // 根据省份编码获取城市列表
    getCities() {
      if (this.cityFlag) {
        return;
      }
      if (this.provinceCode) {
        this.fetchData(this.cityList, this.provinceCode);
        this.cityFlag = true;
      }
    },
    // 城市修改，拉取对应区域列表
    changeCity(val) {
      this.fetchData(this.areaList, this.cityCode);
      this.areaFlag = true;
      this.areaCode = "";
      this.streetCode = "";
      this.communityCode = "";

      this.areaName = "";
      this.streetName = "";
      this.communityName = "";

      var split = val.split("&");
      this.$emit("input", split[1]);
      this.$emit("addressSelect", split[1]);
    },
    // 根据城市编码获取区域列表
    getAreas() {
      if (this.areaFlag) {
        return;
      }
      if (this.cityCode) {
        this.fetchData(this.areaList, this.cityCode);
      }
    },
    // 区域修改
    changeArea(val) {
      this.fetchData(this.streetList, this.areaCode);
      this.areaFlag = true;
      this.streetCode = "";
      this.communityCode = "";

      this.streetName = "";
      this.communityName = "";

      var split = val.split("&");
      this.$emit("input", split[1]);
      this.$emit("addressSelect", split[1]);
    },

    // 根据区域编码获取街道列表
    getStreet() {
      if (this.streetFlag) {
        return;
      }
      if (this.areaCode) {
        this.fetchData(this.streetList, this.areaCode);
        this.streetFlag = true;
      }
    },
    // 街道修改，拉取对应社区列表
    changeStreet(val) {
      this.fetchData(this.communityList, this.streetCode);
      this.streetFlag = true;
      this.communityCode = "";

      this.communityName = "";

      var split = val.split("&");
      this.$emit("input", split[1]);
      this.$emit("addressSelect", split[1]);
    },

    // 根据区域编码获取街道列表
    getCommunity() {
      if (this.communityFlag) {
        return;
      }
      if (this.streetCode) {
        this.fetchData(this.communityList, this.streetCode);
        this.communityFlag = true;
      }
    },
    // 社区修改，拉取社区列表
    changeCommunity(val) {
      this.fetchData(this.communityList, this.streetCode);
      this.communityFlag = true;
      var split = val.split("&");
      this.$emit("input", split[1]);
      this.$emit("addressSelect", split[1]);
    },

    // 重置省市区/县编码
    reset() {
      (this.provinceCode = ""),
        (this.cityCode = ""),
        (this.areaCode = ""),
        (this.streetCode = ""),
        (this.communityCode = "");
    },
    // 地址编码转换成省市区街道社区列表
    addressCodeToList(addressCode) {
      if (!addressCode) return false;
      let parms = { areaCode: addressCode };
      this.$post("/base/area/list", parms)
        .then((res) => {
          if (res.code == 1) {
            if (res.data.data.length > 0) {
              let area = res.data.data[0];
              let pid = area.pid + "&" + area.areaCode;

              if (area.areaLevel == "1") {
                //省
                this.provinceCode = area.iid + "&" + area.areaCode;
                this.provinceName = area.name;
                this.fetchData(this.provinceList, pid);
                return;
              } else if (area.areaLevel == "2") {
                //市
                this.cityCode = area.iid + "&" + area.areaCode;
                this.cityName = area.name;
                this.fetchData(this.cityList, pid);
              } else if (area.areaLevel == "3") {
                //区县
                this.areaCode = area.iid + "&" + area.areaCode;
                this.areaName = area.name;
                this.fetchData(this.areaList, pid);
              } else if (area.areaLevel == "4") {
                //街道
                let pid = area.pid + "&" + area.areaCode;
                this.streetName = area.name;
                this.fetchData(this.streetList, pid);
                this.streetCode = area.iid + "&" + area.areaCode;
              } else if (area.areaLevel == "5") {
                //社区
                this.fetchData(this.communityList, pid);
                this.communityName = area.name;
                this.communityCode = area.iid + "&" + area.areaCode;
              }
              this.$post("/base/area/list", { iid: area.pid }).then((res) => {
                this.addressCodeToList(res.data.data[0].areaCode);
              });
            }
          }
        })
        .catch((error) => {
          this.$message.error(error.message);
        });
    },
  },

  watch: {
    value: {
      deep: true,
      immediate: true,
      handler(newVal) {
        if (newVal) {
          this.addressCodeToList(newVal);
        } else {
          this.$nextTick(() => {
            this.reset();
          });
        }
      },
    },
  },
};
</script>

<style lang="less" scoped>
</style>
