<template>
	<div v-if="visible" class="popup-model station-model comp-container">
		<div class="station-title">
			<div style="height:15px">
				<el-button 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="title=='水位报警'" 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="level" min-width='100' show-overflow-tooltip>
					<template slot-scope="scope">
						<span
							:style="{color:scope.row.level=='危险'?'#ff9900':scope.row.level=='警戒'?'yellow':scope.row.level=='非常危险'?'red':''}">{{scope.row.level}}</span>
						<!-- :style="{color:scope.row.warnGrade=='2'?'red':scope.row.warnGrade=='1'?'yellow':''}">{{scope.row.warnGrade==1?'警戒':scope.row.warnGrade==2?'危险':''}}</span> -->

					</template>
				</el-table-column>
			</el-table>
			<el-table :data="data" v-else-if="title=='雨量报警'||title=='工情报警'" 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="warnSdName" min-width='100' show-overflow-tooltip>
				</el-table-column>
				<el-table-column label="预警等级" align="center" prop="level" min-width='100' show-overflow-tooltip>
					<template slot-scope="scope">
						<span
							:style="{color:scope.row.level=='危险'?'#ff9900':scope.row.level=='警戒'?'yellow':scope.row.level=='非常危险'?'red':''}">{{scope.row.level}}</span>
						<!-- :style="{color:scope.row.warnGrade=='2'?'red':scope.row.warnGrade=='1'?'yellow':''}">{{scope.row.warnGrade==1?'警戒':scope.row.warnGrade==2?'危险':''}}</span> -->
					</template>
				</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: 'DSModel',
		data() {
			return {
				visible: false,
				title: '',
				data: [],
				yjdjs: [],
				warnSdList: [{
					name: '1小时雨量',
					value: 'p1'
				}, {
					name: '3小时雨量',
					value: 'p3'
				}, {
					name: '6小时雨量',
					value: 'p6'
				}, {
					name: '12小时雨量',
					value: 'p12'
				}, {
					name: '24小时雨量',
					value: 'p24'
				}, ],
				multipleSelection: []
			}
		},
		created() {
			this.yjdjs = dictUtils.getDictItemsFromCache('yjdj')
		},
		methods: {
			open(title, data) {
				this.title = title
				this.visible = true
				this.data = data
				this.data.forEach(e => {
					if (e.warnGrade) {
						this.yjdjs.forEach(c => {
							if (e.warnGrade == c.value) {
								e.level = c.name
							}
						})
					}
					if (e.warnDate) {
						let a = JSON.parse(e.warnDate)
						this.warnSdList.forEach(w => {
							if (w.value == a.warnSd) {
								e.warnSdName = w.name
							}
							e.currentValue = a.currentValue
							e.warnVal = a.warnVal

						})
					}

				})
			},
			close() {
				this.visible = false
				this.$emit('close')
				this.$emit('callAgain')
			},
			//批量处理
			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: '已取消删除'
					});
				});
			},
			handleSelectionChange(val) {
				this.multipleSelection = this.multipleSelection = val.map(item => {
					return item.id
				})
			},
		}

	}
</script>

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

	.popup-model {
		width: 700PX;
		height: 350PX;
		position: absolute;
		top: 50%;
		left: 55%;
		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>
