<template>
    <div>
        

        <div class="row">
            <div class="col-lg-4">
                <div class="row">
                    <div class="col-12">
                        <div class="card card-modern">
                            <div class="card-body p-0">
                                <div class="widget-user-info">
                                    <div class="widget-user-info-header">
                                        <h2 class="font-weight-bold text-color-dark text-5">Xin chào, {{$store.state.user.user.Username}}</h2>
                                        <p class="mb-0">Vui lòng chọn hệ thống muốn truy cập</p>

                                        <!--<div class="widget-user-acrostic bg-primary">
                                            <span class="font-weight-bold">JD</span>
                                        </div>-->
                                    </div>
                                    <div class="widget-user-info-body">
                                        <div class="row">
                                            <div class="col-12">
                                                <!--<strong class="text-color-dark text-5">Hệ thống quản trị nội bộ</strong>-->
                                                <h5>
                                                    <a href="https://app.aisaca.com" class="btn btn-light btn-xl border font-weight-semibold text-color-dark text-3 mt-2">
                                                        Hệ thống quản lý đơn hàng
                                                    </a>
                                                </h5>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-8 pt-2 pt-xl-0 mt-4 mt-xl-0">
                <div class="row">
                    <div class="col">
                        <div class="card card-modern card-big-info">
                            
                            <div class="card-body">
                                <div class="tabs-modern row" style="min-height: 490px;">
                                    <div class="col-lg-2-5 col-xl-1-5">
                                        <div class="nav flex-column" id="tab" role="tablist" aria-orientation="vertical">
                                            <a class="nav-link active" id="changePassword-tab" data-toggle="pill"
                                               href="#changePassword" role="tab" aria-controls="changePassword" aria-selected="false"><i class="bx bx-block mr-2"></i> Đổi mật khẩu</a>
                                            <!--<a class="nav-link" id="general-tab" data-toggle="pill" href="#general" role="tab" aria-controls="general" aria-selected="true"><i class="bx bx-cog mr-2"></i> Thông tin chung</a>-->
                                        </div>
                                    </div>
                                    <div class="col-lg-3-5 col-xl-4-5">
                                        <div class="tab-content" id="tabContent">
                                            <loading :active.sync="IsLoading" :is-full-page="false"></loading>
                                            <form action="/Account/Logout" method="post" id="frmHomeLogout">
                                            </form>

                                            <div class="tab-pane fade show active" id="changePassword" role="tabpanel" aria-labelledby="usage-restriction-tab">
                                                <form @submit.prevent="ChangePassword" id="frmChangePass">
                                                    <div class="form-group row align-items-center">
                                                        <label class="col-lg-5 col-xl-3 control-label text-lg-right mb-0">Mật khẩu hiện tại</label>
                                                        <div class="col-lg-7 col-xl-6">
                                                            <input @blur="ValidateCurrentPassword" v-model="ChangePasswordModel.CurrentPassword" type="password" class="form-control form-control-modern" placeholder="Mật khẩu hiện tại" />
                                                            <span class="errorMsg" v-if="ValidationModel.CurrentPasswordError">{{ ValidationModel.CurrentPasswordMsg }}</span>
                                                        </div>
                                                    </div>
                                                    <div class="form-group row align-items-center">
                                                        <label class="col-lg-5 col-xl-3 control-label text-lg-right mb-0">Mật khẩu mới</label>
                                                        <div class="col-lg-7 col-xl-6">
                                                            <input @blur="ValidateNewPassword" v-model="ChangePasswordModel.NewPassword" type="password" class="form-control form-control-modern" placeholder="Mật khẩu mới" />
                                                            <span class="errorMsg" v-if="ValidationModel.NewPasswordError">{{ ValidationModel.NewPasswordMsg }}</span>
                                                        </div>
                                                    </div>
                                                    <div class="form-group row align-items-center">
                                                        <label class="col-lg-5 col-xl-3 control-label text-lg-right mb-0">Nhập lại mật khẩu mới</label>
                                                        <div class="col-lg-7 col-xl-6">
                                                            <input @blur="ValidateRetypeNewPassword" v-model="ChangePasswordModel.RetypeNewPassword" type="password" class="form-control form-control-modern" placeholder="Nhập lại mật khẩu mới" />
                                                            <span class="errorMsg" v-if="ValidationModel.RetypeNewPasswordError">{{ ValidationModel.RetypeNewPasswordMsg }}</span>
                                                        </div>
                                                    </div>
                                                    <div class="row justify-content-end">
                                                        <div class="col-sm-9">
                                                            <button class="btn btn-primary" type="submit">
                                                                <i class="fas fa-save"></i>
                                                                Đổi mật khẩu
                                                            </button>
                                                        </div>
                                                    </div>
                                                </form>

                                            </div>
                                            <!--<div class="tab-pane fade" id="general" role="tabpanel" aria-labelledby="general-tab">
                                                <p class="text-center">Nội dung đang cập nhật</p>
                                            </div>-->
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</template>

