<!-- 
    filename: index.vue
    author: liubin
    date: 2023-09-04 09:34:52
    description: 设备质量分析
-->

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

		<!-- 列表 -->
		<base-table
			:table-props="tableProps"
			:page="queryParams.pageNo"
			:limit="queryParams.pageSize"
			:table-data="list"
			@emitFun="handleEmitFun"></base-table>

		<!-- 图形分析 dialog -->
		<base-dialog
			dialogTitle="图形视角"
			:dialogVisible="dialogVisible"
			width="60%"
			@close="dialogClose"
			@cancel="dialogClose"
			@confirm="dialogClose">
			<LineChart :config="lineChartConfig" />
		</base-dialog>
	</div>
</template>

<script>
import LineChart from './components/lineChart.vue';

export default {
	name: 'QualityAnalysis',
	components: { LineChart },
	props: {},
	data() {
		return {
			dialogVisible: false,
			urls: {
				page: '/analysis/equipment-analysis/quality',
			},
			mode: 'table', // defaults to 'table'
			searchBarFormConfig: [
				// 产品
				{
					__index: 'product',
					type: 'select',
					label: '产品',
					placeholder: '请选择产品',
					param: 'productId',
				},
				// 产线
				{
					__index: 'line',
					type: 'select',
					label: '产线',
					placeholder: '请选择产线',
					param: 'lineId',
				},
				// 时间段
				{
					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: 'recordTime',
				},
				{
					type: 'button',
					btnName: '查询',
					name: 'search',
					color: 'primary',
				},
				{
					type: 'separate',
				},
				// {
				// 	type: 'button',
				// 	btnName: '列表数据',
				// 	name: 'tableVersion',
				// 	color: 'text btn-table',
				// },
				// {
				// 	type: 'separate',
				// },
				{
					type: 'button',
					btnName: '图形分析',
					name: 'graphVersion',
					color: 'text btn-graph',
				},
			],
			// 动态的 props
			tableProps: [
				{
					// width: 160,
					prop: 'sectionName',
					label: '工段',
					align: 'center',
				},
				{
					// width: 160,
					prop: 'equipmentName',
					label: '设备名称',
					align: 'center',
				},
				{
					// width: 160,
					prop: 'products',
					label: '产品名称',
					align: 'center',
				},
				{
					// width: 160,
					prop: 'inQuantity',
					label: '进片数量',
					align: 'center',
				},
				{
					// width: 160,
					prop: 'outQuantity',
					label: '出片数量',
					align: 'center',
				},
				{
					// width: 160,
					prop: 'nokQuantity',
					label: '破损/不合格数',
					align: 'center',
				},
				{
					// width: 160,
					prop: 'passRate',
					label: '合格率',
					align: 'center',
				},
			],

			// 查询参数
			queryParams: {
				pageNo: 1,
				pageSize: 10,
				lineId: null,
				productId: null,
				recordTime: [],
			},
			list: [],
		};
	},
	computed: {},
	created() {
		this.fillLineOptions();
		this.fillProductOptions();
		this.getList();
	},
	methods: {
		async fillLineOptions() {
			const { data } = await this.$axios({
				url: '/base/production-line/listAll',
				method: 'get',
			});
			const cfg = this.searchBarFormConfig.find(
				(item) => item.__index == 'line'
			);
			this.$set(
				cfg,
				'selectOptions',
				data.map((item) => ({
					id: item.id,
					name: item.name,
				}))
			);
		},

		async fillProductOptions() {
			const { data } = await this.$axios({
				url: '/base/product/listAll',
				method: 'get',
			});
			const cfg = this.searchBarFormConfig.find(
				(item) => item.__index == 'product'
			);
			this.$set(
				cfg,
				'selectOptions',
				data.map((item) => ({
					id: item.id,
					name: item.name,
				}))
			);
		},

		async getList() {
			const { data } = await this.$axios({
				url: '/analysis/equipment-analysis/quality',
				method: 'get',
				params: {
					lineId: this.queryParams.lineId || null,
					productId: this.queryParams.productId || null,
					recordTime: this.queryParams.recordTime || null,
				},
			});
			this.list = data.map((item) => ({
				...item,
				products: item.products.join(','),
			}));
		},

		handleSearchBarBtnClick(btn) {
			console.log('handleSearchBarBtnClick', btn);
			switch (btn.btnName) {
				case 'search':
					this.queryParams.lineId = btn.lineId;
					this.queryParams.productId = btn.productId;
					this.queryParams.recordTime = btn.recordTime;
					this.$nextTick(() => {
						this.getList();
					});
					break;
				case 'tableVersion':
					this.dialogClose();
					break;
				case 'graphVersion':
					this.dialogShow();
					break;
			}
		},

		handleEmitFun({ action, payload }) {},

		dialogShow() {
			this.dialogVisible = true;
		},

		dialogClose() {
			this.dialogVisible = false;
		},
	},
};
</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);
		}
	}
}
</style>
