<template>
	<div>
		<el-dialog width="95%" top="5vh" title="库容对比" :visible="visible" :before-close="handleClose">
			<div class="content-box">
				<div class="sreach">
					水库名称：
					<el-select filterable v-model="querys[0].value" multiple collapse-tags clearable
						placeholder="请选择水库名称">
						<el-option v-for="item in rsnms" :key="item.id" :label="item.rsnm" :value="item.rscd">
						</el-option>
					</el-select>
					时间：
					<el-date-picker v-model="querys[1].value" type="datetimerange" range-separator="至"
						start-placeholder="开始日期" value-format="yyyy-MM-dd HH:mm:ss" end-placeholder="结束日期">
					</el-date-picker>
					<el-button type="primary" icon="el-icon-search" size="mini" @click="queryOne()">查询
					</el-button>
				</div>
				<div class="item">
					<div class="box">
						<el-table :data="oneData" max-height="250">
							<el-table-column type="index" width="55" label="序号" align="center"></el-table-column>
							<el-table-column min-width="130" prop="dtupdt" label="时间" align="center"
								show-overflow-tooltip>
							</el-table-column>
							<el-table-column min-width="130" prop="hy" label="当前库容(万m³)" align="center"
								show-overflow-tooltip>
							</el-table-column>
							<el-table-column min-width="120" prop="ddstcp" label="死库容(万m³)" show-overflow-tooltip>
							</el-table-column>
							<el-table-column min-width="120" prop="ttstcp" label="总库容(万m³)" show-overflow-tooltip>
							</el-table-column>
						</el-table>
					</div>
					<div id="oneEcharts" class="full" ref="oneEcharts"></div>
				</div>
				<div class="sreach">
					水库名称：
					<el-select filterable v-model="Nquerys[0].value" multiple collapse-tags clearable
						placeholder="请选择水库名称">
						<el-option v-for="item in rsnms" :key="item.id" :label="item.rsnm" :value="item.rscd">
						</el-option>
					</el-select>
					时间：
					<el-date-picker v-model="Nquerys[1].value" type="datetimerange" range-separator="至"
						start-placeholder="开始日期" value-format="yyyy-MM-dd HH:mm:ss" end-placeholder="结束日期">
					</el-date-picker>
					<el-button type="primary" icon="el-icon-search" size="mini" @click="getTwoData()">查询
					</el-button>
				</div>
				<div class="item">
					<div class="box">
						<el-table :data="twoData" max-height="250">
							<el-table-column type="index" width="55" label="序号" align="center"></el-table-column>
							<el-table-column min-width="100" prop="dtupdt" label="时间" align="center"
								show-overflow-tooltip>
							</el-table-column>
							<el-table-column min-width="130" prop="hy" label="当前库容(万m³)" align="center"
								show-overflow-tooltip>
							</el-table-column>
							<el-table-column min-width="120" prop="ddstcp" label="死库容(万m³)" show-overflow-tooltip>
							</el-table-column>
							<el-table-column min-width="120" prop="ttstcp" label="总库容(万m³)" show-overflow-tooltip>
							</el-table-column>
						</el-table>
					</div>
					<div id="twoEcharts" class="full" ref="twoEcharts"></div>
				</div>
			</div>
		</el-dialog>
	</div>
