<template>
  <div>
    <el-cascader
      v-model="modelValue"
      ref="myCascader"
      :placeholder="placeholder"
      :props="props"
      style="width: 100%"
      @change="araeChange"
    />
  </div>
</template>

<script>
import { getCity } from "@/api/common/index";
export default {
  props: {
    modelValue: {
      type: String,
    },
    placeholder: {
      type: String,
    },
  },
  data() {
    return {
      area: [],
      props: {
        lazy: true,
        lazyLoad: this.lazyLoad,
        checkStrictly: true,
      },
    };
  },
  methods: {
    araeChange(val) {
      this.$emit("update:modelValue", val);
      this.$emit("change", val);
    },
    lazyLoad(node, resolve) {
      let level = node.level;
      if (!node.data) {
        getCity().then((res) => {
          //接口
          const nodes = Array.from(res.data).map((item, index) => ({
            value: item.cityId,
            label: `${item.name}`,
            leaf: level >= 2,
          }));
          // 通过调用resolve将子节点数据返回，通知组件数据加载完成
          resolve(nodes);
        });
      } else if (level == 1) {
        getCity({ parentCityId: node.data.value }).then((res) => {
          const nodes = Array.from(res.data).map((item) => ({
            value: item.cityId,
            label: `${item.name}`,
            leaf: true, // 二级节点设为叶子节点
            disabled: false, // 二级节点设为可选
          }));
          // 通过调用resolve将子节点数据返回，通知组件数据加载完成
          resolve(nodes);
        });
      } else {
        resolve({});
      }
    },
  },
};
</script>

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