<!--
    filename: index.vue
    author: liubin
    date: 2023-08-31 09:14:19
    description: 设备全参数查询
-->

<template>
	<div class="app-container full-param-page">
		<SearchBar
			:formConfigs="searchBarFormConfig"
			ref="search-bar"
			@headBtnClick="handleSearchBarBtnClick" />

		<div
			v-if="tableList.length"
			class="tables">
			<div class="custom-table" v-for="table in tableList" :key="table.key">
				<!-- {{ JSON.stringify(spanMethod) }} -->
				<base-table
					:key="table.key + '__basetable'"
					:table-props="table.tableProps"
					:table-data="table.dataManager?.dataList ?? []"
					:span-method="spanMethod"
					:max-height="tableH"
					@emitFun="(val) => handleEmitFun(table, val)"></base-table>
				<pagination
					:key="table.key + '__pagination'"
					v-show="table.total > 0"
					:total="table.total"
					:page.sync="table.pageNo"
					:limit.sync="table.pageSize"
					:page-size="table.pageSize"
					:page-sizes="[1, 3, 5, 10, 20]"
					@pagination="
						({ page, limit, current }) =>
							getListFor(table, { page, limit, current })
					" />
			</div>
		</div>
		<div v-else class="no-data-bg"></div>
	</div>
</template>

<script>
import LocalDataManager from './utils/local-data-manager';
// import response from './response';
import moment from 'moment';
import { parseTime } from '@/filter/code-filter';
import tableHeightMixin from '@/mixins/lb/tableHeightMixin';

