<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="6" style="text-align: center;">
        <el-radio-group v-model="queryEventSwitch" size="medium" @change="switchContent">
          <el-radio-button label="0">案卷</el-radio-button>
          <el-radio-button label="1">人员</el-radio-button>
          <el-radio-button label="2">部件</el-radio-button>
        </el-radio-group>
      </el-col>
    </el-row>
    <div v-loading="mapLoading" ref="mapDiv" class="baseMap"/>
    <el-form v-if="showPartsSelect" ref="dataForm" :model="parts" :label-position="labelPosition" label-width="120px" class="form" >
      <el-row :gutter="10">
        <el-col :span="20">
          <el-form-item label="部件大类" prop="casetypeCode">
            <el-select v-model="parts.casetypeCode" placeholder="选择部件大类" clearable value="">
              <el-option
                v-for="item in caseTypeOpts"
                :key="item.id"
                :label="item.typeName"
                :value="item.typeCode"/>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="20">
          <el-form-item label="部件小类" prop="casetypeDetailCode">
            <el-select v-model="parts.casetypeDetailCode" placeholder="选择部件小类" clearable value="">
              <el-option
                v-for="item in caseDetailTypeOpts"
                :key="item.id"
                :label="item.typeDetailName"
                :value="item.typeDetailCode"/>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-form v-if="showPersonSelect" ref="dataForm" :model="parts" :label-position="labelPosition" label-width="120px" class="form" >
      <el-row :gutter="10">
        <el-col :span="20">
          <el-form-item label="人员分类" prop="casepersonCode">
            <el-select v-model="casepersonCode" placeholder="选择人员分类" clearable value="">
              <el-option
                v-for="item in casePersonOpts"
                :key="item.value"
                :label="item.label"
                :value="item.value"/>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { loadModules } from 'esri-loader'
import { getCaseType, getCaseDetailType } from '@/api/callCase/callCase'
import { mapConfig, serverConfig } from '@/components/Map/ArcGISConfig'

const option = {
  url: mapConfig.apiUrl
}

// const eventPointLayerId = 'eventPointLayer' // 事件定位点的图层id
const partsResultLayerId = 'partsResultLayer' // 兴趣点查询结果点集的图层id
// const caseLayerId = 'addedGeometryLayerId' // 案卷点图层

