<template>
  <div :style="containerStyle">
    <component
      v-for="item in allViewData"
      :is="item.is"
      class="component-node"
      :key="item.componentId"
      :id="item.componentId"
      :style="item.style"
      :ref="item.componentId"
      :node="item"
      @click="clickEvent(item)"
      :src="item.src"
    >
      {{ item.text }}
    </component>
    <img />
  </div>
</template>
<script>
export default {
  name: "TslDynamic",
  components: {
    TslClock: () => import("../tsl-clock/TslClock.vue"),
    TslCharts: () => import("../tsl-charts/TslCharts.vue"),
    TslIcon: () => import("../tsl-icon/TslIcon.vue"),
    TslWeather: () => import("../tsl-weather/TslWeather.vue"),
  },
  data() {
    return {};
  },
  props: {
    containerStyle: {
      default: () => {
        return {
          width: "400px",
          height: "200px",
          fontSize: "14px",
          position: "relative",
        };
      },
      type: Object,
    },
    allViewData: {
      default: () => [],
      type: Array,
    },
  },
  methods: {
    clickEvent(item) {
      this.$emit("clickEvent", item);
    },
  },
};
</script>
<style scoped></style>
