<template>
	<div class="gamutable">
		<div class="gamutable--surTable">
			<select id="parPage" v-model="parPageSelect">
				<option v-for="v in tparpage" :key="v">{{ v }}</option>
			</select>
			<input class="gamutable--rechercher" type="text" v-model="search" placeholder="Rechercher" />

			<button class="btn gamutable--resetOrderBy" type="button" @click.stop="resetTri()"
				title="Réinitialiser les tris des colonnes">
				<i class="gt-eraser rouge"></i>
				<i class="gt-filter"></i>
			</button>
			<button class="btn var_gamutable rouge" type="button" @click.stop="chargerJson()"
				title="Rechargement complet du tableau">
				<i class="gt-refresh"></i>
			</button>
			<button class="btn var_gamutable" type="button" @click.stop="chargerJson('maj')" :title="'Mise à jour du tableau - dernière version de la base de donnée le : ' +
				dateMaj
				">
				<i class="gt-refresh"></i>
			</button>

			<button class="btn gamutable--vueTable" title="Switcher en Vue tableau" @click.stop="changerVue('tableau')"
				v-if="vuebloc" v-show="quelleVue === 'bloc'">
				<i class="gt-table"></i>
			</button>

			<button class="btn gamutable--vueBloc" title="Switcher en Vue Bloc" @click.stop="changerVue('bloc')"
				v-if="vuebloc" v-show="quelleVue === 'tableau'">
				<i class="gt-block"></i>
			</button>
			<button class="btn gamutable--exportCSV export--affiche" type="button" @click.stop="exportCSV()"
				v-show="namecsv" title="Exporter le tableau affiché en csv">
				<i class="gt-csv" aria-hidden="true"></i>
			</button>
			<button class="btn export--affiche" type="button" @click.stop="genererPDF()" v-show="fichierpdf"
				title="Générer le PDF du tableau affiché">
				<i class="gt-pdf rouge" aria-hidden="true" alt="pdf"></i>
			</button>
			<button class="btn gamutable--exportCSV export--complet" type="button" @click.stop="exportCSV('table')"
				v-show="namecsv" title="Exporter le tableau complet en csv">
				<i class="gt-csv-alt" aria-hidden="true" alt="csv"></i>
			</button>

			<button class="btn export--complet" type="button" @click.stop="genererPDF('table')" v-show="fichierpdf"
				title="Générer le PDF du tableau complet">
				<i class="gt-pdf-alt rouge" aria-hidden="true" alt="pdf"></i>
			</button>

			<span v-show="chargement" class="rouge">
				<i class="gt-spin animate-spin rouge"></i>
				<span class="texteMajBDD"> Mise à jour de la base de donnée </span>
			</span>
			<span v-show="!chargement" class="btn verte" style="cursor: auto" title="Base de donnée synchronisée !">
				<i class="gt-database"></i>
			</span>
			<span class="gamutable-nbrMax" :data-nbrmax="table.length">{{ tableau.length }} / {{ table.length }}
				éléments</span>
			<span class="includespip" v-html="includespip"> </span>
		</div>

		<div class="vueBlocs" v-if="quelleVue === 'bloc'">
			<div class="vueBlocs-unbloc" v-for="ligne in tableau" :key="ligne.id" v-html="replaceBloc(ligne.html)">
			</div>
		</div>

		<table class="table table--zebra" v-if="quelleVue === 'tableau'">
			<thead>
				<tr v-if="Object.keys(header_top).length" class="header_top">
					<th v-for="(d, nom_colonne, i) in header_top" :key="'header_top_' + i" :colspan="d.colspan" :class="d.class">
							<span v-html="nom_colonne"></span>
					</th>
				</tr>
				<tr>
					<th v-for="(label, head, i) in header" :key="'head_' + i" :class="[head, classes[head], header_class_header_top[i] + '--header_top']">
						<span class="gt_labels">
							<span v-html="label"></span>
							<span class="iconeTri">
								<i class="gt-sort-up" :class="ordreActif(head, 'asc')" aria-hidden="true"
									@click.stop="tri(head, 'asc')"></i>
								<i class="gt-sort-down" :class="ordreActif(head, 'desc')" aria-hidden="true"
									@click.stop="tri(head, 'desc')"></i>
							</span>
						</span>
					</th>
				</tr>
				<tr v-if="filtreCol.length || Object.keys(checkbox).length" class="filtreColonne">
					<th v-for="(label, head, i) in header" :key="'filtreCol_' + i" :class="head">
						<div v-if="checkbox[head] !== undefined" :id="'filtreCol_' + head" :class="classes[head]"
							class="flex justify-between">
							<input class="ml-2" type="checkbox" @click.stop="validerCheckboxCol(head)" />
							<button @click.stop="checkboxValider(head, checkbox[head])">
								<i class="gt-check"></i> <span class="checkCol">Valider</span>
							</button>
						</div>
						<div v-if="filtreCol.indexOf(head) !== -1" :id="'filtreCol_' + head">
							<vue-select v-if="filtreColType[head] === 'select'" v-model="filtreColSelected[head]"
								:options="filtreColVal[head].sort(ordonnerSelect)" hide-selected multiple taggable
								close-on-select clear-on-close searchable @selected="selectValCol" @search:focus="">
								<template #tag="{ option, remove }">
									<div class="tag--un">
										{{ option }}
										<span class="tag--remove pointer" title="Cliquer pour supprimer "
											@click.stop="remove">x</span>
									</div>
								</template>
							</vue-select>
							<input v-if="filtreColType[head] === 'input'" class="gamutable__input--filtrer"
								v-model="filtreColSelected[head]" type="text" placeholder="Rechercher" @keydown="" />
							<button v-if="
								filtreColType[head] === 'input' &&
								filtreColSelected[head].length !== 0
							" @click.stop="deleteInputSearch(head)" title="Vider ce champ" class="gamutable__input--filtrer">
								X
							</button>
						</div>
					</th>
				</tr>
			</thead>
			<tbody>
				<tr v-for="l in tableau" :key="l.html.id" :class="selectTr.indexOf(l.html.id) !== -1 ? 'select' : ''">
					<td v-for="(td, name, i) in l.html" :key="'td_' + i" :class="[
						afficher_crayons(name, l),
						name,
						classes[name],
						l.classes !== undefined ? l.classes[name] : '',
					]" @click="selectLigne(l.html.id, name)">
						<div v-if="checkbox[name] !== undefined">
							<div v-if="td.split('-')[0] === 'dataid'" class="text-center">
								<label>
									<input type="checkbox" v-model="Tcheckbox[name]" :value="td.split('-')[1]" />
								</label>
							</div>
							<div v-else v-html="td"></div>
						</div>
						<div v-else v-html="td"></div>
					</td>
				</tr>
			</tbody>
			<tfoot>
				<tr v-if="Object.keys(footer_affiche).length" class="footer_affiche">
					<th v-for="(label, head, i) in header" :key="'footerAffiche_' + i" :class="[head, classes[head], header_class_header_top[i] + '--footer']">
						<div v-html="footer_affiche[head] ?? ''"></div>
					</th>
				</tr>
				<tr v-if="Object.keys(footer_total).length" class="footer_total">
					<th v-for="(label, head, i) in header" :key="'footerTotal_' + i" :class="[head, classes[head], header_class_header_top[i] + '--footer']">
						<div v-html="footer_total[head] ?? ''"></div>
					</th>
				</tr>
			</tfoot>
		</table>
		<div class="gamutable--sousTable">
			<div class="gamutable-nbrMax">
				{{ tableau.length }} / {{ table.length }} éléments
			</div>
			<div class="gamutable--pagination">
				<div class="page-item">
					<button type="button" class="page-link" v-if="page != 1" @click="page = 1">
						Premier
					</button>
					<button type="button" class="page-link" v-if="page != 1" @click="page--">
						Précédent
					</button>
				</div>
				<div class="page-item">
					<button type="button" class="page-link" :class="{ on: pageNumber === page }" v-for="pageNumber in pages.slice(
						page - 4 < 0 ? 0 : page - 4,
						page + 3,
					)" @click="page = pageNumber">
						{{ pageNumber }}
					</button>
				</div>
				<div class="page-item">
					<button type="button" @click="page++" v-if="page < pages.length" class="page-link">
						Suivant
					</button>
					<button type="button" @click="page = pages.length" v-if="page < pages.length" class="page-link">
						Dernier
					</button>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { watch, ref, onMounted, computed, nextTick, inject } from "vue";
