<template>
  <div class="tree-list-xm">
    <div class="list-box">
      <ul>
        <li v-for="item in list" :key="item.id" class="flex">
          <div class="li-item-left flex-align">
            <span>{{ item.name }}</span>
          </div>
          <ul class="li-item-right" v-if="item.childrens && item.childrens.length > 0">
            <tree-list-xm :list="item.childrens"></tree-list-xm>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</template>

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

    };
  },
  mounted() {

  },
  methods: {

  }
};
</script>

<style lang="scss">
.flex {
  display: flex;
}

.flex-align {
  display: flex;
  align-items: center;
}

.tree-list-xm {
  .list-box {
    ul {
      li {
        line-height: 40px;
        border-bottom: 1px solid var(--publicTableColor01);

        .li-item-left {
          flex: 1;
          padding: 0 15px;
        }

        .li-item-right {
          width: 75%;
          border-left: 1px solid var(--publicTableColor01);

          li {
            text-align: left;
          }
        }
      }

      li:last-child {
        border-bottom: 0px;
      }
    }
  }
}
</style>
