<template>
  <div>
    <div class="video-menu">
      <layer-manager :menu-tab="menuTab" :menus="menus" :icons="icons" :select="selectIndex==='layerBtn'" @btnClick="btnClick" @menuClick="menuClick"/>
      <common-btn id="gridBtn" :select="selectIndex==='gridBtn'" :bg="grid" :bg-hover="gridHover" width="5" height="5" text-hover="精细网格" @click="btnClick" />
      <common-btn id="caseHeatBtn" :select="selectIndex==='caseHeatBtn'" :bg="caseHeatBg" :bg-hover="caseHeatHover" width="5" height="5" text-hover="事件热力" @click="btnClick" />
      <common-btn id="caseBtn" :select="selectIndex==='caseBtn'" :bg="caseBg" :bg-hover="caseHover" width="5" height="5" text-hover="事件看板" @click="btnClick" />
      <common-btn id="highBtn" :select="selectIndex==='highBtn'" :bg="highBg" :bg-hover="highHover" width="5" height="5" text-hover="高频事件" @click="btnClick" />
      <common-btn id="unfinishedBtn" :select="selectIndex==='unfinishedBtn'" :bg="unfinishedBg" :bg-hover="unfinishedHover" width="5" height="5" text-hover="未完结" @click="btnClick" />
      <time-manager @handleTimeRange="handleTimeRange"/>
    </div>
    <list-page
      ref="caseListPage"
      :title="title"
      :list="caseList"
      :hasUrge="hasUrge"
      :query="caseListQuery"
      :total="caseTotal"
      @change="changePage"
      v-show="isListPage"
      @close="isListPage=false"
      info-url="jxhsj-jxhsjsttj/jxhsjst/lczzxq"/>
    <jxh-pop ref="jxhPop" v-if="isShow" @close="isShow=false"/>
  </div>
</template>

<script>
import CryptoJS from 'crypto-js'
import CommonBtn from "@/components/CommonBtn"
import KeywordManager from "@/components/KeywordManager"
import TimeManager from "@/components/TimeManager"
import { AddLabelPoint } from '@/utils/freedo'
import { heat } from '@/utils/freedo/heat'
import { clearUpMap } from '@/utils/freedo'
import LayerManager from "@/components/LayerManager";
import {
  getGrid,
  getProject,
  getSource,
  getGridList,
  getProjectList,
  getSourceList,
  getHeat,
  getAll,
  getCaseInfo, getBoard
} from "../../../../api/ywts/cszl/jxh";
import {AddDivPointCase, AddDivPointHighlight, AddOnlyLabel, AddPolygon} from "../../../../utils/freedo";
import ListPage from "@/components/ListPage";
import {getGridInfo, getGridToken} from "../../../../api/common";
import JxhPop from "./jxhPop";

