<template>
	<a-card ref="dashboard" :body-style="{ ...style, minHeight: isFullscreen ? '100vh' : '100px' }" :bordered="false">
		<a-row :gutter="[16, 16]">
			<a-col :span="4"></a-col>
			<a-col :span="16" style="text-align: center">
				<a-typography-title>
					<span :style="style">{{ currentTeam?.name }}班组数据采集</span>
				</a-typography-title>
			</a-col>
			<a-col :span="4">
				<a-radio-group v-model:value="team" button-style="solid" size="large">
					<a-radio-button v-for="t in teams" :key="t.id" :value="t.id">{{ t.name }}</a-radio-button>
				</a-radio-group>
			</a-col>
			<a-col :span="24">
				<a-card :body-style="cardStyle" :bordered="false">
					<a-row justify="center">
						<a-col :span="4" style="text-align: center">
							<a-statistic
								:value="stationStatusStatistic?.powered ?? 0"
								style="margin-right: 50px"
								:value-style="{ fontFamily: 'digii', fontSize: '40px', fontWeight: 700, ...cardStyle }"
							>
								<template #title>
									<span style="font-size: 20px" :style="cardStyle">开机工位</span>
								</template>
								<template #suffix>
									<span>/ {{ stations.length }}</span>
								</template>
							</a-statistic>
						</a-col>
						<a-col :span="4" style="text-align: center">
							<a-statistic
								:value="stationStatusStatistic?.working ?? 0"
								style="margin-right: 50px"
								:value-style="{ fontFamily: 'digii', fontSize: '40px', fontWeight: 700, ...cardStyle }"
							>
								<template #title>
									<span style="font-size: 20px" :style="cardStyle">有效工作</span>
								</template>
								<template #suffix>
									<span>/ {{ stations.length }}</span>
								</template>
							</a-statistic>
						</a-col>
						<a-col :span="4" style="text-align: center">
							<a-statistic
								:value="XEUtils.commafy(dayStatistic?.powerHours ?? 0, { digits: 3 })"
								style="margin-right: 50px"
								:value-style="{ fontFamily: 'digii', fontSize: '40px', fontWeight: 700, ...cardStyle }"
							>
								<template #title>
									<span style="font-size: 20px" :style="cardStyle">当日开机时长</span>
								</template>
								<template #suffix>
									<span>H</span>
								</template>
							</a-statistic>
						</a-col>
						<a-col :span="4" style="text-align: center">
							<a-statistic
								:value="XEUtils.commafy(dayStatistic?.workingHours ?? 0, { digits: 3 })"
								style="margin-right: 50px"
								:value-style="{ fontFamily: 'digii', fontSize: '40px', fontWeight: 700, ...cardStyle }"
							>
								<template #title>
									<span style="font-size: 20px" :style="cardStyle">当日焊接时长</span>
								</template>
								<template #suffix>
									<span>H</span>
								</template>
							</a-statistic>
						</a-col>
						<a-col :span="4" style="text-align: center">
							<a-statistic
								:value="XEUtils.commafy(monthStatistic?.powerHours ?? 0, { digits: 3 })"
								style="margin-right: 50px"
								:value-style="{ fontFamily: 'digii', fontSize: '40px', fontWeight: 700, ...cardStyle }"
							>
								<template #title>
									<span style="font-size: 20px" :style="cardStyle">当月开机时长</span>
								</template>
								<template #suffix>
									<span>H</span>
								</template>
							</a-statistic>
						</a-col>
						<a-col :span="4" style="text-align: center">
							<a-statistic
								:value="XEUtils.commafy(monthStatistic?.workingHours ?? 0, { digits: 3 })"
								style="margin-right: 50px"
								:value-style="{ fontFamily: 'digii', fontSize: '40px', fontWeight: 700, ...cardStyle }"
							>
								<template #title>
									<span style="font-size: 20px" :style="cardStyle">当月焊接时长</span>
								</template>
								<template #suffix>
									<span>H</span>
								</template>
							</a-statistic>
						</a-col>
					</a-row>
				</a-card>
			</a-col>
			<a-col :span="24">
				<a-card :body-style="cardStyle" :bordered="false">
					<a-card-grid
						v-for="(station, index) in stations"
						:key="index"
						:style="{
							width: '13.8%',
							marginTop: isFullscreen ? '55px' : '20px',
							marginBottom: isFullscreen ? '55px' : '20px',
							marginRight: index % 7 === 6 ? '0.08%' : '0.54%',
							marginLeft: index % 7 === 0 ? '0.08%' : '0',
							paddingRight: 0,
							paddingBottom: 0,
							paddingTop: '4px',
							boxShadow:
								'1px 0 0 0 #1362e5,0 1px 0 0 #1362e5,1px 1px 0 0 #1362e5,1px 0 0 0 #1362e5 inset,0 1px 0 0 #1362e5 inset',
							...style,
						}"
						:bordered="false"
					>
						<station-card v-if="team && station" :station="station" :team-id="team"></station-card>
					</a-card-grid>
				</a-card>
			</a-col>
		</a-row>
	</a-card>
