<template>
    <div>
        <header class="page-header">
            <h2>Danh sách người dùng hệ thống</h2>
        </header>

        <div class="row">
            <div class="col-lg-12">
                <loading :active.sync="IsLoading" :is-full-page="false"></loading>

                <form class="card mb-4" @submit.prevent="LoadData">
                    <header class="card-header">
                        <h2 class="card-title">Tìm kiếm</h2>
                    </header>
                    <div class="card-body">

                        <div class="row">
                            <div class="col-lg-3">
                                <div class="form-group">
                                    <label class="col-form-label" for="frmKeyword">Từ khóa:</label>
                                    <input type="text" class="form-control" id="frmKeyword" placeholder="" v-model="SearchModel.Search.PredicateObject.Keyword">
                                </div>
                            </div>
                            <div class="col-lg-3">
                                <div class="form-group">
                                    <label class="col-form-label" for="frmKeyword">Ngày tạo:</label>
                                    <date-range-picker @update="DateSelected" ref="picker" v-model="DateRange" :locale-data="{ firstDay: 1, format: 'dd/mm/yyyy' }" autoApply style="width:100%;">
                                    </date-range-picker>

                                </div>
                            </div>
                        </div>


                    </div>
                    <footer class="card-footer text-right">
                        <button class="btn btn-primary" type="submit">
                            <i class="fas fa-search"></i>Tìm kiếm
                        </button>
                    </footer>
                </form>


                <button class="btn btn-primary mb-2" type="button" @click="CreateOrUpdate(null)">
                    <i class="fas fa-plus"></i> Thêm người dùng
                </button>

                <section class="card">

                    <div class="card-body table-responsive" style="padding-bottom:50px;">
                        <table class="table mb-0 table-bordered">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th style="min-width:100px">Tên đăng nhập</th>
                                    <th style="min-width:200px">Họ và tên</th>
                                    <th style="min-width:200px">Email</th>
                                    <th style="min-width:100px">Địa chỉ</th>
                                    <th style="min-width:100px">Trạng thái</th>
                                    <th>Quản lý</th>
                                </tr>
                            </thead>
                            <tbody>

                                <tr v-for="item in Items">
                                    <td class="align-middle">{{item.Id}}</td>
                                    <td class="align-middle">{{item.UserName}}</td>
                                    <td class="align-middle">{{item.FullName}}</td>
                                    <td class="align-middle">{{item.Email}}</td>
                                    <td class="align-middle">{{item.Address}}</td>
                                    <td class="align-middle">
                                        <span class="ecommerce-status active" v-if="!item.IsLocked">Hoạt động</span>
                                        <span class="ecommerce-status inactive" v-if="item.IsLocked">Bị khóa</span>
                                    </td>
                                    <td class="actions">

                                        <div class="btn-group flex-wrap">
                                            <button type="button" class="mb-1 mt-1 mr-1 btn btn-default dropdown-toggle btn-sm" data-toggle="dropdown">
                                                <i class="fas fa-cog"></i>
                                                <span class="caret"></span>
                                            </button>
                                            <div class="dropdown-menu" role="menu">
                                                <a class="dropdown-item text-1" href="#"> <i class="fas fa-info"></i> Thông tin</a>
                                                <a class="dropdown-item text-1" href="javascript:void(0);" @click="ChangePassword(item)"><i class="fas fa-user-lock"></i> Đổi mật khẩu</a>
                                                <a v-if="!item.IsLocked" class="dropdown-item text-1" href="javascript:void(0);" @click="Lock(item)"><i class="fas fa-lock"></i> Khóa</a>
                                                <a v-if="item.IsLocked" class="dropdown-item text-1" href="javascript:void(0);" @click="UnLock(item)"><i class="fas fa-lock-open"></i> Mở khóa</a>
                                                <a class="dropdown-item text-1" href="#"><i class="fas fa-check"></i> Phân quyền</a>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </section>

            </div>
        </div>

        <vue-modal v-model="ShowModalPassword" :title="'Đổi mật khẩu: ' + SelectedUser.UserName" :enableClose="false">
            <change-password :UserId="SelectedUser.Id" @close="CloseModal"></change-password>
        </vue-modal>
        <vue-modal v-model="ShowModalCreateOrUpdate" :title="'Đổi mật khẩu: ' + SelectedUser.UserName" :enableClose="false">
            <create-or-update :UserId="SelectedUserId" @close="CloseModal"></create-or-update>
        </vue-modal>
    </div>