<script>
    import BreadCrumb from '../shared/breadcrumb';
    // Import component
    import Loading from 'vue-loading-overlay';
    // Import stylesheet
    import 'vue-loading-overlay/dist/vue-loading.css';
    
    export default {
        components: {
            'bread-crumb': BreadCrumb,
            Loading
        },
        data() {
            return {
                ChangePasswordModel: {
                    UserId: this.$store.state.user.user.UserId,
                    CurrentPassword: '',
                    NewPassword: '',
                    RetypeNewPassword: ''
                },
                ValidationModel: {
                    CurrentPasswordError: false,
                    CurrentPasswordMsg: '',

                    NewPasswordError: false,
                    NewPasswordMsg: '',

                    RetypeNewPasswordError: false,
                    RetypeNewPasswordMsg: ''

                },
                IsLoading:false,
            }
        },
        methods: {
            ChangePassword() {
                var isValid = this.Validate();
                if (isValid) {
                    this.IsLoading = true;
                    this.$http.post('/Account/ChangePassword', this.ChangePasswordModel).then(r => {
                        var data = r.data;
                        if (data.Result === 1) {
                            this.$toast.success('Đổi mật khẩu thành công', {
                                timeout: 2000
                            });
                            this.Logout();
                        } else {
                            this.$toast.error('Đổi mật khẩu thất bại, lý do: ' + data.Message, {
                                timeout: 5000
                            });
                        }
                        this.Reset();
                        this.IsLoading = false;
                    }).catch(error => {
                        console.log(error);
                        this.$toast.error('Không thể kết nối tới máy chủ:' + error, {
                            timeout: 5000
                        });
                        this.Reset();
                        this.IsLoading = false;
                    });
                }
                return false;
            },
            Reset() {
                this.ChangePasswordModel.CurrentPassword = '';
                this.ChangePasswordModel.NewPassword = '';
                this.ChangePasswordModel.RetypeNewPassword = '';
            },
            Logout() {
                $('body').append('<form id="frmHomeLogout" action="/Account/Logout" method="post"></form>')
                $('#frmHomeLogout').submit();
                console.log('da submit');
                $('#frmHomeLogout').remove();
            },
            Validate() {
                return this.ValidateCurrentPassword() && this.ValidateNewPassword() && this.ValidateRetypeNewPassword();
                
            },
            ValidateCurrentPassword() {
                if (this.ChangePasswordModel.CurrentPassword === undefined ||
                    this.ChangePasswordModel.CurrentPassword === null ||
                    this.ChangePasswordModel.CurrentPassword === '') {
                    this.ValidationModel.CurrentPasswordMsg = 'Mật khẩu hiện tại không để trống';
                    this.ValidationModel.CurrentPasswordError = true;
                    return false;
                } else {
                    this.ValidationModel.CurrentPasswordMsg = '';
                    this.ValidationModel.CurrentPasswordError = false;
                    return true;
                }
            },
            ValidateNewPassword() {
                if (this.ChangePasswordModel.NewPassword === undefined ||
                    this.ChangePasswordModel.NewPassword === null ||
                    this.ChangePasswordModel.NewPassword === '') {
                    this.ValidationModel.NewPasswordMsg = 'Mật khẩu mới không để trống';
                    this.ValidationModel.NewPasswordError = true;
                    return false;
                } else {
                    this.ValidationModel.NewPasswordMsg = '';
                    this.ValidationModel.NewPasswordError = false;
                    return true;
                }
            },
            ValidateRetypeNewPassword() {
                if (this.ChangePasswordModel.RetypeNewPassword === undefined ||
                    this.ChangePasswordModel.RetypeNewPassword === null ||
                    this.ChangePasswordModel.RetypeNewPassword === '') {
                    this.ValidationModel.RetypeNewPasswordMsg = 'Xác nhận mật khẩu mới không để trống';
                    this.ValidationModel.RetypeNewPasswordError = true;
                    return false;
                } else {
                    if (this.ChangePasswordModel.RetypeNewPassword !== this.ChangePasswordModel.NewPassword) {
                        this.ValidationModel.RetypeNewPasswordMsg = 'Xác nhận mật khẩu không khớp';
                        this.ValidationModel.RetypeNewPasswordError = true;
                        return false;
                    }
                    this.ValidationModel.RetypeNewPasswordMsg = '';
                    this.ValidationModel.RetypeNewPasswordError = false;
                    return true;
                }
            }
        }
    }
</script>

<style scoped>
    span.errorMsg {
        color: #dc3545;
        font-size: smaller;
    }
</style>
