<script setup>
// 排序使用的箭头

import {ref} from "vue";

const props = defineProps(["name"])

const {order, url, iconTitle} = (function () {
	let url = window.location.toString()
	let order = ""
	let iconTitle = ""
	let newArgs = []
	if (window.location.search != null && window.location.search.length > 0) {
		let queryString = window.location.search.substring(1)
		let pieces = queryString.split("&")
		pieces.forEach(function (v) {
			let eqIndex = v.indexOf("=")
			if (eqIndex > 0) {
				let argName = v.substring(0, eqIndex)
				let argValue = v.substring(eqIndex + 1)
				if (argName == props.name) {
					order = argValue
				} else if (argName != "page" && argValue != "asc" && argValue != "desc") {
					newArgs.push(v)
				}
			} else {
				newArgs.push(v)
			}
		})
	}
	if (order == "asc") {
		newArgs.push(props.name + "=desc")
		iconTitle = "当前正序排列"
	} else if (order == "desc") {
		newArgs.push(props.name + "=asc")
		iconTitle = "当前倒序排列"
	} else {
		newArgs.push(props.name + "=desc")
		iconTitle = "当前正序排列"
	}

	let qIndex = url.indexOf("?")
	if (qIndex > 0) {
		url = url.substring(0, qIndex) + "?" + newArgs.join("&")
	} else {
		url = url + "?" + newArgs.join("&")
	}

	return {
		order: ref(order),
		url: ref(url),
		iconTitle: ref(iconTitle)
	}
})()

</script>

<template>
	<a :href="url" v-tooltip.top="iconTitle"><i class="pi small"
												:class="{'pi-arrow-down': order == 'asc', 'pi-arrow-up': order == 'desc', 'pi-arrow-down grey': order == '' || order == null}"></i></a>
</template>

<style scoped>

</style>