<!-- 
    filename: index.vue
    author: liubin
    date: 2023-08-04 14:44:58
    description: 
-->

<template>
	<div class="app-container">
		<SearchBar
			:formConfigs="[{ label: '近24小时检测记录', type: 'title' }]"
			ref="search-bar" />
		<!-- <pre><code v-html="jsondemo"></code></pre> -->

		<el-skeleton v-if="initing" :rows="6" animated />
		<base-table
			v-else
			:table-props="tableProps"
			:page="queryParams.pageNo"
			:limit="queryParams.pageSize"
			:table-data="list"
			@emitFun="handleEmitFun"></base-table>
	</div>
</template>

<script>
import response from './response.json';
import { handleNameData, handleDynamicData } from '@/utils/dynamicProps';
// import hljs from 'highlight.js/lib/highlight';
// import json from 'highlight.js/lib/languages/json';
// import 'highlight.js/styles/github-gist.css';

// hljs.registerLanguage('json', json);

export default {
	name: 'QualityRecentHours',
	components: {},
	props: {},
	data() {
		return {
			initing: false,
			queryParams: {
				pageNo: 1,
				pageSize: 10,
			},
			// jsondemo: '',
			list: [
				// {
				// 	inspectionContent: '检测内容1',
				// 	'2023-03-18T00:00:00-产线1': '产线1-asdf',
				// 	'2023-03-18T01:00:00-产线2': '产线2-kldf',
				// 	'2023-03-18T02:00:00-产线1': '产线1-vasdkj',
				// },
			],
			tableProps: [
				{
					prop: 'inspectionContent',
					label: '检测内容',
					align: 'center',
				},
			],
		};
	},
	computed: {},
	mounted() {
		this.getList();
	},
	methods: {
		async getList() {
			// const response = await this.$axios({
			// 	url: '/monitoring/record-in-one-day/get',
			// 	method: 'get',
			// });
			console.log(response);
			// const {
			// 	// data: { nameData },
			// 	code,
			// } = response;
			// this.jsondemo = hljs.highlight(
			// 	'json',
			// 	JSON.stringify(response, null, 2),
			// 	true
			// ).value;
			const {
				data: { data: dyanmicData, nameData },
			} = response;

			this.initing = true;
			const dynamicProps = handleNameData(nameData);
			this.tableProps.push(...dynamicProps);
			const dataList = handleDynamicData(dyanmicData);
			this.list = dataList;
			this.queryParams.pageSize = dataList.length;

			setTimeout(() => {
				this.initing = false;
			}, 1000);
		},

		handleEmitFun(payload) {
			console.log('payload', payload);
		},
	},
};
</script>

<style scoped lang="scss">
::-webkit-scrollbar {
	display: none;
}

pre {
	margin: 10px;
	background: #f6f8faf6;
	border: 1px solid #e1e4e8;
	padding: 12px;
	border-radius: 12px;
	position: fixed;
	// top: 15vh;
	top: 10vh;
	left: 0;
	max-height: 80vh;
	overflow-y: auto;
	z-index: 100000;
	box-shadow: 0 0 32px 12px #0001;
}

code {
	font-family: 'IntelOne Mono', 'Ubuntu', 'Courier New', Courier, monospace;
}
</style>
