<template>
    <v-menu
        v-model="menu.visible"
        :position-x="menu.x"
        :position-y="menu.y"
        absolute
        offset-y
        :close-on-content-click="false"
        :close-on-click="false"
    >
        <v-card tile flat :width="menu.width" :color="color + ' darken-3'">

            <v-card-title class="pa-1 white--text">
                {{ __(color == 'red' ? 'Deactivare cont' : 'Activare cont') }}. {{ user.full_name  }}
            </v-card-title>

            <v-divider></v-divider>

            <v-sheet class="white overflow-x-hidden" :height="menu.height" 
                :class="{
                    'overflow-y-auto': !! menu.height
                }"
            >
                <v-card-text>
                    <v-sheet v-if="account.activated_at" :class="color + '--text'">

                        {{  
                            __('Sunteți sigur că doriți deactivarea contului pentru :name, rolul :rol, client :client?', {
                                name: user.full_name,
                                rol: role.name,
                                client: customer.name,
                            }) 
                        }}

                    </v-sheet>

                    <v-sheet v-else :class="color + '--text'">

                        {{  
                            __('Sunteți sigur că doriți activarea contului pentru :name, rolul :rol, client :client?', {
                                name: user.full_name,
                                rol: role.name,
                                client: customer.name,
                            }) 
                        }}

                        </v-sheet>
                </v-card-text>
            </v-sheet>

            <v-divider></v-divider>

            <v-sheet class="white">
                <v-card-actions>

                    <cs-btn 
                        icon="mdi-content-save"
                        caption="Da"
                        outlined
                        :color="color"
                        @click="OnClickSave"
                    />

                    <v-spacer></v-spacer>

                    <cs-btn 
                        caption="Renunță"
                        icon="mdi-close"
                        outlined
                        @click="OnClickCancel"
                    />
                </v-card-actions>
            </v-sheet>
        </v-card>
    </v-menu>
</template>


<script>

    import Updateaccountstatus from './Requests/Updateaccountstatus.request';

    export default {
        props: {
            app: {required: true},
            menu: {required: true},
        },

        computed: {
            color() {
                return this.account.activated_at ? 'red' : 'green'
            },

            user() {
                return this.menu.payload.user;
            },

            account() {
                return this.menu.payload.account;
            },

            customer() {
                return this.menu.payload.customer;
            },

            role() {
                return this.menu.payload.role;
            }
        },

        methods: {
            OnClickSave() {

                new Updateaccountstatus()
                    .ResetData()
                    .SetData({
                        id: this.account.id,
                        customer_id: this.customer.id,
                        user_id: this.user.id,
                        role_id: this.role.id,

                    })
                    .Request([
                        response => {

                            this.account.activated = response.payload.activated;
                            this.account.activated_at = response.payload.activated_at;

                            this.OnClickCancel();
                        }
                    ]);
            },

            OnClickCancel() {
                this.Utilizatori.Menus.Hide(this.menu);
            }
        },

        components: {
            CsBtn: require('@CsVueComp/buttons/CsBtn').default,
        },

        name: 'CsUpdateCustomerAccountStatusMenu',
    }
</script>