export default {
	name: 'EquipmentFullParams',
	mixins: [tableHeightMixin],
	components: {},
	props: {},
	data() {
		const now = new Date();
		const [y, m, d] = [now.getFullYear(), now.getMonth(), now.getDate()];
		const today = new Date(y, m, d, 0, 0, 0, 0).getTime();
		const aWeekAgo = today - 3600 * 1000 * 24 * 7;
		return {
			tableList: [],
			searchBarFormConfig: [
				{
					type: 'input',
					label: '设备名称',
					placeholder: '请输入设备名称',
					param: 'name',
					disabled: true,
				},
				{
					type: 'input',
					label: '设备编码',
					placeholder: '请输入设备编码',
					param: 'code',
					disabled: true,
				},
				{
					type: 'datePicker',
					label: '时间段',
					dateType: 'datetimerange', // datetimerange
					format: 'yyyy-MM-dd HH:mm:ss',
					valueFormat: 'yyyy-MM-dd HH:mm:ss',
					// valueFormat: 'timestamp',
					rangeSeparator: '-',
					startPlaceholder: '开始时间',
					endPlaceholder: '结束时间',
					param: 'timeVal',
					width: 350,
					// defaultSelect: [new Date(aWeekAgo), new Date(today)],
				},
				{
					type: 'button',
					btnName: '查询',
					name: 'search',
					color: 'primary',
				},
			],
			queryParams: {
				equipmentId: null,
				recordTime: null,
			},
			tableList: [
				// {
				// 	key: 'base-table__key__1',
				// 	tableProps: [],
				// 	list: [],
				// 	pageNo: 1,
				// 	pageSize: 3,
				// 	total: 0,
				// },
			],
		};
	},
	computed: {
		id() {
			return this.$route.params.equipmentId;
		},
		code() {
			return this.$route.params.equipmentCode;
		},
		name() {
			return this.$route.params.equipmentName;
		},
	},
	mounted() {
		if (this.id) this.$set(this.queryParams, 'equipmentId', this.id);
		if (this.name)
			this.$set(this.searchBarFormConfig[0], 'defaultSelect', this.name);
		if (this.code)
			this.$set(this.searchBarFormConfig[1], 'defaultSelect', this.code);
		const end = new Date();
		const start = new Date() - 1800 * 1000;
		this.queryParams.recordTime = [parseTime(start), parseTime(end)];
		this.searchBarFormConfig[2].startPlaceholder = parseTime(start);
		this.searchBarFormConfig[2].endPlaceholder = parseTime(end);
		this.handleQuery();
		// this.handleResponse();
	},
	methods: {
		buildProps(table) {
			console.log('building props', table);
			// 通过 otherList 来构建 props
			const { otherList } = table;
			const props = [
				{
					// type: 'index',
					width: 48,
					prop: 'index',
					label: '序号',
				},
				{
					width: 160,
					prop: 'time',
					label: '时间',
				},
				{
					width: 200,
					prop: 'plcCode',
					label: 'PLC编码',
				},
			];
			const firstLineData = {
				index: '参考值： [最小]-[最大][/标准]',
				time: null, // 此处必须是空白
				plcCode: null, // 此处必须是空白
			};
			otherList.forEach((item) => {
				props.push({
					label: item.name,
					prop: item.name,
					width: 128,
				});
				firstLineData[item.name] = `${item.minValue ?? ''}-${
					item.maxValue ?? ''
				}${item.defaultValue != null ? '/' + item.defaultValue : ''}`;
			});
			return { props, firstLineData };
		},

		handleResponse(response) {
			const { code, data } = response;
			if (code == 0) {
				// 处理一个表格
				data.forEach((table, index) => {
					console.log('handle index:', index, table);
					const { props: tableProps, firstLineData } = this.buildProps(table);
					this.$set(this.tableList, index, {
						key: 'base-table__key__' + index,
						tableProps,
						list: [firstLineData],
						dataManager: null,
						pageNo: 1,
						pageSize: 5,
						total: 0,
					});

					// 处理某一表格的各个行
					const { data } = table;
					if (data) {
						data.forEach((row, idx) => {
							const listItem = {
								index: idx + 1,
								time: moment(+row.time).format('YYYY-MM-DD HH:mm:ss'),
								plcCode: row.plcCode,
							};
							row.data.forEach((column) => {
								listItem[column.dynamicName] = column.dynamicValue;
							});
							this.tableList[index].list.push(listItem);
							this.tableList[index].total++;
						});

						// 处理分页
						const { pageNo, pageSize, list } = this.tableList[index];
						this.tableList[index].dataManager = new LocalDataManager(
							list,
							pageNo,
							pageSize
						);
					}
				});
			}
		},

		spanMethod({ row, column, rowIndex, columnIndex }) {
			if (rowIndex == 0 && columnIndex == 0) {
				return [1, 3];
			} else if (rowIndex == 0 && (columnIndex == 1 || columnIndex == 2)) {
				return [0, 0];
			}
			return [1, 1];
		},

		/** 查询 */
		async handleQuery() {
			this.handleResponse(
				await this.$axios({
					url: '/monitoring/equipment-monitor/runLog',
					method: 'get',
					params: this.queryParams,
				})
			);
		},

		async handleSearchBarBtnClick({ btnName, timeVal }) {
			this.searchBarFormConfig[2].startPlaceholder = '开始时间';
			this.searchBarFormConfig[2].endPlaceholder = '结束时间';
			if (timeVal && timeVal.length > 0) {
				this.queryParams.recordTime = timeVal;
			} else {
				this.queryParams.recordTime = [];
			}
			await this.handleQuery();
		},

		handleEmitFun(table, val) {
			console.log('table val', table, val);
		},

		/** 为某个 table 获取 list 数据 */
		getListFor(table, { page, limit, current }) {
			console.log('get list for', table, { page, limit, current });
			table.dataManager.pageNo = page ?? current;
			table.dataManager.pageSize = limit;
		},
	},
};
</script>

<style scoped>
.full-param-page {
	position: relative;
}

.tables {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
}
.tables >>> .baseTable {
	overflow-x: hidden;
}

.custom-table {
	overflow-x: hidden;
}
</style>
