<template>
  <div>
    <el-row>
      <el-col :span="6" class="staticPanel">
        <sup-statis-panel />
      </el-col>

      <el-col :span="18" class="mapPanel">
        <div style="margin: 5px;">
          <el-row :gutter="20">
            <el-col :span="6" style="text-align: left;">
              <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="showCaseSelect" ref="dataForm" :model="parts" :label-position="labelPosition" label-width="120px" class="form">
            <el-row :gutter="20" class="rowSelect">
              <el-col :span="20">
                <el-form-item label="案卷状态" class="item">
                  <el-select v-model="parts.caseStatusCode" placeholder="选择案卷状态" clearable value="" class="notLastSelect" @change="changeCaseScope()">
                    <el-option value="toHandle" label="处置中"/>
                    <el-option value="toDistribute" label="新立案"/>
                    <el-option value="toVerify" label="待核实"/>
                    <el-option value="toCheck" label="待核查"/>
                  </el-select>

                  <label class="customLabel">是否超期</label>
                  <el-radio-group v-model="isOverTime" @change="changeCaseScope()">
                    <el-radio-button label="">全部</el-radio-button>
                    <el-radio-button label="Ot">超期</el-radio-button>
                    <el-radio-button label="Not">未超期</el-radio-button>
                  </el-radio-group>
                </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" class="rowSelect">
              <el-col :span="20">
                <el-form-item label="人员分类" prop="casepersonCode" class="item">
                  <el-radio-group v-model="casepersonCode" @change="casePerson()">
                    <el-radio-button label="supervisor">监督员</el-radio-button>
                    <el-radio-button label="process">处置员</el-radio-button>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>

          <el-form v-if="showPartsSelect" ref="dataForm" :model="parts" :label-position="labelPosition" label-width="120px" class="form">
            <el-row :gutter="10" class="rowSelect">
              <el-col :span="20">
                <el-form-item label="部件大类" prop="casetypeCode" class="item">
                  <el-select v-model="parts.casetypeCode" placeholder="选择部件大类" clearable value="" class="notLastSelect">
                    <el-option
                      v-for="item in caseTypeOpts"
                      :key="item.id"
                      :label="item.typeName"
                      :value="item.typeCode"/>
                  </el-select>

                  <label class="customLabel">部件小类</label>
                  <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>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import request from '@/utils/request'
import SupStatisPanel from '@/views/supControl/SupStatisPanel'
import { getCaseType, getCaseDetailType } from '@/api/callCase/callCase'
import L from 'leaflet'
import markerIcon from 'leaflet/dist/images/marker-icon.png'
import markerIcon2x from 'leaflet/dist/images/marker-icon-2x.png'
import markerShadow from 'leaflet/dist/images/marker-shadow.png'

const videoIcon = L.icon({
  iconUrl: require('../../assets/global_images/video.png'),
  iconSize: [40, 40]
})

