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

<template>
	<div class="app-container">
		<el-row>设备全参数查询</el-row>
		<SearchBar
			:formConfigs="searchBarFormConfig"
			ref="search-bar"
			@headBtnClick="handleSearchBarBtnClick" />

		<div class="tables">
			<div class="table-wrapper" v-for="table in tableList" :key="table.key">
				<div class="table-title">PLC 1</div>
				<base-table
					:key="table.key + '__basetable'"
					:table-props="table.tableProps"
					:page="1"
					:limit="999"
					:table-data="table.data"
					@emitFun="(val) => handleEmitFun(table, val)">
					<!-- <method-btn
                    v-if="tableBtn.length"
                    slot="handleBtn"
                    label="操作"
                :method-list="tableBtn"
                @clickBtn="handleTableBtnClick" /> -->
				</base-table>

				<!-- 分页组件 -->
				<pagination
					v-show="table.total > 0"
					:total="table.total"
					:page.sync="table.queryParams.pageNo"
					:limit.sync="table.queryParams.pageSize"
					@pagination="(val) => getListFor(table, val)" />
			</div>
		</div>
	</div>
</template>

<script>
export default {
	name: 'EquipmentFullParams',
	components: {},
	props: {},
	data() {
		return {
			tableList: [],
			searchBarFormConfig: [
				{
					type: 'input',
					label: '设备名称',
					placeholder: '请输入设备名称',
					param: 'name',
				},
				{
					type: 'input',
					label: '设备编码',
					placeholder: '请输入设备编码',
					param: 'codes',
				},
				{
					type: 'datePicker',
					label: '时间段',
					dateType: 'daterange', // datetimerange
					format: 'yyyy-MM-dd',
					valueFormat: 'yyyy-MM-dd HH:mm:ss',
					rangeSeparator: '-',
					startPlaceholder: '开始时间',
					endPlaceholder: '结束时间',
					defaultTime: ['00:00:00', '23:59:59'],
					param: 'timeVal',
					width: 350,
				},
				{
					type: 'button',
					btnName: '查询',
					name: 'search',
					color: 'primary',
				},
			],
		};
	},
	mounted() {},
	methods: {
		/** 查询 */
        handleQuery() {},

        handleSearchBarBtnClick() {},

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

		/** 构造 props */
		buildProps() {
			this.tableList.forEach((table) => {
				this.buildTableProp(table);
			});
		},

		/** 构造一个 tableProps - 根据动态结构 */
		buildTableProp(table) {},

		/** 为某个 table 获取 list 数据 */
		getListFor(table, val) {
			console.log('get list for', table, val);
		},
	},
};
</script>

<style scoped lang="scss"></style>