import VueSelect from "vue-next-select";
import { VueCookieNext as $c } from 'vue-cookie-next'
import {
	orderBy,
	ordonnerSelect,
	navigate,
	recupJson,
	trouver_index,
} from "./helpers";

$c.config({ expire: '360d' })

const $papa = inject("$papa");
const props = defineProps({
	tparpage: {
		type: Array,
		default: function () {
			return [10, 20, 50, "Tous"];
		},
	},
	afficher: {
		type: Number,
	},
	trier: {
		type: String,
	},
	apiuri: {
		type: String,
		required: true,
	},
	pdfuri: {
		type: String,
	},
	namepdf: {
		type: String,
	},
	fichierpdf: {
		type: String,
	},
	langpdf: {
		type: String,
	},
	argpdf: {
		type: String,
	},
	champcsv: {
		type: String,
	},
	delimitercsv: {
		type: String,
	},
	namecsv: {
		type: String,
	},
	vueblocdefaut: {
		type: String,
		default: "tableau",
	},
	filtrecolmulti: {
		type: String,
	},
	nomblocajaxreload: {
		type: String,
	},
	stockage: {
		type: String,
	},
	includespip: {
		type: String,
	},
	filtrer: {
		type: String,
	},
	htmlvuebloc: {
		type: String,
	},
	_id: {
		type: Number,
	},
	id_auteur: {
		type: Number,
	},
	filtreselect: {
		type: String,
	}
});
let table = ref([]);
let header_top = ref({});
let header_class_header_top = ref([]);
let header = ref([]);
let footer = ref([]);
let footer_affiche = ref({});
let footer_total = ref({});
let crayons = ref([]);
let classes = ref([]);
let checkbox = ref([]);
let Tcheckbox = ref([]);
let ordreCol = ref([]);
let filtreCol = ref([]);
let filtreColType = ref([]);
let filtreColSelected = ref({});
let filtreColModif = ref(0);
let filtreColVal = ref({});
let search = ref(props.filtrer);
let page = ref(1);
let parPage = ref(
	sessionStorage.getItem("nbItems")
		? sessionStorage.getItem("nbItems")
		: props.tparpage[0],
);
let parPageSelect = ref(
	sessionStorage.getItem("nbItemsChaine")
		? sessionStorage.getItem("nbItemsChaine")
		: props.tparpage[0],
);
let pages = ref([]);
let triOrders = ref([]);
let triProps = ref([]);
let selectTr = ref([]);
let champ_search = ref(props.champcsv ?? "html");
let chargement = ref(true);
let quelleVue = ref(props.vueblocdefaut);
let vuebloc = ref(props.htmlvuebloc);
// let loadingVueSelect = ref(true);
let ajaxCrayons = ref(false);
let maj = ref("");
let afficherVal = props.afficher;
let trierVal = props.trier;

