<template>
    <div>
        <form @submit.prevent="Submit" class="form">
            <loading :active.sync="IsLoading" :is-full-page="false"></loading>
            <div class="form-group">
                <label class="control-label">Họ và tên:</label>
                <input v-model.trim="CreateOrUpdateModel.FullName" type="text" class="form-control form-control-modern" placeholder="Họ và tên" />
                <label class="error" v-if="!$v.CreateOrUpdateModel.FullName.required">Vui lòng nhập họ và tên.</label>
                <label class="error" v-if="!$v.CreateOrUpdateModel.FullName.minLength">Họ và tên phải có độ dài tối thiêu {{ $v.CreateOrUpdateModel.FullName.$params.minLength.min }} ký tự.</label>

            </div>
            <div class="form-group">
                <label class="control-label">Tên đăng nhập:</label>
                <input v-model="CreateOrUpdateModel.UserName" type="text" class="form-control form-control-modern" placeholder="Tên đăng nhập" />
                <label class="error" v-if="!$v.CreateOrUpdateModel.UserName.required">Vui lòng nhập tên đăng nhập.</label>
                <label class="error" v-if="!$v.CreateOrUpdateModel.UserName.minLength">Tên đăng nhập phải có độ dài tối thiêu {{ $v.CreateOrUpdateModel.UserName.$params.minLength.min }} ký tự.</label>
            </div>
            <div class="form-group">
                <label class="control-label">Mật khẩu:</label>
                <input v-model="CreateOrUpdateModel.Password" type="password" class="form-control form-control-modern" placeholder="Mật khẩu" />
                <label class="error" v-if="!$v.CreateOrUpdateModel.Password.required">Vui lòng nhập mật khẩu đăng nhập.</label>
                <label class="error" v-if="!$v.CreateOrUpdateModel.Password.minLength">Mật khẩu đăng nhập phải có độ dài tối thiêu {{ $v.CreateOrUpdateModel.Password.$params.minLength.min }} ký tự.</label>
            </div>
            <div class="form-group">
                <label class="control-label">Email:</label>
                <input v-model="CreateOrUpdateModel.Email" type="text" class="form-control form-control-modern" placeholder="Email" />
                <label class="error" v-if="!$v.CreateOrUpdateModel.Email.required">Vui lòng nhập email.</label>
                <label class="error" v-if="!$v.CreateOrUpdateModel.Email.minLength">Email phải có độ dài tối thiêu {{ $v.CreateOrUpdateModel.Email.$params.minLength.min }} ký tự.</label>
                <label class="error" v-if="!$v.CreateOrUpdateModel.Email.email">Email không hợp lệ.</label>

            </div>
            <div class="form-group">
                <label class="control-label">Số điện thoại:</label>
                <input v-model="CreateOrUpdateModel.PhoneNumber" type="text" class="form-control form-control-modern" placeholder="Số điện thoại" />
                <label class="error" v-if="!$v.CreateOrUpdateModel.PhoneNumber.numeric">Số điện thoại không hợp lệ.</label>
                <label class="error" v-if="!$v.CreateOrUpdateModel.PhoneNumber.minLength">Số điện thoại phải có độ dài tối thiêu {{ $v.CreateOrUpdateModel.PhoneNumber.$params.minLength.min }} ký tự.</label>
            </div>
            <div class="form-group">
                <label class="control-label">Địa chỉ:</label>
                <input v-model="CreateOrUpdateModel.Address" type="text" class="form-control form-control-modern" placeholder="Địa chỉ" />
            </div>
            <div class="form-group">
                <label class="control-label">Chi nhánh:</label>
                <select class="form-control mb-3">
                    <option>Option 1</option>
                    <option>Option 2</option>
                    <option>Option 3</option>
                </select>
            </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>
                        Lưu lại
                    </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';
    import { required, minLength, email, numeric } from 'vuelidate/lib/validators'

    export default {
        components: { Loading },
        mounted() {
            this.$v.$reset();
        },
        props: {

        },
        data() {
            return {
                CreateOrUpdateModel: {
                    FullName: '',
                    UserName: '',
                    Password: '',
                    Email: '',
                    PhoneNumber: '',
                    Address: '',
                    BranchId: 0
                },
                IsLoading: false,
            }
        },
        validations: {
            CreateOrUpdateModel: {
                FullName: {
                    required,
                    minLength: minLength(3)
                },
                UserName: {
                    required,
                    minLength: minLength(3)
                },
                Password: {
                    required,
                    minLength: minLength(6),
                },
                PhoneNumber: {
                    numeric,
                    minLength: minLength(10),
                },
                Email: {
                    required,
                    minLength: minLength(3),
                    email
                }
            }
            
        },
        methods: {
            Cancel() {
                this.$emit('close');
            },
            Reset() {
                this.CreateOrUpdateModel.FullName = '';
                this.CreateOrUpdateModel.UserName = '';
                this.CreateOrUpdateModel.Email = '';
                this.CreateOrUpdateModel.PhoneNumber = '';
                this.CreateOrUpdateModel.Address = '';
                this.CreateOrUpdateModel.BranchId = 0;
                this.CreateOrUpdateModel.Password = '';
            },
            Submit() {
                if (this.$v.$invalid) {
                    alert('Vui lòng điền đầy đủ thông tin');
                } else {
                    this.IsLoading = true;
                    this.$http.post(Api.CreateOrUpdate, this.CreateOrUpdateModel).then(r => {
                        var data = r.data;
                        if (data.Result === 1) {
                            this.$toast.success('Tạo tài khoản thành công', {
                                timeout: 2000
                            });
                        } else {
                            this.$toast.error('Tạo tài khoản thất bại, lý do: ' + data.Message, {
                                timeout: 5000
                            });
                        }
                        this.Reset();
                        this.IsLoading = false;
                        this.Cancel();
                    }).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;
                        this.Cancel();
                    });
                }

            }
        }
    }
</script>