<template>
	<el-container>
		<el-header>
			<div class="left-panel">
				<el-button
					type="primary"
					icon="el-icon-plus"
					@click="table_add"
					v-auth="'mpoint.create'"
					>新增</el-button
				>
				<el-button
					type="warning"
					@click="king_sync"
					v-auth="'mpoint.create'"
					>同步亚控测点</el-button
				>
				<el-button
					type="primary"
					@click="batchUpdate"
					v-auth="'mpoint.update'"
					>批量修改</el-button
				>
			</div>
			<div class="right-panel">
				<el-select
					v-model="query.enabled"
					placeholder="是否启用"
					@change="handleQuery"
					clearable
					style="width: 100px"
				>
					<el-option
						v-for="e in boolEnum.values"
						:key="e.key"
						:value="e.key"
						:label="e.text"
					></el-option>
				</el-select>
				<el-select
					v-model="query.type"
					placeholder="测点类型"
					@change="handleQuery"
					clearable
					style="width: 100px"
				>
					<el-option
						v-for="e in mpointTypeEnum.values"
						:key="e.key"
						:value="e.key"
						:label="e.text"
					></el-option>
				</el-select>
				<el-select
					v-model="query.val_type"
					placeholder="值类型"
					@change="handleQuery"
					clearable
					style="width: 100px"
				>
					<el-option
						v-for="e in valTypeEnum.values"
						:key="e.key"
						:value="e.key"
						:label="e.text"
					></el-option>
				</el-select>
				<el-select
					v-model="query.need_display"
					placeholder="是否展示"
					@change="handleQuery"
					clearable
					style="width: 100px"
				>
					<el-option
						v-for="e in boolEnum.values"
						:key="e.key"
						:value="e.key"
						:label="e.text"
					></el-option>
				</el-select>
				<el-input
					v-model="query.search"
					placeholder="名称/代号"
					style="width: 200px"
					clearable
				></el-input>
				<el-button
					type="primary"
					icon="el-icon-search"
					@click="handleQuery"
				></el-button>
			</div>
		</el-header>
		<el-main class="nopadding">
			<scTable
				ref="table"
				:apiObj="apiObj"
				row-key="id"
				remoteSort
				:query="query"
				:params="params"
				@selection-change="selectionChange"
			>
				<el-table-column type="selection" width="50" />
				<el-table-column
					label="名称"
					prop="name"
					width="200"
					show-overflow-tooltip
					sortable
				></el-table-column>
				<el-table-column
					label="别名"
					prop="nickname"
					width="120"
					show-overflow-tooltip
					sortable
				></el-table-column>
				<el-table-column
					label="代号"
					prop="code"
					width="130"
					show-overflow-tooltip
					sortable
				></el-table-column>
				<el-table-column label="是否启用" width="80">
					<template #default="scope">
						<el-icon v-if="scope.row.enabled" color="green"
							><CircleCheckFilled
						/></el-icon>
						<el-icon v-else color="red"
							><CircleCloseFilled
						/></el-icon>
					</template>
				</el-table-column>
				<el-table-column label="采集状态" show-overflow-tooltip>
					<template #default="scope">
						<el-tag
							:type="
								mpointGatherStateEnum[scope.row.gather_state]
									?.type
							"
							>{{
								mpointGatherStateEnum[scope.row.gather_state]
									?.text
							}}</el-tag
						>
					</template>
				</el-table-column>
				<el-table-column label="测点类型" width="80">
					<template #default="scope"
						>{{ mpointTypeEnum[scope.row.type]?.text }}
					</template>
				</el-table-column>

				<el-table-column
					label="采集间隔(s)"
					prop="interval"
					width="100"
				></el-table-column>
				<el-table-column label="值类型" prop="val_type" width="80">
					<template #default="scope"
						>{{ valTypeEnum[scope.row.val_type]?.text }}
					</template>
				</el-table-column>
				<el-table-column
					label="单位"
					prop="unit"
					width="80"
				></el-table-column>
				<el-table-column
					label="计量物料"
					prop="material_name"
					width="100"
				></el-table-column>
				<el-table-column
					label="所属工段"
					prop="mgroup_name"
					width="100"
				></el-table-column>
				<el-table-column label="是否展示" width="80">
					<template #default="scope">
						<el-icon v-if="scope.row.need_display" color="green"
							><CircleCheckFilled
						/></el-icon>
						<el-icon v-else color="red"
							><CircleCloseFilled
						/></el-icon>
					</template>
				</el-table-column>
				<el-table-column
					label="报告排序"
					prop="report_sortstr"
					width="100"
					sortable
				>
				</el-table-column>
				<el-table-column
					label="创建时间"
					prop="create_time"
					show-overflow-tooltip
					sortable
					width="160"
				></el-table-column>
				<el-table-column
					label="操作"
					fixed="right"
					align="center"
					width="140"
				>
					<template #default="scope">
						<el-button
							link
							size="small"
							@click="mplog_record(scope.row)"
							type="primary"
							>原始记录</el-button
						>
						<el-divider direction="vertical"></el-divider>
						<el-button
							link
							size="small"
							@click="table_edit(scope.row)"
							v-auth="'mpoint.update'"
							type="primary"
							>编辑</el-button
						>
						<el-divider direction="vertical"></el-divider>
						<el-popconfirm
							title="确定删除吗？"
							@confirm="table_del(scope.row, scope.$index)"
						>
							<template #reference>
								<el-button
									link
									size="small"
									v-auth="'mpoint.delete'"
									type="danger"
									>删除</el-button
								>
							</template>
						</el-popconfirm>
					</template>
				</el-table-column>
			</scTable>
		</el-main>
	</el-container>
	<save-dialog
		v-if="dialog.save"
		ref="saveDialog"
		@success="handleSaveSuccess"
		@closed="dialog.save = false"
	></save-dialog>
	<el-drawer
		title="测点原始记录"
		v-model="logShow"
		:size="1000"
		destroy-on-close
	>
		<scTable ref="tableMplog" row-key="id" :data="mplogRecord">
			<el-table-column type="selection" width="50" />
			<el-table-column label="采集时间" prop="timex"></el-table-column>
			<el-table-column label="采集数值">
				<template #default="scope">
					<span v-if="scope.row.val_int != null">{{
						scope.row.val_int
					}}</span>
					<span v-else-if="scope.row.val_bool != null">{{
						scope.row.val_bool
					}}</span>
					<span v-else-if="scope.row.val_str != null">{{
						scope.row.val_str
					}}</span>
					<span v-else-if="scope.row.val_float != null">{{
						scope.row.val_float
					}}</span>
				</template>
			</el-table-column>
		</scTable>
	</el-drawer>
