<template>
  <div class="k-nav-box" v-loading="loading">
    <div class="box-one">
      <el-scrollbar>
        <div class="ite" :class="{active: i == active}" v-for="(ite, i) in list1" :key="i" @click="secondInit(ite.id, i)">{{ ite.title }}</div>
      </el-scrollbar>
    </div>
    <div class="box-tow">
      <el-scrollbar>
        <div class="ite" v-for="(ite, i) in list2" :key="i">
          <div class="tit">{{ ite.title }}></div>
          <div class="chil-li">
            <span class="chil-it" v-for="(chil, l) in ite.children" @click="getDetails(ite.id, chil.id)">{{ chil.title }}</span>
          </div>
        </div>
      </el-scrollbar>
    </div>
  </div>
</template>

<script>
  import {getLazyList, getCategoryTree, getDetail, add, update, remove, updateBatch, getByParentId} from "@/api/redenvelopemall/categoryinfo";
  export default {
    name: 'nav-box',
    props: {
      rootNodeId: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        loading: false,
        list1: [],
        list2: [],
        active: ''
      }
    },
    async created() {
       this.list1 = await this.initData(this.rootNodeId);
       await this.secondInit(this.list1[0].id)
       this.active = 0
       this.$emit('change', `${this.list1[this.active].id}-${this.list2[0].id}-${this.list2[0].children[0].id}`)
    },
    methods: {
      async initData(param, loa = true) {
        if(loa) this.loading = true;
        let res = await getByParentId(param);
        if(loa) this.loading = false;
        return res.data.data
      },
      async secondInit(param, index) {
        this.active = index
        this.loading = true
        let tow = await this.initData(param, false)
        for (let i = 0; i < tow.length; i++) {
          tow[i].children = await this.initData(tow[i].id, false)
        }
        this.loading = false
        this.list2 = tow
      },
      getDetails(id1, id2) {
        this.$emit('change', `${this.list1[this.active].id}-${id1}-${id2}`)
      }
    }
  }
</script>

<style scoped lang="scss">
.k-nav-box {
  height: 320px;
  display: flex;
  align-items: center;
}
.el-scrollbar {
  height: 320px;
}
.box-one {
  width: 300px;
  height: 100%;
  .ite {
    margin: 0px 6px;
    height: 24px;
    line-height: 24px;
    padding: 5px 10px;
    font-weight: bold;
    border-radius: 8px;
    &:hover {
      background-color: #ededed5e;
      cursor: pointer;
    }
  }
  .active {
    background-color: #ededed5e;
    cursor: pointer;
  }
}
.box-tow {
  height: 100%;
  // flex: 1;
  width: 100%;
  .ite {
    padding: 5px 10px;
    display: flex;
    min-height: 24px;
    .tit {
      width: 15%;
      font-weight: bold;
    }
    .chil-li {
      width: 94%;
      .chil-it {
        color: #82848a;
        margin-right: 12px;
        cursor: pointer;
      }
    }
  }
}
</style>
