<script setup>
// Copyright 2024 FlexCDN root@flexcdn.cn. All rights reserved. Official site: https://flexcdn.cn .

import ctxRef from "@/utils/ctx_ref.js"
import Context from "./index.js"
import "./index.css"
import TSelect from "@/components/ui/TSelect.vue";
import TOption from "@/components/ui/TOption.vue";
import TButton from "@/components/ui/TButton.vue";
import TDatePicker from "@/components/ui/TDatePicker.vue";
import ComboBox from "@/components/common/ComboBox.vue";
import ColumnsGrid from "@/components/common/ColumnsGrid.vue";
import FirstMenu from "@/components/common/FirstMenu.vue";
import MenuItem from "@/components/common/MenuItem.vue";
import TDivider from "@/components/ui/TDivider.vue";
import ListTable from "@/components/common/ListTable.vue";
import TColumn from "@/components/ui/TColumn.vue";
import LoadingMessage from "@/components/common/LoadingMessage.vue";

const ctx = ctxRef(new Context())

</script>

<template>
	<form>
		<div class="ui fields inline">
			<div class="ui field">
				<TDatePicker name="dayFrom" placeholder="开始日期" v-model="ctx.dayFrom" @change="ctx.changeDayFrom"></TDatePicker>
			</div>
			<div class="ui field">
				<TDatePicker name="dayTo" placeholder="结束日期" v-model="ctx.dayTo" @change="ctx.changeDayTo"></TDatePicker>
			</div>
			<div class="ui field">
				<span v-if="ctx.servers.length == 0" class="disabled">暂无网站</span>
				<div v-else>
					<ComboBox :v-items="ctx.servers" name="serverId" @change="ctx.changeServer" :placeholder="'全部网站服务（' + (ctx.servers.length-1) + '）'"></ComboBox>
				</div>
			</div>
			<div class="ui field" v-if="ctx.serverId == 0 && ctx.regions.length > 0">
				<TSelect name="regionId" v-model="ctx.regionId" @change="ctx.changeRegion">
					<TOption value="0">所有区域</TOption>
					<TOption v-for="region in ctx.regions" :value="region.id">{{ region.name }}</TOption>
				</TSelect>
			</div>
			<div class="ui field">
				<TButton type="button" @click.prevent="ctx.search">查询</TButton>
			</div>
		</div>
	</form>

	<LoadingMessage v-if="ctx.isLoading" class="mt-4">加载中...</LoadingMessage>

	<ColumnsGrid v-if="ctx.result != null">
		<div class="ui column">
			<h5>带宽峰值</h5>
			<div class="value">
				<span>{{ ctx.result.maxBandwidthBitsFormat[0] }}</span>
				{{ ctx.result.maxBandwidthBitsFormat[1] }}
				<br/>
				<span v-if="ctx.result.maxBandwidthTime.length > 0" class="small grey">{{ ctx.result.maxBandwidthTime }}:00</span>
				<span class="small grey" v-else>&nbsp;<!-- placeholder --></span>
			</div>
		</div>
		<div class="ui column">
			<h5>95th带宽</h5>
			<div class="value">
				<span>{{ ctx.result.bandwidth95thBitsFormat[0] }}</span>
				{{ ctx.result.bandwidth95thBitsFormat[1] }}
			</div>
		</div>
		<div class="ui column">
			<h5>总流量</h5>
			<div class="value">
				<span>{{ ctx.result.totalTrafficBytesFormat[0] }}</span>
				{{ ctx.result.totalTrafficBytesFormat[1] }}
			</div>
		</div>
		<div class="ui column">
			<h5>总请求数</h5>
			<div class="value"><span>{{ ctx.result.totalTrafficRequests }}</span>次</div>
		</div>
	</ColumnsGrid>

	<!-- 查询结果 -->
	<div v-if="ctx.result != null">
		<!-- 菜单 -->
		<div class="flex justify-between">
			<FirstMenu :hide-divider="true">
				<MenuItem :class="{active: ctx.tab == 'chart'}" @click.prevent="ctx.selectTab('chart')">图表 &nbsp;<i class="icon chart area small"></i>
				</MenuItem>
				<MenuItem :class="{active: ctx.tab == 'table'}" @click.prevent="ctx.selectTab('table')">表格 &nbsp;<i class="icon table small"></i>
				</MenuItem>
				<span class="item disabled">|</span>
				<MenuItem :href="'.download?dayFrom=' + ctx.dayFrom + '&dayTo=' + ctx.dayTo + '&serverId=' + ctx.serverId" target="_blank">下载 &nbsp;<i class="icon download small"></i>
				</MenuItem>
			</FirstMenu>
			<FirstMenu :hide-divider="true">
				<MenuItem v-for="(r, index) in ctx.dayRanges" :class="{active: ctx.dayFrom == r.dayFrom && ctx.dayTo == r.dayTo, right: index == 0}" @click.prevent="ctx.selectDay(r.dayFrom, r.dayTo)">{{ r.name }}</MenuItem>
			</FirstMenu>
		</div>
		<TDivider></TDivider>

		<!-- 表格 -->
		<div class="table-box scroll-box" v-if="ctx.result != null && ctx.tab == 'table'">
			<p class="comment !mt-0 !mb-4" v-if="ctx.result.bandwidthStats.length > 500">为了防止浏览器占用太多内存，这里只显示500行数据。</p>
			<ListTable :items="ctx.result.bandwidthStats.slice(0, 500)">
				<TColumn header="时间">
					<template #body="{data: stat}">
						{{ stat.day.substring(0, 4) }}-{{ stat.day.substring(4, 6) }}-{{ stat.day.substring(6) }} {{ stat.time.substring(0, 2) }}:{{ stat.time.substring(2) }}
					</template>
				</TColumn>
				<TColumn header="带宽（Mbps）">
					<template #body="{data: stat}">
						{{ stat.mbps }}
					</template>
				</TColumn>
				<TColumn header="带宽（Gbps）">
					<template #body="{data: stat}">
						{{ stat.gbps }}
					</template>
				</TColumn>
			</ListTable>
		</div>

		<!-- 图表 -->
		<div class="chart-box" id="bandwidth-chart" v-show="ctx.result != null && ctx.tab == 'chart'"></div>
	</div>
</template>

<style lang="postcss" scoped>
</style>