</template>
<script>
import saveDialog from "./mpoint_form.vue";
import {
	valTypeEnum,
	boolEnum,
	mpointTypeEnum,
	mpointGatherStateEnum,
} from "@/utils/enum.js";
export default {
	name: "rparty",
	components: {
		saveDialog,
	},
	data() {
		return {
			valTypeEnum,
			boolEnum,
			mpointTypeEnum,
			mpointGatherStateEnum,
			logShow: false,
			dialog: {
				save: false,
				permission: false,
			},
			apiObj: this.$API.enm.mpoint.list,
			params: {},
			query: {},
			selection: [],
			mplogRecord: [],
		};
	},
	methods: {
		//添加
		table_add() {
			this.dialog.save = true;
			this.$nextTick(() => {
				this.$refs.saveDialog.open("add");
			});
		},
		//编辑
		table_edit(row) {
			this.dialog.save = true;
			this.$nextTick(() => {
				this.$refs.saveDialog.open("edit").setData(row);
			});
		},
		//原始测点记录
		mplog_record(row) {
			let that = this;
			that.mplogRecord = [];
			var nowDate = new Date();
			let year = nowDate.getFullYear();
			let month = nowDate.getMonth() + 1;
			let day = nowDate.getDate();
			let hour = nowDate.getHours();
			month = month > 9 ? month : "0" + month;
			day = day > 9 ? day : "0" + day;
			if (hour > 0) {
				hour = hour - 1;
				hour = hour > 9 ? hour : "0" + hour;
			} else {
				hour = 23;
				let timers = nowDate.getTime() - 1000 * 60 * 60; //上一小时
				let useDate = new Date(timers);
				year = useDate.getFullYear();
				month = useDate.getMonth() + 1;
				month = month > 9 ? month : "0" + month;
				day = nowDate.getDate();
				day = day > 9 ? day : "0" + day;
			}

			let obj = {};
			obj.page = 0;
			obj.mpoint = row.id;
			obj.timex__gte =
				year + "-" + month + "-" + day + " " + hour + ":00:00";
			obj.timex__lte =
				year + "-" + month + "-" + day + " " + hour + ":59:00";
			that.$API.enm.mplogx.req(obj).then((res) => {
				console.log("res", res);
				that.mplogRecord = res;
				that.logShow = true;
			});
		},
		//查看
		table_show(row) {
			this.dialog.save = true;
			this.$nextTick(() => {
				this.$refs.saveDialog.open("show").setData(row);
			});
		},
		//删除
		table_del(row) {
			var id = row.id;
			this.$API.enm.mpoint.delete.req(id).then((res) => {
				if (res.err_msg) {
					this.$message.error(res.err_msg);
				} else {
					this.$refs.table.refresh();
					this.$message.success("删除成功");
				}
			});
		},
		king_sync() {
			const loading = this.$loading({ text: "正在同步亚控测点..." });
			this.$API.enm.mpoint.kingSync
				.req()
				.then((res) => {
					this.$refs.table.refresh();
				})
				.finally(() => {
					loading.close();
				});
		},
		//本地更新数据
		handleSaveSuccess(data, mode) {
			this.$refs.table.refresh();
		},
		handleQuery() {
			// this.$refs.table.refresh();
			this.$refs.table.queryData(this.query);
		},
		resetQuery() {
			this.query = {};
		},
		selectionChange(rows) {
			console.log("m", rows);
		},
	},
};
</script>
