@include("admin.credits.credits")
@include("admin.users.user_view")
<template id="user-view-btn">


    <template v-if="href === ''">
        <v-dialog v-model="dialog" :fullscreen="fullscreen" :hide-overlay="overlay" persistent transition="dialog-bottom-transition">

            <v-btn outline flat color="info" v-if="!icon" small
                   slot="activator" @click="getData()" :loading="loading">
                View
            </v-btn>
            <v-btn v-else icon
                   slot="activator" :loading="loading"  @click="getData()">
                <v-icon small color="info">visibility</v-icon>
            </v-btn>

            <user-view :user="user" :modal="true" :event="eventListener"></user-view>

        </v-dialog>
    </template>
    <template v-else>
        <v-btn outline flat color="info" v-if="!icon" small
               :href="href"  :loading="loading">
            View
        </v-btn>
        <v-btn v-else icon
               :href="href"  :loading="loading" >
            <v-icon small color="info">visibility</v-icon>
        </v-btn>
    </template>
</template>

<script>
    const UserViewBtn = {
        template: "#user-view-btn",
        components: {UserView},
        props: {
            user: Object,

            width: {
                type: String,
                default: ""
            },
            href: {
                type: String,
                default: ""
            },
            required: {
                type: Boolean,
                default: false
            },
            icon: {
                type: Boolean,
                default: false
            },
            overlay: {
                type: Boolean,
                default: false
            },
            fullscreen: {
                type: Boolean,
                default: false
            },
            btn: {
                type: Boolean,
                default: false
            },
            multiple: {
                type: Boolean, // not yet possible because of data
                default: false
            },
            event: {
                type: Function,
                default: function (event, data) {
                }
            },
        },
        data() {
            return {
                loading: false,
                dialog: false,
                edit_dialog: false,
                loaded: false,
            };
        },
        watch: {},
        mounted() {
            console.log("select assess", this.assassment)
        },

        methods: {
            eventListener(event, data) {
                switch (event) {
                    case "close":
                        this.dialog = false;
                        break;
                    default:
                        (this.event)(event, data);
                        break;

                }
            },
            async getData() {
                if(!this.loaded){

                    this.loading = true;
                    console.log("loading");
                    axios.get("{{route("users.show","")}}/" + this.user.id, {})
                        .then(res => {


                            this.user = res.data;

                            this.loading = false;
                            this.loaded = true;
                        })
                        .catch(err => console.log(err))
                        .finally(() => this.loading = false);
                }



            },
        }
    }
</script>