<template>
	<div class="table-container">
		<vab-query-form>
			<div class="title">
				<div class="left">
					<!-- <div class="left-item">
						<div style="width: 70px;">名称：</div>
						<el-input v-model="fuzzyQuery_name" placeholder="请输入" clearable />
					</div>
					<el-button icon="el-icon-search" type="primary" native-type="submit" @click="fetchData">
						查询
					</el-button> -->
				</div>
				<div class="right">
					<!-- <el-button icon="el-icon-plus" type="primary" @click="handleAdd">
						添加
					</el-button>
					<el-button icon="el-icon-delete" type="danger" @click="handleDelete">
						删除
					</el-button> -->
					<!-- <UploadExcel style="margin-left: 10px;" @getResult="getMyExcelData"></UploadExcel> -->
					<!-- <ExportExcel :exportList="exportExcel" :useType="'export'" partsName="装机量"></ExportExcel> -->
					<!-- <ExportExcel :exportList="templateExcel" :useType="'template'" partsName="设备类型模板"></ExportExcel> -->
				</div>
			</div>
			<!-- <el-table ref="tableSort" v-loading="listLoading" :data="list" :element-loading-text="elementLoadingText"
				:height="height" @selection-change="setSelectRows">
				<el-table-column show-overflow-tooltip type="selection" width="40"></el-table-column>
				<el-table-column show-overflow-tooltip label="id" prop="id" align="center" sortable></el-table-column>
				<el-table-column show-overflow-tooltip label="编号" prop="code" align="center" sortable></el-table-column>
				<el-table-column show-overflow-tooltip label="名称" prop="name" align="center" sortable></el-table-column>
				<el-table-column show-overflow-tooltip label="装机容量" prop="capacity" align="center" sortable>
				</el-table-column>
				<el-table-column show-overflow-tooltip label="装机容量单位" prop="capacityunit" align="center" sortable>
				</el-table-column>
				<el-table-column show-overflow-tooltip label="装机台数" prop="quantity" align="center" sortable>
				</el-table-column>
				<el-table-column show-overflow-tooltip label="机型" prop="model" align="center" sortable>
				</el-table-column>
				<el-table-column show-overflow-tooltip label="厂家" prop="systemmanufact" align="center" sortable>
				</el-table-column>
				<el-table-column show-overflow-tooltip label="地址" prop="address" align="center" sortable>
				</el-table-column>
				<el-table-column show-overflow-tooltip label="操作" width="100px" fixed="right">
					<template #default="{ row }">
						<el-button type="text" @click="handleEdit(row)">编辑</el-button>
						<el-button type="text" @click="handleDelete(row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table> -->
			<div :style="{ 'height': height + 'px', width: '100%' }">
				<v-chart :options="option" style="width: 100%;"></v-chart>
			</div>
		</vab-query-form>
	</div>
</template>
<script>
import UploadExcel from '@/components/UploadExcel/index'
import ExportExcel from '@/components/ExportExcel/index'
import api from '@/api/realtimeDatabaseConfiguration'
import stationApi from '@/api/station'
import VChart from 'vue-echarts'
import { use } from 'echarts/core';
import { CanvasRenderer } from 'echarts/renderers';
import { LineChart } from 'echarts/charts';
import {
	TitleComponent,
	TooltipComponent,
	LegendComponent,
	DataZoomComponent,
	GridComponent,
	AxisPointerComponent
} from 'echarts/components';
import dayjs from 'dayjs'

use([
	CanvasRenderer,
	LineChart,
	TitleComponent,
	TooltipComponent,
	LegendComponent,
	DataZoomComponent,
	GridComponent,
	AxisPointerComponent
]);

