<template>
    <div>
        <h2>{{ $t("settings.account.title") }}</h2>
        <div>
            <label><span>{{ $t("settings.account.username") }} </span><input type="text" v-model="username"
                    :placeholder="$t('settings.account.username')" /></label>
        </div>
        <div>
            <label><span>{{ $t("settings.account.email") }} </span><input type="text" v-model="email"
                    :placeholder="$t('settings.account.email')" /></label>
        </div>
        <div>
            <label><span>{{ $t("settings.account.newpassword") }} </span><input type="password" v-model="newpassword"
                    :placeholder="$t('settings.account.newpassword')" /></label>
        </div>
        <div>
            <label><span>{{ $t("settings.account.newpasswordretype") }} </span><input type="password"
                    v-model="newpasswordretype" :placeholder="$t('settings.account.newpasswordretype')" /></label>
        </div>
        <div>
            <label><span>{{ $t("settings.account.oldpassword") }} </span><input type="password"
                    v-model="oldpassword" :placeholder="$t('settings.account.oldpassword')" /></label>
        </div>
        <div>
            <button @click="changeAccount">{{ $t("settings.account.changeaction") }}</button>
        </div>
        <div>
            <label><input type="checkbox" v-model="showInSearch" /> {{ $t("settings.account.showinsearch") }}</label>
        </div>
    </div>
</template>

<script>
import apiClient from '@/utils/axios.js';
import { mapGetters } from 'vuex';

export default {
    name: "AccountSettingsView",
    components: {},
    computed: {
        ...mapGetters(['user']),
    },
    data() {
        return {
            username: "",
            email: "",
            newpassword: "",
            newpasswordretype: "",
            showInSearch: false,
            oldpassword: "",
        };
    },
    methods: {},
    async mounted() {
        const response = await apiClient.post('/api/settings/account', { userId: this.user.id });
        console.log(response.data);
        this.username = response.data.username;
        this.showInSearch = response.data.showinsearch;
        this.email = response.data.email;
        console.log(this.showInSearch);
    },
};
</script>

<style lang="scss" scoped>
label {
    white-space: nowrap;
}
label > span {
    width: 15em;
    display: inline-block;
}
</style>