<template>
  <div class="groups isSelected">
    <div class="title cursor" @click="titleClick">
      <caret-down-outlined class="title-down" v-if="isSelect" />
      <caret-right-outlined class="title-down" v-if="!isSelect" />
      <span>{{ props.nodeGroup.name }}</span>
    </div>
    <div class="nodes flex-nodes" v-if="isSelect">
      <template v-for="(item, index) in nodes" :key="index">
        <new-node-item style="margin-bottom: 20px" :node-data="item" :iconList="props.iconList" @dblclick="itemDbClick(item)">
        </new-node-item>
      </template>
    </div>
  </div>
</template>

<script>
import { computed, defineComponent, ref, watch } from 'vue';
import NewNodeItem from './new_node_item.vue';

export default defineComponent({
  components: {
    NewNodeItem
  },
  props: {
    // 节点组信息
    nodeGroup: {
      type: Object,
      required: true
    },
    // 选中的父级列表
    selectKeys: {
      type: Array,
      default: []
    },
    // 图片列表
    iconList: {
      type: Array,
      default: []
    }
  },
  emits: ['changeSelect', 'dbclick'],
  setup(props, { emit }) {
    // 节点列表
    const nodes = computed(() => {
      return props.nodeGroup.portalComponentList;
    });

    // 是否选中
    const isSelect = ref(false);

    /**
     * 名称点击
     */
    const titleClick = () => {
      emit('changeSelect', props.nodeGroup.id);
    };

    // 双击事件
    const itemDbClick = item => {
      emit('dbclick', item);
    };

    watch(
      () => props.selectKeys,
      val => {
        if (val.find(item => item == props.nodeGroup.id)) {
          isSelect.value = true;
        } else {
          isSelect.value = false;
        }
      },
      { deep: true, immediate: true }
    );

    return {
      nodes,
      props,
      isSelect,
      itemDbClick,
      titleClick
    };
  }
});
</script>

<style scoped lang="less">
.groups {
  display: flex;
  width: 100%;
  flex-direction: column;
  padding: 0 16px;

  .title {
    flex: 1;
    font-size: 14px;
    font-weight: 400;
    color: #60666b;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
  }

  .title-down {
    color: #898e91;
    font-size: 12px;
    margin-right: 5px;
  }

  .cursor {
    cursor: pointer;
  }

  .nodes {
    flex: 1;
  }
  &:not(:last-child) {
    border-bottom: 1px solid rgba(197, 207, 209, 0.6);
  }
  &:not(:first-child) {
    padding-top: 20px;
  }
}

.flex-nodes {
  display: flex;
  flex-wrap: wrap;
}

.clear {
  clear: both;
}
</style>
