<!--
 * @Description: 部件编辑
 * @Author: 王晓颖
 * @Date: 2021-03-08 09:46:39
 -->
<template>
  <app-container>
    <div id="map" class="leaflet_container"/>
    <!--查询显示组件-->
    <search-list
      ref="searchList"
      :total-data="searchList"
      :loading="searchLoading"
      @search="search"
      @clear="clearSearch"
      @change="changeSearchPage"
      @item-click="clickSearchItem"/>
    <!--工具箱-->
    <tools-container>
      <!-- 绘制工具-->
      <draw-tool @click="drawBox"/>
      <!--删除工具-->
      <delete-tool :disabled="batchDeleteDisabled" @click="batchDelete"/>
      <!--添加工具-->
      <add-tool @click="openAddMode"/>
      <!--图层选择工具-->
      <layer-choose :layers="layers" :select-layers="selectLayers" @choose="layerChange"/>
    </tools-container>
    <!--图层选择组件-->
    <!--编辑部件弹窗-->
    <edit-parts-dialog ref="editPartsDialog" @add="onAddFeature" @update="onUpdateFeature" @abort="onAbort"/>
  </app-container>
</template>
<script>
import L from 'leaflet'
import 'leaflet/dist/leaflet.css'
import AppContainer from '@/components/layout/AppContainer'
import LayerChoose from './components/layerChoose'
import SearchList from './components/searchList'
import { mapGetters } from 'vuex'
import EditPartsDialog from './components/editPartsDialog'
import ToolsContainer from './components/toolsContainer'
import DrawTool from './components/drawTool'
import DeleteTool from './components/deleteTool'
import AddTool from './components/addTool'
var esri = require('esri-leaflet')
export default {
  name: 'ComponentEdit',
  components: { AddTool, DeleteTool, DrawTool, ToolsContainer, EditPartsDialog, LayerChoose, AppContainer, SearchList },
  data() {
    return {
      searchLoading: false, // 加载动画
      addMode: false, // 添加元素状态
      map: null, // 地图对象
      drawLayer: null, // 绘制图层（框选）
      layers: this.baseConfig.layers,
      selectLayers: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
      maps: [], // 地图图层
      parts: [], // 部件图层
      featureCollection: [], // 选中的图层和Feature
      featureCollectionLength: 0, // 选中的feature个数
      batchDeleteDisabled: true, // 批量删除是否不可点
      curretLayer: null, // 当前选中featureLayer
      currentItem: null, // 当前选中部件
      searchList: [], // 全部查询结果
      currentSearchMarkers: [], // 当前查询页面的markers
      // searchLength: 0, // 全部查询结果长度
      searchIconList: [] // 查询结果的Icon列表
    }
  },
  computed: {
    ...mapGetters([
      'baseUrl',
      'partsUrl',
      'partsAllUrl',
      'mapUrl',
      'partsEditUrl'
    ])
  },
  watch: {
    addMode(val) {
      if (!val) { // 关闭新增模式是要关闭点击事件
        this.map.off('click')
      }
    }
  },
  // 销毁时移除监听
  destroyed() {
    window.removeEventListener('click', this.handleKeyup, true)
    this.socket.close()
  },
  // 加载完添加点击事件的监听
  mounted() {
    this.init()
    this.initIcons()
    window.addEventListener('click', this.handleKeyup, true)
  },
  methods: {
    // 地图上点击之后，搜索列表隐藏
    handleKeyup(val) {
      if (this.$refs.searchList && val.target.id === 'map') {
        this.$refs.searchList.hideSearch()
      }
    },
    // 移除绘制图层
    drawDelete() {
      if (this.drawLayer) {
        this.drawLayer.layer.remove()
      }
    },
    // 绘制选框
    drawBox(type) {
      this.drawDelete()
      this.$nextTick(() => {
        this.map.pm.enableDraw(type, {
          snappable: false
        })
        // 绘制完成
        this.map.on('pm:create', e => {
          // 获取 选区的geojson
          const geojson = e.layer.toGeoJSON()
          // 执行查询，遍历所有部件图层
          const results = [] // 存放查询结果
          let partsCount = 0 // 部件数量
          const partsLength = this.parts.length // 全部部件图层数量
          for (let i = 0; i < partsLength; i++) {
            const part = this.parts[i]
            const query = esri.query({ url: part.options.url })
            query.where('1=1')
            query.within(geojson)
            query.run((error, featureCollection, response) => {
              if (error) {
                console.log(error)
                return
              }
              // 查询成功
              if (featureCollection.features.length > 0) {
                results.push({
                  layer: part,
                  url: part.options.url,
                  features: featureCollection.features
                })
                partsCount += featureCollection.features.length
              }
              // 最后一个图层完毕， 查询结果放入featureCollection中
              if (i === (partsLength - 1)) {
                this.featureCollection = results
                this.featureCollectionLength = partsCount
                this.$message.info(`已选中部件: ${partsCount} 个`)
                this.batchDeleteDisabled = false
              }
            })
          }
        })
      })
    },
    // 部件图层切换
    layerChange(node, checked) {
      const selectItem = this.layers.filter(item => item.name === node.name)[0]
      // 如果选中底图,选中添加，没选中移除
      if (selectItem.type === 'map') {
        if (!checked) {
          for (const item of this.maps) {
            this.map.removeLayer(item)
          }
        } else {
          for (const item of this.maps) {
            this.map.addLayer(item)
          }
        }
      } else if (node.type === 'layer') { // 其他图层
        if (!checked) {
          for (let i = 0; i < selectItem.domain.length; i++) {
            this.map.removeLayer(this.parts[selectItem.domain[i] - 1])
          }
        } else {
          for (let i = 0; i < selectItem.domain.length; i++) {
            this.map.addLayer(this.parts[selectItem.domain[i] - 1])
          }
        }
      }
    },
    // 初始化地图
    init() {
      this.loading = false
      const map = L.map('map', {
        minZoom: 13,
        // maxZoom: 21,
        center: this.baseConfig.center,
        zoom: this.baseConfig.zoom,
        zoomControl: false,
        attributionControl: false,
        crs: L.CRS.EPSG3857
      })
      map.doubleClickZoom.disable() // 禁止双击
      this.map = map // data挂载map
      window.map = map
      const that = this
      // 打开绘制工具
      this.map.on('pm:create', e => {
        that.drawDelete()
        that.drawLayer = e
      })
      // 打开弹窗添加的事件
      this.map.on('popupopen', e => {
        // 给弹窗的编辑、删除按钮添加点击事件
        document.getElementById('btnEdit').onclick = that.editInfo
        document.getElementById('btnDelete').onclick = that.delete
      })
      // 添加底图
      for (let i = 0; i <= 21; i++) {
        const item = { url: `${this.baseUrl}${this.mapUrl}/${i}` }
        this.maps.push(esri.featureLayer(item).addTo(map))
      }
      // TODO: 添加部件：可优化为读取配置文件里的部件图层信息
      // 添加部件,
      // const partsLayer = this.baseConfig.partsLayer
      const partsLayer = this.baseConfig.partsLayer
      for (const parent of partsLayer) { // 遍历大类
        const childs = parent.children
        for (const child of childs) { // 遍历小类
          console.log(item)
          const item = { url: `${this.baseUrl}${this.partsEditUrl}/${child.layer}`, minZoom: 18 }
          var layer = esri.featureLayer(item).addTo(map)
          // 点击部件事件
          layer.on('click', (e) => {
            // 获取要素的属性
            const properties = e.layer.feature.properties
            that.currentItem = e.layer.feature
            that.searchLayerByUrl(e.layer.options.url)
            // 弹窗样式
            var str = `<div class="pop-window">
                          <div class="pop-title">
                            ${properties['小类名称']}
                          </div>
                          <div class="pop-line"><col>大类：</col>${properties['大类名称']}</div>
                          <div class="pop-line"><col>小类：</col>${properties['小类名称']}</div>
                          <div class="pop-line"><col>部件编码：</col>${properties['编码']}</div>
                          <div class="pop-line"><col>权属单位：</col>${properties['权属单位'] ? properties.权属单位 : '未知'}</div>
                          <div class="pop-line"><col>详细地址：</col>${properties['详细地址'] ? properties.详细地址 : '未知'}</div>
                          <div class="pop-btns">
                            <button id="btnEdit" class="mini-btn">编辑</button>
                            <button id="btnDelete" class="mini-btn">删除</button>
                          </div>
                        <div>`
            var popup = L.popup().setContent(str)
            e.layer.dragging._marker.bindPopup(popup, { minWidth: 200 }).openPopup()
          })
          this.parts.push(layer)
        }
      }
      // this.map.setZoom(this.baseConfig.zoom)
    },
    // 初始化图标
    initIcons() {
      // 加载所有图标，1到5
      for (let i = 1; i < 6; i++) {
        const icon = L.icon({
          iconUrl: require(`@/assets/global_images/point${i}.png`),
          iconSize: [25, 25],
          iconAnchor: [12.5, 25]
        })
        this.searchIconList.push(icon)
      }
    },
    // 点击新增部件按钮: 添加按钮并打开弹窗
    openAddMode() {
      if (this.addMode) { // 如果已经处于添加模式，则关闭，并清空页面上的点
        this.addMode = false
        this.onAbort('create')
      } else {
        // 开始添加点
        this.addMode = true
        const icon = L.icon({
          iconUrl: require('../../assets/icons/icon-position.png'),
          iconSize: [35, 35],
          iconAnchor: [17.5, 35]
        })
        this.map.on('click', e => {
          // 转换为GeoJSON
          const feat = L.marker(e.latlng, { icon: icon })
          feat.addTo(this.map)
          this.currentItem = feat
          console.log(feat)
          this.$refs.editPartsDialog.initDialog(feat, 'create')
          // TODO: 测试新增代码
          // const feat = L.marker(e.latlng).toGeoJSON()
          // feat.properties['OBJECTID'] = 13234
          // feat.properties['POINT_X'] = 408913.539
          // feat.properties['POINT_Y'] = 3071272.381
          // feat.properties['大类编码'] = 1
          // feat.properties['大类名称'] = 'test'
          // feat.properties['小类编码'] = 1
          // feat.properties['小类名称'] = 'test'
          // console.log(feat)
          // const layerUrl = `${this.baseUrl}${this.partsEditUrl}/35/`
          // this.searchLayerByUrl(layerUrl)
          // this.currentLayer.addFeature(feat, (err, response) => {
          //   console.log(err, response)
          //   debugger
          // })
        })
      }
    },
    // 点击编辑： 打开编辑弹窗
    editInfo(ev) {
      // TODO: 临时测试，原样上传更新
      this.currentLayer.updateFeature(this.currentItem, (err, response) => {
        if (err) {
        } else {
          this.$message.success('编辑成功')
        }
      })
      // 打开弹窗
      // console.log(this.currentItem)
      // this.$refs.editPartsDialog.initDialog(this.currentItem, 'update')
    },
    // 点击单个元素的删除，ok
    delete(code) {
      // 先确认操作，然后执行删除工作
      if (this.currentLayer && this.currentItem) {
        this.$confirm('确定删除该部件吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // 确定
          this.currentLayer.deleteFeature(this.currentItem.id, (err, response) => {
            if (err) {
              this.$message.error('删除失败')
            } else {
              this.$message.success('删除成功')
              this.currentItem = null
            }
          })
        })
      }
    },
    // 框选区域批量删除,ok
    batchDelete() {
      if (this.featureCollectionLength > 0) {
        this.$confirm(`确定要删除所框选的${this.featureCollectionLength}个部件吗?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // 确定则遍历图层，删除features
          for (const layer of this.featureCollection) {
            const ids = layer.features.map(item => item.id)
            if (layer.layer && layer.features) {
              layer.layer.deleteFeatures(ids, (err, response) => {
                if (err) {
                  this.$message.error('批量删除部件失败')
                } else {
                  this.$message.success('批量删除部件成功')
                  this.drawDelete()
                  this.featureCollection = []
                  this.featureCollectionLength = 0
                }
              })
            }
          }
        }).catch(() => {
          // 放弃则清空选框和查询结果
          this.drawDelete()
          this.featureCollection = []
          this.featureCollectionLength = 0
        })
      }
    },
    // 添加到feature图层
    onAddFeature(feature) {
      const feat = L.marker(feature.latlng).toGeoJSON()
      // 读取属性
      feat.properties['大类编码'] = feature.classCode
      feat.properties['大类'] = feature.class
      feat.properties['小类编码'] = feature.subClassCode
      feat.properties['小类'] = feature.subClass
      feat.properties['权属单位'] = feature.dept
      feat.properties['地址'] = feature.address
      console.log(feat)
      // 图层地址拼接
      const layerUrl = `${this.baseUrl}${this.partsEditUrl}/${feature.layer}/`
      // 遍历找到当前图层
      this.searchLayerByUrl(layerUrl)
      // 添加部件
      this.currentLayer.addFeature(feat, (err, response) => {
        console.log(err, response)
        debugger
        if (err) {
          console.log('添加失败')
        } else {
          // 关闭添加模式, 并关闭弹窗
          this.addMode = true
          this.$refs.editPartsDialog.closeDialog()
        }
      })
    },
    // 新增部件的，放弃操作，dialogStatus弹窗类型
    onAbort(dialogStatus) {
      if (dialogStatus === 'create') {
        // 清除地图上的锚点
        if (this.currentItem) {
          this.map.removeLayer(this.currentItem)
        }
      }
    },
    // 编辑保存操作
    onUpdateFeature(feature) {
      if (this.currentLayer) {
        console.log('=========')
        console.log(feature)
        console.log('=========')
        this.currentLayer.updateFeature(feature, (err, response) => {
          if (err) {
            this.$message.error('部件信息更新失败')
          } else {
            this.$message.success('部件信息更新成功')
          }
        })
      }
    },
    // 地图查询功能
    search(keyword) {
      if (keyword === '') { // 如果是空字符串，表示未输入任何查询条件，根据内容提示用户
        this.$message.warning('请输入查询关键字')
        return
      }
      this.searchLoading = true
      var that = this
      const results = [] // 存放查询结果列表
      // 遍历所有图层进行查询
      const partsLength = this.parts.length // 全部部件图层数量
      for (let i = 0; i < partsLength; i++) {
        const part = this.parts[i]
        var str = ['编码', '小类名称', '大类名称']
        var query = esri.query({ url: part.options.url })
        let queryString = '1=1' // 默认查询语句
        if (keyword) {
          // 拼接查询语句
          queryString = str.map(item => `(${item} like '%${keyword}%')`).join(' OR ')
          console.log(queryString)
        } else {
          this.$message.warning('请输入查询关键字')
          return
        }
        query.where(queryString)
        // query.within(this.bounds)
        // 执行查询
        query.run((error, featureCollection, response) => {
          if (error) {
            console.log(error)
            return
          }
          const featuresLength = featureCollection.features.length
          if (featuresLength > 0) {
            // 遍历所有查询结果，放入results
            for (const feature of featureCollection.features) {
              results.push({
                layer: part,
                feature: feature
              })
            }
          }
          // 如果是最后一个图层
          if (i === (partsLength - 1)) {
            that.searchList = results
            this.searchLoading = false
            // that.drawIcon()
          }
        })
      }
    },
    // 清空查询
    clearSearch() {
      this.searchList = []
      if (this.currentSearchMarkers.length > 0) {
        for (const marker of this.currentSearchMarkers) {
          this.map.removeLayer(marker)
        }
        this.currentSearchMarkers = []
      }
    },
    // 查询结果页面变化，重绘icon
    changeSearchPage(data) {
      console.log('changeSearchPage')
      // 清除原来绘制的点
      if (this.currentSearchMarkers.length > 0) {
        for (const marker of this.currentSearchMarkers) {
          this.map.removeLayer(marker)
        }
      }
      // 赋予新的查询结果
      const currentMarkesLength = data.length
      for (let i = 0; i < currentMarkesLength; i++) {
        const feature = data[i].feature
        var icon = this.searchIconList[i]
        const latlng = L.latLng([feature.geometry.coordinates[1], feature.geometry.coordinates[0]])
        var item = L.marker(latlng, { icon: icon, layer: data[i].layer, properties: feature.properties }).addTo(this.map)
        this.currentSearchMarkers.push(item)
      }
      // 中心置为第一个点的中心
      if (this.currentSearchMarkers[0]) {
        this.clickSearchItem(data[0])
      }
    },
    // 点击查询列表项，将位置放在中间
    clickSearchItem(item) {
      console.log('clickItem')
      if (item) {
        const feature = item.feature
        const latlng = L.latLng([feature.geometry.coordinates[1], feature.geometry.coordinates[0]])
        let zoom = this.map.getZoom()
        if (zoom < 19) {
          zoom = 19
        }
        this.map.flyTo(latlng, zoom)
      }
    },
    // 绘制查询结果
    drawIcon() {
      var that = this
      for (var i = 0; i < that.markerlist.length; i++) {
        that.map.removeLayer(that.markerlist[i])
      }

      that.markerlist = []
      for (let num = 0; num < that.showlist.length; num++) {

      }
      this.cansearch = true
    },
    // 根据url找到layer
    searchLayerByUrl(url) {
      const layer = this.parts.filter(item => item.options.url === url)[0]
      if (layer) {
        this.currentLayer = layer
      }
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  $tableTitleHeight:35px;
  .leaflet_container{
    width: 100%;
    height: 85vh;
    min-height: 596px;
    /*max-height: 90vh;*/
    background-color: white;
  }
</style>
<style rel="stylesheet/scss" lang="scss">
  .pop-window{
    font-size: 14px;width:200px;
    padding-right:5px;
    .pop-title{
      font-size: 16px;
      margin-bottom: 8px;
    }
    .pop-line{
      line-height:20px;
    }
    .pop-btns{
      margin:10px 0px;
      .mini-btn{
        display: inline-block;
        line-height: 1;
        white-space: nowrap;
        cursor: pointer;
        background: #fff;
        border: 1px solid #dcdfe6;
        color: #606266;
        -webkit-appearance: none;
        text-align: center;
        box-sizing: border-box;
        outline: none;
        margin: 0;
        transition: .1s;
        font-weight: 500;
        padding: 7px 15px;
        font-size: 12px;
        border-radius: 3px;
      }
      .mini-btn+.mini-btn{
        margin-left:10px;
      }
      #btnEdit{
        color: #409eff;
        background: #ecf5ff;
        border-color: #b3d8ff;
      }
      #btnEdit:hover{
        background: #409eff;
        border-color: #409eff;
        color: #fff;
      }
      #btnDelete{
        color: #f56c6c;
        background: #fef0f0;
        border-color: #fbc4c4;
      }
      #btnDelete:hover{
        background: #f56c6c;
        border-color: #f56c6c;
        color: #fff;
      }
    }
  }
</style>