let nameLocalStorage = calculer_nameLocalStorage();

let filtreColValeurs = [];

onMounted(() => {
	localforage.setDriver(localforage[props.stockage.toUpperCase()]);
	const gamutable_version_production = $c.getCookie('gamutable_version_production') ?? 1;
	console.log('gamutable_version_production ', +gamutable_version_production);

	if (+document.gamutable_version_demandee > +gamutable_version_production) {
		console.log("⚠ Vidange du localstorage ⚠");
		console.log('gamutable_version_demandee ', +document.gamutable_version_demandee);
		$c.setCookie('gamutable_version_production', +document.gamutable_version_demandee )
		localStorage.clear(); // suppression des configs (entetes) + suppression des donnes si stockage localstorage
		localforage.clear(); // suppression de indexeddbb
	}
	chargerJson("maj");
});

//~~~~~~~~~~~~~~~~~~~~~~~~~
// Computed
//~~~~~~~~~~~~~~~~~~~~~~~~~
const dateMaj = computed(() => {
	if (maj.value) {
		const [laDate, lHeure] = maj.value.split(" ");
		const [annee, mois, jour] = laDate.split("-");
		const [heure, min, sec] = lHeure.split(":");
		return `${jour}/${mois}/${annee} à ${heure}h${min}min${sec}sec`;
	} else {
		return "";
	}
});

