<!--工情测站-->
<template>
    <div class="infoWindow-model">
        <div class="model-title">{{ currentPoint.mpnm }}</div>
       <!-- <el-tabs
            v-model="activeName"
            type="border-card"
            @tab-click="handleClick"
        >
            <el-tab-pane label="测站详情" name="测站详情"> -->
                <div class="section-container">
                    <div class="section-item"  >
                        <span class="text">测站名称</span>
                        <span class="content">{{ currentPoint.mpnm }}</span>
                    </div>
					<div class="section-item"  >
					    <span class="text">测站代码</span>
					    <span class="content">{{ currentPoint.mpcd }}</span>
					</div>
					<div class="section-item"  >
					    <span class="text">所属水库</span>
					    <span class="content">{{ currentPoint.rsnm }}</span>
					</div>
					<div class="section-item"  >
					    <span class="text">安装详细地址</span>
					    <span class="content">{{ currentPoint.stlc }}</span>
					</div>
                </div>
           <!-- </el-tab-pane>
            <el-tab-pane label="测报数据" name="测报数据">
                <div class="section-container">
                    <el-table
                        :data="tableData"
                        height="100%"
                        style="width: 100%"
                        stripe
                        border
                        :row-class-name="tableRowClassName"
                        size="mini"
                    >
                        <el-table-column
                            v-for="item in column"
                            :key="item.prop"
                            :label="item.label"
                            :prop="item.prop"
                            :width="item.width"
                            align="center"
                            show-overflow-tooltip
                        ></el-table-column>
                    </el-table>
                </div>
            </el-tab-pane>
        </el-tabs> -->
    </div>
</template>

<script>
	import dictUtils from '@/components/dict/DictSelectUtils.js'
	import gisMap from '@/api/frontScreen/gisMap.js'
export default {
    name: 'EngineerStationModel',
    props: {
        currentPoint: {
            type: Object,
            default: () => {
                return {}
            },
        },
        stationType: {
            type: String,
            default: '',
        },
    },
    data() {
        return {
            activeName: '测站详情',
			params:{
				appTypeList: [],
					endTime: "",
					id: "",
					mpcd: "",
					periodTime: "",
					rscd: "",
					startTime: "",
					stcd: "",
					stlc: "",
					stnm: "",
					sttp: "",
					sttpList: [],
					usfl: "",
					mptp:''
			},
            // infoData: [
            //     {
            //         text: '测站名称',
            //         content: 'XXX',
            //         key: 1,
            //     },
            //     {
            //         text: '测站代码',
            //         content: '225522',
            //         key: 2,
            //     },
            //     {
            //         text: '所属水库',
            //         content: 'XX水库',
            //         key: 3,
            //     },
            //     {
            //         text: '安装详细地址',
            //         content: 'XXXXXXXXXXXXXXXXXXXXX',
            //         key: 4,
            //     },
            // ],
            tableData: [],
            column: [],
            // 位移
            column1: [
               
                {
                    label: '时间',
                    prop: 'tm',
                    width: 135,
                },
                {
                    label: '东方向',
                    prop: 'dx',
                    width: 70,
                },
                {
                    label: '北方向',
                    prop: 'dy',
                    width: 70,
                },
                {
                    label: '垂直方向',
                    prop: 'dz',
                    width: 80,
                },
				{
				    label: '报警等级',
				    prop: 'level',
				},
            ],
            // 渗流
            column2: [
               
                {
                    label: '时间',
                    prop: 'mstm',
                    width: 150,
                },
                // {
                //     label: '温度',
                //     prop: 'a',
                // },
                {
                    label: '渗流量',
                    prop: 'spqn',
                },
				{
				    label: '报警等级',
				    prop: 'level',
				},
            ],
            // 渗压_渗流压力
            column3: [
               
                {
                    label: '时间',
                    prop: 'mstm',
                    width: 170,
                },
                // {
                //     label: '温度',
                //     prop: 'a',
                // },
                {
                    label: '测压管水位(m)',
                    prop: 'pztbwl',
                },
				{
				    label: '报警等级',
				    prop: 'level',
					width: 130,
				},
            ],
            // 渗压_测压管
            column4: [
               
                {
                    label: '时间',
                    prop: 'time',
                    width: 150,
                },
                {
                    label: '测压管水位',
                    prop: 'a',
                },
				{
				    label: '报警等级',
				    prop: 'level',
				},
            ],
			yjdj:[]
        }
    },
    inject: ['mapData'],
    created() {
        let mapData = this.mapData()
        this.districtData = this.originData
        this.T = mapData.T
        this.map = mapData.map
		this.yjdj = dictUtils.getDictItemsFromCache('yjdj')
    },
    watch: {
        stationType: {
            handler: function (newVal, oldVal) {
                this.column = this[`column${this.stationType}`]
            },
            immediate: true, // immediate选项可以开启首次赋值监听
        },
		currentPoint: {
		    handler(newVal) {
                this.activeName = '测站详情'
                if(this.stationType==1){
                    this.getDammvList()
                }else if(this.stationType==2){
                    this.getDamspgList()
                }else if(this.stationType==3){
                    this.getDamspprList()
                }
            }
        }
    },
    // computed: {
    //     column() {
    //         if (this.stationType == 3) {
    //             return this[
    //                 `column${this.stationType}_${this.currentPoint.mptp}`
    //             ]
    //         } else {
    //             return this[`column${this.stationType}`]
    //         }
    //     },
    // },
    mounted() {},
    beforeDestroy() {},
    methods: {
		getDammvList(){
			this.params.stcd=this.currentPoint.mpcd
			this.params.rscd=this.currentPoint.rscd
			this.params.tmOrderAsc=true
			gisMap.dammvData(this.params,res=>{
				if(res.state){
					this.tableData=res.value
				}
			})
		},
		getDamspgList(){
			gisMap.damspgData(this.params,res=>{
				if(res.state){
					this.tableData=res.value
				}
			})
		},
		getDamspprList(){
			this.params.mpcd=this.currentPoint.mpcd
			this.params.rscd=this.currentPoint.rscd
			this.params.mptp=this.currentPoint.mptp
			this.params.tmOrderASC=false
			this.params.isSYJ=true
			gisMap.damspprData(this.params,res=>{
				if(res.state){
					this.tableData=res.value
					this.tableData.forEach(e=>{ 
						this.yjdj.forEach(c => {
							if (e.warnGrade == c.value) {
								e.level = c.name
							}
						})
					})
				}
			})
		},
        handleClick(tab, event) {
			if(tab.name=='测报数据'){
				if(this.stationType==1){
					this.getDammvList()
				}else if(this.stationType==2){
					this.getDamspgList()
				}else if(this.stationType==3){
					this.getDamspprList()
				}
			}
        },
        tableRowClassName({row, rowIndex}) {
            if (row.warnGrade == 2) {
            	return 'orange-row';
            } else if (row.warnGrade == 1) {
            	return 'alert-row';
            } else if (row.warnGrade == 3) {
            	return 'warning-row';
            }
        },
    },
}
</script>

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

.section-container {
    width: 440PX;
}
/deep/ .el-table .warning-row {
		color: red !important;

		div {
			color: red !important;
		}
	}

	/deep/ .el-table .warning-yellow {
		color: yellow !important;

		div {
			color: yellow !important;
		}
	}

	/deep/ .el-table .orange-row {
		color: #FFAE00 !important;

		div {
			color: #FFAE00 !important;
		}
	}

</style>
<style>
/* .infoWindow-model .el-table tr.warning-row {
    background: rgb(128, 41, 47)!important;
} */
</style>