<template>
  <div>
    <div class="flex-box">
      <div class="flex-box-item">
        <img :src="require('@/assets/images/apartment/1-2.png')" style="height: 64px; display: block; margin: 0 auto" alt="">
      </div>
    </div>
    <div class="flex-box" style="margin-top: 10px">
      <div class="flex-box-item">
        <img :src="require('@/assets/images/apartment/2-1.png')" style="height: 78px" alt="" @click="handleClick(1)">
      </div>
      <div class="flex-box-item">
        <img :src="require('@/assets/images/apartment/3.png')" style="height: 78px" alt="" @click="handleClick(2)">
      </div>
      <div class="flex-box-item">
        <img :src="require('@/assets/images/apartment/4.png')" style="height: 78px" alt="" @click="handleClick(3)">
      </div>
    </div>
    <div class="flex-box" style="margin-top: 20px">
      <div class="flex-box-item">
        <img :src="require('@/assets/images/apartment/5.png')" style="height: 78px" alt="" @click="handleClick(4)">
      </div>
      <div class="flex-box-item">
        <img :src="require('@/assets/images/apartment/6.png')" style="height: 78px" alt="" @click="handleClick(5)">
      </div>
      <div class="flex-box-item">
        <img :src="require('@/assets/images/apartment/7.png')" style="height: 78px" alt="" @click="handleClick(6)">
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ApartmentNavi',
  methods: {
    handleClick(inx) {
      this.$emit('goto', inx)
    }
  }
}
</script>

<style lang="scss" scoped>
.flex-box {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  padding: 0 20px;

  &-item {
    flex: 1;
  }
}
</style>
