<template>
	<div>
		<div class="app-container">
			<small-title :size="'md'">{{ $t('realtime.inspect') }}</small-title>
			<base-table v-if="loadTable" :table-head-configs="tableProps" :data="tableData.length ? tableData : []" />
		</div>
	</div>
</template>

<script>
// @ts-nocheck
/* eslint-disable */
import i18n from '@/i18n'
import BaseTable from '@/components/base-table'
import SmallTitle from '@/components/small-title'
import moment from 'moment'
import { calcMaxHeight } from '@/utils'
import { timeFilter } from '@/utils/filters'

// tslint: disable
export default {
	name: 'RealtimeDataOfTeam',
	components: { BaseTable, SmallTitle },
	data() {
		return {
			calcMaxHeight,
			loadTable: false,
			// dynamicPropSet: false,
			tableProps: [{ label: 'default', prop: 'default' }],
			tableData: [],
			testData: null,
			listLoading: false,
			intervalId: null
		}
	},

	mounted() {
		this.clearData()

		this.fetchList().then(({ data: res }) => {
			this.testData = res
			this.handleData()
		})

		this.intervalId = setInterval(() => {
			this.$message({
				message: this.$t('realtime.refresh'),
				type: 'warning',
				onClose: () => {
					this.clearData()
					this.fetchList().then(({ data: res }) => {
						this.testData = res
						this.handleData()
					})
				}
			})
		}, 1000 * 60 * 5)
	},

	deactivated() {
		if (this.intervalId) clearInterval(this.intervalId)
	},

	methods: {
		fetchList() {
			// 获取质量数据
			return this.$http({
				url: this.$http.adornUrl('/monitoring/productionMonitoring/qualityInspectionRealTimeData'),
				method: 'post'
			})
		},

		clearData() {
			this.loadTable = false
			this.testData = null
			this.tableData.splice(0)
			this.tableProps.splice(0)
		},

		handleData() {
			// console.log('testData ===> ', this.testData)
			this.initProps()
			// console.log('props ===> ', this.tableProps)
			this.initData()
			// console.log('datas ===> ', this.tableData)
			this.loadTable = true
		},

		handleRow(data) {
			// data: { data:[], checkType: '' }
			const item = {}
			item.checkType = data.checkType

			data.data.forEach(timepoint => {
				if (timepoint.children && timepoint.children.length) {
					timepoint.children.forEach(line => {
						// item[timepoint.dynamicValue + line.dynamicName] = line.dynamicValue
						item[timepoint.dynamicName + line.dynamicName] = line.dynamicValue
					})
				}
			})

			return item
		},

		initData() {
			this.tableData = this.testData.data.data.map(row => this.handleRow(row))
		},

		initProps() {
			this.tableProps = this.handlePropsEntry(this.testData.data.nameData)
		},

		handlePropsEntry(nameData) {
			const dynamicPropNames = []
			const timeMap = {}

			const parentNode = nameData.filter(item => item.tree === 1)
			const childNode = nameData.filter(item => item.tree === 2)

			const handleChild = function(prop) {
				const time = parentNode.find(item => item.id === prop.parentId).name
				// 填充 timeMap
				timeMap[time] = timeMap[time] ? timeMap[time] : {}
				timeMap[time][prop.name] = true
			}

			childNode.forEach(item => {
				handleChild(item)
			})

			// 对键值排序（时间排序）
			const sortedTime = Object.keys(timeMap).sort((a, b) => {
				if (moment(a).isBefore(b)) return -1
				else return 1
			})

			// 保存为 props
			for (const key of sortedTime) {
				// const prop = { label: key, children: [] }
				const prop = { label: moment(key).format('YYYY-MM-DD HH:mm:ss'), children: [] }
				for (const subKey in timeMap[key]) {
					prop.children.push({ label: subKey, prop: key + subKey })
				}
				dynamicPropNames.push(prop)
			}

			return [{ prop: 'checkType', label: i18n.t('inspect.type'), isFixed: true }, ...dynamicPropNames]
		}
	}
}
</script>
