<template>
    <div>
        <section class="container mx-auto px-4">
            <label for="langValue">Read Also:</label>
            <select v-on:change="dataCall()" v-model="langValue" name="langValue" id="langValue">
                <option value="en">English</option>
                <option value="bn">Bengali</option>
                <option value="hi">Hindi</option>
                <option value="zh">Mandarin</option>
                <option value="es">Espanish</option>
            </select>
            <div v-for="items in items" :key="items.id">
                <p>{{ items.title }}</p>
            </div>
        </section>
    </div>
</template>
<script>
    export default {
        data(){
            return{
                data: "",
                items: "",
                langValue: 'en'
            }
        },
    methods: {
        dataCall(){
            // let fullURL = window.location.href;
            // console.log(fullURL)
            console.log(langValue)
            fetch(`https://apisp.dev2.cicdhosting.com/_dedicated/dwd/get-news/?action=news_${this.langValue}`)
            .then(data => data.json())
            .then(data => {
                console.log(data)
                this.items = data;
            })
            .catch(error => {
                console.error(error)
            })
        }
        // getData() {
        //     fetch('https://apisp.dev2.cicdhosting.com/_dedicated/dwd/get-news/')
        //     .then(response => {
        //     if (!response.ok) {
        //         throw new Error('Network response was not ok');
        //     }
        //     return response.json();
        //     })
        //     .then(data => {
        //     // Handle the JSON response data
        //     console.log(data);
        //     })
        //     .catch(error => {
        //     // Handle any errors that occurred during the fetch
        //     console.error('Fetch error:', error);
        //     });
        // }
    },
    mounted() {
        this.dataCall(); // Call the getData function when the component is mounted
    }
    };
</script>