<template>
  <div class="imgs ">
    <img :src="imgs[currImgIndex]" alt="" />
    <img
      v-for="(s, index) in imgs"
      :key="`imgs${index}`"
      :src="s"
      @mouseover="currImgIndex = index"
    />
  </div>
</template>
<script lang="ts">
import { Component, Vue, Watch, Prop } from "vue-property-decorator";
@Component
export default class extends Vue {
  private currImgIndex = 0;

  @Prop(String)
  private img!: string;

  get imgs() {
    return (this.img + "").split(",").map(x => this.$basePath + x);
  }
}
</script>
<style lang="scss" scoped>
.imgs {
  width: 400px;
  img {
    width: 92px;
    height: 92px;
    margin-right: 10px;
    cursor: pointer;
    &:nth-child(1) {
      width: 400px;
      height: 400px;
      margin-bottom: 20px;
    }
  }
}
</style>
