<!--预警机-->
<template>
    <div class="comp-container reservoir-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.name"
                    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.runStatusList" @change="czyxztChange">
                    <el-checkbox
                        class="check-item"
                        v-for="item in czyxzt"
                        :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
            @row-click="rowClick"
        >
		<el-table-column
		    label="预警机站编码"
		    prop="code"
		    align="center"
		    show-overflow-tooltip
		></el-table-column>
            <el-table-column
                label="预警机站名称"
                prop="name"
                align="center"
                show-overflow-tooltip
            ></el-table-column>
           <!-- <el-table-column
                label="测站运行状态"
                prop="runStatus"
                align="center"
                show-overflow-tooltip
            >
                <template slot-scope="scope">
                    <span v-if="scope.row.runStatus == 1">在线</span>
                    <span v-if="scope.row.runStatus == 2">掉线</span>
                    <span v-if="scope.row.runStatus == 3">损坏</span>
                </template>
            </el-table-column> -->
        </el-table>
        <WarnModel
            ref="WarnModel"
            v-show="showInfo"
            :currentPoint="currentPoint"
        ></WarnModel>
    </div>
</template>

<script>
import WarnModel from './module/WarnModel.vue'
import dictUtils from '@/components/dict/DictSelectUtils.js'
import gisMap from '@/api/frontScreen/gisMap.js'
import {gisCompMixin} from '@/mixins/gisCompMixin.js'
export default {
    name: 'WarnInstallations',
    components: {WarnModel},
    mixins: [gisCompMixin],
    data() {
        return {
            // 指定坐标字段
            lg: 'siteLong',
            lt: 'siteLat',
            // 信息窗model的ref
            modelName: 'WarnModel',
            // 是否需要区别icon 
            typeIcon: true,
            // 不同类型icon的key
            iconTypeKey: 'runStatus',
            form: {
                runStatusList: [],
                name: '',
            },
            iconUrl1: require('./../../../../assets/img/gis_warn_1.png'),
            iconUrl2: require('./../../../../assets/img/gis_warn_2.png'),
            iconUrl3: require('./../../../../assets/img/gis_warn_3.png'),

            filterData: [],
            
            czyxzt: [],
            currentPoint: {
                name: '',
            },
        }
    },
    created() {
        // this.filterData = this.originData
        this.czyxzt = dictUtils.getDictItemsFromCache('czyxzt')
    },
    mounted() {
        this.$nextTick(async() => {
        	await this.getAlarmList()
        	this.initMarkers()
        })
    //自动刷新获取数据(1000*60*10=>毫秒*秒*分钟，此时表示为10分钟)
    	this.refreshData=setInterval(()=>{
    	this.getAlarmList()
    	this.updateMarkers()
    	},1000*60*10);
    },
    //生命周期若已设置定时器，需清空定时器beforeDestroy()
    beforeDestroy(){
    	clearInterval(this.refreshData);
    	this.refreshData=null;
    },
    methods: {
		getAlarmList(){
			return new Promise((resolve, reject)=>{
				gisMap.alarmList(this.form,res=>{
					if(res.state){
						this.filterData = res.value
						resolve()
					}
					reject()
				})
			})
		},
		async	czyxztChange(val){
			await this.getAlarmList()
			this.updateMarkers()
		},
        async changeSearch(val) {
			await this.getAlarmList()
			this.updateMarkers()
            // if (!val) {
            //     this.districtData = this.originData
            //     return
            // }
            // this.districtData = this.originData.filter(
            //     (item) => item.name == val
            // )
        },
		updateMarkers(){
		  // 获得新的列表数据后清除旧的标点、重新创建地图标点
		  this.searchClear = true
		  this.clearMarkers();
		  this.searchClear = false
		  this.initMarkers();
		},
    },
}
</script>

<style lang="scss" scoped>
@import './../../css/gisComp.scss';
.reservoir-container{
    /deep/ .el-form-item--small.el-form-item {
        margin-bottom: 0px;
    }
}
</style>