<template>
  <div class="tree-list-zb">
    <div class="list-box">
      <ul>
        <li v-for="item in list" :key="item.id" :class="!item.label && !item.childrens ? 'no-li' : 'li'">
          <div v-if="item.label" class="li-item-left">{{ item.label }}</div>
          <ul class="li-item-right" v-if="item.childrens && item.childrens.length > 0">
            <tree-list-zb :list="item.childrens"></tree-list-zb>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'treeListZb',
  props: {
    list: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  data() {
    return {

    };
  },
  created() {

  },
  methods: {

  }
};
</script>

<style lang="scss">
.tree-list-zb {
  width: 100%;

  .list-box {
    ul {
      width: 100%;

      li {
        width: 100%;
        line-height: 40px;
        border-bottom: 1px solid var(--publicTableColor01);

        .li-item-left {
          padding: 0 15px;
          text-align: center;
        }

        .li-item-right {
          width: 100%;

          li {
            text-align: left;
          }
        }
      }

      li:last-child {
        border-bottom: 0px;
      }

      .no-li {
        // height: 40px;
        // border-color: transparent;
        border-bottom: 0px;
      }
    }
  }
}
</style>
