<script setup>
// 显示流量限制说明

import useUtils from "@/utils/utils.js";
import {ref} from "vue";
import TDivider from "@/components/ui/TDivider.vue";

const utils = useUtils()

const props = defineProps(["value", "v-single-mode"])
const {config, hasLimit} = (function () {
	let config = props.value

	let hasLimit = false
	if (!props.vSingleMode) {
		if (config.trafficLimit != null && config.trafficLimit.isOn && ((config.trafficLimit.dailySize != null && config.trafficLimit.dailySize.count > 0) || (config.trafficLimit.monthlySize != null && config.trafficLimit.monthlySize.count > 0))) {
			hasLimit = true
		} else if (config.dailyRequests > 0 || config.monthlyRequests > 0) {
			hasLimit = true
		}
	}

	return {
		config: ref(config),
		hasLimit: ref(hasLimit)
	}
})()

const formatNumber =  function (n) {
	return utils.formatNumber(n)
}

const composeCapacity = function (capacity) {
	return utils.convertSizeCapacityToString(capacity)
}

</script>

<template>
	<div style="font-size: 0.8em; color: grey">
		<TDivider v-if="hasLimit"></TDivider>
		<div v-if="config.trafficLimit != null && config.trafficLimit.isOn">
			<span v-if="config.trafficLimit.dailySize != null && config.trafficLimit.dailySize.count > 0">日流量限制：{{composeCapacity(config.trafficLimit.dailySize)}}<br/></span>
			<span v-if="config.trafficLimit.monthlySize != null && config.trafficLimit.monthlySize.count > 0">月流量限制：{{composeCapacity(config.trafficLimit.monthlySize)}}<br/></span>
		</div>
		<div v-if="config.dailyRequests > 0">单日请求数限制：{{formatNumber(config.dailyRequests)}}</div>
		<div v-if="config.monthlyRequests > 0">单月请求数限制：{{formatNumber(config.monthlyRequests)}}</div>
		<div v-if="config.dailyWebsocketConnections > 0">单日Websocket限制：{{formatNumber(config.dailyWebsocketConnections)}}</div>
		<div v-if="config.monthlyWebsocketConnections > 0">单月Websocket限制：{{formatNumber(config.monthlyWebsocketConnections)}}</div>
		<div v-if="config.maxUploadSize != null && config.maxUploadSize.count > 0">文件上传限制：{{composeCapacity(config.maxUploadSize)}}</div>
	</div>
</template>

<style scoped>

</style>