<template>
  <div>
    <!-- <el-empty v-if="data?data.length === 0?true:false:false" description="该品牌下暂无分类"></el-empty> -->
    <ul style="padding-left:40px;">
      <li class="class-item" v-for="item in data" :key="item.index">
        <div class="flex-align-center">
          <el-checkbox v-model="item.checked" v-show="!item.hasChild" @change="onChange"></el-checkbox>&nbsp;
          <span :style="item.hasChild?'padding-left:15px':''" style="font-size:14px">{{item.label}}</span>
        </div>
        <tree :data="item.children"></tree>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "Tree",
  props:['data'],
  data () {
    return {
      checked:false,
      checks:[]
    }
  },
  methods:{
    onChange () {
      var that = this
      function convertToElementTree(node) {
        if (node.checked === true) {
          that.$store.dispatch('checkClass',node.value)
        } else {
          that.$store.dispatch('uncheckClass',node.value)
        }
      }
      that.data.forEach((element) => {
        convertToElementTree(element)
      });
    },
  }
}
</script>

<style scoped>
.class-item{
  /* height: 40px; */
  font-size: 1.5rem;
  
}
</style>