<template>
  <div id="app">
    <el-cascader v-model="current" :props="props" ref="cascader"></el-cascader>
  </div>
</template>

<script>
let id = 0;
let list = [
  {
    value: '0',
  }, {
    value: '1',
  }, {
    value: '2',
  }, {
    value: '3',
  },
]
export default {
  name: 'App',
  data() {
    return {
      current: [],
      props: {
        lazy: true,
        lazyLoad(node, resolve) {
          const {level} = node;

          function f() {
            list = list.map((item, i) => ({
              label: level ? `${node.value}-${i}` : item.value,
              value: level ? `${node.value}-${i}` : item.value,
              leaf: item.value === '2' && level === 0 ? true : `${node.value}-${i}` === '3-2' ? true : level >= 2
            }))
            resolve(list)
          }

          if (level > 0) {
            setTimeout(() => {
              f()
              node.func && node.func(node)
            }, 1000)
            return
          }
          f()
        }
      }
    };
  },
  mounted() {
    this.current = ['1', '1-3', '1-3-0']
    // this.current = ['3', '3-2']
    // this.current = ['2']
    // this.current = ['0', '0-2', '0-2-3']
    for (let item of this.$refs.cascader.panel.menus[0]) {
      if (item.value === this.current[0]) {
        this.loadItem(item)
        return
      }
    }
  },
  methods: {
    handleItem(val) {
      if (val && val instanceof Object) {
        this.loadItem(val)
      }
    },

    loadItem(val) {
      val.func = this.waitItemExecution
      this.$refs.cascader.panel.lazyLoad(val)
    },

    waitItemExecution(val) {
      for (let item of val.children) {
        if (this.current[val.level] === item.value) {
          this.handleItem(item)
          break
        }
      }
      this.$refs.cascader.panel.handleExpand(val)
      this.$refs.cascader.computePresentText()
    },
  }
}
</script>