<template>
  <el-dialog :visible.sync="dialogFormVisible" :title="dateForm.keywords +'历史位置'" append-to-body @close="cancel">
    <div>
      <!--筛选条件-->
      <div>
        <el-form ref="dataForm" :inline="true" :model="dateForm" class="form-container">
          <el-row>
            <el-form-item class="selectForm-container-item" prop="startDate">
              <el-date-picker
                v-model="timeRange"
                type="daterange"
                range-separator="至"
                value-format="yyyy-MM-dd"
                start-placeholder="开始日期"
                end-placeholder="结束日期"/>
            </el-form-item>
            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="searchData">搜索</el-button>
          </el-row>
        </el-form>
      </div>
      <div v-loading="loading" class="overview-map-container">
        <el-amap v-if="dialogFormVisible" ref="map" :center="center" :amap-manager="aMapManager" :zoom="zoom" vid="history_loc" class="map-demo" style="height: 400px">
          <!--markerManage-->
          <el-amap-marker
            v-for="(marker,index) in markers"
            :key="index"
            :position="marker.position"
            :offset="offset"
            :vid="index"
            :visible= "true">
            <div>
              <svg-icon :icon-class="marker.icon" />
            </div>
          </el-amap-marker>
        </el-amap>
      </div>
  </div></el-dialog>
</template>

<script>
import { getHistoryKkj } from '@/api/overview/wellOverview'
import VueAMap from 'vue-amap'
const aMapManager = new VueAMap.AMapManager()

export default {
  name: 'HistoryLoc',
  data() {
    return {
      dialogFormVisible: false, // 对话框是否显示
      mapShow: false,
      aMapManager,
      type: 'massMarkers', // 加载数据方式：massMarkers或cluster
      timeRange: [], // 时间范围
      dateForm: {
        startDate: '',
        endDate: '',
        keywords: ''
      }, // 表单
      rules: {
        startDate: [{ required: true, message: '请选择日期区间', trigger: ['blur', 'change'] }]
      },
      center: [this.$store.getters.lng, this.$store.getters.lat], // 地图中心
      markers: [],
      mapMarkers: [],
      clusters: [],
      offset: [-10, -10], // 偏移量
      alarmOffset: [-15, -30], // 偏移量
      loading: false,
      zoom: 11, // 地图缩放比例
      zooms: [11, 19], // 最小地图比例
      commonIcon: 'kkj-location', // 通用图标 绿
      events: {
        // init: (o) => {
        //   // this.fetchStaticData()
        // },
        'zoomchange': (val) => {
          console.log(val)
          this.onZoomChange()
        }
      }
    }
  },
  watch: {
    timeRange(val) {
      if (val && val.length > 0) {
        this.dateForm.startDate = val[0]
        this.dateForm.endDate = val[1]
      } else {
        this.dateForm.startDate = ''
        this.dateForm.endDate = ''
      }
    }
  },
  mounted() {},
  methods: {
    // 初始化对话框
    initDialog: function(dialogFormVisible, devcode = null) {
      this.markers = []
      this.center = [this.$store.getters.lng, this.$store.getters.lat]
      this.dateForm.startDate = ''
      this.dateForm.endDate = ''
      this.timeRange = []
      this.dialogFormVisible = dialogFormVisible
      this.dateForm.keywords = devcode
    },
    cancel() {
      this.dialogFormVisible = false
      this.dateForm.startDate = ''
      this.dateForm.endDate = ''
      this.timeRange = []
      this.$emit('watchChild')
    },
    searchData: function() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          if (this.dateForm.endDate === '' || this.dateForm.startDate === '') {
            this.$message.error('请选择搜索的起止日期!')
            return
          }
          getHistoryKkj(this.dateForm).then(response => {
            if (response.code === 200) {
              this.$emit('watchChild')
              const locations = response.data
              if (locations.length > 0) {
                const centerxs = []
                const centerys = []
                for (const loc of locations) {
                  debugger
                  this.markers.push({
                    lnglat: [parseFloat(loc.lng), parseFloat(loc.lat)],
                    position: [parseFloat(loc.lng), parseFloat(loc.lat)],
                    icon: this.commonIcon,
                    visible: true
                  })
                  centerxs.push(parseFloat(loc.lng))
                  centerys.push(parseFloat(loc.lat))
                }
                centerxs.sort()
                centerys.sort()
                const index = Math.floor(centerxs.length / 2)
                this.center = [centerxs[index], centerys[index]]
              } else {
                this.$message.success('查无数据可展示!')
              }
            }
          })
        }
      })
    },
    onZoomChange() {
      const miniLevel = 13
      const middleLevel = 14
      const map = aMapManager.getMap()
      const val = map.getZoom()
      if (val < miniLevel) {
        // this.drawCompanyCircle()
        // this.clearDeptCircle()
      } else if (val >= miniLevel && val <= middleLevel) {
        // this.clearCompanyCircle()
        // this.drawDeptCircle()
      } else {
        // this.clearCompanyCircle()
        // this.clearDeptCircle()
      }
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .el-select{
    width: 100%;
  }
  // 地图
  .overview-map-container{
    width: 100%;
    padding: 5px;
    .map-demo{
      width: 100%;
      height: calc(100vh - 146px);
      .svg-icon{
        width: 20px;
        height: 20px;
      }
      .alarm-icon{
        width: 29px;
        height: 30px;
      }
      .nomal-info-window{
        background-color: pink;
      }
      .info-window{
        max-width: 250px;
        /*background-color: lightcyan;*/
        .info-header{
          padding: 10px 10px 5px 10px;
          line-height: 30px;
          font-weight: bold;
          /*background-color: #eaf4ff;*/
        }
        .info-body{
          padding: 5px 10px 10px 10px;
          line-height: 23px;
          font-size: 14px;
        }
      }
      .alarm-window{
        max-width: 250px;
        /*background-color: #ffeaf1;*/
        .alarm-header {
          padding: 10px 10px 5px 10px;
          line-height: 30px;
          color: red;
          font-weight: bold;
          /*background-color: #ffecec;*/
        }
        .alarm-body{
          padding: 5px 10px 10px 10px;
          line-height: 23px;
          font-size: 14px;
          .alarm-red{
            color: #ff0000;
          }
        }
      }
    }
  }
  .el-divider--horizontal{
    margin: 5px 0;
  }
</style>