<template>
	<div v-if="visible" class="popup-model station-model comp-container">
		<div class="station-title">
			<div :style="{'height': Alarm?'15px':'aotu'}">
				<el-button v-if="Alarm" type="warning" size="mini" @click="downMusic">关闭报警<i
						class="el-icon-close-notification"></i></el-button>
				<el-button v-if="Alarm" type="danger" size="mini" @click="BatchProcess">批量处理</el-button>
			</div>{{ title }}
		</div>
		<i class="icon el-icon-close" @click="close"></i>
		<div class="station-content">
			<el-table :data="data" v-if="this.types=='station'&&this.tableType=='2'" height="100%" stripe border
				size="mini" highlight-current-row @row-dblclick='dblClick'>
				<el-table-column label="监测站代码1" align="center" prop="stcd" min-width='18%' show-overflow-tooltip>
				</el-table-column>
				<el-table-column label="监测站名称" align="center" prop="stnm" min-width='25%' show-overflow-tooltip>
				</el-table-column>
				<el-table-column label="位置" align="center" prop="stlc" min-width='38%' show-overflow-tooltip>
				</el-table-column>
				<el-table-column label="测站运行状态" align="center" prop="usfl" min-width='20%' show-overflow-tooltip>
					<template slot-scope="scope">
						<span
							:style="{color:scope.row.usfl=='0'?'rgb(199, 61, 61)':'rgb(6, 194, 6)'}">{{scope.row.usfl==0?'异常':scope.row.usfl==1?'正常':''}}</span>
					</template>
				</el-table-column>
			</el-table>
			<el-table :data="data" v-else-if="this.tableType=='3'&&this.types=='station'" height="100%" stripe border
				size="mini" highlight-current-row @row-dblclick='dblClick'>
				<el-table-column label="监测站代码2" align="center" prop="code" min-width='18%' show-overflow-tooltip>
				</el-table-column>
				<el-table-column label="监测站名称" align="center" prop="name" min-width='25%' show-overflow-tooltip>
				</el-table-column>
				<el-table-column label="位置" align="center" prop="stlc" min-width='38%' show-overflow-tooltip>
				</el-table-column>
				<el-table-column label="测站运行状态" align="center" prop="usfl" min-width='20%' show-overflow-tooltip>
					<template slot-scope="scope">
						<span
							:style="{color:scope.row.usfl=='0'?'rgb(199, 61, 61)':'rgb(6, 194, 6)'}">{{scope.row.usfl==0?'异常':scope.row.usfl==1?'正常':''}}</span>
					</template>
				</el-table-column>
			</el-table>
			<el-table :data="data" v-else-if="this.types=='station'&&tableType=='1'" height="100%" stripe border
				size="mini" highlight-current-row @row-dblclick='dblClick'>
				<el-table-column label="监测站代码3" align="center" prop="mpcd" min-width='18%' show-overflow-tooltip>
				</el-table-column>
				<el-table-column label="监测站名称" align="center" prop="mpnm" min-width='25%' show-overflow-tooltip>
				</el-table-column>
				<el-table-column label="位置" align="center" prop="stlc" min-width='38%' show-overflow-tooltip>
				</el-table-column>
				<el-table-column label="测站运行状态" align="center" prop="wkcn" min-width='20%' show-overflow-tooltip>
					<template slot-scope="scope">
						<span
							:style="{color:scope.row.wkcn=='0'?'rgb(199, 61, 61)':'rgb(6, 194, 6)'}">{{scope.row.wkcn==0?'异常':scope.row.wkcn==1?'正常':''}}</span>
					</template>
				</el-table-column>
			</el-table>
			<el-table :data="data" v-else-if="Alarm&&this.types=='water'" height="100%" stripe border size="mini"
				highlight-current-row @selection-change="handleSelectionChange">
				<el-table-column type="selection" width="40">
				</el-table-column>
				<el-table-column label="测站名称" align="center" prop="stnm" min-width='100' show-overflow-tooltip>
				</el-table-column>
				<el-table-column label="预警时间" align="center" prop="sendDate" min-width='120' show-overflow-tooltip>
				</el-table-column>
				<el-table-column label="当前水位" align="center" prop="currentValue" min-width='100' show-overflow-tooltip>
				</el-table-column>
				<el-table-column label="预警阈值" align="center" prop="warnVal" min-width='100' show-overflow-tooltip>
				</el-table-column>
				<el-table-column label="预警等级" align="center" prop="warnGrade" min-width='100' show-overflow-tooltip>
					<template slot-scope="scope">
						<span
							:style="{color:scope.row.warnGrade=='危险'?'#ff9900':scope.row.warnGrade=='警戒'?'yellow':scope.row.warnGrade=='非常危险'?'red':''}">{{scope.row.warnGrade}}</span>
					</template>
				</el-table-column>
			</el-table>
			<el-table :data="data" v-else-if="Alarm&&types=='rain'" height="100%" stripe border size="mini"
				highlight-current-row @selection-change="handleSelectionChange">
				<el-table-column type="selection" width="40">
				</el-table-column>
				<el-table-column label="测站名称" align="center" prop="stnm" min-width='100' show-overflow-tooltip>
				</el-table-column>
				<el-table-column label="预警时间" align="center" prop="sendDate" min-width='120' show-overflow-tooltip>
				</el-table-column>
				<el-table-column label="时段降雨量" align="center" prop="currentValue" min-width='100' show-overflow-tooltip>
				</el-table-column>
				<el-table-column label="预警阈值" align="center" prop="warnVal" min-width='100' show-overflow-tooltip>
				</el-table-column>
				<el-table-column label="预警等级" align="center" prop="warnGrade" min-width='100' show-overflow-tooltip>
					<template slot-scope="scope">
						<span
							:style="{color:scope.row.warnGrade=='危险'?'#ff9900':scope.row.warnGrade=='警戒'?'yellow':scope.row.warnGrade=='非常危险'?'red':''}">{{scope.row.warnGrade}}</span>
					</template>
				</el-table-column>
				<el-table-column label="报警时段" align="center" prop="warnSdName" min-width='100' show-overflow-tooltip>
				</el-table-column>
			</el-table>
			<el-table v-else :data="data" height="100%" stripe border size="mini" highlight-current-row>
				<el-table-column v-for="item in column" :key="item.prop" :label="item.label" :prop="item.prop"
					:min-width="item.width" align="center" show-overflow-tooltip>
				</el-table-column>
			</el-table>
		</div>
	</div>