</template>

<script setup lang="ts">
	import api from '@/api'
	import StationCard from './station-card.vue'
	import dayjs from 'dayjs'
	import XEUtils from 'xe-utils'
	const stations = ref<station.Station[]>([])
	// api.stationApi.station.stations({ page: 1, size: 100 }, (data) => {
	// 	stations.value = data.records ?? []
	// })
	stations.value = Array.from({ length: 14 }).map((_, index) => ({
		id: index + 1,
		name: `工位${index + 1}`,
		channel: 1,
		standby: 69.2,
		working: 23.8,
		key: '1',
		maxGap: 15,
		uid: '',
	}))
	const teams = ref<station.Team[]>([])
	const team = ref<number>()
	api.stationApi.team.teams({}, (data) => {
		teams.value = data.records ?? []
		team.value = teams.value[0].id
	})
	const currentTeam = computed(() => teams.value.find((t) => t.id === team.value))
	const stationStatusStatistic = ref<station.StationStatusStatistic>()
	const loadStationStatusStatistic = () => {
		api.stationApi.stationStatus.statistic((data) => {
			stationStatusStatistic.value = data
		})
	}

	const teamStatistics = ref<station.Statistic[]>([])
	const loadTeamStatistics = (_teamId: number) => {
		api.stationApi.team.statistics(_teamId, (data) => {
			teamStatistics.value = data
		})
	}

	const timer = ref()
	const loadData = (_id?: number) => {
		timer.value = setInterval(() => {
			loadStationStatusStatistic()
			if (_id) {
				loadTeamStatistics(Number(_id))
			}
		}, 10000)
	}
	watch(
		team,
		(val) => {
			clearInterval(timer.value)
			loadData(val)
		},
		{ immediate: true },
	)
	onBeforeUnmount(() => {
		clearInterval(timer.value)
	})

	const dayStatistic = computed(() => {
		return teamStatistics.value.find((s) => s.scale === dayjs().format('YYYY-MM-DD'))
	})
	const monthStatistic = computed(() => {
		return teamStatistics.value.find((s) => s.scale === dayjs().format('YYYY-MM'))
	})
	const dashboard = ref<HTMLElement | null>(null)
	const { toggle, isFullscreen } = useFullscreen(dashboard)
	onKeyStroke('ArrowUp', () => {
		toggle()
	})
	const style = computed(() => {
		return {
			backgroundColor: '#155bd5',
			color: '#fff',
		}
	})
	const cardStyle = computed(() => {
		return {
			backgroundColor: '#1362e5',
			color: '#fff',
		}
	})
</script>
<style lang="css" scoped>
	@font-face {
		font-family: digii;
		src: url('/DS-DIGII-3.ttf');
	}
</style>
