<template>
	<page-container
		:tabs="tabs"
		:current-tab="currentTab"
		:sub-title="`${station?.name} (传感器:${station?.key} 通道:${station?.channel})`"
		@tab-changed="tabChanged"
	>
		<template #tags>
			<a-tag :color="status?.powered ? 'processing' : 'warning'">{{ status?.powered ? '已开机' : '未开机' }}</a-tag>
			<a-tag :color="status?.working ? 'processing' : 'warning'">{{ status?.working ? '焊接中' : '未焊接' }}</a-tag>
		</template>
		<template #ops>
			<a-select
				v-model:value="team"
				style="width: 150px"
				placeholder="请选择班组"
				:options="options"
				allow-clear
			></a-select>
		</template>
		<station-charts
			v-if="station && currentTab === 'charts'"
			:station-id="station?.id"
			:team-id="team"
		></station-charts>
		<station-power-log
			v-if="station && currentTab === 'power'"
			:station-id="station?.id"
			:team-id="team"
		></station-power-log>
		<station-working-log
			v-if="station && currentTab === 'working'"
			:station-id="station?.id"
			:team-id="team"
		></station-working-log>
	</page-container>
</template>

<script setup lang="ts">
	import api from '@/api'
	import { Key } from 'ant-design-vue/es/_util/type'
	import StationCharts from './station-charts.vue'
	import StationPowerLog from './station-power-log.vue'
	import StationWorkingLog from './station-working-log.vue'
	const teams = ref<station.Team[]>([])
	api.stationApi.team.teams({}, (data) => {
		teams.value = data.records ?? []
	})
	const options = computed(() => {
		return teams.value.map((team) => ({
			label: team.name,
			value: team.id,
		}))
	})
	const team = ref<number>()
	const route = useRoute()
	const key = computed(() => route.params.key)
	const station = ref<station.Station>()
	const status = ref<station.StationStatus>()
	watch(
		key,
		(val) => {
			api.stationApi.station.detail(String(val), (data) => {
				station.value = data
			})
		},
		{ immediate: true },
	)
	watch(
		station,
		(val) => {
			if (val?.id) {
				api.stationApi.stationStatus.detail(val.id, (data) => {
					status.value = data
				})
			}
		},
		{ immediate: false, deep: true },
	)
	const tabs = ref([
		{
			key: 'charts',
			title: '工位数据图表',
		},
		{
			key: 'working',
			title: '焊接记录',
		},
		{
			key: 'power',
			title: '开机记录',
		},
	])
	const currentTab = ref('charts')
	const tabChanged = (key: Key) => {
		currentTab.value = key as string
	}
</script>