export default {
  name: 'SupControl',
  components: { SupStatisPanel },
  props: {
    longitude: {
      type: Number,
      default: 116.5937
    },
    latitude: {
      type: Number,
      default: 28.249
    }
  },
  data() {
    return {
      map: '',
      baselayer: [],
      videoList: [
        { name: '胜利路中国电信', lng: 116.05584218667022, lat: 27.75863633337256, url: 'ezopen://open.ys7.com/C86485758/1.hd.live' },
        { name: '宝水中央', lng: 116.06984798429087, lat: 27.75743630778776, url: 'ezopen://open.ys7.com/F22226658/1.hd.live' }
      ],
      parts: {
        eorc: '2', // 类别
        casetypeCode: '', // 部件大类编码,
        casetypeDetailCode: '', // 部件小类编码
        caseStatusCode: ''
      },
      personQuery: {
        roleTips: ''
      },
      casepersonCode: 'supervisor',
      labelPosition: 'right',
      caseTypeOpts: [], // 部件大类下拉框
      casePersonOpts: [{
        value: 'supervisor',
        label: '监督人员'
      }, {
        value: 'process',
        label: '处置人员'
      }], // 人员分类下拉框
      caseDetailTypeOpts: [], // 部件小类下拉框
      caseTypeCodeAuto: '', // 自动生成的案卷大类代码
      caseTypeDetailCodeAuto: '', // 自动生成的案卷小类代码
      mapLoading: false,
      queryEventSwitch: '0', // 0==查询案件；1==查询人员；2==查询部件
      showPartsSelect: false,
      showPersonSelect: false,
      showCaseSelect: true,
      isOverTime: '', // 是否区分超时工单
      toVerifyListOt: [], // 待核实超时
      toVerifyListNot: [], // 待核实未超时
      toCheckListOt: [], // 待核查超时
      toCheckListNot: [], // 待核查
      toHandleListOt: [], // 处置中超时
      toHandleListNot: [], // 处置中
      toDistributeListOt: [], // 新立案超时
      toDistributeListNot: [] // 新立案
    }
  },
  computed: {
    eorc() {
      return this.parts.eorc
    },
    caseType() {
      return this.parts.casetypeCode
    },
    caseTypeDetail() {
      return this.parts.casetypeDetailCode
    }
  },
  watch: {
    caseType(typeVal) {
      this.cascaderCaseDetailType(typeVal)
    },
    caseTypeDetail(typeVal) {
      this.clearPoint()

      var obj = this.caseDetailTypeOpts.find(function(item) {
        return item.typeDetailCode === typeVal
      })
      if (obj) {
        this.addPartsPoints(obj.typeDetailName)
      }
    }
  },
  mounted() {
    this.initMap()
    this.switchContent()
    this.initVideoPoint()
  },
  methods: {
    switchContent: function() {
      this.clearPoint() // 清除绘制的点

      // 案卷（0）、人员（1）、部件（2），
      if (this.queryEventSwitch === '2') {
        this.showPartsSelect = true
        this.showPersonSelect = false
        this.showCaseSelect = false
        this.cascaderCaseType('2')
      } else if (this.queryEventSwitch === '1') {
        this.showPersonSelect = true
        this.showPartsSelect = false
        this.showCaseSelect = false
        this.casePerson()
      } else if (this.queryEventSwitch === '0') {
        this.showCaseSelect = true
        this.showPartsSelect = false
        this.showPersonSelect = false
        // 查询四个状态的案卷列表
        this.queryCaseList()
      }
    },
    // 切换不同案卷状态的显示与否
    changeCaseScope: function() {
      // isOverTime: ''--全部，'Ot'--超时，'Not'--未超时
      // caseStatusCode: 'toHandle'--待处置，'toDistribute'--待派发，'toVerify'--待核实，'toCheck'--待核查
      const filterStr = this.parts.caseStatusCode + 'Case' + this.isOverTime

      graphicLayerIds.forEach(item => {
        if (item.indexOf(filterStr) < 0) {
          // 非案卷类图层全部隐藏
          this.showGraphicLayer(item, false)
        } else {
          this.showGraphicLayer(item, true)
        }
      })
    },
    // 查询案卷列表
    queryCaseList: function() {
      const that = this
      const onePageParam = {
        limit: 1000,
        offset: 1
      }

      // 查询待核实案卷
      request({
        url: 'case/toVerifyListPage',
        method: 'get',
        params: onePageParam
      }).then(response => {
        if (response.code === 200) {
          if (response.data.total > 0) {
            // 查询有新结果时清除原有的列表
            this.toVerifyListNot = []
            this.toVerifyListOt = []

            response.data.rows.forEach(item => {
              if (item.isOvertime === '1') { // 超时标志位为1，放入超时列表中
                that.toVerifyListOt.push(item)
              } else { // 未超时
                that.toVerifyListNot.push(item)
              }
              that.addCasePointOnMap(item)
            })
          }
        }
      })

      // 查询待核查案卷
      request({
        url: 'case/toCheckListPage',
        method: 'get',
        params: onePageParam
      }).then(response => {
        if (response.code === 200) {
          if (response.data.total > 0) {
            // 查询有新结果时清除原有的列表
            this.toCheckListNot = []
            this.toCheckListOt = []

            response.data.rows.forEach(item => {
              if (item.isOvertime === '1') { // 超时标志位为1，放入超时列表中
                that.toCheckListOt.push(item)
              } else { // 未超时
                that.toCheckListNot.push(item)
              }
              that.addCasePointOnMap(item)
            })
          }
        }
      })

      // 查询处理中案卷
      request({
        url: 'case/toHandleListPage',
        method: 'get',
        params: onePageParam
      }).then(response => {
        if (response.code === 200) {
          if (response.data.total > 0) {
            // 查询有新结果时清除原有的列表
            this.toHandleListNot = []
            this.toHandleListOt = []

            response.data.rows.forEach(item => {
              if (item.isOvertime === '1') { // 超时标志位为1，放入超时列表中
                that.toHandleListOt.push(item)
              } else { // 未超时
                that.toHandleListNot.push(item)
              }
              that.addCasePointOnMap(item)
            })
          }
        }
      })

      // 查询新立案案卷
      request({
        url: 'case/toDistributeListPage',
        method: 'get',
        params: onePageParam
      }).then(response => {
        if (response.code === 200) {
          if (response.data.total > 0) {
            // 查询有新结果时清除原有的列表
            this.toDistributeListNot = []
            this.toDistributeListOt = []

            response.data.rows.forEach(item => {
              if (item.isOvertime === '1') { // 超时标志位为1，放入超时列表中
                that.toDistributeListOt.push(item)
              } else { // 未超时
                that.toDistributeListNot.push(item)
              }
              that.addCasePointOnMap(item)
            })
          }
        }
      })
    },
    // 查询人员
    casePerson() {
      this.clearPoint()

      this.personQuery.roleTips = this.casepersonCode
      if (this.casepersonCode !== '') {
        this.addPersonPoints()
      }
    },
    // 级联查询部件大类
    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
            }
          }
        })
      }
    },
    clearPoint: function() {

    },
    addPictureMarkerOnMap: function(points, icon, layerId) {
      const that = this
      const gLayer = this.selectGraphicLayerById(layerId)
      points.forEach(item => {
        if (item.lng !== '' && item.lat !== '') {
          const point = new that.esriObj.Point(item.lng, item.lat, item)
          const marker = new that.esriObj.PictureMarkerSymbol(icon, 10, 15)
          const graphic = new that.esriObj.Graphic({
            geometry: point,
            symbol: marker,
            attributes: item
          })
          gLayer.items[0].add(graphic)
        }
      })
    },
    addCasePointOnMap: function(caseDetail) {
      let popupStr = '<div style="font-size: 15px;padding: 6px"> <div style="font-weight: bold;padding-bottom: 10px">案卷概要信息</div>' +
        '<div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">案卷状态</label>' + caseDetail.caseStateName + '</div>' +
        '<div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">案卷类型</label>' + caseDetail.casetypeName + ' / ' + caseDetail.casetypeDetailName + '</div>' +
        '<div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">发生地点</label>' + caseDetail.fieldintro + '</div>' +
        '<div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">案卷描述</label>' + caseDetail.description + '</div>' +
        '<div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">登记时间</label>' + caseDetail.reportTime + '</div>'

      if (caseDetail.fileIdVerify !== '') {
        const verifyImgs = caseDetail.fileIdVerify.split(',')
        const imgUrl1 = process.env.BASE_API + '/static/' + verifyImgs[0]
        popupStr += '<div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">案卷图片</label></div>'
        popupStr += '<div style="padding-bottom: 6px;"><img src="' + imgUrl1 + '" width="100" />'
        if (verifyImgs.length > 1) {
          const imgUrl2 = process.env.BASE_API + '/static/' + verifyImgs[1]
          popupStr += '<img src="' + imgUrl2 + '" width="100" style="margin-left: 10px;" />'
        }
        popupStr += '</div>'
      }

      const popup = L.popup().setContent(popupStr)

      if (caseDetail.lng > 0 && caseDetail.lat > 0) {
        // 添加marker
        const DefaultIcon = L.icon({
          iconUrl: markerIcon,
          iconRetinaUrl: markerIcon2x,
          shadowUrl: markerShadow,
          iconSize: [25, 41],
          iconAnchor: [12, 41],
          popupAnchor: [1, -34],
          tooltipAnchor: [16, -28],
          shadowSize: [41, 41]
        })
        L.Marker.prototype.options.icon = DefaultIcon
        L.marker([caseDetail.lat, caseDetail.lng]).addTo(this.map).bindPopup(popup)
      }
    },
    // 初始化地图
    initMap: function() {
      const map = L.map(this.$refs.mapDiv, {
        minZoom: 3,
        maxZoom: 18,
        center: [27.75962, 116.06021],
        zoom: 15,
        zoomControl: false,
        attributionControl: false,
        crs: L.CRS.EPSG3857
      })
      this.map = map // data上需要挂载
      window.map = map

      this.baselayer.push(L.tileLayer(
        'https://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
        { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
      ).addTo(map))
      this.baselayer.push(L.tileLayer(
        'https://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
        { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
      ).addTo(map))
    },
    // 初始化
    initVideoPoint: function() {
      this.videoList.forEach(video => {
        const vMarker = L.marker([video.lat, video.lng], {
          icon: videoIcon,
          target: video
        }).addTo(this.map)

        vMarker.on('click', function(e) {
          const videoPlayUrl = e.target.options.target.url
          const features = 'height=401, width=600, top=100, left=100, toolbar=no, menubar=no, scrollbars=no,resizable=no, location=no, status=no'
          window.open('/dcms/static/ezPlay/demo/monitor.html?url=' + videoPlayUrl, '视频预览', features)
        })
      })
    },
    handleCloseEZFrame: function() {
      this.$refs.ezFrame.stopPlay()
      const that = this
      setTimeout(function() {
        that.videoDialogVisible = false
      }, 500)
    }
  }
}
</script>

<style scoped>

.staticPanel {
  height: calc(100vh - 80px);
  overflow-y: auto;
}
.mapPanel {
  height: calc(100vh - 80px);
}
.baseMap {
  height: calc(100vh - 120px);
  width: 100%;
  margin-top: 0;
  border: 1px solid #DCDCDC;
  border-radius: 4px;
}
.form {
  background-color: rgba(240, 240, 240, 0.9);
  position: absolute;
  top: 42px;
  width: 100%;
}
.rowSelect {
  margin-bottom: 10px;
}
.customLabel {
  padding: 0 12px 0 0;
  color: #606266;
  font-size: 14px;
}
.item {
  margin-bottom: 10px;
}
.item .notLastSelect {
  margin-right: 30px;
}
</style>