<template>
  <div class="asset-content" :class="{ 'asset-root': isRoot }">
    <div
      class="asset-items"
      :class="{ isLeaf: !(item.children && item.children.length) }"
      v-for="(item, index) in treeList"
      :key="index"
    >
      <div class="asset-label" :title="item.name">
        <el-radio
          :value="selected.value"
          v-if="!(item.children && item.children.length)"
          :label="item.id"
          @input="handleChange"
          >{{ item.name }}</el-radio
        >
        <template v-else>
          {{ item.name }}
        </template>
      </div>
      <AssetContent
        v-if="item.children && item.children.length"
        :treeList="item.children"
        :isRoot="false"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: 'AssetContent',
  props: {
    treeList: {
      type: Array,
      default: () => []
    },
    isRoot: {
      type: Boolean,
      default: true
    }
  },
  inject: ['selected', 'handleSelectedChange'],
  data () {
    return {}
  },
  created () {},
  methods: {
    handleChange (val) {
      this.handleSelectedChange(val)
    }
  }
}
</script>

<style lang="scss" scoped>
* {
  box-sizing: border-box;
}
.asset-content {
  display: flex;
  flex-wrap: wrap;
  flex: 1;

  &.asset-root {
    flex: none;
    border-bottom: 1px solid rgba(170, 170, 170, 1);
    border-top: 1px solid rgba(170, 170, 170, 1);
    > .asset-items {
      border-right: 1px solid rgba(170, 170, 170, 1);
      border-left: 1px solid rgba(170, 170, 170, 1);
      border-bottom: 1px solid rgba(170, 170, 170, 1);
      border-top: none;
      &:nth-of-type(1) {
        > .asset-label {
          // border-top: 1px solid rgba(170, 170, 170, 1) !important;
        }
      }
    }

    > .asset-items.isLeaf {
      width: 100%;
      border-right: 1px solid rgba(170, 170, 170, 1);
      border-left: 1px solid rgba(170, 170, 170, 1);
    }
  }
  > .asset-items {
    border-bottom: 1px solid rgba(170, 170, 170, 1);
    &:last-of-type {
      border-bottom: none;
    }
  }
  .asset-items {
    display: flex;
    min-height: 40px;
    width: 100%;
    overflow: hidden;
    &.isLeaf {
      width: 150px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      -webkit-line-clamp: 1;
      flex: none;
      border: none;
      .asset-label {
        border: none !important;
        background-color: #fff;
        padding-left: 10px;
        justify-content: flex-start;
      }
    }

    .asset-label {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      -webkit-line-clamp: 1;
      background-color: rgba(242, 242, 242, 1);
      border-right: 1px solid rgba(170, 170, 170, 1);
      width: 150px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
</style>
