<template>
	<div class="content">
		<div class="">
			<div class="page-header-title">
				<h4 class="page-title">{{form.name}}</h4>
			</div>
		</div>

		<div class="page-content-wrapper ">
			<div class="container-fluid">
				<div class="row">
					<div class="col-sm-12">
						<form
							ref="form"
							class="form1"
							id="form1"
							autocomplete="off"
							data-parsley-validate>
							<div class="card">
								<div class="card-body">
									<div class="form-group row">
										<label class="col-md-2 control-label">Name</label>
										<div class="col-md-10">
											<input
												type="text"
												class="form-control"
												name="name"
												v-model="form.name"
												data-parsley-required="true"
												data-parsley-error-message="Please enter the name"
												placeholder="name">
										</div>
									</div>
									<div class="form-group row">
										<label class="col-md-2 control-label">New User Default Role</label>
										<div class="col-md-10">
											<select2
												:items="roleLists"
												:option="{ 'placeholder': 'Please select the user role', 'allowClear': true }"
												v-model="form.setting.defaultRole"
												:required="true"
												required-message="Please selelct the user role"
												:multiple="false">
											</select2>
										</div>
									</div>

									<div class="form-group row">
										<label class="col-md-2 control-label"></label>
										<div class="col-md-10">
											<div class="d-flex justify-content-between">
												<div>
													<button
														type="button"
														class="btn btn-primary waves-effect waves-light"
														@click="submit">
														Save
													</button>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</form>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'general-setting',
		data: () => ({
			form: {
				id: null,
				name: '',
				type: 'general',
				setting: {},
			},
			roleLists: [],
		}),
		components: {
			select2: () => import('../common/select2.vue')
		},
		mounted () {
			this.getSetting();
			this.getUserRoleList();
			this.initFormValidate();
		},
		methods: {
			initFormValidate () {
				this.$form = $(this.$el.querySelector('#form1'));
			},
			getSetting () {
				axios.get(`/api/setting/general`)
					.then(response => {
						if (response.status === 200 && response.data) {
							this.form = response.data.fields;
							this.form.setting = this.form.general ? this.form.general[0] : {};
							this.form.id = response.data.id;
						}
					}).catch((e) => {
						console.error(e);
					});
			},
			submit: function () {
				if (!this.$form.parsley().validate()) {
					return false;
				}

				let url = '/api/setting/update/';

				axios.post(url, this.form)
					.then((response) => {
						if (response.status === 200 && response.data) {
							let message = 'Edit success';
							swal (message, '', 'success');
							this.form = response.data.fields;
							this.form.id = response.data.id;
						}
					});
			},
			getUserRoleList () {
				axios.get('/api/role/list')
					.then(response => {
						if (response.status === 200 && response.data) {
							this.roleLists = response.data.map((item) => {
								return {
									id: item._id,
									name: item.name
								};
							});
						}
					}).catch(e => {
						console.error(e);
					});
			}
		}
	}
</script>