<!-- 
    filename: index.vue
    author: liubin
    date: 2023-08-04 14:44:58
    description: 检测统计数据
-->

<template>
	<div class="app-container">
		<!-- 搜索工作栏 -->
		<SearchBar
			:formConfigs="searchBarFormConfig"
			ref="search-bar"
			@headBtnClick="handleSearchBarBtnClick" />

		<transition mode="out-in" name="fade-down">
			<template v-if="mode == 'table'">
				<!-- 列表 -->
				<base-table
					v-if="mode == 'table'"
					:table-props="tableProps"
					:page="queryParams.pageNo"
					:limit="queryParams.pageSize"
					:table-data="list"
					@emitFun="handleEmitFun"></base-table>
			</template>

			<GraphPage
				v-else
				:summary-list="summaryList"
				:line-data="{ list: list, xProps: dynamicProps.map((v) => v.prop) }" />
		</transition>

		<!-- todo: 数据总览，用弹窗包裹的 table 实现 -->
		<base-dialog
			dialogTitle="数据总览"
			:dialogVisible="summaryOpen"
			width="50%"
			@close="handleSummaryClose"
			@cancel="handleSummaryClose"
			@confirm="handleSummaryClose">
			<summaryTable :list="summaryList" />
		</base-dialog>
	</div>
</template>

<script>
import GraphPage from './graphPage.vue';
import summaryTable from './components/summaryTable.vue';

export default {
	name: 'QualityStatistics',
	components: { GraphPage, summaryTable },
	props: {},
	data() {
		return {
			mode: 'table', // defaults to 'table'
			searchBarFormConfig: [
				{
					type: 'datePicker',
					label: '时间段',
					dateType: 'daterange', // datetimerange
					// format: 'yyyy-MM-dd HH:mm:ss',
					format: 'yyyy-MM-dd',
					// valueFormat: 'yyyy-MM-dd HH:mm:ss',
					valueFormat: 'timestamp',
					rangeSeparator: '-',
					startPlaceholder: '开始日期',
					endPlaceholder: '结束日期',
					defaultTime: ['00:00:00', '23:59:59'],
					param: 'timerange',
				},
				{
					type: 'button',
					btnName: '查询',
					name: 'search',
					color: 'primary',
				},
				{
					type: 'separate',
				},
				{
					type: 'button',
					btnName: '数据总览',
					name: 'summary',
					color: 'text',
				},
				{
					type: 'separate',
				},
				{
					type: 'button',
					btnName: '表格版',
					name: 'tableVersion',
					color: 'text btn-table',
				},
				{
					type: 'separate',
				},
				{
					type: 'button',
					btnName: '图形版',
					name: 'graphVersion',
					color: 'text btn-graph',
				},
			],
			// 动态的 props
			dynamicProps: [],
			// 查询参数
			queryParams: {
				pageNo: 1,
				pageSize: 10,
				param: null,
			},
			summaryList: [],
			summaryOpen: false,
			list: [
				/** mock data */
				// {
				// 	content: 'asdfasdf',
				// 	line1: '',
				// 	line2: '',
				// 	line3: '',
				// 	line4: '',
				// 	line5: '',
				// 	line6: '',
				// 	line7: '',
				// 	line8: '',
				// 	line9: '',
				// 	line10: '',
				// 	typeTotal: 100,
				// 	ratio: '93%',
				// },
				// {
				// 	content: 'fdasfs',
				// 	line1: '',
				// 	line2: '',
				// 	line3: '',
				// 	line4: '',
				// 	line5: '',
				// 	line6: '',
				// 	line7: '',
				// 	line8: '',
				// 	line9: '',
				// 	line10: '',
				// 	typeTotal: 100,
				// 	ratio: '93%',
				// },
				// {
				// 	content: 'asdfdfffffff',
				// 	line1: '',
				// 	line2: '',
				// 	line3: '',
				// 	line4: '',
				// 	line5: '',
				// 	line6: '',
				// 	line7: '',
				// 	line8: '',
				// 	line9: '',
				// 	line10: '',
				// 	typeTotal: 100,
				// 	ratio: '93%',
				// },
			],
		};
	},
	computed: {
		tableProps() {
			return [
				{
					// width: 160,
					prop: 'inspectionContent',
					label: '检测内容',
					align: 'center',
				},
				...this.dynamicProps,
				{
					// width: 128,
					prop: 'sumInput',
					label: '检测类型总数',
					align: 'center',
				},
				{
					// width: 128,
					prop: 'ratio',
					label: '比例',
					align: 'center',
					// subcomponent: {
					// 	name: 'TextOnly',
					// 	props: {
					// 		injectData: {
					// 			type: Object,
					// 			default: () => ({}),
					// 		},
					// 	},
					// 	data() {
					// 		return {
					// 			text: '比例',
					// 		};
					// 	},
					// 	methods: {
					// 		handleEmit(payload) {
					// 			console.log('handleEmit', payload);
					// 		},
					// 	},
					// 	render(h) {
					// 		return h('el-button', { props: { type: 'text' } }, this.text);
					// 	},
					// },
				},
			];
		},
	},
	mounted() {
		this.getList();
	},
	methods: {
		getList() {
			this.getSummaryList();
			this.getDetailedList();
		},
		/** 获取 检测总数 列表 */
		async getSummaryList() {
			const response = await this.$axios({
				url: '/monitoring/statistical-data/getUpPart',
				method: 'get',
				params: this.queryParams.param
					? {
							param: {
								// startTime: new Date(2022, 6, 1, 0, 0, 0).getTime(), //  '2023-07-01 00:00:00',
								// endTime: new Date(2023, 7, 10, 0, 0, 0).getTime(), // '2023-08-10 00:00:00',
								startTime: this.queryParams.param.startTime,
								endTime: this.queryParams.param.endTime,
							},
					  }
					: null,
			});
			this.summaryList = response.data;
			console.log('summaryList', this.summaryList);
		},
		/** 获取 检测内容和产线关联 列表 */
		async getDetailedList() {
			const {
				data: { data, otherList, otherMap, nameData },
			} = await this.$axios({
				url: '/monitoring/statistical-data/getDownPart',
				params: this.queryParams.param
					? {
							param: {
								// startTime: new Date(2023, 6, 1).getTime(), // '2023-07-01 00:00:00',
								// endTime: new Date(2023, 7, 22).getTime(), // '2023-08-10 00:00:00',
								startTime: this.queryParams.param.startTime,
								endTime: this.queryParams.param.endTime,
							},
					  }
					: null,
			});
			// this.list = response.data;
			console.log('data', data);
			console.log('otherList', otherList);
			console.log('otherMap', otherMap);
			console.log('nameData', nameData);

			this.dynamicProps = this.filterNameData(nameData);
			this.list = this.filterData(data);
		},
		filterNameData(nameData) {
			const ndSet = new Set();
			nameData.forEach((nd) => {
				ndSet.add(nd.name);
			});
			return Array.from(ndSet.values())
				.sort()
				.map((name) => ({
					prop: name,
					label: name,
				}));
		},
		filterData(data) {
			return data.map((item) => {
				const { data: innerData } = item;
				const keyValuePairs = {};
				innerData.map((d) => {
					keyValuePairs[d.dynamicName] = d.dynamicValue;
				});
				return {
					inspectionContent: item.inspectionContent,
					...keyValuePairs,
					sumInput: item.sumInput,
				};
			});
		},
		/** 总览关闭 */
		handleSummaryClose() {
			this.summaryOpen = false;
		},
		/** 搜索按钮 */
		handleSearchBarBtnClick(btn) {
			console.log('bnt, ', btn);
			switch (btn.btnName) {
				case 'search':
					if (btn.timerange && typeof btn.timerange === 'object') {
						this.queryParams.param = {};
						this.$set(this.queryParams.param, 'startTime', btn.timerange[0]);
						this.$set(this.queryParams.param, 'endTime', btn.timerange[1]);
					}
					this.handleQuery();
					break;
				case 'summary':
					this.summaryOpen = true;
					break;
				case 'tableVersion':
					this.mode = 'table';
					break;
				case 'graphVersion':
					this.mode = 'graph';
					break;
				case 'reset':
					this.$refs['search-bar'].resetForm();
					// this.resetQuery();
					break;
			}
		},
		handleQuery() {
			this.getSummaryList();
			this.getDetailedList();
		},
		/** 处理表格事件 */
		handleEmitFun() {},
	},
};
</script>

