<template>
  <div class="imgs ">
    <img class="main" :src="imgs[currImgIndex]" alt="" />
    <img
      v-for="(s, index) in imgs"
      :key="`${index}`"
      :src="s"
      class="img"
      @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;
  .main {
    width: 400px;
    height: 400px;
    margin-bottom: 20px;
  }
  .img {
    width: 92px;
    height: 92px;
    margin-right: 10px;
    cursor: pointer;
    &:last-child {
      margin-right: 0;
    }
  }
}
</style>
