<template>
    <div>
        <form @submit.prevent="ChangePassword" id="frmChangePass" class="form">
            <loading :active.sync="IsLoading" :is-full-page="false"></loading>
            <div class="form-group">
                <label class="control-label">Mật khẩu mới</label>
                <input 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 class="form-group">
                <label class="control-label">Nhập lại mật khẩu mới</label>
                <input 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 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>
                    <button class="btn btn-outline-danger" type="button" @click="Cancel">
                        <i class="fas fa-remove"></i>
                        Bỏ qua
                    </button>
                </div>
            </div>
        </form>
    </div>
</template>
<script>
    // Import component
    import Loading from 'vue-loading-overlay';
    // Import stylesheet
    import 'vue-loading-overlay/dist/vue-loading.css';
    import Api from './api';


    export default {
        components: { Loading },
        mounted() {
            console.log('vao mounted');
            console.log(this.UserId);
        },
        props: {
            UserId: {
                type: Number,
                required: false,
                default: 0
            }
        },
        data() {
            return {
                ChangePasswordModel: {
                    UserId: this.UserId,
                    NewPassword: '',
                    RetypeNewPassword: ''
                },
                ValidationModel: {

                    NewPasswordError: false,
                    NewPasswordMsg: '',

                    RetypeNewPasswordError: false,
                    RetypeNewPasswordMsg: ''

                },
                IsLoading: false,
            }
        },
        methods: {
            ChangePassword() {
                var isValid = this.Validate();
                if (isValid) {
                    this.IsLoading = true;
                    this.$http.post(Api.SetPassword, 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.$emit('close');
                        } 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 => {
                        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.NewPassword = '';
                this.ChangePasswordModel.RetypeNewPassword = '';
            },
            Validate() {
                return this.ValidateNewPassword() && this.ValidateRetypeNewPassword();

            },
            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;
                }
            },
            Cancel() {
                this.$emit('close');
            }
        }
    }
</script>

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