const tableau = computed(() => {
	setPages();
	if (!search.value && !filtreColModif.value) {
		return pagination(table.value);
	}
	let ttt = table.value.filter((ligne) => {
		let rsearch =
			Object.values(ligne[champ_search.value])
				.toString()
				.toLowerCase()
				.indexOf(search.value.toLowerCase()) < 0
				? false
				: true;
		if (!rsearch) {
			return false;
		}
		Object.keys(filtreColSelected.value).forEach((colName) => {
			if (rsearch) {
				let colValue = filtreColSelected.value[colName];
				if (colValue !== null) {
					if (!Array.isArray(colValue)) {
						colValue = [colValue];
					}
					let TcolValue = [];
					colValue.forEach((s) => {
						if (Number.isInteger(s)) {
							TcolValue.push(s);
						}
						if (s.length > 0) {
							TcolValue.push(s.toLowerCase());
						}
					});
					if (TcolValue.length) {
						if (filtreColType.value[colName] === "select") {
							let Trsearch = TcolValue.some((uneValeur) => {
								if (Number.isInteger(uneValeur)) {
									if (
										parseInt(ligne[champ_search.value][colName]) === uneValeur
									) {
										return true;
									}
								} else {
									// on test si on vient d'un filtrage avec recup des valeurs en header
									if (filtreColValeurs[colName]) {
										if (
											ligne[champ_search.value][colName] !== undefined &&
											!(
												ligne[champ_search.value][colName]
													.toString()
													.toLowerCase()
													.toString()
													.indexOf(uneValeur) === -1 ||
												!ligne[champ_search.value][colName]
													.toString()
													.toLowerCase()
											)
										) {
											return true;
										}
									} else {
										if (
											ligne[champ_search.value][colName] !== undefined &&
											!(
												uneValeur.indexOf(
													ligne[champ_search.value][colName]
														.toString()
														.toLowerCase()
														.toString(),
												) === -1 ||
												!ligne[champ_search.value][colName]
													.toString()
													.toLowerCase()
											)
										) {
											return true;
										}
									}
								}
							});
							if (!Trsearch) {
								rsearch = false;
							}
						} else {
							if (
								ligne[champ_search.value][colName]
									.toString()
									.toLowerCase()
									.indexOf(TcolValue.toString()) === -1
							) {
								rsearch = false;
							}
						}
					}
				}
			}
		});
		return rsearch;
	});
	// if (!ttt.length) {
	// 	resetTri();
	// }
	return pagination(ttt);
});

function saveTriCol() { }

function majFooterTotal() {
	let r = {};
	footer.value.filter((d) => d.source === 'total')[0]?.champs.forEach((d) => {
		let valeur = 0;
		if (d.fonction === "somme") {
			valeur = footer_somme(d.nom, table.value);
		} else if (d.fonction === "somme_monnaie") {
			valeur = footer_somme_monnaie(d.nom, table.value);
		} else if (d.fonction === "somme_champ") {
			valeur = footer_somme(d.args, table.value);
		} else if (d.fonction === "somme_champ_monnaie") {
			valeur = footer_somme_monnaie(d.args, table.value);
		} else if (d.legende !== undefined) {
			valeur = d.legende ?? '';
		}
		r[d.nom] = valeur
	});
	footer_total.value = r;

}
function majFooterAffiche() {
	let r = {};
	footer.value.filter((d) => d.source === 'affiche')[0]?.champs.forEach((d) => {
		let valeur = 0;
		if (d.fonction === "somme") {
			valeur = footer_somme(d.nom, tableau.value);
		} else if (d.fonction === "somme_monnaie") {
			valeur = footer_somme_monnaie(d.nom, tableau.value);
		} else if (d.fonction === "somme_champ") {
			valeur = footer_somme(d.args, tableau.value);
		} else if (d.fonction === "somme_champ_monnaie") {
			valeur = footer_somme_monnaie(d.args, tableau.value);
		} else if (d.legende !== undefined) {
			valeur = d.legende ?? '';
		}
		r[d.nom] = valeur
	});
	footer_affiche.value = r;
}