export default {
	components: {
		UploadExcel,
		ExportExcel,
		VChart,
	},
	data() {
		return {
			fuzzyQuery_name: '',
			listLoading: true,
			list: [],
			options: [],
			exportExcel: [],
			templateExcel: [],
			elementLoadingText: '正在加载...',
			selectRows: '',
			layout: 'total, sizes, prev, pager, next, jumper',
			total: 0,
			background: true,
			exportList: [],
			queryForm: {
				pageNo: 1,
				pageSize: 20,
			},
			stationList: [],
			selectValue: '',
			option: {
				title: {
					showTitle: true,
					subtext: "可滚轮缩放、左右拖动查看",
					x: "center",
					y: "20",
				},
				xAxis: {
					type: "category",
					data: [],
				},
				yAxis: [
					{
						name: '单位 （m/s）',
						type: "value",
						position: 'left'
					},
					{
						name: '单位 （kw/h）',
						type: "value",
						position: 'right'
					}
				],
				legend: {
					show: true,
					x: "center",
					y: "top",
					itemWidth: 10,
					itemHeight: 10,
					data: ["风速", "总功率"],
					textStyle: {
						fontSize: 10, //字体大小
						color: "#000", //字体颜色
					},
				},
				tooltip: {
					show: true,
					trigger: "axis",
					// formatter(data) {
					// 	let str = `${data[0].name}: <br />`;
					// 	data.forEach((ele) => {
					// 		let circle = `<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;left:5px;background-color:${ele.color}"></span>`;
					// 		str += circle + `${ele.seriesName}: ${ele.value}% <br />`;
					// 	});
					// 	return str;
					// },
				},
				grid: {
					show: true,
					left: "35",
					// top: "23",
					right: "30",
					bottom: "23",
				},
				dataZoom: [
					{
						id: "dataZoomX",
						type: "inside",
						xAxisIndex: [0],
						filterMode: "none",
						start: 0,
						end: 50,
					},
				],
				series: [
					// {
					//   name: "部门培训率",
					//   data: seriesData[0],
					//   type: "bar",
					//   itemStyle: {
					//     color: "rgb(86,114,196)",
					//   },
					//   barMaxWidth: "25",
					// },
					// {
					//   name: "部门考试合格率",
					//   data: seriesData[1],
					//   type: "bar",
					//   itemStyle: {
					//     color: "rgb(149,204,122)",
					//   },
					//   barMaxWidth: "25",
					// },
				],
			}
		};
	},
	computed: {
		height() {
			return this.$baseTableHeight() + 50
		},
	},
	created() {
		// this.getStation()
		this.fetchData()
	},
	watch: {
		'$route'() {
			// this.fetchData()
		}
	},
	methods: {
		getMyExcelData(val) {
			val.forEach(item => {
				api.addModelpower(item).then(res => {
					if (res.code == 200) {
						this.$message({
							type: 'success',
							message: '添加成功!'
						});
						this.fetchData()
					}
				})
			})
		},
		getStation() {
			stationApi.windpowerstationList({
				id: '',
				name: '',
				companyid: '',
				pageNum: 1,
				pageSize: 1000,
			}).then(res => {
				if (res.data) {
					this.listLoading = false
					this.stationList = res.data.records
				}
			})
		},
		fetchData() {
			const date = new Date()
			// const pastDate = date.getTime() - 2592000000
			const pastDate = date.getTime() - 43200000
			stationApi.getStationPersis({
				station: this.$route.query.station || '',
				startdate: dayjs(pastDate).format('YYYY-M-D HH:mm:ss'),
				enddate: dayjs().format('YYYY-M-D HH:mm:ss')
			}).then(res => {
				if (res.data) {
					this.listLoading = false
					if (res.data && res.data.length) {
						this.option.xAxis.data = res.data.map(o => dayjs(o.datatime).format('YYYY-M-D HH:mm:ss'))
						this.option.series = [
							{
								name: '风速',
								data: res.data.map(o => o.rpjfs),
								type: 'line',
								itemStyle: {
									color: "rgb(86,114,196)",
								},
								yAxisIndex: 0
							},
							{
								name: '总功率',
								data: res.data.map(o => o.sszgl),
								type: 'line',
								itemStyle: {
									color: "rgb(149,204,122)",
								},
								yAxisIndex: 1
							}
						]
					}
				}
			})
		},
		handleSizeChange(val) {
			this.queryForm.pageSize = val
			this.fetchData()
		},
		handleCurrentChange(val) {
			this.queryForm.pageNo = val
			this.fetchData()
		},
		handleAdd() {
			this.$refs['edit'].showEdit()
		},
		handleEdit(row) {
			this.$refs['edit'].showEdit(row)
		},
		handleDelete(row) {
			if (row.id || this.selectRows.length > 0) {
				this.$baseConfirm('你确定要删除吗', null, async () => {
					let ids = ''
					if (this.selectRows.length > 0) {
						ids = this.selectRows.map((item) => item.id).join()
					}
					api.deleteModelpower({
						id: row.id || ids
					}).then(res => {
						if (res.data) {
							this.$baseMessage('删除成功', 'success')
							this.fetchData()
						}
					})
				})
			} else {
				this.$baseMessage('未选中任何行', 'error')
				return false
			}
		},
		setSelectRows(val) {
			this.selectRows = val
		},
	},
}
</script>
<style lang="less" scoped>
.title {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 20px;
}

.left {
	display: flex;
	flex-direction: row;
	align-items: center;

	.left-item {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-right: 10px;
	}
}
</style>