// // //child

<template>
    <div>
        <el-dialog
                :title="titleDialog"
                :visible.sync="dialogVisible"
                width="30%">
            <el-alert
                    :title="titleAlert"
                    :type="typeAlert"
                    :closable="false">
            </el-alert>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">Отмена</el-button>
                <el-button type="primary" @click="handleConfirmation">Подтверждаю</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: 'page-elements-dialog',
        props: ['titleDialog', 'dialogVisible', 'typeAlert', 'titleAlert'],
        methods: {
            handleConfirmation: function () {
                this.$emit('handleConfirmation');
            }
        }
    }
</script>

// // //parent
<template>
    <div>
        <PageElementsBreadcrumb :breadcrumbElements="breadcrumbElements"/>

        <el-table
                v-loading="loading"
                :data="users"
                style="width: 100%">
            <el-table-column
                    fixed
                    prop="id"
                    label="ID"
                    min-width="50">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="Имя"
                    min-width="150">
            </el-table-column>
            <el-table-column type="expand">
                <template slot-scope="props">
                    <p>Имя: {{ props.row.name }}</p>
                    <p>E-mail: {{ props.row.email }}</p>
                    <template v-if="props.row.reliability === 1">
                        <p>Статус надежности: Надежный пользователь</p>
                    </template>
                    <template v-else>
                        <p>Статус надежности: Не надежный пользователь</p>
                    </template>
                    <p v-if="props.row.description !== null && props.row.description.length > 0">Примечание: {{ props.row.description }}</p>
                    <p v-if="props.row.discount !== 0">Персональный процент скидки: {{ props.row.discount}}</p>
                </template>
            </el-table-column>
            <el-table-column
                    prop="email"
                    label="E-mail"
                    min-width="150">
            </el-table-column>
            <el-table-column
                    label="Статус"
                    min-width="150">
                <template slot-scope="props">
                    <template v-if="props.row.status === 'administration'">
                        <p>Администратор</p>
                    </template>
                    <template v-else>
                        <p>Пользователь</p>
                    </template>
                </template>
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="Управление"
                    min-width="150">
                <template slot-scope="props">
                    <el-button
                            @click.native.prevent="goToUpdate(props.row.id)"
                            size="mini">
                        <i class="el-icon-edit"></i>
                    </el-button>
                    <el-button
                            size="mini"
                            type="danger"
                            @click.native.prevent="deleteRow(props.$index, users)">
                        <i class="el-icon-delete"></i>
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <PageElementsPagination :total="total"
                                :currentPage="currentPage"
                                :pageSize="pageSize"
                                v-on:change="handleCurrentPageChange"/>

        <PageElementsDialog :dialogVisible="dialogVisible"
                            :titleDialog="titleDialog"
                            :typeAlert="typeAlert"
                            :titleAlert="titleAlert"
                            v-on:handleConfirmation="deleteUser"/>
    </div>
</template>

<script>
    import { PageElementsPagination, PageElementsBreadcrumb, PageElementsDialog} from '../page/elements';

    export default {
        name: 'users-list',
        mounted () {
            this.breadcrumbElements = [
                {href: this.$router.resolve({name: 'main'}).href, title: 'Главная'},
                {href: this.$router.resolve({name: 'users-list'}).href, title: 'Список пользователей'},
            ];
            if (this.$store.getters.users.data !== undefined
                && this.$store.getters.users.data.length) {
                this.users = this.$store.getters.users.data;
                this.total = this.$store.getters.users.total;
                this.currentPage = this.$store.getters.users.current_page;
                this.pageSize = this.$store.getters.users.per_page;
                this.loading = false;
                return false;
            }
            this.getUsers();
        },
        data() {
            return {
                users: [],
                currentPage: 0,
                total: 0,
                pageSize: 0,
                breadcrumbElements: [],
                loading: true,
                dialogVisible: false,
                titleDialog: '',
                operationsOnUser: null,
                typeAlert: 'warning',
                titleAlert: ''
            }
        },
        methods: {
            deleteUser: function () {
                console.log('delete user');
            },
            deleteRow: function (index, users) {
                this.operationsOnUser = users[index];
                this.titleDialog = 'Удаление пользователя';
                this.titleAlert = `Вы дейстительно хотите удалить пользователя ${this.operationsOnUser.name}`;
                this.dialogVisible = true;
            },
            getUsers: function (page = 1) {
                this.loading = true;
                return axios.get('/api/admin/users?page=' + page).then((response) => {
                    this.users = response.data.users.data;
                    this.total = response.data.users.total;
                    this.currentPage = response.data.users.current_page;
                    this.pageSize = response.data.users.per_page;
                    this.$store.commit('updateUsers', response.data.users);
                    this.loading = false;
                });
            },
            handleCurrentPageChange: function (val) {
                if (val !== this.currentPage) {
                    this.getUsers(val);
                }
            },
            goToUpdate: function (id) {
                this.$router.push({name: 'users-update', params: {id: id}})
            }
        },
        components: {
            PageElementsPagination,
            PageElementsBreadcrumb,
            PageElementsDialog
        }
    }
</script>