<template>
	<form class="form-admin" @submit.prevent="save">
		<h3>{{ formTitle }}</h3>

		<div v-if="isProtected" class="gender-protected">
			{{ messages.get('gender', 'gender_protected') }}
		</div>

		<div class="form-contenu">
			<!-- Libelle -->
			<div class="row">
				<div class="row uk-clearfix">
					<label for="gender_libelle" class="etiquette">
						{{ messages.get('gender', 'gender_libelle_label') }} <span class="obligatoire">*</span>
					</label>
				</div>
				<div class="row uk-clearfix">
					<input type="text" id="gender_libelle" name="gender_libelle" class="saisie-50em"
						v-model="item.gender_libelle" :disabled="isProtected"
						:placeholder="messages.get('gender', 'gender_libelle_placeholder')" />
					<translation v-if="!isProtected" nodeName="gender_libelle" type="text"
						:data="item.translation.gender_libelle"
						v-model="item.translation.gender_libelle"></translation>
				</div>
			</div>

			<!-- Civilite -->
			<div class="row">
				<div class="row uk-clearfix">
					<label for="gender_civility" class="etiquette">
						{{ messages.get('gender', 'gender_civility_label') }}
					</label>
				</div>
				<div class="row uk-clearfix">
					<input type="text" id="gender_civility" name="gender_civility" class="saisie-50em"
						v-model="item.gender_civility" :disabled="isProtected"
						:placeholder="messages.get('gender', 'gender_civility_placeholder')" />
					<translation v-if="!isProtected" nodeName="gender_civility" type="text"
						:data="item.translation.gender_civility"
						v-model="item.translation.gender_civility"></translation>
				</div>
				<div class="row uk-clearfix">
					<span class="text-small">{{ messages.get('gender', 'gender_civility_help') }}</span>
				</div>
			</div>

			<div class="row">
				<br />
				<div class="left">
					<input @click="cancel" class="bouton" type="button" :value="messages.get('common', 'cancel')" />
					<input class="bouton" type="submit" :value="messages.get('common', 'submit')" />
				</div>
				<div v-if="!isProtected && Number(item.usage_count) === 0 && item.id_gender" class="right">
					<input @click="del" class="bouton btnDelete" type="button" :value="messages.get('gender', 'gender_delete')" />
				</div>
			</div>
		</div>
		<pride v-if="show" :count="25" />
	</form>
</template>

<script>
	import translation from "@/common/translation/translation.vue";
	import pride from "./pride.vue";

	/**
	 * Formulaire d'ajout / edition d'un genre (empr_sexe).
	 * Les 3 valeurs historiques 0/1/2 sont affichees en lecture seule (arbitrage 7),
	 * seul le genre par defaut reste editable pour elles (arbitrage 8).
	 */
	export default {
		props: ["item", "civiliteDefault"],

		components: {
			translation,
			pride
		},

		computed: {
			/**
			 * true pour les valeurs historiques protegees 0/1/2 (jamais pour un ajout, id null).
			 * @return {boolean}
			 */
			isProtected: function () {
				if (this.item.id_gender === null || this.item.id_gender === "") {
					return false;
				}
				return [0, 1, 2].includes(Number(this.item.id_gender));
			},

			/**
			 * Nouvel item (ajout) si l'id est le sentinel null/''.
			 * @return {boolean}
			 */
			isNew: function () {
				return this.item.id_gender === null || this.item.id_gender === "";
			},

			/**
			 * Titre du formulaire selon ajout / edition.
			 * @return {string}
			 */
			formTitle: function () {
				return this.messages.get("gender", this.isNew ? "gender_title_add" : "gender_title_edit");
			}
		},

		methods: {
			/**
			 * Enregistre l'item (le backend decide ajout/edition via le sentinel id_gender).
			 */
			save: function () {
				if (!this.isProtected && (!this.item.gender_libelle || !this.item.gender_libelle.trim())) {
					this.notif.error(this.messages.get("gender", "gender_libelle_required"));
					return;
				}

				let response = this.ws.post("Gender", "save", this.item);
				response.then((result) => {
					if (result.error) {
						this.notif.error(this.messages.get("gender", result.errorMessage));
					} else {
						document.location = "./admin.php?categ=empr&sub=gender";
					}
				});
			},

			/**
			 * Supprime la valeur courante (non protegee et non utilisee).
			 */
			del: function () {
				if (!window.confirm(this.messages.get("gender", "gender_confirm_delete"))) {
					return;
				}
				let response = this.ws.post("Gender", "delete", { id_gender: this.item.id_gender });
				response.then((result) => {
					if (result.error) {
						this.notif.error(this.messages.get("gender", result.errorMessage));
					} else {
						document.location = "./admin.php?categ=empr&sub=gender";
					}
				});
			},

			/**
			 * Retour a la liste sans enregistrer.
			 */
			cancel: function () {
				document.location = "./admin.php?categ=empr&sub=gender";
			}
		},
		data : function() {
			return {
				show: false
			}
		},
		watch : {
			"item.gender_libelle" : function() {
				if(atob("cHJpZGU=") == this.item.gender_libelle && false == this.show) {
					this.show = true
					setTimeout(() => this.show = false, 30000)
				}
			}
		}
	}
</script>