export default {
  name: 'Jxh',
  components: {JxhPop, LayerManager, TimeManager, KeywordManager, CommonBtn, ListPage },
  data() {
    return {
      preCase: null,
      title: '精细化事件',
      isShow: false,
      ktSelect: '',
      isListPage: false,
      caseList: [],
      caseListQuery: {
        startTime: '',
        endTime: '',
        id: '',
        pageNo: 0,
        pageSize: 5
      },
      caseTotal: 0,
      hasUrge: false,
      caseIcon: {
        已撤案: require('@/assets/images/icon/事件/已撤案.png'),
        指派中: require('@/assets/images/icon/事件/指派中.png'),
        处置中: require('@/assets/images/icon/事件/处置中.png'),
        已办结: require('@/assets/images/icon/事件/已办结.png'),
        已结案: require('@/assets/images/icon/事件/已结案.png'),
      },
      caseColor: {
        已撤案: '#ffffff77',
        指派中: '#fdeb5677',
        处置中: '#85c8ff77',
        已办结: '#ffba7477',
        已结案: '#87f6b377',
      },
      time: {
        startTime: '',
        endTime: '',
      },
      selectIndex: 'layerBtn',
      caseHeatBg: require('@/assets/images/function/教育/热力图未选中.png'),
      caseHeatHover: require('@/assets/images/function/教育/热力图选中.png'),
      grid: require('@/assets/images/function/精细化平台/网格未选中.png'),
      gridHover: require('@/assets/images/function/精细化平台/网格选中.png'),
      caseBg: require('@/assets/images/function/精细化平台/事件看板未选中.png'),
      caseHover: require('@/assets/images/function/精细化平台/事件看板选中.png'),
      highBg: require('@/assets/images/function/精细化平台/高频事件分析未选中.png'),
      highHover: require('@/assets/images/function/精细化平台/高频事件分析选中.png'),
      unfinishedBg: require('@/assets/images/function/精细化平台/未办结未选中.png'),
      unfinishedHover: require('@/assets/images/function/精细化平台/未办结选中.png'),
      icons: {
        project: [
          require('@/assets/images/icon/视频云/道路卡口.png'),
        ],
        source: [
        ],
        grid: [
        ],
      },
      menuTab: [{
        name: '事件来源',
        value: 'source'
      }, {
        name: '事件专项',
        value: 'project'
      }, {
        name: '事件网格',
        value: 'grid'
      }],
      menus: {
        project: [
        ],
        source: [
        ],
        grid: [
        ]
      }
    }
  },
  mounted() {
    this.$bus.$on('clear', () => {
      this.isListPage = false
      this.isShow = false
    })
    // 全部事件
    getAll({
      // urgent: '0',
      // unsolve: '0',
      // high: '0',
      startTime: this.time.startTime,
      endTime: this.time.endTime,
    }).then( res => {
      if(res.code === 200) {
        this.caseMarker(res)
      }
    })
  },
  methods: {
    // 网格点击
    gridClick(eventArg) {
      const item = eventArg._data.data
      this.isShow = true
      this.$nextTick(() => {
        this.$refs.jxhPop.initData(item)
      })
    },
    // 事件点样式通用方法
    caseMarker(res) {
      res.data.value.forEach(item => {
        // console.log(item.status)
        if(item.total === '1') {
          AddLabelPoint(
            item.id,
            '',
            this.caseIcon[item.status],
            [item.longitude, item.latitude, 0], 'jxh-case', item,
            this.clickCase)
        } else {
          AddDivPointCase(item, this.caseColor[item.status], item.total, this.clickCase)
        }
      })
    },
    // 点击*图层控制*菜单
    async menuClick(e) {
      this.preCase = null
      clearUpMap()
      let query = {
        // urgent: '0',
        // unsolve: '0',
        // high: '0',
        startTime: this.time.startTime,
        endTime: this.time.endTime,
      }
      switch (e.bigtype) {
        case 'source':
          query.sourceId = e.type
          getSourceList(query).then( res => {
            if(res.code === 200) {
              this.caseMarker(res)
            }
          })
          break
        case 'project':
          query.projectId = e.type
          getProjectList(query).then( res => {
            if(res.code === 200) {
              this.caseMarker(res)
            }
          })
          break
        case 'grid':
          query.gridType = e.type
          getGridList(query).then( res => {
            if(res.code === 200) {
              this.caseMarker(res)
            }
          })
          break
      }
    },
    // 点击marker弹窗
    clickCase(eventArg) {
      const item = eventArg._data.data
      // 恢复上一个marker
      if(this.preCase !== null ) {
        window.mmManager.removeById(this.preCase.id)
        AddLabelPoint(
          this.preCase.id,
          '',
          this.caseIcon[this.preCase.status],
          [this.preCase.lon, this.preCase.lat, 0], 'jxh-case', this.preCase,
          this.clickCase)
      }

      if(item.total === '1') {
        // 保存当前marker
        this.preCase = item
        // 高亮当前marker
        window.mmManager.removeById(item.id)
        AddDivPointHighlight(item, this.caseColor[item.status])
      } else {
        this.preCase = null
      }

      // 查询事件详情
      this.caseTotal  = Number(item.total)
      this.caseList = []
      this.isListPage = true
      this.hasUrge = false
      this.$refs.caseListPage.initDialog()
      this.caseListQuery = {
        startTime: this.time.startTime,
        endTime: this.time.endTime,
        id: item.id,
        pageNo: 0,
        pageSize: 5
      }
      this.searchCaseMarkerList()
    },
    // 点击总菜单
    async btnClick(e) {
      this.preCase = null
      clearUpMap()
      this.isListPage = false
      this.isShow = false
      this.hasUrge = true
      this.selectIndex = e.target.id
      switch (this.selectIndex) {
        case "layerBtn":
          this.layerSeach()
          break
        case "caseBtn":
          // 绘制
          getAll({
            // urgent: '0',
            // unsolve: '0',
            // high: '0',
            startTime: this.time.startTime,
            endTime: this.time.endTime,
          }).then( res => {
            if(res.code === 200) {
              this.caseMarker(res)
            }
          })
          // 事件看板
          this.caseTotal  = 1000 // todo
          this.caseList = []
          this.isListPage = true
          this.hasUrge = true
          this.$refs.caseListPage.initDialog()
          this.caseListQuery = {
            startTime: this.time.startTime,
            endTime: this.time.endTime,
            pageNo: 0,
            pageSize: 5,
            eventName: '',
            type: ''
          }
          this.searchBoard()
          break
        case "highBtn":
          // 高频事件
          getAll({
            // urgent: '0',
            // unsolve: '0',
            high: '1',
            startTime: this.time.startTime,
            endTime: this.time.endTime,
          }).then( res => {
            if(res.code === 200) {
              this.caseMarker(res)
            }
          })
          break
        case "unfinishedBtn":
          // 未完结事件
          getAll({
            // urgent: '0',
            unsolve: '1',
            // high: '0',
            startTime: this.time.startTime,
            endTime: this.time.endTime,
          }).then( res => {
            if(res.code === 200) {
              this.caseMarker(res)
            }
          })
          break
        case "gridBtn":
          this.searchGrid()
          break
        case "caseHeatBtn":
          getHeat(this.time).then(res => {
            if(res.code === 200) {
              heat(res.data.value) // 热力图
            }
          })
          break
      }
    },
    gridDraw(token, areaCode) {
      const colors = [
        [0,234,255,0.47],
        [255,185,0,0.47],
        [255,234,0,0.47],
        [209,0,255,0.47],
        [255,0,38,0.47],
      ]
      getGridInfo({
        paramCodeList: 'KJ5001',
        areaCode,
        token
      }).then( res => {
        console.log(res)
        res.data.chirdAreaInfo.forEach((item, index) => {
          item._source.areainfo.coordinates.forEach(area => {
            let positions = []
            let arr = item._source.areainfo.type === 'MultiPolygon' ? area[0]: area
            arr.forEach(pos => {
              positions.push(Freedo.Cartesian3.fromDegrees( pos[0], pos[1],0))
            })
            AddPolygon(positions,colors[index % 5], this.gridClick,item._id)
            AddOnlyLabel(
              '',
              item._source.areaname , //+ this.menus.grid
              [item._source.lon, item._source.lat, 0],
              '', null, null)
          })
        })
      })
    },
    // 精细化网格
    searchGrid() {
      let timestamp = Date.now();
      let param = {
        user: 'nsltt',
        time: timestamp,
        secret: CryptoJS.MD5(timestamp + 'geostar999').toString()
      }

      getGridToken(param).then( res => {
        clearUpMap()
        this.gridDraw(res.data.token, '360783001')
        this.gridDraw(res.data.token, '360783002')
        this.gridDraw(res.data.token, '360783003')
        this.gridDraw(res.data.token, '360783004')
      })
    },
    // 三个概况统计
    layerSeach() {
      getSource(this.time).then( res => {
        if(res.code === 200) {
          this.menus.source = res.data.value.map(item => {
            item.bigtype = 'source'
            item.type = item.id.replace(/ /g,'')
            item.typename = item.name.replace(/ /g,'')
            return item
          })
        }
      })
      getProject(this.time).then( res => {
        if(res.code === 200) {
          this.menus.project = res.data.value.map(item => {
            item.bigtype = 'project'
            item.type = item.id.replace(/ /g,'')
            item.typename = item.name.replace(/ /g,'')
            return item
          })
        }
      })
      getGrid(this.time).then( res => {
        if(res.code === 200) {
          this.menus.grid = res.data.value.map(item => {
            item.bigtype = 'grid'
            item.type = item.id.replace(/ /g,'')
            item.typename = item.name.replace(/ /g,'')
            return item
          })
        }
      })
    },
    // 事件换页
    changePage(val) {
      if (val && val.page) {
        this.caseListQuery.pageNo = val.page
      }
      if(this.hasUrge) {
        this.searchBoard()
      } else {
        this.searchCaseMarkerList()
      }
    },
    // 事件看板查询
    searchBoard() {
      getBoard(this.caseListQuery).then(response => {
        if(response.code === 200) {
          console.log(response.data.value)
          // 右侧看板
          this.caseList  = response.data.value
        }
      })
    },
    // 事件详情分页
    searchCaseMarkerList() {
      getCaseInfo(this.caseListQuery).then(response => {
        if(response.code === 200) {
          console.log(response.data.value)
          // 右侧看板
          this.caseList  = response.data.value
        }
      })
    },
    // 事件控件回调
    handleTimeRange(time) {
      this.time = time
      const item = {
        target: {
          id: this.selectIndex
        }
      }
      this.btnClick(item)
    }
  }
}
</script>

<style scoped>
.video-menu {
  display: flex;
  z-index: 111111111;
  width: 40rem;
  height: 5rem;
  position: absolute;
  left: 20px;
  top: 1rem;
}
</style>