<style scoped lang="scss">
:deep(.searchBar) {
	.el-button.btn-table {
		color: rgb(0, 130, 130);
		border: 1px solid rgb(0, 130, 130);
		padding: 8px 10px;
		border: 1px solid rgb(0, 130, 130);
		padding: 8px 10px;

		&:hover {
			border-color: #fff;
			color: #fff;
			background: rgb(0, 130, 130);
		}
	}
	.el-button.btn-graph {
		color: rgb(130, 0, 130);
		border: 1px solid rgb(130, 0, 130);
		padding: 8px 10px;

		&:hover {
			border-color: #fff;
			color: #fff;
			background: rgb(130, 0, 130);
		}
	}
}

.fade-down-enter-active,
.fade-down-leave-active {
	transition: all 0.3s;
}

.fade-down-enter,
.fade-down-leave-to {
	transform: translateY(20%);
	opacity: 0;
}

.fade-down-enter-to,
.fade-down-leave {
	transform: translateY(0);
}
</style>

<!-- 
// {
	// 	width: 128,
	// 	prop: 'line1',
	// 	label: '产线1',
	// 	align: 'center',
	// },
	// {
	// 	width: 128,
	// 	prop: 'line2',
	// 	label: '产线2',
	// 	align: 'center',
	// },
	// {
	// 	width: 128,
	// 	prop: 'line3',
	// 	label: '产线3',
	// 	align: 'center',
	// },
	// {
	// 	width: 128,
	// 	prop: 'line4',
	// 	label: '产线4',
	// 	align: 'center',
	// },
	// {
	// 	width: 128,
	// 	prop: 'line5',
	// 	label: '产线5',
	// 	align: 'center',
	// },
	// {
	// 	width: 128,
	// 	prop: 'line6',
	// 	label: '产线6',
	// 	align: 'center',
	// },
	// {
	// 	width: 128,
	// 	prop: 'line7',
	// 	label: '产线7',
	// 	align: 'center',
	// },
	// {
	// 	width: 128,
	// 	prop: 'line8',
	// 	label: '产线8',
	// 	align: 'center',
	// }, -->
