<template>
    <img :src="currentImage" />
</template>

<script>
import { mapState } from 'vuex';

export default {
  name: 'ImageContent',
  data() {
    return {
      defaultImage: '/images/homepage1.png',
      currentImage: '/images/homepage1.png'
    };
  },
  computed: {
    ...mapState(['menuData']),
  },
  watch: {
    $route: {
      immediate: true,
      handler() {
        this.updateImage();
      }
    }
  },
  methods: {
    updateImage() {
      const routePath = this.$route.path;
      const menuData = this.menuData;
      const menuItem = this.findMenuItemByPath(menuData, routePath);
      if (menuItem && menuItem.image) {
        this.currentImage = `/images/${menuItem.image}`;
      } else {
        this.currentImage = this.defaultImage;
      }
    },
    findMenuItemByPath(menu, path) {
      for (let item of menu) {
        if (item.link === path) {
          return item;
        }
        if (item.submenu) {
          const subItem = this.findMenuItemByPath(item.submenu, path);
          if (subItem) {
            return subItem;
          }
        }
      }
      return null;
    }
  }
};
</script>

<style scoped>
.right-column h2 {
  text-align: center;
  color: #000;
}

.right-column img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
}
</style>
