@include("admin.components.file_upload")

<template id="user-info">
    {{--<v-card
        class="pt-4 mx-auto"
        flat

    >
        <v-card-text>

        </v-card-text>

        --}}{{--<v-list

        >

            <v-list-tile @click="" pa-1>
                <v-list-tile-content @click="">
                    <v-list-tile-title>Company</v-list-tile-title>
                    <v-list-tile-sub-title>@{{ user.company }} </v-list-tile-sub-title>
                </v-list-tile-content>
            </v-list-tile>
            <v-list-tile  :href="`//${user.website}`">
                <v-list-tile-content >
                    <v-list-tile-title>Company</v-list-tile-title>
                    <v-list-tile-sub-title>@{{ user.website }}</v-list-tile-sub-title>
                </v-list-tile-content>
            </v-list-tile>
            <v-list-tile  :href="`//${user.website}`">
                <v-list-tile-content >
                    <v-list-tile-title>Phone</v-list-tile-title>
                    <v-list-tile-sub-title>@{{ user.phone }}</v-list-tile-sub-title>
                </v-list-tile-content>
            </v-list-tile>
        </v-list>--}}{{--

    </v-card>--}}

    <v-layout
        justify-space-between
        pa-3
    >
        <v-flex

            text-xs-center
        >
            <v-avatar
                v-if="user.avatar"
                size="88"
            >
                <v-img
                    :src="user.avatar"
                    lazy-src="{{@asset("images/avatar.png")}}"
                    class="mb-4"
                >
                </v-img>
                <file-upload  v-if="editable" :icon="true" inputname="avatar" :event="eventListener" :url="'{{route("users.avatar","")}}/'+user.id" accept="image/*"/>
            </v-avatar>



            <h3 class="headline mb-2">
                @{{ user.name }}
            </h3>
            <div class="blue--text mb-2">@{{ user.email }}</div>
            {{--<div class="blue--text ">@{{ user.role.title }}</div>--}}
        </v-flex>
    </v-layout>
</template>

<script>
    const UserInfo = {
        template: "#user-info",

        components: {

            FileUpload,

        },

        props: {
            source: String,
            context: Object,
            user: Object,
            editable: {
                type: Boolean,
                default: false
            },
            event: {
                type: Function,
                default: function (event, data) {
                }
            },

        },
        data: () => ({

        }),
        computed: {
            avatar(){
                return "https://avataaars.io/?avatarStyle=Circle&topType=LongHairFroBand&accessoriesType=Blank&hairColor=Black&facialHairType=Blank&clotheType=BlazerShirt&eyeType=Wink&eyebrowType=RaisedExcited&mouthType=Twinkle&skinColor=DarkBrown"
            }

        },
        mounted() {

        },
        methods: {
            eventListener(event,data){
                switch (event) {
                    case "upload":
                            this.user.avatar = data;
                        (this.event)("avatar", data);
                        return true;
                    default:
                        (this.event)(event, data);
                        return false;
                }
            }
        }
    }
</script>