<!-- home -->
<template>
  <div class="apartment">
    <pure-image :bg-image="require('@/assets/images/apartment/1.jpg')"></pure-image>
    <apartment-navi class="apartment-navi" @goto="handleGoto" />
    <div v-for="(item, index) in list" :key="item.image">
      <modal v-if="visible[index]" class="apartment-modal">
        <pure-image :bg-image="item.image"></pure-image>
        <div class="back-sign" @click="cancelShow(index)">
          <img :src="require('@/assets/images/apartment/backSign.png')" alt />
        </div>
      </modal>
    </div>
    <modal v-if="visible[5]" class="apartment-modal">
      <swiper-image :list="houseList"></swiper-image>
      <div class="back-sign" @click="cancelShow(5)">
        <img :src="require('@/assets/images/apartment/backSign.png')" alt />
      </div>
    </modal>
  </div>
</template>

<script>
export default {
  components: {
    PureImage: () => import('./components/PureImage.vue'),
    SwiperImage: () => import('./components/SwiperImage.vue'),
    ApartmentNavi: () => import('./components/ApartmentNavi.vue')
  },
  data() {
    return {
      visible: Array(6).fill(false),
      list: [
        {
          image: require('@/assets/images/apartment/2-2.jpg'),
          color: '#f0f0f0'
        },
        {
          image: require('@/assets/images/apartment/3-1.jpg'),
          color: '#f0f0f0'
        },
        {
          image: require('@/assets/images/apartment/4-1.jpg'),
          color: '#f0f0f0'
        },
        {
          image: require('@/assets/images/apartment/6-1.jpg'),
          color: '#f0f0f0'
        },
        {
          image: require('@/assets/images/apartment/5-1.jpg'),
          color: '#f0f0f0'
        }
      ],
      houseList: [
        {
          image: require('@/assets/images/apartment/7-1.jpg'),
          color: '#f0f0f0'
        },
        {
          image: require('@/assets/images/apartment/7-2.jpg'),
          color: '#f0f0f0'
        },
        {
          image: require('@/assets/images/apartment/7-3.jpg'),
          color: '#f0f0f0'
        },
        {
          image: require('@/assets/images/apartment/7-4.jpg'),
          color: '#f0f0f0'
        },
        {
          image: require('@/assets/images/apartment/7-5.jpg'),
          color: '#f0f0f0'
        },
        {
          image: require('@/assets/images/apartment/7-6.jpg'),
          color: '#f0f0f0'
        },
        {
          image: require('@/assets/images/apartment/7-7.jpg'),
          color: '#f0f0f0'
        },
        {
          image: require('@/assets/images/apartment/7-8.jpg'),
          color: '#f0f0f0'
        }
      ]
    }
  },

  methods: {
    handleGoto(inx) {
      // inx 是从1开始的
      this.$set(this.visible, inx - 1, true)
    },
    cancelShow(inx) {
      this.$set(this.visible, inx, false)
    }
  }
}
</script>

<style lang="scss" scoped>
.apartment {
  height: 100%;
  position: relative;

  .apartment-modal {
    position: absolute;
    width: 100%;
    height: 100%;
    bottom: 0;
    left: 0;
  }

  .apartment-navi {
    position: absolute;
    width: 100%;
    height: 40%;
    bottom: 0;
    left: 0;
  }

  .back-sign {
    position: absolute;
    z-index: 500;
    right: 10px;
    bottom: 20px;
    width: 96px;
    height: 78px;

    img {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
