<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 :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: [],
			dataList: [],
			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('res',res)
				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
				) {
					this.equipmentName = res.data[0].data[0].equName
					this.equipmentCode = res.data[0].data[0].equCode
					console.log(this.equipmentName)
					this.setTableProps(res.data[0].nameData)
					this.setTableData(res.data[0].data)
				} else {
					this.dataList = []
				}
				this.dataListLoading = false
			})
		},
		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 }))
			]
		},
		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
			})
		}
	}
}
</script>