export default {
  name: 'SupControl',
  props: {
    longitude: {
      type: Number,
      default: 116.5937
    },
    latitude: {
      type: Number,
      default: 28.249
    }
  },
  data() {
    return {
      map: '',
      view: '',
      layers: {
        dxbjPoint: '', // 部件点图层
        dxbjLine: '', // 部件线图层
        dxbjXqd: '', // 兴趣点图层
        dxbjMph: '', // 门牌好图层
        dx2wGrid: '' // 单元网格图层
      },
      esriObj: {
        Map: '',
        BaseMap: '',
        Graphic: '',
        PopupTemplate: '',
        Circle: '',
        Point: '',
        FeatureLayer: '',
        GraphicsLayer: '',
        TileLayer: '',
        SimpleMarkerSymbol: '',
        PictureMarkerSymbol: '',
        Query: '',
        QueryTask: '',
        IdentifyTask: '',
        IdentifyParameters: '',
        MapView: ''
      },
      parts: {
        eorc: '2', // 类别
        casetypeCode: '', // 部件大类编码,
        casetypeDetailCode: '' // 部件小类编码
      },
      casepersonCode: '',
      labelPosition: 'right',
      caseTypeOpts: [], // 部件大类下拉框
      casePersonOpts: [{
        value: '1',
        label: '监督人员'
      }, {
        value: '2',
        label: '处置人员'
      }], // 人员分类下拉框
      caseDetailTypeOpts: [], // 部件小类下拉框
      caseTypeCodeAuto: '', // 自动生成的案卷大类代码
      caseTypeDetailCodeAuto: '', // 自动生成的案卷小类代码
      mapLoading: false,
      queryEventSwitch: '0', // 0==查询案件；1==查询人员；2==查询部件
      showPartsSelect: false,
      showPersonSelect: false
    }
  },
  computed: {
    eorc() {
      return this.parts.eorc
    },
    caseType() {
      return this.parts.casetypeCode
    },
    caseTypeDetail() {
      return this.parts.casetypeDetailCode
    }
    // casePerson() {
    //   return this.casepersonCode
    // }
  },
  watch: {
    caseType(typeVal) {
      this.cascaderCaseDetailType(typeVal)
    },
    caseTypeDetail(typeVal) {
      var obj = this.caseDetailTypeOpts.find(function(item) {
        return item.typeDetailCode === typeVal
      })
      this.addPartsPoints(obj.typeDetailName)
    }
    // casePerson(typeVal) {
    // }
  },
  mounted() {
    this.importEsri()
  },
  methods: {
    switchContent: function() {
      // 案卷（0）、人员（1）、部件（2），
      if (this.queryEventSwitch === '2') {
        this.showPartsSelect = true
        this.showPersonSelect = false
        this.cascaderCaseType('2')
      } else if (this.queryEventSwitch === '1') {
        this.showPersonSelect = true
        this.showPartsSelect = false
      }
    },
    // 级联查询部件大类
    cascaderCaseType: function(eorc) {
      // 前两行的作用是清除部件大类的当前值和select中的所有选项
      this.caseTypeOpts = []
      this.parts.casetypeCode = ''
      // 以下两行的作用是清除部件小类的当前值和select中的所有选项
      this.caseDetailTypeOpts = []
      this.parts.casetypeDetailCode = ''
      // 部件大类
      if (eorc !== null && eorc.length > 0) {
        getCaseType(eorc).then(response => {
          for (const opt of response.data) {
            this.caseTypeOpts.push(opt)

            if (opt.typeCode === this.caseTypeCodeAuto) {
              this.parts.casetypeCode = opt.typeCode
            }
          }
        })
      }
    },
    cascaderCaseDetailType: function(typeCode) {
      // 以下两行的作用是清除案卷小类的当前值和select中的所有选项
      this.caseDetailTypeOpts = []
      this.parts.casetypeDetailCode = ''

      // 根据code获取ID，进行级联查询
      let typeId = 0
      this.caseTypeOpts.forEach(item => {
        if (item.typeCode === typeCode) {
          typeId = item.id
        }
      })

      if (typeId > 0) {
        getCaseDetailType(typeId).then(response => {
          for (const opt of response.data) {
            this.caseDetailTypeOpts.push(opt)
            if (opt.typeDetailCode === this.caseTypeDetailCodeAuto) {
              this.parts.casetypeDetailCode = opt.typeDetailCode
            }
          }
        })
      }
    },
    clearPartsPoint: function() {
      this.map.layers.forEach(layer => {
        if (layer.type === 'graphics' && layer.id === partsResultLayerId) {
          layer.graphics.removeAll()
          return false
        }
      })
      // 清除弹出框
      this.view.popup.close()
    },
    addPartsPoints: function(typeCode) {
      // this.clearPartsPoint()
      // 部件定位
      const queryDev = this.layers.dxbjPoint.createQuery()
      queryDev.returnGeometry = true
      queryDev.outFields = ['PICTURE']
      queryDev.where = "OBJNAME = '" + typeCode + "'"
      const that = this
      this.layers.dxbjPoint.queryFeatures(queryDev).then(function(response) {
        if (response.features.length > 0) {
          const results = response.features
          const gLayer = new that.esriObj.GraphicsLayer() // 添加自定义绘制点的图层
          results.forEach((item, index) => {
            const point = new that.esriObj.Point(item.geometry.x, item.geometry.y) // 创建geometry对象
            const marker = new that.esriObj.SimpleMarkerSymbol() // 创建marker标识
            // marker属性
            marker.color = '#35A0E7'
            marker.style = 'circle'
            // marker.style = item.attributes.PICTURE
            marker.size = 10
            marker.outline = {
              color: [128, 128, 128, 0.5],
              width: '1px'
            }
            // 创建graphic对象
            const graphic = new that.esriObj.Graphic({
              geometry: point,
              symbol: marker
            })
            gLayer.id = partsResultLayerId
            gLayer.add(graphic) // 图层上添加对象
          })
          that.map.add(gLayer) // 地图上添加图层
        } else {
          this.$message({
            message: '查询无该类部件',
            type: 'warning'
          })
        }
      })
    },
    // 初始化ArcGIS API对象
    importEsri: function() {
      this.mapLoading = true
      loadModules([
        'esri/Map',
        'esri/Basemap',
        'esri/Graphic',
        'esri/PopupTemplate',
        'esri/geometry/Circle',
        'esri/geometry/Point',
        'esri/layers/FeatureLayer',
        'esri/layers/GraphicsLayer',
        'esri/layers/TileLayer',
        'esri/symbols/SimpleMarkerSymbol',
        'esri/symbols/PictureMarkerSymbol',
        'esri/tasks/support/Query',
        'esri/tasks/QueryTask',
        'esri/tasks/IdentifyTask',
        'esri/tasks/support/IdentifyParameters',
        'esri/views/MapView',
        'dojo/domReady!'
      ], option)
        .then(([
          Map,
          BaseMap,
          Graphic,
          PopupTemplate,
          Circle,
          Point,
          FeatureLayer,
          GraphicsLayer,
          TileLayer,
          SimpleMarkerSymbol,
          PictureMarkerSymbol,
          Query,
          QueryTask,
          IdentifyTask,
          IdentifyParameters,
          MapView
        ]) => {
          this.esriObj.Map = Map
          this.esriObj.BaseMap = BaseMap
          this.esriObj.Graphic = Graphic
          this.esriObj.PopupTemplate = PopupTemplate
          this.esriObj.Circle = Circle
          this.esriObj.Point = Point
          this.esriObj.FeatureLayer = FeatureLayer
          this.esriObj.GraphicsLayer = GraphicsLayer
          this.esriObj.TileLayer = TileLayer
          this.esriObj.SimpleMarkerSymbol = SimpleMarkerSymbol
          this.esriObj.PictureMarkerSymbol = PictureMarkerSymbol
          this.esriObj.Query = Query
          this.esriObj.QueryTask = QueryTask
          this.esriObj.IdentifyTask = IdentifyTask
          this.esriObj.IdentifyParameters = IdentifyParameters
          this.esriObj.MapView = MapView

          // 初始化地图
          this.initMap()
          this.mapLoading = false
        }).catch(err => {
          console.log(err)
          this.mapLoading = false
        })
    },
    // 初始化地图
    initMap: function() {
      const base = new this.esriObj.BaseMap({
        baseLayers: [
          new this.esriObj.TileLayer({ // 可配置属性，见TileLayer类
            id: '2w',
            url: serverConfig.mapUrlBase
          })
        ],
        title: 'dx2w',
        id: 'dx2w'
      })

      this.map = new this.esriObj.Map({
        basemap: base // 底图类型，详见BaseMap类
      })

      this.view = new this.esriObj.MapView({
        container: this.$refs.mapDiv, // 视图的容器
        map: this.map, // Map的实例放入视图中
        center: [116.597, 28.24], // 初始显示的地图中心点，经纬度
        zoom: 3 // 当前地图缩放等级
      })

      this.addBjLayers()
      // this.addCasePointOnMap(this.longitude, this.latitude)
      const that = this
      this.view.on('click', function(event) {
        const lon = event.mapPoint.longitude
        const lat = event.mapPoint.latitude
        if (that.queryEventSwitch === '2') {
          // 部件定位
          const queryDev = that.layers.dxbjPoint.createQuery()
          // 定义查询的圆形范围，半径5米
          const circle = new that.esriObj.Circle({
            center: event.mapPoint,
            radius: 1,
            radiusUnit: 'meters'
          })
          queryDev.geometry = circle
          queryDev.returnGeometry = true
          queryDev.outFields = ['BGID', 'OBJID', 'OBJNAME', 'OBJPOS', 'DEPTNAME1', 'DEPTNAME2', 'DEPTNAME3']
          that.layers.dxbjPoint.queryFeatures(queryDev)
            .then(function(response) {
              if (response.features.length > 0) {
                const results = response.features

                let content = ''
                content = '部件编号：' + results[0].attributes.OBJID +
                  '<p>万米网格：' + results[0].attributes.BGID +
                  '<p>部件类型：' + results[0].attributes.OBJNAME +
                  '<p>权属部门：' + results[0].attributes.DEPTNAME1 +
                  '<p>责任部门：' + results[0].attributes.DEPTNAME2 +
                  '<p>养护部门：' + results[0].attributes.DEPTNAME3

                // 2弹出气泡
                that.view.popup.open({
                  title: results[0].attributes.OBJNAME,
                  content: content,
                  location: event.mapPoint
                })

                // 查询所在社区和单元网格
                const queryPos = that.layers.dx2wGrid.createQuery()
                queryPos.geometry = that.view.toMap(event)
                queryPos.returnGeometry = true
                queryPos.outFields = ['BGID', 'COMMUID', 'COMMUNAME']
                that.layers.dx2wGrid.queryFeatures(queryPos)
                  .then(function(response) {
                    const result = response.features[0].attributes

                    // 赋值
                    that.longitude = lon
                    that.latitude = lat
                    that.gridId = result.BGID
                    that.communityId = result.COMMUID
                    that.communityName = result.COMMUNAME
                  })
              } else {
                that.$message({
                  message: '没有查询到部件，请重新定位',
                  type: 'warning'
                })
              }
            })
        }
      })
    },
    // 加载部件服务的各图层
    addBjLayers: function() {
      // 此处可以优化
      this.layers.dxbjPoint = new this.esriObj.FeatureLayer({ // 可配置属性，见TileLayer类
        url: serverConfig.mapUrlBj + '/0',
        id: 'dxbjPoint'
      })
      this.layers.dxbjLine = new this.esriObj.FeatureLayer({ // 可配置属性，见TileLayer类
        url: serverConfig.mapUrlBj + '/1',
        id: 'dxbjLine'
      })
      this.layers.dxbjXqd = new this.esriObj.FeatureLayer({ // 可配置属性，见TileLayer类
        url: serverConfig.mapUrlBj + '/2',
        id: 'dxbjXqd'
      })
      this.layers.dxbjMph = new this.esriObj.FeatureLayer({ // 可配置属性，见TileLayer类
        url: serverConfig.mapUrlBj + '/3',
        id: 'dxbjMph'
      })
      this.layers.dx2wGrid = new this.esriObj.FeatureLayer({
        url: serverConfig.mapUrlBase + '/1',
        id: 'gridLayer'
      })
      // 加载各图层
      this.map.add(this.layers.dxbjPoint)
      this.map.add(this.layers.dxbjLine)
      this.map.add(this.layers.dxbjXqd)
      this.map.add(this.layers.dxbjMph)
      this.map.add(this.layers.dx2wGrid)
    }
  }
}
</script>

<style scoped>
  /* @import 'http://192.168.8.205/arcgis_js_api/library/4.12/esri/css/main.css'; */
  @import 'https://js.arcgis.com/4.13/esri/css/main.css';
  .baseMap {
    height:80vh;
    width: 100%;
    margin-top: 0px;
    border: 1px solid #DCDCDC;
    border-radius: 4px;
  }
  .form{
    position: fixed;
    z-index: 9999;
    top: 190px;
  }
</style>