<template>
	<div v-if="visible" class="popup-model station-model comp-container">
		<div class="station-title">
			{{ title }}
		</div>
		<i class="icon el-icon-close" @click="close"></i>
		<div class="station-content">
			<el-table :data="data" v-if="dataShow" height="100%" stripe border highlight-current-row>
				<el-table-column label="监测站代码" 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-if="videoShow" height="100%" stripe border highlight-current-row>
				<el-table-column label="视频站代码" 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="location" min-width="38%" show-overflow-tooltip>
				</el-table-column>
				<el-table-column label="测站运行状态" align="center" prop="status" min-width="20%" show-overflow-tooltip>
					<template slot-scope="scope">
						<span :style="{
                          color:
                            scope.row.status == '0' ? 'rgb(199, 61, 61)' : 'rgb(6, 194, 6)'
                        }">{{
                        scope.row.status == 0 ? '异常' : scope.row.status == 1 ? '正常' : ''
                        }}</span>
					</template>
				</el-table-column>
			</el-table>
			<el-table :data="data" v-if="WYShow" height="100%" stripe border highlight-current-row>
				<el-table-column label="位移站代码" 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="areaName" 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-if="CYShow" height="100%" stripe border highlight-current-row>
				<el-table-column label="测压管代码" 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="areaName" 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>
		</div>
	</div>
</template>

<script>
	import dictUtils from '@/components/dict/DictSelectUtils.js'
	import digitalReservoir from '@/api/frontScreen/digitalReservoir.js'
	export default {
		name: 'stationsDetails',
		data() {
			return {
				// 字典中的站列表
				data: [],
				// 视频列表
				// videoData: [],
				// WYData: [],
				// CYData: [],
				CYShow: false,
				WYShow: false,
				visible: false,
				dataShow: false,
				videoShow: false,
				title: '',
				multipleSelection: [],
				params: {
					appTypeList: [],
					sttpList: [],
					usfl: ''
				},
				stationApps: [], //测站应用分类
				stationClass: [], //统计测站类别
				queryData: {
					pageBean: {
						pageSize: 20,
						page: 1
					},
					params: {
						usfl: ''
					}
				},
				vidoeParams: {
					groupRelation: "AND",
					groupTree: {},
					pageBean: {
						page: 1,
						pageSize: -1,
						showTotal: true
					},
					params: {
						status: "",
						appType: ''
					}
				}
			}
		},
		created() {
			this.stationApps = dictUtils.getDictItemsFromCache('czyyfl') //测站应用分类
			this.stationClass = dictUtils.getDictItemsFromCache('czzl') //统计-测站类别
			console.log(this.stationClass);
		},
		methods: {
			open(title, data) {
				console.log(data)
				this.title = `${title}详情`
				this.visible = true
				// 单独的视频站
				if (data.stationType == '视频站') {
					// if (data.seriesName == '正常') {
					//     this.vidoeParams.params.status = '1'
					// } else {
					//     this.vidoeParams.params.status = '0'
					// }
					this.stationApps.forEach(ea => {
						if (data.type == ea.name) {
							this.vidoeParams.params.appType = ea.value
						}
					})
					// console.log(vidoeParams)
					this.videoList(this.vidoeParams)
				}
				// 水库中的位移/测压
				if (data.type == '水库') {
					// if (data.seriesName == "正常") {
					//     this.queryData.params.usfl = '1'
					// } else {
					//     this.queryData.params.usfl = '0'
					// }
					console.log(this.queryData)
					if (data.stationType == '位移点') {
						this.displacementList(this.queryData)
					}
					if (data.stationType == '测压管') {
						this.OsmosisList({
							pageBean: {
								pageSize: -1,
								page: 1
							},
							params: {
								usfl: ""
							}
						})
					}
				}
				// 字典中的站
				if (
					data.stationType == '雨量站' ||
					data.stationType == '河道水文站' ||
					data.stationType == '河道水位站' ||
					data.stationType == '水库水位站' ||
					data.stationType == '生态流量站'
				) {
					// if (data.seriesName == '正常') {
					//     this.params.usfl = '1'
					// } else {
					//     this.params.usfl = '0'
					// }
					this.stationApps.forEach(ea => {
						if (data.type == ea.name) {
							this.params.appTypeList.push(ea.value)
						}
					})
					
					this.stationClass.forEach(ec => {
						if (data.stationType == ec.name) {
							this.params.sttpList.push(ec.value)
						}
						if (data.stationType == '水库水位站' && ec.name == "水库水位站") {
							this.params.sttpList.push(ec.value)
						}
					})
					this.getList()
				}


				// console.log(this.params);
			},
			// 位移
			displacementList(item) {
				digitalReservoir.findDisplacementList(item, res => {
					if (res.state) {
						this.$nextTick(() => {
							this.data = res.value.rows
							this.WYShow = true
							this.videoShow = false
							this.dataShow = false
							this.CYShow = false
						})
					}
				})
			},
			// 渗压
			OsmosisList(item) {
				digitalReservoir.findOsmosisList(item, res => {
					if (res.state) {
						this.$nextTick(() => {
							this.data = res.value.rows
							this.CYShow = true
							this.videoShow = false
							this.dataShow = false
							this.WYShow = false
						})
					}
				})
			},
			// 视频
			videoList(item) {
				digitalReservoir.findVideoList(item, res => {
					if (res.state) {
						this.$nextTick(() => {
							this.data = res.value.rows
							this.videoShow = true
							this.dataShow = false
							this.WYShow = false
							this.CYShow = false
						})
					}
				})
			},
			// 字典查询的类型
			getList() {
				digitalReservoir.findStList(this.params, res => {
					if (res.state) {
						this.$nextTick(() => {
							this.data = res.value
							this.dataShow = true
							this.videoShow = false
							this.WYShow = false
							this.CYShow = false
						})
					}
					this.params = {
						appTypeList: [],
						sttpList: [],
						usfl: ''
					}
				})
			},

			handleSelectionChange(val) {
				this.multipleSelection = this.multipleSelection = val.map(item => {
					return item.id
				})
			},
			close() {
				this.visible = false
				this.videoShow = false
				this.dataShow = false
				this.WYShow = false
				this.CYShow = false
				this.params = {
					appTypeList: [],
					sttpList: [],
					usfl: ''
				}
			}
		}
	}
</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;
			justify-content: center;
			/* 子元素水平居中 */
			align-items: 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>