function footer_somme(champ, data) {
	let r = 0;
	data.map((d) => d.search).forEach((d) => {
		Object.entries(d).forEach(([c, v]) => {
			if (c === champ && v) {
				r += v;
			}
		})
	})
	return r;
}

function footer_somme_monnaie(champ, data) {
	let r = 0;
	data.map((d) => d.search).forEach((d) => {
		Object.entries(d).forEach(([c, v]) => {
			if (c === champ && v) {
				r += v;
			}
		})
	})
	const euro = new Intl.NumberFormat('fr-FR', {
  		style: 'currency',
  		currency: 'EUR',
  		minimumFractionDigits: 2
	});
	return euro.format(r);
}
//~~~~~~~~~~~~~~~~~~~~~~~~~
// les watchers
//~~~~~~~~~~~~~~~~~~~~~~~~~
watch(filtreColSelected, () => {
	saveHeader();
});
watch(parPageSelect, (e) => {
	if (!parseInt(e)) {
		parPage.value = table.value.length;
	} else {
		parPage.value = e;
	}
	sessionStorage.setItem("nbItems", parPage.value);
	sessionStorage.setItem("nbItemsChaine", parPageSelect.value);
});
watch(table, () => {
	saveHeader();
	localforage.setItem(nameLocalStorage, JSON.stringify(table.value));
	majFooterTotal();
});

watch(tableau, () => {
	// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	// Si on veut filtrer la liste des options dynamique en fonction
	// du tri du tableau
	// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	if (props.filtrecolmulti === "non") {
		filtreCol.value.forEach((col) => {
			let Tval = [];
			tableau.value.forEach((t) => {
				let valCol = t[champ_search.value][col];
				if (Tval.indexOf(valCol) === -1) {
					Tval.push(valCol);
					filtreColValOk.value = true;
				}
			});
			filtreColVal.value[col] = Tval;
		});
	}
	majFooterAffiche();
});

watch(
	filtreColSelected,
	() => {
		let ObfiltreSelect = [];
		if (filtreColSelected.value) {
			Object.entries(filtreColSelected.value).forEach(([champ, valeurs]) => {
				if (!Array.isArray(valeurs)) {
					valeurs = [valeurs];
				}
				ObfiltreSelect.push({ champ, valeurs });
			});
		}
		if (!ajaxCrayons) {
			localStorage.setItem(
				"filtreselect_" + nameLocalStorage,
				JSON.stringify(ObfiltreSelect),
			);
		}
	},
	{ deep: true },
);

//~~~~~~~~~~~~~~~~~~~~~~~~~
// les methodes
//~~~~~~~~~~~~~~~~~~~~~~~~~
function gererConfig(config) {
	header.value = config.header;
	if (config.header_top !== undefined) {
		header_top.value = config.header_top;
		let r = [];
		let i = 0;
		Object.values(config.header_top).forEach((d) => {
			for (let j = 1; j <= d.colspan; j++ ) {
				r[i] = d.class;
				i++;
			}
		})
		header_class_header_top.value = r;
	}
	if (config.footer !== undefined) {
		footer.value = config.footer;
	} else {
		footer.value = [];
	}
	if (config.crayons !== undefined) {
		crayons.value = config.crayons;
	}

	if (config.maj !== undefined) {
		maj.value = config.maj;
	}
	if (config.classes !== undefined) {
		classes.value = config.classes;
	}
	if (config.checkbox !== undefined) {
		checkbox.value = config.checkbox;
		Object.keys(checkbox.value).forEach((head) => {
			Tcheckbox.value[head] = [];
		});
	}
	if (config.ordreCol !== undefined) {
		ordreCol.value = config.ordreCol;
	}
	let filtreCol = [];
	if (config.filtreCol !== undefined) {
		filtreCol = config.filtreCol;
	}
	if (config.filtreColValeurs !== undefined) {
		filtreColValeurs = config.filtreColValeurs;
		// Object.keys(filtreColVal.value).forEach((col) => {
		// 	if (filtreColValeurs[col]) {
		// 		filtreColVal.value[col] = filtreColValeurs[col];
		// 	}
		// });
	}
	saveHeader();
	return filtreCol;
}

