<!--河流-->
<template>
  <div class="comp-container river-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.rvName"
          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.rvGrad" @change="hljbChange">
          <el-checkbox
            class="check-item"
            v-for="item in hljb"
            :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"
      row-key="id"
	  lazy
	  :tree-props="{children: 'children', hasChildren: true}"
      highlight-current-row
      @row-click="rowClick"
    >
      <el-table-column
        label="名称"
        prop="name"
        align="left"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column
        label="级别"
        prop="rvGrad"
        align="center"
        show-overflow-tooltip
      >
	  <template slot-scope="scope">
		  {{rvGrad(scope.row.rvGrad)}}
	  </template>
	  </el-table-column>
    </el-table>
    <RiverInfoModel
      ref="RiverInfoModel"
      v-show="showInfo"
      :currentPoint="currentPoint"
    ></RiverInfoModel>
  </div>
</template>

<script>
import RiverInfoModel from './module/RiverInfoModel.vue'
import dictUtils from '@/components/dict/DictSelectUtils.js'
import gisMap from '@/api/frontScreen/gisMap.js'
import riversway from '@/views/frontScreens/js/riversway.js'
import riversway2 from '@/views/frontScreens/js/riversway2.js'
import riversway3 from '@/views/frontScreens/js/riversway3.js'
import riversCodeMap from '@/views/frontScreens/js/riversCodeMap.js'
import riversName1 from '@/views/frontScreens/js/riversName1.js'
import riversName2 from '@/views/frontScreens/js/riversName2.js'
import riversName3 from '@/views/frontScreens/js/riversName3.js'
import riverLine from '@/views/frontScreens/js/waterlines/polyline'
import riverPolygon from '@/views/frontScreens/js/waterlines/polygon'
import riverPoint from '@/views/frontScreens/js/waterlines/point'
import {gisCompMixin} from '@/mixins/gisCompMixin.js'
export default {
  name: 'RiverInfo',
  components: {RiverInfoModel},
  mixins: [gisCompMixin],
  data() {
    return {
      // 指定坐标字段
      lg: 'rvInsideStartLoc',
      lt: 'rvInsideStartLong',
      modelName: 'RiverInfoModel',
      isInitMarkers: false,
      LayerGroup: null, // layerGroup 收集用于切换删除
      markerslayer: [], //集合标点的layer 收集用于切换删除
      form: {
        rvName: '',
        rvGrad: []
      },
	  params:{},
      iconUrl: require('./../../../../assets/img/gis_riverInfo.png'),
      filterData: [],
      originData: [
        {
          rvName: '河流1',
          rvGrad: '1 级',
          startLong: '106.60618',
          startLat: '29.87268',
          id: 1,
          children: [
            {
              rvName: '河流11',
              rvGrad: '2 级',
              startLong: '106.61663',
              startLat: '29.92665',
              id: 11
            }
          ]
        },
        {
          rvName: '河流2',
          rvGrad: '2 级',
          startLong: '106.45848',
          startLat: '29.66765',
          id: 2,
          children: [
            {
              rvName: '河流3',
              rvGrad: '3 级',
              startLong: '106.38834',
              startLat: '29.86642',
              id: 3
            },
            {
              rvName: '河流4',
              rvGrad: '4 级',
              startLong: '106.43615',
              startLat: '29.84204',
              id: 4
            },
            {
              rvName: '河流5',
              rvGrad: '1 级',
              startLong: '106.44186',
              startLat: '29.82033',
              id: 5
            }
          ]
        }
      ],
      showInfo: false,
      sectionMarker: null, // 标记点
      label: null, // 标记点名称
      hljb: [],
      currentPoint: {
        rvName: ''
      },
      infoWin: null,
      riverOverlay: null,
      riverLineOverlay: null,
      riverPolygonOverlay: null,
      riverPointOverlay: null,
      riverLineOverlay2:null,
      riverLineOverlay3:null,
      singleRiverOverlay:null
    }
  },
  created() {
    this.hljb = dictUtils.getDictItemsFromCache('hljb')

  },
  mounted() {
    this.$nextTick(() => {
      this.initWaterlines()
	    this.getBaseFindAll()
      // this.initMarkers()
    })
  },
  methods: {
    customClear() {
      if(this.singleRiverOverlay){
        this.map.removeLayer(this.singleRiverOverlay)
      }
      if (this.riverPolygonOverlay) {
        this.map.removeLayer(this.riverPolygonOverlay)
      }
      if (this.riverLineOverlay) {
        this.map.removeLayer(this.riverLineOverlay)
      }
      if(this.riverLineOverlay2){
        this.map.removeLayer(this.riverLineOverlay2)
      }
      if(this.riverLineOverlay3){
        this.map.removeLayer(this.riverLineOverlay3)
      }
    },
	getBaseFindAll(){
		return new Promise((resolve, reject)=>{
			gisMap.baseFindAll(this.params,res=>{
				if(res.state){
					this.filterData = res.value
					resolve()
				}
				reject()
			})
		})
		
	},
	rvGrad(val){
		let name
		this.hljb.forEach(e => {
			if (e.value == val) {
				name = e.name
			}
		})
		return name
	},
    async changeSearch(val) {
		this.params.rvName=val
		await this.getBaseFindAll()

    },
	async hljbChange(val){
		this.params.rvGradList=val
		await this.getBaseFindAll()
	},
    initWaterlines() {
      // this.initRiver()
      this.initRiverLine()
      // this.initRiverPolygon()
      this.initRiverPoint()
    },
    clearWaterlines() {
      if (this.sectionMarker) {
        this.map.removeLayer(this.sectionMarker)
        this.sectionMarker = null
      }
      if (this.riverPointOverlay) {
        this.LayerGroup.clearLayers();
      }
      if (this.riverLineOverlay) {
        this.map.removeLayer(this.riverLineOverlay)
      }
      if(this.riverLineOverlay2){
        this.map.removeLayer(this.riverLineOverlay2)
      }
      if(this.riverLineOverlay3){
        this.map.removeLayer(this.riverLineOverlay3)
      }
      if(this.singleRiverOverlay){
        this.map.removeLayer(this.singleRiverOverlay)
      }
    },
    rowClick(row) {
      console.log(row)
      this.clearWaterlines()
      this.patchRiver(row)
      this.currentPoint = row
      let latlng = this.createdLngLat(row[this.lt], row[this.lg])
      this.drawMarker(latlng, row, false)
      this.map.setView(this.sectionMarker.getLatLng(), 14)
      // 定位到河流起始点  但是地图等级太高天地图无法显示
      // let  bounds = L.latLngBounds([
      //   this.sectionMarker.getLatLng(),
      //   [row.rvInsideEndLoc, row.rvInsideEndLong]
      // ])
      // //定位到矩形
      // this.map.fitBounds(bounds);
    },
    patchRiver(row){
      let riversFileCode = riversCodeMap.nameMap[row.code];
      let riversFile
      if(riversFileCode == 1){
        riversFile = riversName1
      }else if(riversFileCode == 2){
        riversFile = riversName2
      }else if(riversFileCode == 3){
        riversFile = riversName3
      }else{
        return
      }
      let rivers = riversFile.features
      let river = rivers.filter(item=>item.properties.code == row.code)
      this.drawRiver(river, row)
    },
    drawRiver(river, row) {
      let myStyle = {
        color: '#409eff',
        weight: 2,
        opacity: 1,
        fillColor: '#409eff',
        fillOpacity: 1
      }
      this.singleRiverOverlay = new L.geoJSON(river, {
        style: myStyle
      })
      this.map.addLayer(this.singleRiverOverlay)
      this.singleRiverOverlay.bringToFront()
      
    },
    initRiver() {
      let countries = []
      this.LayerGroup = []
      this.markerslayer = []
      countries = riverway.features
      let myStyle = {
        color: '#409eff',
        weight: 1,
        opacity: 0.5,
        fillColor: '#409eff',
        fillOpacity: 0.6
      }
      this.riverOverlay = new L.geoJSON(countries, {
        style: myStyle
      })
      this.markerslayer.push(this.riverOverlay)
      this.LayerGroup = new L.layerGroup(this.markerslayer)
      this.map.addLayer(this.LayerGroup)
      this.map.addLayer(this.riverOverlay)
      this.riverOverlay.bringToFront()
    },
    initRiverPoint() {
      let countries = []
      this.LayerGroup = []
      this.markerslayer = []
      countries = riverPoint.features
      countries.forEach(item => {
        let latlng = new L.LatLng(
          item.geometry.coordinates[1],
          item.geometry.coordinates[0]
        )
        const label = new L.divIcon({
          html: `<div style="color:#fff">${item.properties.Name}<div>`,
          className: 'my-divIcon',
          iconSize: 40
        })
        this.riverPointOverlay = new L.marker(latlng, {
          icon: label
        })
        this.markerslayer.push(this.riverPointOverlay)
        this.LayerGroup = new L.layerGroup(this.markerslayer)
        this.map.addLayer(this.LayerGroup)

        this.map.addLayer(this.riverPointOverlay)
        
      })
    },
    initRiverPolygon() {
      let countries = []
      countries = riverPolygon.features

      let myStyle = {
        color: '#006ced',
        weight: 1,
        opacity: 0.5,
        fillColor: '#006ced',
        fillOpacity: 0.7
      }
      this.riverPolygonOverlay = new L.geoJSON(countries, {
        style: myStyle
      })
      this.map.addLayer(this.riverPolygonOverlay)
      this.riverPolygonOverlay.bringToFront()
    },
    initRiverLine() {
      let countries = [];
      let countries2 = [];
      let countries3 = [];
      // countries = riverLine.features
      countries = riversway.features
      countries2 = riversway2.features
      countries3 = riversway3.features
      let myStyle = {
        color: '#409eff',
        weight: 2,
        opacity: 1,
        fillColor: '#409eff',
        fillOpacity: 1
      }
      this.riverLineOverlay = new L.geoJSON(countries, {
        style: myStyle
      })
      this.riverLineOverlay2 = new L.geoJSON(countries2, {
        style: myStyle
      })
      this.riverLineOverlay3 = new L.geoJSON(countries3, {
        style: myStyle
      })
      this.map.addLayer(this.riverLineOverlay)
      this.map.addLayer(this.riverLineOverlay2)
      this.map.addLayer(this.riverLineOverlay3)
      this.riverLineOverlay.bringToFront()
      this.riverLineOverlay2.bringToFront()
      this.riverLineOverlay3.bringToFront()
    },
    initMarkers() {
      this.filterData.forEach(item => {
        let latlng = this.createdLngLat(item[this.lt], item[this.lg])
        this.drawMarker(latlng, item, true)
        if (item.children && item.children.length) {
          item.children.forEach(subRiver => {
            let latlng = this.createdLngLat(
              subRiver[this.lt],
              subRiver[this.lg]
            )
            this.drawMarker(latlng, subRiver, true)
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import './../../css/gisComp.scss';
.river-container {
  /deep/ input::-webkit-input-placeholder {
    // color: red;
  }
  /deep/ .el-table {
    height: calc(100% - 148px);
  }
}
</style>
