<!--取水户-->
<template>
    <div class="comp-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.waterName"
                    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-input
				    style="width: 98%"
				    clearable
				    v-model="form.industryType"
				    placeholder="请输入行业类别"
				    size="mini"
				    @change="changeSearchTwo"
				></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.monitorLevel" @change="jkjbCahnge">
                    <el-checkbox
                        class="check-item"
                        v-for="item in jkjb"
                        :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="stcd"
				align="center"
				show-overflow-tooltip
			></el-table-column>
            <el-table-column
                label="取水点名称"
                prop="stnm"
                align="center"
				min-width="200px"
                show-overflow-tooltip
            ></el-table-column>
			
           <!-- <el-table-column
                label="取水类型"
                prop="waterType"
                align="center"
				width='80px'
                show-overflow-tooltip
            >
                <template slot-scope="scope">
                    <template v-for="item in qslx">
                        <span
                            v-if="scope.row.waterType == item.value"
                            :key="item.value"
                            >{{ item.name }}</span
                        >
                    </template>
                </template>
            </el-table-column>
            <el-table-column
                label="监控级别"
                prop="monitorLevel"
                align="center"
				width='80px'
                show-overflow-tooltip
            >
                <template slot-scope="scope">
                    <template v-for="item in jkjb">
                        <span
                            v-if="scope.row.monitorLevel == item.value"
                            :key="item.value"
                            >{{ item.name }}</span
                        >
                    </template>
                </template>
            </el-table-column> -->
        </el-table>
        <WaterUserModel
            ref="WaterUserModel"
            :isShow="showInfo"
            :currentPoint="currentPoint"
        ></WaterUserModel>
    </div>
</template>

<script>
import WaterUserModel from './module/WaterUserModel.vue'
import dictUtils from '@/components/dict/DictSelectUtils.js'
import gisMap from '@/api/frontScreen/gisMap.js'
import {gisCompMixin} from '@/mixins/gisCompMixin.js'
export default {
    name: 'WaterUser',
    components: {WaterUserModel},
    mixins: [gisCompMixin],
    data() {
        return {
            // 指定坐标字段
            lg: 'eslg',
            lt: 'nrlt',
            // 信息窗model的ref
            modelName: 'WaterUserModel',
            form: {
                monitorLevel: [],
                waterType: [],
                waterName: '',
            },
            iconUrl: require('./../../../../assets/img/gis_waterUser.png'),
            filterData: [],
			params:{
					id: "",
					monitorLevelList: [],
					waterCode: "",
					waterName: "",
					waterTypeList: [],
					industryType:""
			},
            originData: [
                {
                    waterName: '取水户1',
                    waterType: 1,
                    monitorLevel: 1,
                    eslg: '106.484406',
                    nrlt: '29.831273',
                },
                {
                    waterName: '取水户2',
                    waterType: 2,
                    monitorLevel: 2,
                    eslg: '106.367665',
                    nrlt: '29.762964',
                },
                {
                    waterName: '取水户3',
                    waterType: 3,
                    monitorLevel: 3,
                    eslg: '106.448409',
                    nrlt: '29.68299',
                },
                {
                    waterName: '取水户4',
                    waterType: 1,
                    monitorLevel: 4,
                    eslg: '106.448509',
                    nrlt: '29.68239',
                },
                {
                    waterName: '取水户5',
                    waterType: 2,
                    monitorLevel: 9,
                    eslg: '106.434606',
                    nrlt: '29.837273',
                },
                {
                    waterName: '取水户6',
                    waterType: 3,
                    monitorLevel: 1,
                    eslg: '106.388665',
                    nrlt: '29.767964',
                },
                {
                    waterName: '取水户7',
                    waterType: 3,
                    monitorLevel: 3,
                    eslg: '106.498409',
                    nrlt: '29.78399',
                },
                {
                    waterName: '取水户8',
                    waterType: 3,
                    monitorLevel: 2,
                    eslg: '106.498709',
                    nrlt: '29.69799',
                },
            ],
            jkjb: [],
            qslx: [],
            currentPoint: {
                waterName: '',
            },
        }
    },
    created() {
        // this.filterData = this.originData
        this.jkjb = dictUtils.getDictItemsFromCache('jkjb')
        this.qslx = dictUtils.getDictItemsFromCache('qslx')
    },
	mounted() {
		this.$nextTick(async() => {
			await this.getWaterCompanyList()
			this.initMarkers()
		})
	//自动刷新获取数据(1000*60*10=>毫秒*秒*分钟，此时表示为10分钟)
		this.refreshData=setInterval(()=>{
		this.getWaterCompanyList()
		this.updateMarkers()
		},1000*60*10);
	},
	//生命周期若已设置定时器，需清空定时器beforeDestroy()
	beforeDestroy(){
		clearInterval(this.refreshData);
		this.refreshData=null;
	},
    methods: {
		getWaterCompanyList(){
			return new Promise((resolve, reject)=>{
				gisMap.stationPage(this.params,res=>{
					if(res.state){
						this.filterData = res.value
							// this.filterData[0].eslg= '106.367665'
							// this.filterData[0].nrlt= '29.762964'
							// this.filterData[1].eslg= '106.567665'
							// this.filterData[1].nrlt= '29.762964'
						resolve()
					}
					reject()
				})
			})
			
		},
		async jkjbCahnge(val){
			this.params.monitorLevelList=val
			await this.getWaterCompanyList()
			this.updateMarkers()
		},
        async changeSearch(val) {
			this.params.waterName=val
			await this.getWaterCompanyList()
			this.updateMarkers()
        },
		async changeSearchTwo(val) {
			this.params.industryType=val
			await this.getWaterCompanyList()
			this.updateMarkers()
		},
		async qslxChange(val){
			this.params.waterTypeList=val
			await this.getWaterCompanyList()
			this.updateMarkers()
		},
		updateMarkers(){
		  // 获得新的列表数据后清除旧的标点、重新创建地图标点
		  this.searchClear = true
		  this.clearMarkers();
		  this.searchClear = false
		  this.initMarkers();
		},
		rowClick(row) {
		  this.currentPoint = row
		  console.log(row);
		  let latlng = this.createdLngLat(row.lttd, row.lgtd)
		  this.drawMarker(latlng, row, false)
		},
		// 初始化多个标点
		initMarkers() {
		  console.log("init")
		  this.LayerGroup = null
		  this.markerslayer = []
		  this.filterData.forEach((row,index) => {
		    if(!row.lttd || !row.lgtd) {
		      console.log("索引" + index +"无定位数据", row)
		      return
		    } 
		    let latlng = this.createdLngLat(row.lttd, row.lgtd)
		    let sectionMarker = this.drawMarker(latlng, row, true)
		    this.markerslayer.push(sectionMarker);
		  })
		  this.LayerGroup = new L.layerGroup(this.markerslayer);
		  this.map.addLayer(this.LayerGroup);
		},
        // infoWindow() {
        //     let sContent = this.$refs.WaterUserModel.$el
        //     var infoWin = new L.popup( {
        //         autoPan: true,
        //         maxHeight: 360,
        //         minWidth: 500,
        //         maxWidth: 600,
        //     }).setContent(sContent)
        //     return infoWin
        // },
        infoWindow() {
            let sContent = this.$refs.WaterUserModel.$el
            var infoWin = new L.popup({
                autoPan: true,
                maxHeight: 300,
                minWidth: 440,
                maxWidth: 600,
            }).setContent(sContent)
            return infoWin
        },
    },
}
</script>

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