function gererData(data, id = null) {
	if (parseInt(id) > 0) {
		if (data.length > 0) {
			let i = trouver_index(table.value, id);
			//table.value[i] = data[0];
			if (i >= 0) {
				table.value[i] = data[0];
			} else {
				table.value.unshift(data[0]);
				// table.value.push(data[index]);
			}
		} else {
			let i = trouver_index(table.value, id);
			table.value.splice(i, 1);
		}
	} else if (id === "maj") {
		if (data.length) {
			if (data[0] && data[0].search) {
				champ_search.value = "search";
			}
			if (data.length > 0) {
				data.forEach((ligne, index) => {
					let i = trouver_index(table.value, ligne.html.id);
					if (i >= 0) {
						table.value[i] = data[index];
					} else {
						table.value.unshift(data[index]);
						// table.value.push(data[index]);
					}
				});
			}
		}
	} else {
		table.value = data;
		if (data[0] && data[0].search) {
			champ_search.value = "search";
		}
	}
	localforage.setItem(nameLocalStorage, JSON.stringify(table.value));
}

function filtrerCol(filtreColRecup) {
	if (filtreColRecup !== undefined) {
		filtreColType.value = filtreColRecup;
		filtreCol.value = [];
		Object.keys(filtreColType.value).forEach((col) => {
			filtreCol.value.push(col);
			if (filtreColValeurs[col]) {
				filtreColVal.value[col] = filtreColValeurs[col];
			} else {
				let Tval = [];
				table.value.forEach((t) => {
					let valCol = t[champ_search.value][col];
					if (valCol) {
						if (Tval.indexOf(valCol) === -1) {
							Tval.push(valCol);
						}
					}
				});
				filtreColVal.value[col] = Tval.sort();
			}
			filtreColSelected.value[col] = [];
		});
	}
}
function supprimer_ligne(config) {
	if (config.a_supprimer) {
		config.a_supprimer.forEach((id) => {
			let i = trouver_index(table.value, id);
			if (i !== -1) {
				table.value.splice(i, 1);
			}
		});
	}
}
function chargerJson(id) {
	console.log("chargerJson pour ", id);
	chargement.value = true;
	let url = props.apiuri;
	if (parseInt(id) > 0) {
		url += "&id=" + id;
	} else {
		let config = localStorage.getItem("header_" + nameLocalStorage);
		config = recupJson(config);
		if (config && config.header !== undefined && table.value.length === 0) {
			console.log("charge LS");
			localforage
				.getItem(nameLocalStorage)
				.then(function (data) {
					data = recupJson(data);
					let filtreColRecup = gererConfig(config);
					table.value = data;
					filtrerCol(filtreColRecup);
					if (props.nomblocajaxreload) {
						ajaxReload(props.nomblocajaxreload);
					}
				})
				.catch(function (err) {
					console.log(err);
				});
		}
		if (id === "maj") {
			if (maj.value) {
				url += "&maj=" + maj.value;
			} else if (config && config.maj) {
				url += "&maj=" + config.maj;
			} else {
				id = null;
			}
		}
	}
	fetch(url)
		.then((response) => response.json())
		.then((data) => {
			let config = data.shift();
			supprimer_ligne(config);
			let filtreColRecup = gererConfig(config);
			gererData(data, id);
			filtrerCol(filtreColRecup);

			nextTick(() => {
				chargement.value = false;
				const filtreselectLS = localStorage.getItem(
					"filtreselect_" + nameLocalStorage,
				);
				const triColLS = localStorage.getItem("triCol_" + nameLocalStorage);

				let Tfiltres = [];
				if (props.filtreselect) {
					props.filtreselect.split(",").forEach((unFiltre) => {
						const [champ, ...valeurs] = unFiltre.split("|");
						const index = Tfiltres.findIndex((col) => col.champ === champ);
						if (index === -1) {
							Tfiltres.push({ champ, valeurs });
						} else {
							Tfiltres[index].valeurs.push(valeurs[0]);
						}
					});
					localStorage.setItem(
						"filtreselect_" + nameLocalStorage,
						JSON.stringify(Tfiltres),
					);
				} else if (filtreselectLS) {
					Tfiltres = JSON.parse(filtreselectLS);
				}

				Tfiltres.forEach((col) => {
					if (filtreCol.value.includes(col.champ)) {
						filtreColSelected.value[col.champ] = [
							...filtreColSelected.value[col.champ],
							...col.valeurs,
						];
					}
				});
				filtreColModif.value++;
				ajaxCrayons = false;

				if (afficherVal && props.tparpage.includes(afficherVal)) {
					parPageSelect.value = afficherVal;
				}

				if (trierVal) {
					trierVal.split(",").forEach((unTri) => {
						const [col, sens] = unTri.split("|");
						if (filtreCol.value.includes(col)) {
							tri(col, sens);
						}
					});
					localStorage.setItem("triCol_" + nameLocalStorage, trierVal);
				} else if (triColLS) {
					triColLS.split(",").forEach((unTri) => {
						const [col, sens] = unTri.split("|");
						if (filtreCol.value.includes(col)) {
							tri(col, sens);
						}
					});
				}
				if (!tableau.value.length){
					resetTri();
				}

				if (parseInt(props._id) > 0) {
					let _id = parseInt(props._id);
					let parPageL = parseInt(parPage.value);
					if (parseInt(parPageL)) {
						let ordre = 0;
						Object.values(table.value).forEach((d, i) => {
							if (_id === d.html.id) {
								ordre = i + 1;
							}
						});
						if (ordre > parPageL) {
							let numPage = parseInt(ordre / parPageL) + 1;
							page.value = numPage;
						}
					}
					selectLigne(_id, "id");
				}

				if (props.nomblocajaxreload) {
					ajaxReload(props.nomblocajaxreload);
				}
				if (ordreCol.value) {
					Object.entries(ordreCol.value).forEach(([col, sens]) => {
						tri(col, sens);
					});
				}
				$("td.crayon-init").removeClass("crayon-init");
			});
		})
		.catch((error) => console.log(error));
}
function saveHeader() {
	let $header = {
		header: header.value,
		header_top: header_top.value,
		footer: footer.value,
		crayons: crayons.value,
		classes: classes.value,
		filtreCol: filtreColType.value,
		ordreCol: ordreCol.value,
		maj: maj.value,
	};
	localStorage.setItem("header_" + nameLocalStorage, JSON.stringify($header));
}
function deleteInputSearch(head) {
	// loadingVueSelect.value = false;
	filtreColSelected.value[head] = [];
	saveHeader();
}
function selectValCol() {
	filtreColModif.value++;
}
// function endLoadingVueSelect() {
// 	loadingVueSelect.value = false;
// }
function calculer_nameLocalStorage() {
	if (props.apiuri) {
		return props.apiuri.match(/.*page=(.*)/)[1] + "&gamuId=" + props.id_auteur;
	}
	return "";
}
function afficher_crayons(name, l) {
	let id =
		l.crayons !== undefined && l.crayons[name] !== undefined
			? l.crayons[name]
			: l.html.id;
	if (Object.keys(crayons.value).indexOf(name) !== -1) {
		return `crayon ${crayons.value[name]}-${name}-${id}`;
	}
}
function tri(col, sens = false) {
	const i = triProps.value.indexOf(col);
	if (i !== -1) {
		if (!sens) {
			sens = "asc";
			if (triOrders.value[i] === "asc") {
				sens = "desc";
			}
		}
		triOrders.value[i] = sens;
	} else {
		if (!sens) {
			sens = "asc";
		}
		triProps.value.push(col);
		triOrders.value.push(sens);
	}
	table.value = orderBy(
		table.value,
		triProps.value,
		triOrders.value,
		champ_search.value,
	);
	ordreCol.value[col] = sens;
	saveHeader();
}
function ordreActif(col, sens) {
	const i = triProps.value.indexOf(col);
	if (i !== -1) {
		if (triOrders.value[i] === sens) {
			return "active";
		}
	}
}
function resetTri() {
	// loadingVueSelect.value = false;
	table.value = orderBy(table.value, ["id"], "", champ_search.value);
	triOrders.value = [];
	triProps.value = [];
	ordreCol.value = [];
	Object.keys(filtreColType.value).forEach((col) => {
		filtreColSelected.value[col] = [];
	});
	localStorage.removeItem("filtreselect_" + nameLocalStorage);
	localStorage.removeItem("filtreCol_" + nameLocalStorage);
	localStorage.removeItem("triCol_" + nameLocalStorage);
}
function selectLigne(id, col) {
	if (col === "id" && parseInt(id)) {
		let i = selectTr.value.indexOf(id);
		if (i !== -1) {
			selectTr.value.splice(i, 1);
		} else {
			selectTr.value.push(id);
		}
	}
}
function genererPDF(quoi = "tableau") {
	let $tableau = [];
	let surQuoi = tableau.value;
	if (quoi === "table") {
		surQuoi = table.value;
	}
	Object.values(surQuoi).forEach((d) => {
		$tableau.push(d.html);
	});

	const data = {
		fichierpdf: props.fichierpdf,
		langpdf: props.langpdf,
		namepdf: props.namepdf,
		header: header.value,
		arg: props.argpdf,
		Tdata: $tableau,
	};

	let req = $.ajax({
		url: props.pdfuri,
		type: "POST",
		dataType: "text",
		data: data,
	});
	req.done(function (urlpdf) {
		if (urlpdf) {
			navigate(urlpdf, true);
		}
	});
}
function exportCSV(quoi = "tableau") {
	let $csv = [];
	let $header = [];
	let $tableau = [];
	let surQuoi = tableau.value;
	if (quoi === "table") {
		surQuoi = table.value;
	}
	Object.keys(header.value).forEach((k) => $header.push(k));
	$tableau = surQuoi.reduce((acc, ligne) => {
		let $uneLigne = [];
		Object.values(ligne[props.champcsv]).forEach((l) => $uneLigne.push(l));
		return [...acc, [...$uneLigne]];
	}, []);
	$csv = [[...$header], ...$tableau];
	exporterCSV($csv, props.delimitercsv, props.namecsv);
}

