<template>
	<div class="mod-config">
		<el-form :inline="true" class="blueTip" size="small">
			<!-- <el-form-item>
				{{ $t('eq.plcname') }}
			</el-form-item>
			<el-form-item>
				<el-select v-model="dataForm.lineId" :placeholder="$t('eq.plcname')" clearable>
					<el-option v-for="line in lineList" :key="line.code" :value="line.id" :label="line.name" />
				</el-select>
			</el-form-item> -->
			<!-- <el-form-item :label="$t('eqId')">
				<strong>{{ $route.params.id }}</strong>
			</el-form-item> -->
			<el-form-item :label="$t('equName')">
				<strong>{{ equipmentName }}</strong>
			</el-form-item>
			<el-form-item :label="$t('equCode')">
				<strong>{{ equipmentCode }}</strong>
			</el-form-item>
		</el-form>

		<!-- <base-table :page="pageIndex" :size="pageSize" :data="dataList" :table-head-configs="tableConfigs" :max-height="calcMaxHeight(8)" @operate-event="handleOperations" @refreshDataList="getDataList" /> -->
		<base-table v-if="tableConfigs.length > 3" :data="dataList" :table-head-configs="tableConfigs" :max-height="calcMaxHeight(8)" />
		<base-table v-if="tableConfigs2.length > 3" :data="dataList2" :table-head-configs="tableConfigs2" :max-height="calcMaxHeight(8)" />
		<base-table v-if="tableConfigs3.length > 3" :data="dataList3" :table-head-configs="tableConfigs3" :max-height="calcMaxHeight(8)" />
		<base-table v-if="tableConfigs4.length > 3" :data="dataList4" :table-head-configs="tableConfigs4" :max-height="calcMaxHeight(8)" />
		<base-table v-if="tableConfigs5.length > 3" :data="dataList5" :table-head-configs="tableConfigs5" :max-height="calcMaxHeight(8)" />
		<base-table v-if="tableConfigs6.length > 3" :data="dataList6" :table-head-configs="tableConfigs6" :max-height="calcMaxHeight(8)" />
		<base-table v-if="tableConfigs7.length > 3" :data="dataList7" :table-head-configs="tableConfigs7" :max-height="calcMaxHeight(8)" />
		<base-table v-if="tableConfigs8.length > 3" :data="dataList8" :table-head-configs="tableConfigs8" :max-height="calcMaxHeight(8)" />
		<base-table v-if="tableConfigs9.length > 3" :data="dataList9" :table-head-configs="tableConfigs9" :max-height="calcMaxHeight(8)" />
		<base-table v-if="tableConfigs10.length > 3" :data="dataList10" :table-head-configs="tableConfigs10" :max-height="calcMaxHeight(8)" />
		<!-- <base-table :data="dataList" :table-head-configs="tableConfigs" :max-height="calcMaxHeight(8)" /> -->
	</div>
</template>

<script>
import { calcMaxHeight } from '@/utils'
import { timeFilter } from '@/utils/filters'
import AddOrUpdate from '@/components/base-dialog/addOrUpdate'
import i18n from '@/i18n'
import BaseTable from '@/components/base-table'
import { pick } from 'lodash/object'
import equipmentVue from './equipment.vue'

