<template>
  <div class="side-image">
    <img :src="currentImage" alt="" loading="lazy" decoding="async" />
  </div>
</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>
.side-image {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--color-bg-subtle);
  overflow: hidden;
}

.side-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
</style>
