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

<template>
	<div class="quality-container" style="background: #f2f4f9; flex: 1; display: flex; flex-direction: column;">
		<el-row
			class=""
			style="
				margin-bottom: 12px;
				background: #fff;
				padding: 16px 16px 0;
				border-radius: 8px;
			">
			<!-- 搜索工作栏 -->
			<SearchBar
				:formConfigs="searchBarFormConfig"
				ref="search-bar"
				@headBtnClick="handleSearchBarBtnClick" />
		</el-row>

		<el-row
			class=""
			style="
				margin-top: 0;
				margin-bottom: 12px;
				background: #fff;
				padding: 12px 16px 16px;
				border-radius: 8px;
			">
			<div class="blue-title">产线检测总览</div>
			<summaryTable :list="summaryList" />
		</el-row>

		<el-row
			class=""
			style="
				margin-top: 0;
				margin-bottom: 12px;
				background: #fff;
				padding: 12px 16px 16px;
				border-radius: 8px;
				flex: 1;
			">
			<el-row style="display: flex; align-items: center">
				<div class="blue-title">产线检测详细</div>
				<div class="custom-tabs">
					<el-tabs
						v-model="activeName"
						:stretch="true"
						@tab-click="handleTabClick">
						<el-tab-pane
							:label="'\u2002数据列表\u2002'"
							name="table"></el-tab-pane>
						<el-tab-pane
							:label="'\u3000柱状图\u3000'"
							name="graph"></el-tab-pane>
					</el-tabs>
				</div>
			</el-row>

			<transition mode="out-in" name="fade-down">
				<template v-if="mode == 'table'">
					<base-table
						v-if="mode == 'table' && list.length"
						:table-props="tableProps"
						:page="queryParams.pageNo"
						:limit="queryParams.pageSize"
						:table-data="list"
						@emitFun="handleEmitFun"></base-table>
					<div v-else class="no-data-bg"></div>
				</template>

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

		<!-- 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';

class DateGetter {
	constructor() {
		this.today = new Date();
		this.y = this.today.getFullYear();
		this.m = this.today.getMonth();
		this.d = this.today.getDate();
	}
	getWeekRange() {
		const weekStart = new Date(this.y, this.m, this.d - this.today.getDay());
		const weekEnd = new Date(
			this.y,
			this.m,
			this.d + (6 - this.today.getDay()),
			23,
			59,
			59
		);
		// console.log('week', [weekStart, weekEnd]);
		return [weekStart, weekEnd];
	}

	getMonthRange() {
		const monthStart = new Date(this.y, this.m, 1);
		const monthEnd = new Date(this.y, this.m + 1, 0, 23, 59, 59);
		// console.log('month', [monthStart, monthEnd]);
		return [monthStart, monthEnd];
	}

	getQuarterRange() {
		const quarterStart = new Date(this.y, this.m - (this.m % 3), 1);
		const quarterEnd = new Date(
			this.y,
			this.m - (this.m % 3) + 3,
			0,
			23,
			59,
			59
		);
		// console.log('quarter', [quarterStart, quarterEnd]);
		return [quarterStart, quarterEnd];
	}
}

export default {
	name: 'QualityStatistics',
	components: { GraphPage, summaryTable },
	props: {},
	data() {
		const dateGetter = new DateGetter();
		return {
			// mode: 'table', // defaults to 'table'
			activeName: '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: '结束日期',
					defaultSelect: [],
					defaultTime: ['00:00:00', '23:59:59'],
					param: 'timerange',
					pickerOptions: {
						shortcuts: [
							{
								text: '本周',
								onClick(picker) {
									picker.$emit('pick', dateGetter.getWeekRange());
								},
							},
							{
								text: '本月',
								onClick(picker) {
									picker.$emit('pick', dateGetter.getMonthRange());
								},
							},
							{
								text: '本季',
								onClick(picker) {
									picker.$emit('pick', dateGetter.getQuarterRange());
								},
							},
						],
					},
				},
				{
					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: {
		mode() {
			return this.activeName;
		},
		tableProps() {
			return [
				{
					// width: 160,
					prop: 'inspectionContent',
					label: '检测内容',
				},
				...this.dynamicProps,
				{
					// width: 128,
					prop: 'sumInput',
					label: '检测类型总数',
				},
				{
					// width: 128,
					prop: 'scrapRatio',
					label: '比例(%)',
					// 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() {
		if (this.$route.params.startTime && this.$route.params.endTime) {
			this.searchBarFormConfig[0].defaultSelect = [
				this.$route.params.startTime,
				this.$route.params.endTime,
			];
			this.queryParams.param = {};
			this.$set(
				this.queryParams.param,
				'startTime',
				this.$route.params.startTime
			);
			this.$set(this.queryParams.param, 'endTime', this.$route.params.endTime);
		} else {
			this.searchBarFormConfig[0].defaultSelect = [];
		}
		this.getList();
	},
	watch: {
		$route: 'initData',
	},
	methods: {
		initData(to) {
			// console.log(to)
			if (to.name === 'QualityStatistics') {
				if (this.$route.params.startTime && this.$route.params.endTime) {
					this.searchBarFormConfig[0].defaultSelect = [
						this.$route.params.startTime,
						this.$route.params.endTime,
					];
					this.queryParams.param = {};
					this.$set(
						this.queryParams.param,
						'startTime',
						this.$route.params.startTime
					);
					this.$set(
						this.queryParams.param,
						'endTime',
						this.$route.params.endTime
					);
				} else {
					this.searchBarFormConfig[0].defaultSelect = [];
				}
				this.getList();
			}
		},
		getList() {
			this.getSummaryList();
			this.getDetailedList();
		},
		/** 获取 检测总数 列表 */
		async getSummaryList() {
			const response = await this.$axios({
				url: '/monitoring/statistical-data/getUpPart',
				method: 'post',
				data: this.queryParams.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,
					  }
					: {},
			});
			this.summaryList = response.data;
		},
		/** 获取 检测内容和产线关联 列表 */
		async getDetailedList() {
			const {
				data: { data, otherList, otherMap, nameData },
			} = await this.$axios({
				url: '/monitoring/statistical-data/getDownPart',
				method: 'post',
				data: this.queryParams.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,
					  }
					: {},
			});
			// 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,
					scrapRatio: item.scrapRatio,
				};
			});
		},
		handleTabClick(tab, event) {
			const { name } = tab;
			if (name == 'graph') {
				// 展示柱状图
			} else {
				// 展示表格
			}
		},
		/** 总览关闭 */
		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);
}

.blue-title {
	position: relative;
	padding: 4px 0;
	padding-left: 12px;
	font-size: 14px;
	color: #606266;
	font-weight: 700;
	margin-bottom: 12px;

	&::before {
		content: '';
		position: absolute;
		left: 0;
		top: 6px;
		height: 16px;
		width: 4px;
		border-radius: 1px;
		background: #0b58ff;
	}
}

:deep(.custom-tabs) {
	.el-tabs__header {
		margin-left: 12px;
		margin-bottom: 8px;
		display: inline-block;
		transform: translateY(-6px);
	}

	.el-tabs__item {
		padding-left: 0 !important;
		padding-right: 0 !important;
		height: 36px;
	}
}
</style>

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