<template>
    <div class="w-full flex items-center justify-center">
        <div class="w-[90%] flex flex-col items-center justify-center">
            <div class="lg:text-[78px] text-[36px] text-[#242424] lg:mt-40 mt-20"><strong>Galeri</strong></div>
            <div class="text-[11px] text-[#242424] lg:mb-40 mb-20">HALAMAN BERANDA / GALERI</div>
            <div class="text-[14px] text-[#3D3D3D] mb-2.5">Semua</div>
            <div class="grid lg:grid-cols-4 grid-cols-2 gap-2">
                <div v-for="(value,index) in imgList">
                    <img @click="show(index)" class="h-[200px] w-[300px] object-cover hover:opacity-50" :src="value" alt="">
                </div>
            </div>
            <div class="text-[14px] text-[#3D3D3D] mb-40 mt-2.5">Semua</div>
        </div>
    </div>
    <!-- <VueEasyLightbox
        :visible="visible"
        :imgs="imgList"
        :index="index"
        @hide="visible = false"
    /> -->

    <VueEasyLightbox
      :visible="visible"
      :imgs="imgList"
      :index="index"
      @hide="visible = false"
    >
     <template #close-btn="{ close }">
        <div class="flex flex-row w-full h-[60px] items-center justify-end text-white pr-10">

            <!-- <div>
                <el-dropdown placement="top-start" :teleported="false">
                <div @click="shareAction" class="mr-5">
                    <img class="w-8" :src="shareLogo" alt="">
                </div>
                <template #dropdown>
                    <el-dropdown-menu>
                    <el-dropdown-item>Facebook</el-dropdown-item>
                    <el-dropdown-item>Twitter</el-dropdown-item>
                    <el-dropdown-item>Sabitle</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
                </el-dropdown>
            </div> -->
            <div @click="close()"> ✕ </div>
        </div>
      </template>
    </VueEasyLightbox>
</template>

<script setup>
import g1 from '@/assets/galeri/g1.jpg'
import g2 from '@/assets/galeri/g2.jpg'
import g3 from '@/assets/galeri/g3.jpg'
import g4 from '@/assets/galeri/g4.jpg'
import g5 from '@/assets/galeri/g5.jpg'
import g6 from '@/assets/galeri/g6.jpg'
import g7 from '@/assets/galeri/g7.jpg'
import g8 from '@/assets/galeri/g8.jpg'
import g9 from '@/assets/galeri/g9.jpg'
import g10 from '@/assets/galeri/g10.jpg'
import g11 from '@/assets/galeri/g11.jpg'
import g12 from '@/assets/galeri/g12.jpg'
import g13 from '@/assets/galeri/g13.jpg'
import g14 from '@/assets/galeri/g14.jpg'
import VueEasyLightbox from 'vue-easy-lightbox'
import shareLogo from '@/assets/share.png'
import { ref } from 'vue'

const imgList = [
    g1,g2,g3,g4,g5,g6,g7,g8,g9,g10,g11,g12,g13,g14
]

const visible = ref(false)
const index = ref(0)

const show = (i) => { index.value = i; visible.value = true }

const toggleFullscreen = () => {
  const el = document.fullscreenElement
  if (el) document.exitFullscreen()
  else document.documentElement.requestFullscreen()
}


const shareAction = () => {
    
}

</script>