<template>
  <el-tree-v2 :data="props.data"
              :props="treeProps"
              :height="690"
              @node-click="rowClick">
    <template #default="{ node,data }">
      <div class="temp-tree">
        <div>
          <el-icon>
            <FolderOpened v-if="data.isTheParentNode === '1' "/>
            <Document v-else/>
          </el-icon>
          <span>{{ node.label }}</span>
        </div>
        <div>
          <div v-if="data.isTheParentNode === '1'">
            <el-button
                text
                @click.stop="selectAll(data)"
                type="primary">
              全选
            </el-button>
            <el-button
                text
                @click.stop="emit('delClick',data)"
                type="danger">
              删除
            </el-button>
          </div>
        </div>
      </div>
    </template>
  </el-tree-v2>
</template>

<script setup name='JyJcTemplateTree'>
const props = defineProps({
  data: Array,
})

const emit = defineEmits(['node-click', 'delClick'])

const treeProps = {
  value: 'code',
  label: 'name',
  children: 'list',
}

const rowClick = (data, node) => {
  emit('node-click', data, node)
}


const selectAll = (data) => {
  if (data.list) {
    data.list.forEach(item => {
      emit('node-click', item)
    })
  }
}

</script>

<style scoped lang="scss">
.temp-tree {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
</style>