</template>
<script>
	import * as echarts from 'echarts'
	import moment from 'moment'
	import reservoirCapacity from '@/api/monitor/resMonitor/reservoirCapacity.js'
	export default {
		name: 'TimeSelection',
		props: {
			appType: {
				type: String,
				default: '',
			},
		},
		data() {
			return {
				visible: false,
				rsnms: [],
				tmValue: [],
				oneData: [],
				twoData: [],
				queryParam: {
					pageBean: {
						pageSize: -1,
						page: 1
					},

					sorter: [{
						direction: "ASC",
						property: ""
					}]
				},
				querys: [{
						group: 'main',
						operation: 'IN',
						parentGroup: '',
						property: 'bs.rscd',
						relation: 'AND',
						value: '',
					},
					{
						group: 'main',
						operation: 'BETWEEN',
						parentGroup: '',
						property: 'ri.tm',
						relation: 'AND',
						value: '',
					},
				],
				newParam: {
					pageBean: {
						pageSize: -1,
						page: 1
					},

					sorter: [{
						direction: "ASC",
						property: ""
					}]
				},
				Nquerys: [{
						group: 'main',
						operation: 'IN',
						parentGroup: '',
						property: 'bs.rscd',
						relation: 'AND',
						value: '',
					},
					{
						group: 'main',
						operation: 'BETWEEN',
						parentGroup: '',
						property: 'ri.tm',
						relation: 'AND',
						value: '',
					},
				],
			}
		},
		created() {

		},
		methods: {
			openShare() {
				this.visible = true
				this.oneData = []
				this.twoData = []
				this.rsnms = []
				this.querys[1].value = [moment().subtract(1, 'days').format('YYYY-MM-DD 8:00:00'), moment().format(
					'YYYY-MM-DD HH:mm:ss')]
				this.Nquerys[1].value = [moment().subtract(1, 'days').format('YYYY-MM-DD 8:00:00'), moment().format(
					'YYYY-MM-DD HH:mm:ss')]
				reservoirCapacity.getRsnm({}, (res) => {
					this.rsnms = res.value
					this.querys[0].value = [res.value[0].rscd]
					this.Nquerys[0].value = [res.value[1].rscd]
					this.queryOne()
					this.getTwoData()
				})
				
			},
			queryOne() {
				if (this.querys[0].value.length > 0 || this.querys[1].value) {
					this.queryParam.querys = []
					if (this.querys[0].value.length > 0) {
						this.queryParam.querys.push(this.querys[0])
					}
					if (this.querys[1].value) {
						this.queryParam.querys.push(this.querys[1])
					}
					reservoirCapacity.storageCapacityChart(this.queryParam, (res) => {
						if (res.value) {
							this.oneData = res.value.rows
							this.$nextTick(() => {
								this.oneEcharts()
							})
						}
					})
				} else {
					this.$message.warning('请选择查询条件')
				}

			},
			getTwoData() {
				if (this.Nquerys[0].value.length > 0 || this.Nquerys[1].value) {
					this.newParam.querys = []
					if (this.Nquerys[0].value.length > 0) {
						this.newParam.querys.push(this.Nquerys[0])
					}
					if (this.Nquerys[1].value) {
						this.newParam.querys.push(this.Nquerys[1])
					}
					reservoirCapacity.storageCapacityChart(this.newParam, (res) => {
						if (res.value) {
							this.twoData = res.value.rows
							this.$nextTick(() => {
								this.twoEcharts()
							})
						}
					})
				} else {
					this.$message.warning('请选择查询条件')
				}

			},
			oneEcharts() {
				let times = []
				let ANum = []
				let BNum = []
				let CNum = []
				this.oneData.forEach(e => {
					times.push(e.dtupdt)
					ANum.push(e.hy)
					BNum.push(e.ddstcp)
					CNum.push(e.ttstcp)
				})
				let chartDom = document.getElementById('oneEcharts')
				let trendEcharts = echarts.init(chartDom)
				let option = {
					grid: {
						top: 35,
						left: 60, // 调整这个属性
						right: 60,
					},
					legend: {
						show: true,
					},
					xAxis: {
						type: 'category',
						data: times
					},
					yAxis: {
						type: 'value'
					},
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'shadow'
						}
					},
					series: [{
						name: '当前库容',
						data: ANum,
						type: 'line',
						color: "#91CC75",
					}, {
						name: '死库容',
						data: BNum,
						type: 'line',
						color: "#000000",
					}, {
						name: '总库容',
						data: CNum,
						type: 'line',
						color: "blue",
					}]
				};
				option && trendEcharts.setOption(option)
			},
			twoEcharts() {
				let times = []
				let ANum = []
				let BNum = []
				let CNum = []
				this.twoData.forEach(e => {
					times.push(e.dtupdt)
					ANum.push(e.hy)
					BNum.push(e.ddstcp)
					CNum.push(e.ttstcp)
				})
				let chartDom = document.getElementById('twoEcharts')
				let trendEcharts = echarts.init(chartDom)
				let option = {
					grid: {
						top: 35,
						left: 60, // 调整这个属性
						right: 60,
					},
					legend: {
						show: true,
					},
					xAxis: {
						type: 'category',
						data: times
					},
					yAxis: {
						type: 'value'
					},
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'shadow'
						}
					},
					series: [{
						name: '当前库容',
						data: ANum,
						type: 'line',
						color: "#91CC75",
					}, {
						name: '死库容',
						data: BNum,
						type: 'line',
						color: "#000000",
					}, {
						name: '总库容',
						data: CNum,
						type: 'line',
						color: "blue",
					}]
				};
				option && trendEcharts.setOption(option)
			},
			handleClose() {
				this.visible = false
			}
		},
	}
</script>
<style lang="scss" scoped>
	.content-box {
		height: 75vh;

		.item {
			width: 100%;
			height: calc(50% - 50px);
			display: flex;

			.box {
				width: 40%;
			}
		}
	}

	.sreach {
		height: 50px;

	}

	.full {
		width: 60%;
	}
</style>