</template>

<script>
	import dictUtils from '@/components/dict/DictSelectUtils.js'
	import digitalReservoir from '@/api/frontScreen/digitalReservoir.js'
	export default {
		name: 'stationsModel',
		data() {
			return {
				visible: false,
				title: '',
				types: 'station', //station 测站 // rain1（水库） rain2（山洪，水文） 雨量报警 //water1（水库） water2（河道） 水位报警
				data: [],
				column: [],
				Alarm: false,
				multipleSelection: [],
				params: {
					appTypeList: [],
					endTime: "",
					id: "",
					mpcd: "",
					periodTime: "",
					rscd: "",
					startTime: "",
					stcd: "",
					stlc: "",
					stnm: "",
					sttp: "ZZ",
					sttpList: [],
					usfl: ""
				},
				stationColumn: [{
						label: '监测站代码',
						prop: 'stcd',
						width: '18%',
					},
					{
						label: '监测站名称',
						prop: 'stnm',
						width: '25%',
					},
					{
						label: '位置',
						prop: 'stlc',
						width: '38%',
					},
					{
						label: '测站运行状态',
						prop: 'usfl',
						width: '20%',
					},
				],
				rainColumn: [{
						label: '测站名称',
						prop: 'stationName',
					},
					{
						label: '水库名称',
						prop: 'name',
					},
					{
						label: '报警时段',
						prop: 'timeInterval',
					},
					{
						label: '时段雨量',
						prop: 'rainfall',
					},
					{
						label: '报警阈值',
						prop: 'threshold',
					},
					{
						label: '报警级别',
						prop: 'level',
					},
					{
						label: '报警时间',
						prop: 'time',
					},
				],
				// rain2Column: [{
				// 		label: '测站名称',
				// 		prop: 'stationName',
				// 	},
				// 	{
				// 		label: '报警时段',
				// 		prop: 'timeInterval',
				// 	},
				// 	{
				// 		label: '时段雨量',
				// 		prop: 'rainfall',
				// 	},
				// 	{
				// 		label: '报警阈值',
				// 		prop: 'threshold',
				// 	},
				// 	{
				// 		label: '报警级别',
				// 		prop: 'level',
				// 	},
				// 	{
				// 		label: '报警时间',
				// 		prop: 'time',
				// 	},
				// ],
				// rain3Column: [{
				// 		label: '测站名称',
				// 		prop: 'stationName',
				// 	},
				// 	{
				// 		label: '报警时段',
				// 		prop: 'timeInterval',
				// 	},
				// 	{
				// 		label: '时段雨量',
				// 		prop: 'rainfall',
				// 	},
				// 	{
				// 		label: '报警阈值',
				// 		prop: 'threshold',
				// 	},
				// 	{
				// 		label: '报警级别',
				// 		prop: 'level',
				// 	},
				// 	{
				// 		label: '报警时间',
				// 		prop: 'time',
				// 	},
				// ],
				waterColumn: [{
						label: '测站名称',
						prop: 'stnm',
						width: '25%'
					},
					{
						label: '预警时间',
						prop: 'sendDate',
						width: '30%'
					},
					{
						label: '预警等级',
						prop: 'warnGrade',
						width: '15%'
					},
					{
						label: '当前水位',
						prop: 'currentValue',
						width: '15%'
					},
					{
						label: '预警阈值',
						prop: 'warnVal',
						width: '15%'
					},
				],
				//  water2Column: [
				//      {
				//          label: '测站名称',
				//          prop: 'stationName',
				//      },
				//      {
				//          label: '河流名称',
				//          prop: 'name',
				//      },
				//      {
				//          label: '当前水位',
				//          prop: 'waterLevel',
				//      },
				//      {
				//          label: '警戒水位',
				//          prop: 'threshold',
				//      },
				//      {
				//          label: '报警级别',
				//          prop: 'level',
				//      },
				//      {
				//          label: '报警时间',
				//          prop: 'time',
				//      },
				//  ],

				stationData: [{
						code: '123123',
						name: 'xx测站',
						place: 'xxxxxxxxx',
						status: '正常',
					},
					{
						code: '123123',
						name: 'xx测站',
						place: 'xxxxxxxxx',
						status: '正常',
					},
					{
						code: '123123',
						name: 'xx测站',
						place: 'xxxxxxxxx',
						status: '正常',
					},
					{
						code: '123123',
						name: 'xx测站',
						place: 'xxxxxxxxx',
						status: '正常',
					},
					{
						code: '123123',
						name: 'xx测站',
						place: 'xxxxxxxxx',
						status: '正常',
					},
					{
						code: '123123',
						name: 'xx测站',
						place: 'xxxxxxxxx',
						status: '正常',
					},
					{
						code: '123123',
						name: 'xx测站',
						place: 'xxxxxxxxx',
						status: '正常',
					},
					{
						code: '123123',
						name: 'xx测站',
						place: 'xxxxxxxxx',
						status: '正常',
					},
					{
						code: '123123',
						name: 'xx测站',
						place: 'xxxxxxxxx',
						status: '正常',
					},
					{
						code: '123123',
						name: 'xx测站',
						place: 'xxxxxxxxx',
						status: '正常',
					},
				],
				water1Data: [{
					stationName: 'xx测站',
					name: 'xx水库',
					waterLevel: '235M',
					threshold: '240M',
					level: 2,
					time: '2022-03-30 15:00:00',
				}, ],
				water2Data: [{
						stationName: 'xx测站',
						name: 'xx河',
						waterLevel: '123.5M',
						threshold: '122M',
						level: 2,
						time: '2022-03-30 15:00:00',
					},
					{
						stationName: 'xx测站',
						name: 'xx河',
						waterLevel: '235M',
						threshold: '240M',
						level: 2,
						time: '2022-03-30 15:00:00',
					},
				],
				rain1Data: [],
				rain2Data: [],
				rain3Data: [{
						stationName: 'xx测站',
						timeInterval: '1小时',
						rainfall: '121',
						threshold: '120',
						level: 2,
						time: '2022-03-30 15:00:00',
					},
					{
						stationName: 'xx测站',
						timeInterval: '2小时',
						rainfall: '143',
						threshold: '135',
						level: 2,
						time: '2022-03-30 14:00:00',
					},
				],
				queryData: null,
				warningLevels: [], //预警等级
				warningTypes: [{
						name: '自动',
						value: '1'
					},
					{
						name: '人工',
						value: '2'
					}
				],
				stationApps: [], //测站应用分类
				stationClass: [], //测站站类
				tableType: null,
				rscd: '',
				warnSdList: [{
					name: '1小时雨量',
					value: 'p1'
				}, {
					name: '3小时雨量',
					value: 'p3'
				}, {
					name: '6小时雨量',
					value: 'p6'
				}, {
					name: '12小时雨量',
					value: 'p12'
				}, {
					name: '24小时雨量',
					value: 'p24'
				}, ]
			}
		},
		watch: {
			Alarm(val) {
				console.log(val)
			},
			tableType(val) {
				console.log(val)
			},
			types(val) {
				console.log(val)
			},
		},
		methods: {
			open(title, type, data, rscd) {
				console.log(title, type, data, rscd);
				this.data = []
				if (rscd == 'Alarm') {
					this.Alarm = true
				} else {
					this.params.rscd = rscd
				}
				this.types = type
				this.queryData = data
				if (type == 'rain') {
					if (this.queryData.tableData) {
						this.queryData.tableData.forEach(e => {
							if (e.warnDate) {
								let a = JSON.parse(e.warnDate)
								this.warnSdList.forEach(w => {
									if (w.value == a.warnSd) {
										e.warnSdName = w.name
									}
								})
							}

						})
					}

				}
				if (this.queryData.stationType == '生态流量站') {
					this.queryData.sttp = 'SS'
				}
				if (this.queryData.sttp == '1' || this.queryData.sttp == '2' || this.queryData.sttp == '3') {
					this.tableType = 1
				} else if (this.queryData.sttp == 'PP' || this.queryData.sttp == 'RR'||this.queryData.sttp == 'SS') {
					this.tableType = 2
				} else if (this.queryData.sttp == 'SP') {
					this.tableType = 3
				} 
				this.title = `${title}详情`
				this.visible = true
				this.matchType()

			},
			handleSelectionChange(val) {
				this.multipleSelection = this.multipleSelection = val.map(item => {
					return item.id
				})
			},
			dblClick(val) {
				console.log(val);
				if (this.queryData.type == 'shuiku') {
					let routeData
					switch (this.queryData.sttp) {
						case 'PP':
							window.sessionStorage.setItem("StationId", val.stcd)
							routeData = this.$router.resolve({
								path: '/bizPlat/monitor/resMonitor/ylStQuery'
							});
							window.open(routeData.href, '_blank');
							break;
						case 'RR':
							// this.$store.commit("index/addressMap", address);
							// this.$store.commit("index/cdPage", page);
							window.sessionStorage.setItem("StationId", val.stcd)
							window.sessionStorage.setItem("pages", 'first')
							routeData = this.$router.resolve({
								path: '/bizPlat/monitor/sqMonitor/swStQuery'
							});
							window.open(routeData.href, '_blank');
							break;
						case '1':
							window.sessionStorage.setItem("StationId", val.rscd)
							window.sessionStorage.setItem("StationRscd", val.mpnm)
							routeData = this.$router.resolve({
								path: '/bizPlat/monitor/gqMonitor/wyQuery'
							});
							window.open(routeData.href, '_blank');
							break;
						case '3':
							window.sessionStorage.setItem("StationId", val.mpnm)
							routeData = this.$router.resolve({
								path: '/bizPlat/monitor/gqMonitor/sygQuery'
							});
							window.open(routeData.href, '_blank');
							break;
						case 'SS':
							window.sessionStorage.setItem("StationId", val.stnm)
							routeData = this.$router.resolve({
								path: '/bizPlat/monitor/sqMonitor/sdzQuery'
							});
							window.open(routeData.href, '_blank');
							break;

					}
				}
			},
			BatchProcess() {
				this.$confirm('此操作将关闭所选测站预警状态, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					digitalReservoir.updateStatus(this.multipleSelection, res => {
						if (res.state) {
							this.$message.success('处理成功')
							this.close()
						} else {
							this.$message.error(res.$message)
						}
					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});

			},
			matchType() {
				this.column = this[`${this.types}Column`]
				if (this.queryData.sttp == '') {
					this.data = []
				} else {
					if (this.types == 'water' || this.types == 'rain') {
						this.data = this.queryData.tableData || []
						this.warningLevels = dictUtils.getDictItemsFromCache('yjdj') //预警等级
						this.stationApps = dictUtils.getDictItemsFromCache('czyyfl') //测站应用分类
						this.stationClass = dictUtils.getDictItemsFromCache('sblx') //测站站类
						this.data.forEach(ee => {
							this.warningLevels.forEach(el => {
								if (ee.warnGrade == el.sequence) {
									ee.warnGrade = el.name
								}
							})
							this.warningTypes.forEach(et => {
								if (ee.produceType == et.value) {
									ee.produceType = et.name
								}
							})
							this.stationApps.forEach(ea => {
								if (ee.appType == ea.value) {
									ee.appType = ea.name
								}
							})
							this.stationClass.forEach(ec => {
								if (ee.warnType == ec.value) {
									ee.warnType = ec.name
								}
							})
						})
					} else if (this.types == 'station') {
						this.params.sttp = this.queryData.sttp
						if (this.queryData.sttp == 'PP' || this.queryData.sttp == 'RR' || this.queryData.sttp == 'SS') {
							this.params.reType = "1"
							this.data = []
							digitalReservoir.findStList(this.params, res => {
								if (res.state) {
									this.$nextTick(() => {
										this.data = res.value
									})
								}
							})
						} else if (this.queryData.sttp == '1' || this.queryData.sttp == '2' || this.queryData.sttp ==
							'3') {
							let paramm = {
								sttp: this.queryData.sttp,
								rscd: this.params.rscd
							}
							digitalReservoir.findGqStation(paramm, res => {
								if (res.state) {
									this.data = res.value
								}
							})
						} else if (this.queryData.sttp == 'SP') {
							digitalReservoir.videoList({
								rscd: this.params.rscd,
								reType: 2
							}, res => {
								if (res.state) {
									this.data = res.value
								}
							})
						}

					}
				}

			},
			close() {
				this.visible = false
				this.$emit('close')
				if (this.Alarm) {
					this.$emit('Warning');
				}

			},
			downMusic() {
				this.$emit('noMusic')
			}
		},
	}
</script>

<style lang="scss" scoped>
	@import './../css/gisComp.scss';

	.popup-model {
		width: 700PX;
		height: 350PX;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background-color: rgba(0, 0, 0, 0.7);
		z-index: 99;
		border: 1px solid #d2d6dc;
		border-radius: 6px;
		color: #d3d4d7;
		padding: 20px;
		box-sizing: border-box;

		.el-icon-close {
			position: absolute;
			right: 6px;
			top: 6px;
			font-size: 20px;
			color: #f56c6c;
			cursor: pointer;
		}

		.station-title {
			display: flex;
			// text-align: center;
			font-size: 16px;
			height: 20px;
			line-height: 20px;
			font-weight: 700;
			margin-bottom: 16px;

			div {
				width: 43%;
			}
		}

		.station-content {
			height: calc(100% - 36px);
			width: 100%;
		}
	}
</style>