export default {
	data() {
		return {
			calcMaxHeight,
			equipmentName: null,
			equipmentCode: null,
			tableConfigs: [],
			tableConfigs2: [],
			tableConfigs3: [],
			tableConfigs4: [],
			tableConfigs5: [],
			tableConfigs6: [],
			tableConfigs7: [],
			tableConfigs8: [],
			tableConfigs9: [],
			tableConfigs10: [],
			dataLength: null,
			dataList: [],
			dataList2: [],
			dataList3: [],
			dataList4: [],
			dataList5: [],
			dataList6: [],
			dataList7: [],
			dataList8: [],
			dataList9: [],
			dataList10: [],
			dataListLoading: false,
			dataListSelections: []
		}
	},
	components: {
		AddOrUpdate,
		BaseTable
	},
	activated() {
		this.getDataList()
	},
	mouted() {
		this.getDataList()
	},
	created() {
		// console.log('params',this.$route.params)
	},
	methods: {
		// destroy dialog
		handleDestroyDialog() {
			setTimeout(() => {
				this.addOrUpdateVisible = false
			}, /** after dialog animated */ 200)
		},
		// 获取数据列表
		getDataList() {
			this.dataListLoading = true
			this.$http({
				url: this.$http.adornUrl(`/monitoring/equipmentValueMonitor/runLog/${this.$route.params.id}`),
				method: 'get'
			}).then(({ data: res }) => {
				console.log('/monitoring/equipmentValueMonitor/runLog/', res)
				this.equipmentName = res.data[0].data[0].equName
				this.equipmentCode = res.data[0].data[0].equCode
				this.dataLength = res.data.length
				if (
					res &&
					res.code === 0 &&
					res.data &&
					res.data.length > 0 &&
					res.data[0].nameData &&
					res.data[0].nameData.length > 0 &&
					res.data[0].data &&
					res.data[0].data.length > 0
				) {
					// console.log(this.equipmentName)
					this.setTableProps(res.data[0].nameData)
					this.setTableData(res.data[0].data)
				} 
				if (
					res &&
					res.code === 0 &&
					res.data &&
					res.data.length > 0 &&
					res.data[1].nameData &&
					res.data[1].nameData.length > 0 &&
					res.data[1].data &&
					res.data[1].data.length > 0
				) {
					// console.log(this.equipmentName)
					this.setTableProps2(res.data[1].nameData)
					this.setTableData2(res.data[1].data)
				} 
				if (
					res &&
					res.code === 0 &&
					res.data &&
					res.data.length > 0 &&
					res.data[2].nameData &&
					res.data[2].nameData.length > 0 &&
					res.data[2].data &&
					res.data[2].data.length > 0
				) {
					// console.log(this.equipmentName)
					this.setTableProps3(res.data[2].nameData)
					this.setTableData3(res.data[2].data)
				}
				if (
					res &&
					res.code === 0 &&
					res.data &&
					res.data.length > 0 &&
					res.data[3].nameData &&
					res.data[3].nameData.length > 0 &&
					res.data[3].data &&
					res.data[3].data.length > 0
				) {
					// console.log(this.equipmentName)
					this.setTableProps4(res.data[3].nameData)
					this.setTableData4(res.data[3].data)
				}
				if (
					res &&
					res.code === 0 &&
					res.data &&
					res.data.length > 0 &&
					res.data[4].nameData &&
					res.data[4].nameData.length > 0 &&
					res.data[4].data &&
					res.data[4].data.length > 0
				) {
					// console.log(this.equipmentName)
					this.setTableProps5(res.data[4].nameData)
					this.setTableData5(res.data[4].data)
				}
				if (
					res &&
					res.code === 0 &&
					res.data &&
					res.data.length > 0 &&
					res.data[5].nameData &&
					res.data[5].nameData.length > 0 &&
					res.data[5].data &&
					res.data[5].data.length > 0
				) {
					// console.log(this.equipmentName)
					this.setTableProps6(res.data[5].nameData)
					this.setTableData6(res.data[5].data)
				}
				if (
					res &&
					res.code === 0 &&
					res.data &&
					res.data.length > 0 &&
					res.data[6].nameData &&
					res.data[6].nameData.length > 0 &&
					res.data[6].data &&
					res.data[6].data.length > 0
				) {
					// console.log(this.equipmentName)
					this.setTableProps7(res.data[6].nameData)
					this.setTableData7(res.data[6].data)
				}
				if (
					res &&
					res.code === 0 &&
					res.data &&
					res.data.length > 0 &&
					res.data[7].nameData &&
					res.data[7].nameData.length > 0 &&
					res.data[7].data &&
					res.data[7].data.length > 0
				) {
					// console.log(this.equipmentName)
					this.setTableProps8(res.data[7].nameData)
					this.setTableData8(res.data[7].data)
				}
				if (
					res &&
					res.code === 0 &&
					res.data &&
					res.data.length > 0 &&
					res.data[8].nameData &&
					res.data[8].nameData.length > 0 &&
					res.data[8].data &&
					res.data[8].data.length > 0
				) {
					// console.log(this.equipmentName)
					this.setTableProps9(res.data[8].nameData)
					this.setTableData9(res.data[8].data)
				}
				if (
					res &&
					res.code === 0 &&
					res.data &&
					res.data.length > 0 &&
					res.data[9].nameData &&
					res.data[9].nameData.length > 0 &&
					res.data[9].data &&
					res.data[9].data.length > 0
				) {
					// console.log(this.equipmentName)
					this.setTableProps10(res.data[9].nameData)
					this.setTableData10(res.data[9].data)
				}
				this.dataListLoading = false
			}).catch(()=>{}) //---去除无效报错---
		},
		setTableProps(nameData) {
			this.tableConfigs = [
				{
					type: 'index',
					name: i18n.t('index')
				},
				{ prop: 'time', name: this.$t('ti'), filter: timeFilter },
				{ prop: 'plcCode', name: this.$t('plcCode') },
				// { prop: 'equName', name: this.$t('equName') },
				// { prop: 'equCode', name: this.$t('equCode') },
				// ...['数值1', '数值2', '数值3'].map(name => {
				// 	return { prop: name, name }
				// })
				...Array.from(new Set(nameData.map((item) => item.name))).map((name) => ({ prop: name, name }))
			]
			// console.log(this.tableConfigs[i]);
		},
		setTableProps2(nameData) {
			this.tableConfigs2 = [
				{
					type: 'index',
					name: i18n.t('index')
				},
				{ prop: 'time', name: this.$t('ti'), filter: timeFilter },
				{ prop: 'plcCode', name: this.$t('plcCode') },
				// { prop: 'equName', name: this.$t('equName') },
				// { prop: 'equCode', name: this.$t('equCode') },
				// ...['数值1', '数值2', '数值3'].map(name => {
				// 	return { prop: name, name }
				// })
				...Array.from(new Set(nameData.map((item) => item.name))).map((name) => ({ prop: name, name }))
			]
			// console.log(this.tableConfigs[i]);
		},
		setTableProps3(nameData) {
			this.tableConfigs3 = [
				{
					type: 'index',
					name: i18n.t('index')
				},
				{ prop: 'time', name: this.$t('ti'), filter: timeFilter },
				{ prop: 'plcCode', name: this.$t('plcCode') },
				// { prop: 'equName', name: this.$t('equName') },
				// { prop: 'equCode', name: this.$t('equCode') },
				// ...['数值1', '数值2', '数值3'].map(name => {
				// 	return { prop: name, name }
				// })
				...Array.from(new Set(nameData.map((item) => item.name))).map((name) => ({ prop: name, name }))
			]
			// console.log(this.tableConfigs[i]);
		},
		setTableProps3(nameData) {
			this.tableConfigs3 = [
				{
					type: 'index',
					name: i18n.t('index')
				},
				{ prop: 'time', name: this.$t('ti'), filter: timeFilter },
				{ prop: 'plcCode', name: this.$t('plcCode') },
				// { prop: 'equName', name: this.$t('equName') },
				// { prop: 'equCode', name: this.$t('equCode') },
				// ...['数值1', '数值2', '数值3'].map(name => {
				// 	return { prop: name, name }
				// })
				...Array.from(new Set(nameData.map((item) => item.name))).map((name) => ({ prop: name, name }))
			]
			// console.log(this.tableConfigs[i]);
		},
		setTableProps4(nameData) {
			this.tableConfigs4 = [
				{
					type: 'index',
					name: i18n.t('index')
				},
				{ prop: 'time', name: this.$t('ti'), filter: timeFilter },
				{ prop: 'plcCode', name: this.$t('plcCode') },
				// { prop: 'equName', name: this.$t('equName') },
				// { prop: 'equCode', name: this.$t('equCode') },
				// ...['数值1', '数值2', '数值3'].map(name => {
				// 	return { prop: name, name }
				// })
				...Array.from(new Set(nameData.map((item) => item.name))).map((name) => ({ prop: name, name }))
			]
			// console.log(this.tableConfigs[i]);
		},
		setTableProps5(nameData) {
			this.tableConfigs5 = [
				{
					type: 'index',
					name: i18n.t('index')
				},
				{ prop: 'time', name: this.$t('ti'), filter: timeFilter },
				{ prop: 'plcCode', name: this.$t('plcCode') },
				// { prop: 'equName', name: this.$t('equName') },
				// { prop: 'equCode', name: this.$t('equCode') },
				// ...['数值1', '数值2', '数值3'].map(name => {
				// 	return { prop: name, name }
				// })
				...Array.from(new Set(nameData.map((item) => item.name))).map((name) => ({ prop: name, name }))
			]
			// console.log(this.tableConfigs[i]);
		},
		setTableProps6(nameData) {
			this.tableConfigs6 = [
				{
					type: 'index',
					name: i18n.t('index')
				},
				{ prop: 'time', name: this.$t('ti'), filter: timeFilter },
				{ prop: 'plcCode', name: this.$t('plcCode') },
				// { prop: 'equName', name: this.$t('equName') },
				// { prop: 'equCode', name: this.$t('equCode') },
				// ...['数值1', '数值2', '数值3'].map(name => {
				// 	return { prop: name, name }
				// })
				...Array.from(new Set(nameData.map((item) => item.name))).map((name) => ({ prop: name, name }))
			]
			// console.log(this.tableConfigs[i]);
		},
		setTableProps7(nameData) {
			this.tableConfigs7 = [
				{
					type: 'index',
					name: i18n.t('index')
				},
				{ prop: 'time', name: this.$t('ti'), filter: timeFilter },
				{ prop: 'plcCode', name: this.$t('plcCode') },
				// { prop: 'equName', name: this.$t('equName') },
				// { prop: 'equCode', name: this.$t('equCode') },
				// ...['数值1', '数值2', '数值3'].map(name => {
				// 	return { prop: name, name }
				// })
				...Array.from(new Set(nameData.map((item) => item.name))).map((name) => ({ prop: name, name }))
			]
			// console.log(this.tableConfigs[i]);
		},
		setTableProps8(nameData) {
			this.tableConfigs8 = [
				{
					type: 'index',
					name: i18n.t('index')
				},
				{ prop: 'time', name: this.$t('ti'), filter: timeFilter },
				{ prop: 'plcCode', name: this.$t('plcCode') },
				// { prop: 'equName', name: this.$t('equName') },
				// { prop: 'equCode', name: this.$t('equCode') },
				// ...['数值1', '数值2', '数值3'].map(name => {
				// 	return { prop: name, name }
				// })
				...Array.from(new Set(nameData.map((item) => item.name))).map((name) => ({ prop: name, name }))
			]
			// console.log(this.tableConfigs[i]);
		},
		setTableProps9(nameData) {
			this.tableConfigs9 = [
				{
					type: 'index',
					name: i18n.t('index')
				},
				{ prop: 'time', name: this.$t('ti'), filter: timeFilter },
				{ prop: 'plcCode', name: this.$t('plcCode') },
				// { prop: 'equName', name: this.$t('equName') },
				// { prop: 'equCode', name: this.$t('equCode') },
				// ...['数值1', '数值2', '数值3'].map(name => {
				// 	return { prop: name, name }
				// })
				...Array.from(new Set(nameData.map((item) => item.name))).map((name) => ({ prop: name, name }))
			]
			// console.log(this.tableConfigs[i]);
		},
		setTableProps10(nameData) {
			this.tableConfigs10 = [
				{
					type: 'index',
					name: i18n.t('index')
				},
				{ prop: 'time', name: this.$t('ti'), filter: timeFilter },
				{ prop: 'plcCode', name: this.$t('plcCode') },
				// { prop: 'equName', name: this.$t('equName') },
				// { prop: 'equCode', name: this.$t('equCode') },
				// ...['数值1', '数值2', '数值3'].map(name => {
				// 	return { prop: name, name }
				// })
				...Array.from(new Set(nameData.map((item) => item.name))).map((name) => ({ prop: name, name }))
			]
			// console.log(this.tableConfigs[i]);
		},
		setTableData(data) {
			this.dataList = data.map((item) => {
				const rowItem = pick(item, ['time', 'plcCode', 'equName', 'equCode'])
				if (item.data && item.data.length > 0) {
					item.data.forEach((param) => {
						rowItem[param.dynamicName] = param.dynamicValue
					})
				}
				return rowItem
			})
		},
		setTableData2(data) {
			this.dataList2 = data.map((item) => {
				const rowItem = pick(item, ['time', 'plcCode', 'equName', 'equCode'])
				if (item.data && item.data.length > 0) {
					item.data.forEach((param) => {
						rowItem[param.dynamicName] = param.dynamicValue
					})
				}
				return rowItem
			})
		},
		setTableData3(data) {
			this.dataList3 = data.map((item) => {
				const rowItem = pick(item, ['time', 'plcCode', 'equName', 'equCode'])
				if (item.data && item.data.length > 0) {
					item.data.forEach((param) => {
						rowItem[param.dynamicName] = param.dynamicValue
					})
				}
				return rowItem
			})
		},
		setTableData4(data) {
			this.dataList4 = data.map((item) => {
				const rowItem = pick(item, ['time', 'plcCode', 'equName', 'equCode'])
				if (item.data && item.data.length > 0) {
					item.data.forEach((param) => {
						rowItem[param.dynamicName] = param.dynamicValue
					})
				}
				return rowItem
			})
		},
		setTableData5(data) {
			this.dataList5 = data.map((item) => {
				const rowItem = pick(item, ['time', 'plcCode', 'equName', 'equCode'])
				if (item.data && item.data.length > 0) {
					item.data.forEach((param) => {
						rowItem[param.dynamicName] = param.dynamicValue
					})
				}
				return rowItem
			})
		},
		setTableData6(data) {
			this.dataList6 = data.map((item) => {
				const rowItem = pick(item, ['time', 'plcCode', 'equName', 'equCode'])
				if (item.data && item.data.length > 0) {
					item.data.forEach((param) => {
						rowItem[param.dynamicName] = param.dynamicValue
					})
				}
				return rowItem
			})
		},
		setTableData7(data) {
			this.dataList7 = data.map((item) => {
				const rowItem = pick(item, ['time', 'plcCode', 'equName', 'equCode'])
				if (item.data && item.data.length > 0) {
					item.data.forEach((param) => {
						rowItem[param.dynamicName] = param.dynamicValue
					})
				}
				return rowItem
			})
		},
		setTableData8(data) {
			this.dataList8 = data.map((item) => {
				const rowItem = pick(item, ['time', 'plcCode', 'equName', 'equCode'])
				if (item.data && item.data.length > 0) {
					item.data.forEach((param) => {
						rowItem[param.dynamicName] = param.dynamicValue
					})
				}
				return rowItem
			})
		},
		setTableData9(data) {
			this.dataList9 = data.map((item) => {
				const rowItem = pick(item, ['time', 'plcCode', 'equName', 'equCode'])
				if (item.data && item.data.length > 0) {
					item.data.forEach((param) => {
						rowItem[param.dynamicName] = param.dynamicValue
					})
				}
				return rowItem
			})
		},
		setTableData10(data) {
			this.dataList10 = data.map((item) => {
				const rowItem = pick(item, ['time', 'plcCode', 'equName', 'equCode'])
				if (item.data && item.data.length > 0) {
					item.data.forEach((param) => {
						rowItem[param.dynamicName] = param.dynamicValue
					})
				}
				return rowItem
			})
		}
	}
}
</script>
