<template>
 <div class="content">
  <div class="content-left">
   <div v-for="(item,index) in options" :key="index">
    <div class="label" @click="select(item)">{{item.label}}</div>
   </div>
  </div>
  <div class="content-right" v-if="lists && lists.length">
   <CascaderItem :options="lists" :value="value" :level="level+1" @change="change"></CascaderItem>
  </div>
 </div>
</template>
<script>
import cloneDeep from 'lodash/cloneDeep';

export default {
  name: 'CascaderItem',
  props: {
    level: {
      type: Number,
      default: 0,
    },
    value: {
      type: Array,
      default: () => [],
    },
    options: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return { currentSelected: null };
  },
  computed: {
    lists() {
      const item = this.options.find((item) => {
        if (this.value[this.level]) {
          if (item.id == this.value[this.level].id) {
            return item.children;
          }
        }
      });
      return item && item.children;
      return this.value[this.level] && this.value[this.level].children;
    },
  },
  methods: {
    change(value) {
      this.$emit('change', value);
    },
    select(item) {
      const arr = cloneDeep(this.value);
      arr[this.level] = item;
      arr.splice(this.level + 1);
      this.$emit('change', arr);
      this.currentSelected = item;
    },
  },
};
</script>