function replaceBloc(ligne) {
	let html = vuebloc.value;
	Object.keys(ligne).forEach((key) => {
		html = html.replace(`@@${key}@@`, ligne[key]);
	});
	return html;
}
function changerVue(vue) {
	quelleVue.value = vue;
}
function validerCheckboxCol(head) {
	if (Tcheckbox.value[head] !== undefined && Tcheckbox.value[head].length) {
		Tcheckbox.value[head] = [];
	} else {
		Tcheckbox.value[head] = [];
		tableau.value.forEach((d) => {
			Tcheckbox.value[head].push(d.html.id);
		});
	}
}
function checkboxValider(head, url) {
	let typeLien = "page";
	if (url.includes("action=")) {
		typeLien = "action";
	}
	if (typeLien === "action") {
		$.ajax({
			url: url,
			data: { data: Tcheckbox.value[head] },
			type: "POST",
		}).done(function () {
			chargerJson("maj");
		});
	} else {
		const Tcheck = encodeURIComponent(JSON.stringify(Tcheckbox.value[head]));
		url += "&data=" + Tcheck;
		url += "&var_zajax=content";
		const data = {};
		data.onClose = () => {
			chargerJson("maj");
		};
		$.modalbox(url, data);
	}
}

function pagination(tableau) {
	let from = page.value * parPage.value - parPage.value;
	let to = page.value * parPage.value;
	return tableau.slice(from, to);
}

function setPages() {
	let nombreDePages = Math.ceil(table.value.length / parPage.value);
	pages.value = [];
	for (let index = 1; index <= nombreDePages; index++) {
		pages.value.push(index);
	}
}

function exporterCSV(json, delimitercsv, name) {
	if (name.includes(".csv")) {
		name = name.split(".")[0];
	}
	let csv = "";
	if (delimitercsv) {
		csv = $papa.unparse(json, { delimiter: delimitercsv });
	} else {
		csv = $papa.unparse(json);
	}
	$papa.download(csv, name);
}

function rechargerJson(id, ajax_Crayons = true) {
	console.log("rechargerJson");
	ajaxCrayons = ajax_Crayons;
	console.log('rechargerJson id ', id);

	if (Number.isInteger(id) && id < 0) {
		delLigne(id);
	} else {
		chargerJson(id);
	}
}

function delLigne(id) {
	if (id < 0) {
		id = id * -1;
	}
	let i = trouver_index(table.value, id);
	if (i !== -1) {
		table.value.splice(i, 1);
	}
}
defineExpose({ rechargerJson, delLigne });
</script>
