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

		<!-- 列表 -->
		<base-table
			:table-props="tableProps"
			:page="queryParams.pageNo"
			:limit="queryParams.pageSize"
			:table-data="list"
			@emitFun="handleEmitFun">
			<method-btn
				v-if="tableBtn.length"
				slot="handleBtn"
				label="操作"
				:width="120"
				:method-list="tableBtn"
				@clickBtn="handleTableBtnClick" />
		</base-table>

		<!-- 分页组件 -->
		<pagination
			v-show="total > 0"
			:total="total"
			:page.sync="queryParams.pageNo"
			:limit.sync="queryParams.pageSize"
			@pagination="getList" />

		<!-- 对话框(添加 / 修改) -->
		<!-- <base-dialog
			:dialogTitle="title"
			:dialogVisible="open"
			width="500px"
			@close="cancel"
			@cancel="cancel"
			@confirm="submitForm">
			<DialogForm v-if="open" ref="form" :dataForm="form" :rows="rows" />
		</base-dialog> -->
	</div>
</template>

<script>
import moment from 'moment';
import basicPageMixin from '@/mixins/lb/basicPageMixin';
import { publicFormatter } from '@/utils/dict';

export default {
	name: 'EquipmentStatusAndParams',

	mixins: [basicPageMixin],
	data() {
		return {
			searchBarKeys: ['equipmentId', 'productionLineId'],
			tableBtn: [
				this.$auth.hasPermi('base:equipment-alarm-log:update')
					? {
							type: 'edit',
							btnName: '修改',
					  }
					: undefined,
				this.$auth.hasPermi('base:equipment-alarm-log:delete')
					? {
							type: 'delete',
							btnName: '删除',
					  }
					: undefined,
			].filter((v) => v),
			tableProps: [
				{
					prop: 'lineName',
					label: '产线名',
				},
				{
					prop: 'workshopName',
					label: '工段名',
          showOverflowtooltip :true,
				},
				{
					width: 200,
					prop: 'equipmentName',
					label: '设备名称',
				},
				{
					width: 150,
          showOverflowtooltip :true,
					prop: 'equipmentCode',
					label: '设备编码',
				},
				{ width: 128, prop: 'inQuantity', label: '投入数[片]' },
				{ width: 128, prop: 'outQuantity', label: '产出数[片]' },
				{
					width: 128,
					prop: 'run',
					label: '是否运行',
					filter: (val) => (val != null ? (val ? '是' : '否') : '-'),
				},
				{
					width: 128,
					prop: 'status',
					label: '状态',
					filter: (val) =>
						val != null ? ['正常', '计划停机', '故障'][val] : '-',
				},
				{
					width: 128,
					prop: 'error',
					label: '是否故障',
					filter: (val) => (val != null ? (val ? '是' : '否') : '-'),
				},
				{
					prop: 'quantityRecordTime',
					label: '生产量记录时间',
					width: 180,
					filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'),
				},
				{
					prop: 'statusRecordTime',
					label: '状态记录时间',
					width: 180,
					filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'),
				},
				{
					_action: 'params-monitor',
					label: '操作',
					width: 56,
					subcomponent: {
						props: ['injectData'],
						render: function (h) {
							const _this = this;
							return h(
								'el-button',
								{
									class: 'iconfont icon-detail',
									props: { type: 'text' },
									on: {
										click: function () {
											_this.$emit('emitData', {
												action: _this.injectData._action,
												// value: _this.injectData.id,
												value: _this.injectData,
											});
										},
									},
								}
								// '查看详情'
							);
						},
					},
				},
			],
			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',
				// 	rangeSeparator: '-',
				// 	startPlaceholder: '开始日期',
				// 	endPlaceholder: '结束日期',
				// 	defaultTime: ['00:00:00', '23:59:59'],
				// 	param: 'createTime',
				// 	// width: 350,
				// },
				{
					type: 'select',
					label: '产线',
					onchange: true,
					placeholder: '请选择产线',
					selectOptions: [],
					param: 'productionLineId',
				},
				{
					type: 'select',
					label: '设备',
					placeholder: '请选择设备',
					param: 'equipmentId',
					selectOptions: [],
				},
				{
					type: 'button',
					btnName: '查询',
					name: 'search',
					color: 'primary',
				},
			],
			// 是否显示弹出层
			open: false,
			// 查询参数
			queryParams: {
				pageNo: 1,
				pageSize: 10,
				productionLineId: null,
				equipmentId: null,
			},
			total: 0,
			// 表单参数
			form: {},
			// 表单校验
			rules: {},
		};
	},
	created() {
		this.getLineList();
		this.getList();
	},
	methods: {
		/** 获取产线 */
		async getLineList() {
			const { data } = await this.$axios({
				url: '/base/production-line/listAll',
				method: 'get',
			});
			this.searchBarFormConfig[0].selectOptions = data.map((line) => ({
				name: line.name,
				id: line.id,
			}));
		},

		/** 根据产线获取设备 */
		async getEquipmentList(id) {
			const { data } = await this.$axios({
				url: '/base/equipment/listByLine',
				method: 'get',
				params: { id },
			});
			return data;
		},

		/** 监听 search bar 的产线下拉框改变 */
		async handleSearchBarItemChange({ param, value: id }) {
			if (param == 'productionLineId') {
				if (id == '') {
					// 清除设备选框里的选项
					this.searchBarFormConfig[1].selectOptions = [];
					return;
				}
				const list = await this.getEquipmentList(id);
				this.searchBarFormConfig[1].selectOptions = list.map((eq) => ({
					name: eq.name,
					id: eq.id,
				}));
			}
		},

		handleSearchBarBtnClick(btn) {
			const { equipmentId, productionLineId } = btn;
			if (equipmentId) this.queryParams.equipmentId = equipmentId;
			else this.queryParams.equipmentId = null;
			if (productionLineId)
				this.queryParams.productionLineId = productionLineId;
			else this.queryParams.productionLineId = null;
			this.getList();
		},

		/** 查询列表 */
		async getList() {
			this.loading = true;
			const { data } = await this.$axios({
				url: '/monitoring/equipment-monitor/realtime-page',
				method: 'get',
				params: this.queryParams,
			});
			this.list = data.list;
			this.total = data.total;
		},

		handleEmitFun({ action, value }) {
			if (action == 'params-monitor') {
				const { equipmentId, equipmentName, equipmentCode } = value;
				this.$router.push({
					name: 'equipmentFullParams',
					params: {
						equipmentId,
						equipmentCode,
						equipmentName,
					},
				});
			}
		},
	},
};
</script>
