<template>
  <div class="outer">
    <div id="mainImage">
      <img class="img-fluid main-image" :src="imageX" alt="Resort Image" />
    </div>
    <div class="list-images">
      <div class="scrolling-wrapper-flexbox row inner">
        <div v-for="(image, i) in images" :key="i" :class="myClass">
          <a @click="changeImage(i)">
            <img class="small-image" :src="image" alt="Resort Image" />
          </a>
        </div>
      </div>
    </div>
  </div>
</template>

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

export default {
  data() {
    return {
      largeImg: 0,
    };
  },
  computed: {
    myClass() {
      if (this.images && this.images.length === 3) {
        return 'col-md-4';
      }
      return 'col-md-3 nopadding';
    },
    imageX() {
      return this.images[this.largeImg];
    },
    ...mapState('resort', ['resort', 'description', 'images', 'layout']),
  },
  methods: {
    changeImage(number) {
      this.largeImg = number;
    },
  },
};
</script>
<style scoped>
.outer {
  background-color: #efefef;
  padding: 10px;
}
.inner {
  padding-left: 15px;
  padding-right: 15px;
}
.nopadding {
  margin: 0px;
  padding: 0px;
}
.main-image {
  max-width: 80%;
  max-height: 412px;
}
.list-images {
  padding: 5px;
  float: left;
  border-top: 1px solid #dedede;
  border-right: 1px solid #dedede;
  border-bottom: 1px solid #dedede;
  background-color: white;
  width: 100%;
  text-align: center;
}
.small-image {
  width: 100%;
  height: 125px;
}
</style>
