<template>
  <custom-node :custom-style="styleObject" :properties="componentData.properties"></custom-node>
</template>

<script>
import { mapState, mapGetters } from 'vuex';
import { styles } from '../../../utils/common';
import customNode from '../../../components/customElement/node/index.vue';

export default {
  props: {
    componentData: {
      type: Object,
      require: true
    }
  },
  data() {
    return {};
  },
  components: {
    'custom-node': customNode
  },
  computed: {
    ...mapState(['project']),
    ...mapGetters(['activeComponentCopy', 'componentList']),
    styleObject() {
      let result = '';
      if (this.componentData.uuid === this.activeComponentCopy.uuid) {
        result = styles.getComponentStyle(this.activeComponentCopy, this.project, this.componentList);
      } else {
        result = styles.getComponentStyle(this.componentData, this.project, this.componentList);
      }
      return result;
    }
  }
};
</script>

<style>
</style>
