Untitled

<template>
    <div class="page-wrapper">
        <div class="container-xl">
            <!-- Page title -->
            <div class="page-header d-print-none">
                <div class="row g-2 align-items-center">
                    <div class="col">
                        <h2 class="page-title">Page Test</h2>
                    </div>
                    <!-- Page title actions -->
                </div>
            </div>
        </div>

        <div class="page-body">
            <div class="container-xl">
                <!-- konten disini -->

                <div>
                    Lorem ipsum dolor sit, amet consectetur adipisicing elit.
                    Autem nostrum neque ea repellat suscipit, provident nesciunt
                    saepe repudiandae omnis. Hic cupiditate, fugit laudantium
                    aspernatur accusantium id quod optio earum suscipit?
                </div>

                <div style="width: 30%">
                    <Slick ref="slick" :options="slickOptions">
                        <!-- Mencoba dengan InnerHTML -->
                        <!-- <div class="slider-thumbnails"></div> -->

                        <!-- Mencoba Akses tanpa innerHTML -->
                        <div>
                            <img
                                id="10"
                                class="img_slide_survey_galian_ajib"
                                @click="triggerSliderPetaGalian(10)"
                                data-id="10"
                                src="https://jakarta.pintoinvest.com/survey/blank_not_image.png"
                                alt="Thumbnail"
                            />
                        </div>

                        <div>
                            <img
                                id="10"
                                class="img_slide_survey_galian_ajib"
                                @click="triggerSliderPetaGalian(10)"
                                data-id="10"
                                src="https://jakarta.pintoinvest.com/survey/blank_not_image.png"
                                alt="Thumbnail"
                            />
                        </div>
                    </Slick>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import Slick from "vue-slick";
import axios from "axios";

export default {
    components: {
        Slick,
    },
    data() {
        return {
            slickOptions: {
                slidesToShow: 1,
                slidesToScroll: 1,
                variableWidth: true,
                infinite: true,
                arrows: true,
                dots: true,
                // prevArrow:
                //     '<span class="slide-arrow slick-prev-galian"><i style="font-size: 1.5rem; cursor: pointer;" class="fas fa-chevron-left"></i></span>',
                // nextArrow:
                //     '<span class="slide-arrow slick-next-galian"><i style="font-size: 1.5rem; cursor: pointer;" class="fas fa-chevron-right"></i></span>',
            },
        };
    },
    methods: {
        next() {
            this.$refs.slick.next();
        },
        prev() {
            this.$refs.slick.prev();
        },
        triggerSliderPetaGalian(id) {
            console.log(id);
            // Logika untuk menampilkan slider sesuai dengan id yang diberikan
        },
        getDataIzinAjib() {
            axios
                .get(
                    `${window.laravel.base_url}/geojson_izin_galian/galian_utilitas_ajib.geojson`
                )
                .then((response) => {
                    const data = response.data.features;
                    let thumbnailHtml = "";

                    for (let i = 0; i < data.length; i++) {
                        const element = data[i];
                        const id = element.properties.OBJECTID;
                        let imgUrl =
                            "https://jakarta.pintoinvest.com/survey/blank_not_image.png"; // Set default image URL here

                        if (
                            element.properties.img_url &&
                            element.properties.img_url !== "null"
                        ) {
                            imgUrl = element.properties.img_url;
                        }

                        thumbnailHtml += `<div><img id="${id}" class="img_slide_survey_galian_ajib" @click="triggerSliderPetaGalian(${id})"  data-id="${id}" src="${imgUrl}" alt="Thumbnail"></div>`;
                        // console.log(thumbnailHtml);
                    }

                    const sliderThumbnails =
                        document.querySelector(".slider-thumbnails");
                    sliderThumbnails.innerHTML = thumbnailHtml;
                    this.$nextTick(() => {
                        this.$refs.slick.reSlick();
                    });
                })
                .catch((error) => {
                    console.log(error);
                });
        },
    },
    mounted() {
        this.getDataIzinAjib();
    },
};
</script>

<style>
.img_slide_survey_galian_ajib {
    height: 26vw !important;
    width: 40vw !important;
}
</style>