<template>
  <div>
    <Cascader
      :data="data"
      :load-data="loadData"
      v-model="addr"
      placeholder="请选择地址"
      @on-change="change"
    ></Cascader>
  </div>
</template>
<script>
import { getChildRegion } from "@/api/common.js";
export default {
  data() {
    return {
      data: [], // 地区数据
      addr: [], // 已选数据
    };
  },
  props: ["addressId"],
  mounted() {},
  methods: {
    change(val, selectedData) {
      // 选择地区
      /**
       * @returns [regionId,region]
       */
      console.log("val", val);
      this.$emit("selected", [
        val,
        selectedData[selectedData.length - 1].__label.split("/"),
      ]);
    },
    loadData(item, callback) {
      // 加载数据
      item.loading = true;
      getChildRegion(item.value).then((res) => {
        if (res.result.length <= 0) {
          item.loading = false;
        } else {
          res.result.forEach((child) => {
            item.loading = false;

            let data = {
              value: child.id,
              label: child.name,
              loading: false,
              children: [],
            };
            if (
              child.level === "district" ||
              item.name === "香港特别行政区" ||
              item.name === "澳门特别行政区"
            ) {
              item.children.push({
                value: child.id,
                label: child.name,
              });
            } else {
              item.children.push(data);
            }
          });
          callback();
        }
      });
    },
    async init() {
      // 初始化地图数据
      let data = await getChildRegion(0);
      let arr = [];
      data.result.forEach((item) => {
        let obj;
        // 台湾省做处理
        if (
          item.name === "台湾省" ||
          item.name === "香港特别行政区" ||
          item.name === "澳门特别行政区"
        ) {
          obj = {
            value: item.id,
            label: item.name,
          };
        } else {
          obj = {
            value: item.id,
            label: item.name,
            loading: false,
            children: [],
          };
        }
        arr.push(obj);
      });
      this.data = arr;
    },
    async reviewData() {
      // 数据回显
      let addr = JSON.parse(JSON.stringify(this.addressId.split(",")));
      this.addr = addr;
    },
    handleData(data) {
      // 处理接口数据
      let item = [];
      data.forEach((child) => {
        let obj = {
          value: child.id,
          label: child.name,
          loading: false,
          children: [],
        };

        if (child.level === "district" || item.label === "香港特别行政区") {
          item.push({
            value: child.id,
            label: child.name,
          });
        } else {
          item.push(obj);
        }
      });
      return item;
    },
  },
  watch: {
    addressId: {
      handler: function (v) {
        this.addr = v;
        if (!v) {
          this.reviewData();
        } else {
          this.init();
        }
      },
      immediate: true,
    },
  },
};
</script>
<style scoped lang="scss">
</style>
