<template>
	<el-container>
		<el-header>
			<div class="left-panel">
				<el-select
					v-model="query.mpoint"
					placeholder="测点"
					clearable
					style="margin: 0 6px; width: 300px"
					@change="handleQuery"
				>
					<el-option
						v-for="item in mpoints"
						:key="item.id"
						:label="item.name"
						:value="item.id"
					></el-option>
				</el-select>
				<el-select
					v-model="query.type"
					placeholder="类型"
					style="margin: 0 6px; width: 120px"
					@change="handleQuery"
				>
					<el-option
						v-for="item in options"
						:key="item.value"
						:label="item.label"
						:value="item.value"
					></el-option>
				</el-select>
                <el-date-picker v-model="timeRange" type="datetimerange" range-separator="至"
                                    start-placeholder="开始时间" end-placeholder="结束时间" @change="handleQuery"
                                    style="width: 100%" />
				<el-button
					type="primary"
					icon="el-icon-search"
					style="margin-left: 6px"
					@click="handleQuery"
				></el-button>
			</div>
		</el-header>
		<el-main class="nopadding">
			<scTable
				ref="table"
				:apiObj="apiObj"
				row-key="id"
				stripe
				:params="params"
                :query="query"
				highlightCurrentRow
				@row-click="rowClick"
			>
				<el-table-column type="index" width="50" />
				<el-table-column label="测点" prop="mpoint_name">
				</el-table-column>
                <el-table-column label="所属集合" prop="mgroup_name">
				</el-table-column>
				<el-table-column label="类型" prop="type" width="80"> </el-table-column>
				<el-table-column label="年" prop="year" width="80"> </el-table-column>
                <el-table-column label="班年" prop="year_s" width="80"> </el-table-column>
				<el-table-column label="月" prop="month" width="50"> </el-table-column>
                <el-table-column label="班月" prop="month_s" width="50"> </el-table-column>
				<el-table-column label="日" prop="day" width="50"> </el-table-column>
                <el-table-column label="班日" prop="day_s" width="50"> </el-table-column>
                <el-table-column label="时" prop="hour" width="50"> </el-table-column>
				<el-table-column label="当前值" prop="val"></el-table-column>
				<el-table-column
					label="校正值"
					prop="val_correct"
				></el-table-column>
				<el-table-column
					label="原始计算值"
					prop="val_origin"
				></el-table-column>
				<!-- <el-table-column
					label="操作"
					fixed="right"
					align="center"
					width="140"
				>
					<template #default="scope">
						<el-button
							link
							size="small"
							@click="handle_edit(scope.row)"
							type="primary"
							>校正</el-button
						>
					</template>
				</el-table-column> -->
			</scTable>
		</el-main>
		<el-dialog title="校正" v-model="visible">
			<el-main style="padding: 0 20px 20px 20px">
				<el-form
					ref="dialogForm"
					:model="form"
					label-position="right"
					label-width="80px"
					style="padding: 0 10px"
				>
					<el-row>
						<el-col :md="12" :sm="24">
							<el-form-item label="所属部门">
								<span>{{ form.belong_dept_name }}</span>
							</el-form-item>
						</el-col>
						<el-col :md="12" :sm="24">
							<el-form-item label="工段名称">
								<span>{{ form.mgroup_name }}</span>
							</el-form-item>
						</el-col>
						<el-col :md="12" :sm="24">
							<el-form-item label="校正值">
								<el-input-number
									v-model="form.val_correct"
									:min="0"
									controls-position="right"
								></el-input-number>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
			</el-main>
			<el-footer>
				<el-button type="primary" :loading="isSaveing" @click="submit"
					>保存</el-button
				>
				<el-button @click="visible = false">取消</el-button>
			</el-footer>
		</el-dialog>
	</el-container>
</template>
<script>
export default {
	name: "sflog",
	data() {
		return {
			apiObj: this.$API.enm.mpoint.stat,
            params: {},
			query: {
                mpoint: null,
                type: "hour",
                start_time: null,
                end_time: null
            },
			options: [
                { label: "小时", value: "hour"},
                { label: "天", value: "day" },
                { label: "月", value: "month"},
				{ label: "班天", value: "day_s" },
				{ label: "班月", value: "month_s" },
			],
			form: {
				id: "",
				val_correct: "",
			},
			visible: false,
			mpoints: [],
            timeRange: []
		};
	},
	mounted() {
		this.getMpoints();
	},
	methods: {
		getMpoints() {
			let that = this;
			this.$API.enm.mpoint.list
				.req({ page: 0})
				.then((res) => {
					that.mpoints = res;
				});
		},
		handle_add() {},
		handleQuery() {
            console.log(this.query)
            if (this.timeRange) {
                this.query.start_time = this.timeRange[0]
                this.query.end_time = this.timeRange[1]
            } else {
                this.query.start_time = null
                this.query.end_time = null
            }
			this.$refs.table.queryData(this.query);
		},
		//编辑
		handle_edit(row) {
			this.form = { ...row };
			this.form.val_correct = row.val;
			this.visible = true;
		},
		//提交
		submit() {
			this.$refs.dialogForm.validate((valid) => {
				if (valid) {
					this.isSaveing = true;
					let obj = {};
					obj.val_correct = this.form.val_correct;
					this.$API.enm.mpointstat.correct
						.req(this.form.id, obj)
						.then((res) => {
							this.isSaveing = false;
							this.visible = false;
							this.$refs.table.queryData(this.query);
						})
						.catch((e) => {
							this.isSaveing = false;
						});
				}
			});
		},
	},
};
</script>

<style scoped>
.searchBtn {
	margin-left: 5px;
}
</style>
