<template>
	<div>
		<el-dialog :visible.sync="LiftShow" width="85%" max-height="650px" :before-close="handleClose">
			<div class="bbsl-common-page" style="display: flex" @click="commonPageClick">
				<div class="content-right">
					<div class="bbsl-table-content" style="height:100%;padding:0;margin:0">
						<el-table :data="tableData" style="width: 100%" border :header-cell-style="rowStyle">
							<el-table-column label="序号" type="index" width="50" align="center">
							</el-table-column>
							<el-table-column prop="mpcd" label="测点编码" sortable align="center">
							</el-table-column>
							<el-table-column prop="mpnm" label="测点名称" sortable align="center">
							</el-table-column>
							<el-table-column prop="mptpName" label="测点类型" sortable align="center">
							</el-table-column>
							<el-table-column prop="sttpName" label="工情设施类型" sortable align="center">
							</el-table-column>
							<el-table-column prop="wkcn" label="在线状态" sortable align="center">
								<template slot-scope="scope">
									<span
										:style="{'color':scope.row.wkcn==1?'green':'red'}">{{scope.row.wkcn==1?'在线':scope.row.wkcn==0?'不在线':''}}</span>
								</template>
							</el-table-column>
						</el-table>
					</div>
				</div>
			</div>
		</el-dialog>
	</div>
</template>
<script>
	import videoManger from '@/api/stManager/czManager.js'
	import req from '@/request.js'
	import {
		TableMixin
	} from '@/mixins/tableMixin'
	export default {
		name: 'videoManger',
		props: {
			LiftShow: {
				type: Boolean,
				default: false,
			},
			relation: {
				type: String,
				default: '',
			},
			rowId: {
				type: String,
				default: '',
			},
			rscd: {
				type: String,
				default: '',
			}
		},
		components: {},
		mixins: [TableMixin],
		data() {
			return {
				tableData: [],
				sttpType: [{
						name: "位移变形",
						value: "1"
					},
					{
						name: "渗流",
						value: "2"
					},
					{
						name: "渗压",
						value: "3"
					}
				],
				mptpType: [{
						name: "水平位移",
						value: "1"
					},
					{
						name: "垂直位移",
						value: "2"
					},
					{
						name: "渗流压力",
						value: "3"
					},
					{
						name: "测压",
						value: "4"
					},
					{
						name: "渗流量",
						value: "5"
					}
				]
			}
		},
		created() {
			this.getFindGqStation()
		},
		mounted() {

		},
		methods: {
			getFindGqStation() {
				videoManger.findGqStation({
					rscd: this.rscd
				}, res => {
					if (res.state) {
						this.tableData = res.value
						this.tableData.forEach(e => {
							this.sttpType.forEach(s => {
								if (e.sttp = s.value) {
									e.sttpName = s.name
								}
							})
							this.mptpType.forEach(m => {
								if (e.mptp = m.value) {
									e.mptpName = m.name
								}
							})
						})
					}
				})
			},

			rowStyle() {
				return "text-align:center";
			},
			handleClose() {
				this.params = {
					name: null, //树点击查询条件
					zoneCode: null,
				}
				this.$emit('LiftRelations')
			},
		},
	}
</script>
<style lang="scss" scoped>
	.el-tree-node__content {
		width: 100% !important;
		height: 40px !important;
		flex: 1;
		display: flex !important;
		// align-items: center !important;
		justify-content: space-around !important;
		font-size: 14px;
		// padding-right: 8px;
	}

	.el-transfer-panel {
		height: 100% !important;
		width: 100% !important;
	}

	.btn-content {
		display: flex;
	}

	.el-dialog__body {
		height: 650px !important;
		overflow: auto !important;
	}

	.el-select-dropdown__item span {
		color: rgb(51, 51, 51) !important;
	}

	.el-select-dropdown__item {
		color: #9a9a9a !important;
	}

	.el-select-dropdown__item.hover,
	.el-select-dropdown__item:hover {
		background: #f5f7fa;
	}

	.btn-content :first-child {
		margin: 0 0 0 0 !important;
	}

	.el-card__body {
		width: 100% !important;
		height: 100% !important;
	}

	.custom-tree-node {
		box-sizing: border-box;
		display: flex;
		justify-content: space-around !important;
	}

	.custom-tree-node {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 14px;
		padding-right: 5px;
	}

	.el-card {
		width: 100% !important;
		height: 100% !important;
	}

	.el-main {
		width: 100% !important;
		height: 100% !important;
	}

	.fullheight {
		display: flex !important;
		width: 100% !important;
		height: 100%;
	}

	.content-left {
		width: 20% !important;
		border-right: 1px solid #ccc;
	}

	.content-right {
		width: 100% !important;
	}

	.sampling {
		::v-deep .el-dialog__body {
			padding: 30px 20px 0 20px;
		}
	}

	::-webkit-scrollbar {
		background: #fff !important;
	}

	.custom-tree-node {
		font-size: 12px;
	}

	.el-popover {
		min-width: 35px !important;
		padding: 5px 0 !important;
	}

	.line {
		display: block !important;
		height: 1px !important;
		background: #ccc !important;
	}

	.checkbox-group {
		height: 454px !important;
	}
</style>
