<template>
	<el-container>
		<el-header>
			<div class="left-panel">
				<xtSelect
					:apiObj="apiObjM"
					:params="paramsM"
					v-model="query.mpoint"
					style="width: 500px"
					@change="handleQuery"
					placeholder="选择测点"
				>
					<el-table-column label="测点名" prop="name"></el-table-column>
					<el-table-column label="别名" prop="nickname"></el-table-column>
					<el-table-column label="计量物料" prop="material_name"></el-table-column>
				</xtSelect>
				<el-select
					v-model="query.type"
					placeholder="类型"
					style="margin: 0 6px; width: 160px"
					@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" 
					value-format="YYYY-MM-DD HH:mm:ss" range-separator="至"
					start-placeholder="开始时间" end-placeholder="结束时间" @change="handleQuery"
					style="width: 100%" 
					format="YYYY-MM-DD HH"
                    popper-class="tpc"/>
				<el-button
					type="primary"
					icon="el-icon-search"
					style="margin-left: 6px"
					@click="handleQuery"
				></el-button>
			</div>
		</el-header>
		<el-main class="nopadding">
			<el-container>
				<el-aside style="width: 60%; float: right;">
        		<!-- 折线图组件 -->
					<scTable
					ref="table"
					:apiObj="apiObj"
					row-key="id"
					stripe
					:params="params"
					:query="query"
					highlightCurrentRow
					@row-click="rowClick"
					@dataChange="dataChange"
				>
					<el-table-column label="测点" prop="mpoint_name" min-width="160">
					</el-table-column>
					<el-table-column label="所属集合" prop="mgroup_name">
					</el-table-column>
					<el-table-column label="类型" prop="type" width="75"> </el-table-column>
					<el-table-column label="年" prop="year" width="60"> </el-table-column>
					<el-table-column label="班年" prop="year_s" width="60"> </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"  min-width="100"></el-table-column>
					<el-table-column
						label="校正值"
						prop="val_correct"
						min-width="100"
					></el-table-column>
					<el-table-column
						label="原始计算值"
						prop="val_origin"
						min-width="100"
					></el-table-column>
					<el-table-column
						label="操作"
						fixed="right"
						align="center"
						width="140"
					>
						<template #default="scope">
							<el-button
								link
								size="small"
								v-if="scope.row.type == 'year_s' || scope.row.type == 'month_s' || scope.row.type == 'day_s'"
								@click="handle_edit(scope.row)"
								type="primary"
								>校正</el-button
							>
						</template>
					</el-table-column>
					</scTable>
      			</el-aside>
				<el-main>
					<scEcharts :option="chartOption" height="400px" />
				</el-main>
			</el-container>		
		</el-main>
	</el-container>
		<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="8" :sm="24">
							<el-form-item label="所属部门">
								<span>{{ form.belong_dept_name }}</span>
							</el-form-item>
						</el-col>
						<el-col :md="8" :sm="24">
							<el-form-item label="工段名称">
								<span>{{ form.mgroup_name }}</span>
							</el-form-item>
						</el-col>
						<el-col :md="8" :sm="24">
							<el-form-item label="测点名">
								<span>{{ form.mpoint_name }}</span>
							</el-form-item>
						</el-col>
						<el-col :md="8" :sm="24">
							<el-form-item label="时间范围">
								<span>{{ form.year_s }}/{{ form.month_s }}/{{ form.day_s }}</span>
							</el-form-item>
						</el-col>
						<el-col :md="8" :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>
	</template>
<script>

export default {
	name: "sflog",
	data() {
		return {
			apiObjM: this.$API.enm.mpoint.list,
			paramsM: {material__isnull: 0},
			apiObj: this.$API.enm.mpoint.stat,
            params: {
				type: "day_s",
			},
			query: {
                mpoint: null,
                type: "day_s",
                start_time: null,
                end_time: null
            },
			chartOption: {
				title: {
				text: '趋势图'
				},
				color: ["#191970"],
				tooltip: {
					trigger: "axis",
					axisPointer: {
						type: "cross",
						label: {
							backgroundColor: "#6a7985",
						},
					},
				},
				legend: {
					icon: "stack",
					top: 5,
					right: 5,
					data: [],
				},
				grid: {
					left: "2%",
					right: "4%",
					bottom: "5%",
					containLabel: true,
				},
				xAxis: {
					name: "",
					type: "category",
					axisLabel: {
						rotate: 45,
						fontSize: 10,
					},
					data: [],
					
				},
				yAxis: {
					name: "",
					type: "value",
					
				},
				series: [],
			},
			options: [
				{ label: "班天", value: "day_s" },
				{ label: "班月", value: "month_s" },
				{ label: "小时", value: "hour"},
                { label: "天", value: "day" },
                { label: "月", value: "month"},
			],
			form: {
				id: "",
				val_correct: "",
			},
			visible: false,
            timeRange: []
		};
	},
	mounted() {
	},
	methods: {
	dataChange(req, tableData) {
		let that = this;
		if(that.query.mpoint == null) {
			return
		}
		let option = { ...that.chartOption };
		// 获取 x 轴的数据，如果query.type为小时，则显示小时，如果为天则显示天，如果为月则显示月
		if (that.query.type == "hour") {
			option.title.text = "小时统计";
			option.xAxis.data = tableData.reverse().map((item) => item.year + "-" + item.month + "-" + item.day + " " + item.hour);
		}else if (that.query.type == "day") {
			option.title.text = "天统计";
			option.xAxis.data = tableData.reverse().map((item, index) => item.year + "-" + item.month + "-" + item.day);
		}else if (that.query.type == "month") {
			option.title.text = "月统计";
			option.xAxis.data = tableData.reverse().map((item, index) => item.year + "-" + item.month);
		}else if (that.query.type == "day_s") {
			option.title.text = "班天统计";
			option.xAxis.data = tableData.reverse().map((item, index) => item.year_s + "-" + item.month_s + "-" + item.day_s);
		}else if (that.query.type == "month_s") {
			option.title.text = "班月统计";
			option.xAxis.data = tableData.reverse().map((item, index) => item.year_s + "-" + item.month_s);
		}
		// 获取 y 轴的数据
		option.series = [
			{
				name: tableData.length > 0 ? tableData[0].mpoint_name : "",
				type: 'line', // 折线图类型
				data: tableData.length > 0 ? tableData.reverse().map((item) => parseFloat(item.val)) : [], // 将字符串转为数字
				smooth: true, // 平滑曲线
			}
		];
		option.legend.data = [tableData.length > 0 ? tableData[0].mpoint_name : ""];
		// 更新图表选项
		that.chartOption = option;
	},
		handle_add() {},
		handleQuery() {
            if (this.timeRange.length > 0) {
                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>

<style>
.tpc .el-time-spinner__wrapper {
  width:100% !important;
}
.tpc .el-scrollbar:nth-of-type(2) {
  display: none !important;
}
</style>
