<!--水电站-->
<template>
    <div class="comp-container hydropower-container" ref="comContainer">
        <div class="search-container" ref="searchPanle">
            <el-row class="search-row">
                <el-tag size="mini" class="label" effect="dark">
                    测站名称
                </el-tag>
                <el-input
                    style="width: 98%"
                    clearable
                    v-model="form.hystName"
                    placeholder="请输入测站名称"
                    size="mini"
                    @change="changeSearch"
                ></el-input>
            </el-row>
			<el-row class="search-row">
			  <el-tag size="mini" class="label" effect="dark">
			    生态站类型
			  </el-tag>
			  <el-checkbox-group v-model="form.sstp" @change="hljbChange">
			    <el-checkbox
			      class="check-item"
			      v-for="item in sstpList"
			      :key="item.value"
			      :label="item.value"
			      >{{ item.name }}
			    </el-checkbox>
			  </el-checkbox-group>
			</el-row>
        </div>
		<el-table :data="filterData" :height="tableHeight" stripe size="mini" highlight-current-row :cell-class-name="tableRowClassName"
			@row-click="rowClick">
			<el-table-column label="测站名称" prop="stnm" align="center" show-overflow-tooltip></el-table-column>
			<el-table-column label="应用分类" prop="appType" align="center" show-overflow-tooltip></el-table-column>
			<el-table-column label="运行状态" prop="usfl" align="center" show-overflow-tooltip>
				<template  slot-scope="scope">
					{{scope.row.usfl==0?'异常':scope.row.usfl==1?'在线':''}}
				</template>
			</el-table-column>
		</el-table>
       <!-- <el-table
            :data="filterData"
            :height="tableHeight"
            stripe
            size="mini"
            highlight-current-row
            @row-click="rowClick"
        >
            <el-table-column
                label="名称"
                prop="hystName"
                align="center"
                show-overflow-tooltip
            ></el-table-column>
            <el-table-column
                label="类型"
                prop="hystType"
                align="center"
                show-overflow-tooltip
            ></el-table-column>
            <el-table-column
                label="工程规模"
                prop="engScal"
                align="center"
                show-overflow-tooltip
            ></el-table-column> 
        </el-table> -->
        <HydropowerModel
            ref="HydropowerModel"
            v-show="showInfo"
            :currentPoint="currentPoint"
        ></HydropowerModel>
    </div>
</template>

<script>
import HydropowerModel from './module/HydropowerModel.vue'
import dictUtils from '@/components/dict/DictSelectUtils.js'
import gisMap from '@/api/frontScreen/gisMap.js'
import {gisCompMixin} from '@/mixins/gisCompMixin.js'
export default {
    name: 'Hydropower',
    components: {HydropowerModel},
    mixins: [gisCompMixin],
    data() {
        return {
            // 指定坐标字段
            lg: 'lgtd',
            lt: 'lttd',
			// 是否需要区别icon
			typeIcon: true,
			// 不同类型icon的key
			iconTypeKey: 'usfl',
            modelName: 'HydropowerModel',
            form: {
                hystName: '',
				sstp:[]
            },
            iconUrl1: require('./../../../../assets/img/tree.png'),
            iconUrl0: require('./../../../../assets/img/tree1.png'),
            filterData: [],
			sstpList: [
			],
			params: {
				appTypeList: [],
				endTime: "",
				id: "",
				mpcd: "",
				periodTime: "",
				rscd: "",
				startTime: "",
				stcd: "",
				stlc: "",
				stnm: "",
				sttp: "SS",
				sttpList: [],
				usfl: ""
			},
            originData: [
               
            ],
            sdzlx: [],
            gcgm: [],
			gcjsqk:[],
            currentPoint: {
                hystName: '',
            },
			czyyfl:[],
			refreshData:null
        }
    },
    created() {
		// this.getFindAll()
        // this.filterData = this.originData
        this.sdzlx = dictUtils.getDictItemsFromCache('sdzlx')
        this.gcgm = dictUtils.getDictItemsFromCache('gcgm')
		this.czyyfl = dictUtils.getDictItemsFromCache('czyyfl')
		this.sstpList = dictUtils.getDictItemsFromCache('czlb-stzlx')
    },
    mounted() {
       this.$nextTick(async() => {
         // 异步请求数据 等待数据获取 再initMarkers
         await this.getFindAll()
         this.initMarkers()
         // this.initReservoir()
       })
    //自动刷新获取数据(1000*60*10=>毫秒*秒*分钟，此时表示为10分钟)
    	this.refreshData = setInterval(() => {
    		this.getFindAll()
    		this.updateMarkers()
    	}, 1000 * 60 * 10);
    },
    //生命周期若已设置定时器，需清空定时器beforeDestroy()
    beforeDestroy() {
    	clearInterval(this.refreshData);
    	this.refreshData = null;
    },
    methods: {
		//选中的工程规模
		async gsgmChange(val){
			this.params.hystTypeList=val
			await this.getFindAll()
			this.updateMarkers()
		},
		tableRowClassName(row) {
			if (row.row.usfl == 0) {
				return 'warning-row';
			} 
		},
		//获取水电站列表
		getFindAll() {
			return new Promise((resolve, reject)=>{
				gisMap.findStList(this.params, res => {
					if (res.state) {
						this.filterData = res.value
						this.filterData.forEach(e => {
							this.czyyfl.forEach(g => {
								if (e.appType == g.value) {
									e.appType = g.name
								}
							})
						})
						resolve()
					}
					reject()
				})
			})
			
		},
        async changeSearch(val) {
			this.params.stnm=val
			await this.getFindAll()
			this.updateMarkers()
            // if (!val) {
            //     this.districtData = this.originData
            //     return
            // }
            // this.districtData = this.originData.filter(
            //     (item) => item.name == val
            // )
        },
		async hljbChange(val){
			console.log(val);
			this.params.sstp=val
			await this.getFindAll()
			this.updateMarkers()
		},
		updateMarkers(){
		  // 获得新的列表数据后清除旧的标点、重新创建地图标点
		  this.searchClear = true
		  this.clearMarkers();
		  this.searchClear = false
		  this.initMarkers();
		},
		
        infoWindow() {
            let sContent = this.$refs.HydropowerModel.$el
            var infoWin = new L.popup({
                autoPan: true,
                maxHeight: 300,
                minWidth: 420,
                maxWidth: 600,
            }).setContent(sContent)
            return infoWin
        },
    },
}
</script>

<style lang="scss" scoped>
@import './../../css/gisComp.scss';
.hydropower-container{
    /deep/ .el-table .warning-row {
    	color: #999999 !important;
    
    	div {
    		color: #999999 !important;
    	}
    }
}
</style>