</template>
<script>
    import DataTableMixin from '../shared/mixins/mx_datatable';

    import DateRangePicker from 'vue2-daterange-picker';
    //you need to import the CSS manually
    import 'vue2-daterange-picker/dist/vue2-daterange-picker.css';

    // Import component
    import Loading from 'vue-loading-overlay';
    // Import stylesheet
    import 'vue-loading-overlay/dist/vue-loading.css';

    import VueModal from '@kouts/vue-modal';
    import '@kouts/vue-modal/dist/vue-modal.css';

    import ChangePassword from './changepassword';
    import CreateOrUpdate from './createorupdate';

    import Api from './api';

    //const SHOW_CHANGE_PASSWORD = 1,
    //    SHOW_CREATE_OR_UPDATE = 2,
    //    CLOSED = 0;

    export default {
        mixins: [DataTableMixin],
        components: { DateRangePicker, Loading, VueModal, ChangePassword, CreateOrUpdate },
        created() {

        },
        mounted() {
            this.SearchModel.Pagination = this.Pagination;
            this.SearchModel.Sort = this.Sort;
            this.LoadData();
        },
        data() {
            return {
                IsLoading: false,
                ShowModal: 1,
                ShowModalPassword: false,
                ShowModalCreateOrUpdate: false,
                SelectedUser: {},
                SelectedUserId: 0,
                DateRange: {
                    startDate: new Date(),
                    endDate: new Date()
                },
                SearchModel: {
                    Pagination: null,
                    Sort: null,
                    Search: {
                        PredicateObject: {
                            Keyword: '',
                            CreatedStart: null,
                            CreatedEnd: null
                        }
                    }
                }
            };
        },
        methods: {
            FrmSearchSubmit(e) {
                e.preventDefault();
                this.Pagination.PageIndex = 1;
                this.LoadData();
            },
            LoadData() {
                this.IsLoading = true;
                //console.log(JSON.parse(JSON.stringify(this.SearchModel)));
                var params = JSON.parse(JSON.stringify(this.SearchModel));
                //console.log(params);
                this.$http.post(Api.Search, params).then(r => {
                    this.IsLoading = false;
                    this.LoadDataSuccess(r);

                }).catch(error => {
                    this.IsLoading = false;
                    this.$toast.error('Không thể kết nối tới máy chủ ', {
                        timeout: 5000
                    });
                });
            },
            LoadDataSuccess(r) {
                this.Items = [];
                if (r.data.Items) {
                    this.Pagination.Total = r.data.TotalRecord;
                    this.Items = r.data.Items;
                }
                else {
                    this.$toast.error('Không thể kết nối tới hệ thống ', {
                        timeout: 5000
                    });
                }
            },
            ChangePassword(user) {
                this.SelectedUser = user;
                this.ShowModal = 1;
            },
            CreateOrUpdate(user) {
                if (user != null && user != undefined && user.Id > 0) {
                    //cập nhật thông tin người dùng
                } else {
                    //tạo mới người dùng
                }
                this.ShowModal = 2;
            },
            CloseModal() {
                this.ShowModal = 0;
                this.LoadData();
            },
            DateSelected(dates) {
                if (dates.startDate != null) {
                    this.SearchModel.Search.PredicateObject.CreatedStart = dates.startDate;
                }
                if (dates.endDate != null) {
                    this.SearchModel.Search.PredicateObject.CreatedEnd = dates.endDate;
                }
            },
            Lock(user) {
                if (user != null) {
                    var cf = confirm("Bạn chắc chắn muốn khóa tài khoản: " + user.UserName);
                    if (cf) {
                        var lockModel = {
                            UserId: user.Id
                        };
                        this.IsLoading = true;
                        this.$http.post(Api.Lock, lockModel).then(r => {
                            var data = r.data;
                            if (data.Result === 1) {
                                this.$toast.success('Khóa người dùng thành công!', {
                                    timeout: 2000
                                });
                            } else {
                                this.$toast.error('Khóa người dùng thất bại, lý do: ' + data.Message, {
                                    timeout: 5000
                                });
                            }
                            this.IsLoading = false;
                            this.LoadData();
                        }).catch(error => {
                            this.$toast.error('Không thể kết nối tới máy chủ:' + error, {
                                timeout: 5000
                            });
                            this.IsLoading = false;
                        });
                    }
                }
                

            },
            UnLock(user) {
                if (user != null) {
                    var cf = confirm("Bạn chắc chắn muốn mở khóa tài khoản: " + user.UserName);
                    if (cf) {
                        var lockModel = {
                            UserId: user.Id
                        };
                        this.IsLoading = true;
                        this.$http.post(Api.UnLock, lockModel).then(r => {
                            var data = r.data;
                            if (data.Result === 1) {
                                this.$toast.success('Mở khóa người dùng thành công!', {
                                    timeout: 2000
                                });
                            } else {
                                this.$toast.error('Mở khóa người dùng thất bại, lý do: ' + data.Message, {
                                    timeout: 5000
                                });
                            }
                            this.IsLoading = false;
                            this.LoadData();
                        }).catch(error => {
                            this.$toast.error('Không thể kết nối tới máy chủ:' + error, {
                                timeout: 5000
                            });
                            this.IsLoading = false;
                        });
                    }
                }
                
            }
        },
        watch: {
            ShowModal: function (nval) {
                if (nval === 1) {
                    this.ShowModalPassword = true;
                    this.ShowModalCreateOrUpdate = false;
                } else if (nval === 2) {
                    this.ShowModalPassword = false;
                    this.ShowModalCreateOrUpdate = true;
                }
                else if (nval === 0) {
                    this.ShowModalPassword = false;
                    this.ShowModalCreateOrUpdate = false;
                }
            }
        }
    }
</script>


<style>
    .calendars .ranges {
        padding: 5px 0;
    }
</style>