<script setup>

import {ref, watch} from "vue"
import TSelect from "@/components/ui/TSelect.vue";
import TOption from "@/components/ui/TOption.vue";

const {pageSize} = (function () {
	let query = window.location.search
	let pageSize = 10
	if (query.length > 0) {
		query = query.substr(1)
		let params = query.split("&")
		params.forEach(function (v) {
			let pieces = v.split("=")
			if (pieces.length == 2 && pieces[0] == "pageSize") {
				let pageSizeString = pieces[1]
				if (pageSizeString.match(/^\d+$/)) {
					pageSize = parseInt(pageSizeString, 10)
					if (isNaN(pageSize) || pageSize < 1) {
						pageSize = 10
					}
				}
			}
		})
	}
	return {
		pageSize: ref(pageSize)
	}
})()

const changePageSize = function (size) {
	let url = window.location.toString();
	url = url.replace(/page=\d+/g, "page=1")
	if (url.indexOf("pageSize") > 0) {
		url = url.replace(/pageSize=\d+/g, "pageSize=" + size)
	} else {
		if (url.indexOf("?") > 0) {
			let anchorIndex = url.indexOf("#")
			if (anchorIndex < 0) {
				url += "&pageSize=" + size;
			} else {
				url = url.substring(0, anchorIndex) + "&pageSize=" + size + url.substr(anchorIndex);
			}
		} else {
			url += "?pageSize=" + size;
		}
	}
	window.location = url;
};

watch(pageSize, function () {
	changePageSize(pageSize.value)
})

</script>

<template>
	<TSelect v-model="pageSize">
		<TOption value="10">10条</TOption>
		<TOption value="20">20条</TOption>
		<TOption value="30">30条</TOption>
		<TOption value="40">40条</TOption>
		<TOption value="50">50条</TOption>
		<TOption value="60">60条</TOption>
		<TOption value="70">70条</TOption>
		<TOption value="80">80条</TOption>
		<TOption value="90">90条</TOption>
		<TOption value="100">100条</TOption>
	</TSelect>
</template>

<style scoped>
</style>
