<template>
	<el-container>
		<el-aside width="40%">
			<el-container>
				<el-header>
					<div class="left-panel">
						<el-button type="primary" icon="el-icon-plus"></el-button>
						<el-button type="danger" plain icon="el-icon-delete"></el-button>
					</div>
					<div class="right-panel">
						<div class="right-panel-search">
							<el-date-picker
								v-model="search.date"
								type="date"
								format="YYYY-MM-DD"
								value-format="YYYY-MM-DD"
								placeholder="请选择日期"
							/>
							<el-button type="primary" icon="el-icon-search" @click="upSearch"></el-button>
						</div>
					</div>
				</el-header>
				<el-main class="nopadding">
					<scTable ref="table" :apiObj="list.apiObj" row-key="id" stripe highlightCurrentRow @row-click="rowClick">
						<el-table-column type="selection" width="50"></el-table-column>
						<el-table-column label="日期" prop="date" width="95"></el-table-column>
						<el-table-column label="设备名称" prop="deviceName" width="180"></el-table-column>
						<el-table-column label="mac地址" prop="mac" width="130"></el-table-column>
						<el-table-column label="上传量" prop="upload" width="90">
							<template #default="scope">
								{{ convertSpeed(scope.row.upload) }}
							</template>
						</el-table-column>
						<el-table-column label="下载量" prop="download" width="90">
							<template #default="scope">
								{{ convertSpeed(scope.row.download) }}
							</template>
						</el-table-column>
						<el-table-column label="总量" prop="total" width="90">
							<template #default="scope">
								{{ convertSpeed(scope.row.total) }}
							</template>
						</el-table-column>
					</scTable>
				</el-main>
			</el-container>
		</el-aside>
		<el-container>
			<el-header>
				<div class="left-panel">
					<el-button type="primary" icon="el-icon-plus"></el-button>
					<el-button type="danger" plain icon="el-icon-delete"></el-button>
				</div>
			</el-header>
			<el-main class="nopadding">
				<scEcharts height="650px" :option="option2"></scEcharts>
			</el-main>
		</el-container>
	</el-container>
</template>

<script>
import scEcharts from '@/components/scEcharts';
export default {
	name: "index",
	components: {
		scEcharts
	},
	data() {
		return {
			search:{
				date: ""
			},
			list: {
				apiObj: this.$API.system.device.traffic.list
			},
			option2: {
				title: {
					text: '设备流量统计'
				},
				tooltip: {
					trigger: 'axis'
				},
				legend: {
					data: ['上行流量', '下行流量', '总流量']
				},
				xAxis: {
					type: 'category',
					data: ['2024-04-12', '2024-04-13', '2024-04-14']
				},
				yAxis: {
					type: 'value'
				},
				series: [
					{
						name: '上行流量',
						type: 'line',
						data: []
					},
					{
						name: '下行流量',
						type: 'line',
						data: []
					},
					{
						name: '总流量',
						type: 'line',
						data: []
					}
				]
			},
		}
	},
	mounted(){
		const deviceData = [
			{ device: 'Device 1', date: '2024-04-01', upload: 100, download: 200, total: 300 },
			{ device: 'Device 1', date: '2024-04-02', upload: 150, download: 250, total: 400 },
			{ device: 'Device 2', date: '2024-04-01', upload: 120, download: 180, total: 300 },
			{ device: 'Device 2', date: '2024-04-02', upload: 200, download: 300, total: 500 }
		];

		const devices = Array.from(new Set(deviceData.map(item => item.device)));
		const dates = Array.from(new Set(deviceData.map(item => item.date)));

		const seriesData = devices.map(device => {
			return {
				name: device,
				type: 'line',
				data: dates.map(date => {
					const dataItem = deviceData.find(item => item.device === device && item.date === date);
					return dataItem ? dataItem.total : 0;
				})
			};
		});


		const option = {
			title: {
				text: '设备每日流量统计'
			},
			tooltip: {
				trigger: 'axis'
			},
			legend: {
				data: devices
			},
			xAxis: {
				type: 'category',
				data: dates
			},
			yAxis: {
				type: 'value'
			},
			series: seriesData
		};

		this.option2 = option;
	},
	methods: {
		upSearch(){
			this.$refs.table.reload(this.search)
		},
		convertSpeed(dataUsage) {
			if (dataUsage >= 1099511627776) { // 大于等于1 TB
				return (dataUsage / 1099511627776).toFixed(2) + ' TB';
			} else if (dataUsage >= 1073741824) { // 大于等于1 GB
				return (dataUsage / 1073741824).toFixed(2) + ' GB';
			} else if (dataUsage >= 1048576) { // 大于等于1 MB
				return (dataUsage / 1048576).toFixed(2) + ' MB';
			} else if (dataUsage >= 1024) { // 大于等于1 KB
				return (dataUsage / 1024).toFixed(2) + ' KB';
			} else {
				return dataUsage + ' bytes';
			}
		}
	}
}
</script>

<style scoped>

</style>
