<template>
  <div id="index">
    <el-row>
      <el-col :span="24" class="main">
        <el-col :span="24" class="one">
          <el-col :span="24" class="one_1">保安员实时位置监控</el-col>
          <el-col :span="24" class="one_2">
            <el-form ref="searchFrom" :model="searchFrom" label-width="130px">
              <el-col :span="24" class="one_2txt">
                <el-col :span="8">
                  <el-form-item label="企业名称">
                    <el-select v-model="searchFrom.company_id" clearable placeholder="请选择">
                      <el-option v-for="item in companyList" :key="item.name" :label="item.name" :value="item.id"> </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="姓名">
                    <el-input v-model="searchFrom.name" clearable></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="身份证号">
                    <el-input v-model="searchFrom.card" clearable></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="4" class="btn">
                  <el-button type="primary" size="mini" @click="search()">查询</el-button>
                </el-col>
              </el-col>
            </el-form>
          </el-col>
        </el-col>
        <el-col :span="24" class="two">
          <div id="container"></div>
          <el-row type="flex" class="tip__div" align="middle">
            <el-col :span="24">
              <el-alert effect="dark" type="success" :closable="false">共有{{ searchNumber }}个符合条件的定位数据</el-alert>
            </el-col>
          </el-row>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
const _ = require('lodash');
const moment = require('moment');
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions: position } = createNamespacedHelpers('position');
const { mapActions: company_base } = createNamespacedHelpers('company_base');
import VueAMap from 'vue-amap';
import Vue from 'vue';
Vue.use(VueAMap);
export default {
  metaInfo() {
    return { title: this.$route.meta.title };
  },
  name: 'resource',
  props: {},
  components: {},
  data: function () {
    return {
      viewMap: false,
      zoom: '11.3',
      center: [125.3281, 43.911952], //初始定位到中心
      // 企业列表
      companyList: [],
      // 数据查询
      searchFrom: {},

      // 地图实例
      map: undefined,
      markList: [],
      infoWindow: undefined,
      mapStyle: 'amap://styles/32e687510f26553e59dfd896c133cafc',
      // 查询结果数
      searchNumber: 0,
    };
  },
  created() {
    this.getCompanyList();
  },
  mounted() {
    this.init();
    this.search();
  },
  methods: {
    ...company_base({ comQuery: 'query' }),
    ...position(['queryMap']),
    async search() {
      // 查询最后位置的接口
      let res = await this.queryMap({ ...this.searchFrom });
      if (this.$checkRes(res)) {
        this.changeData(res.data);
        //移动位置
        this.moveView(_.head(res.data));
        this.searchNumber = res.data.length || 0;
      }
    },
    // 企业列表
    async getCompanyList() {
      let res = await this.comQuery();
      if (this.$checkRes(res)) {
        this.$set(this, `companyList`, res.data);
      }
    },
    // 初始化地图
    init() {
      let map = new AMap.Map('container', {
        zoom: this.zoom,
        // showLabel: false,
        viewMode: '2D',
        center: this.center,
        mapStyle: this.mapStyle,
      });
      map.on('complete', function () {
        console.log('地图初始化完成');
      });
      this.map = map;
    },

    // 添加标记
    addMark(data) {
      if (!this.map) return;
      if (!_.isArray(data) || data.length <= 0) return;
      const marks = [];
      for (const i of data) {
        const { longitude, latitude } = i;
        if (!longitude || !latitude) continue;
        let mark = new AMap.Marker({
          anchor: 'bottom-center',
          position: [longitude, latitude],
          title: `${i.name}\n企业名称:${i.company_name || ''}\n服务对象:${i.company_service_object_name || ''}`,
          extData: i,
        });
        marks.push(mark);
        this.markList.push(mark);
      }
      this.map.add(marks);
    },
    // 更换数据
    changeData(data) {
      if (!this.map) this.init();
      // 销毁标记
      for (const mark of this.markList) {
        this.map.remove(mark);
      }
      this.markList = [];
      this.addMark(data);
    },
    // 窗体初始化
    initInfoWindow() {
      if (!this.infoWindow) {
        const iw = new AMap.InfoWindow({
          offset: [0, -30],
        });
        this.infoWindow = iw;
      }
    },
    // 打开窗体
    openInfoWindow(data) {
      if (!this.infoWindow) {
        console.error('窗体信息未创建,不能使用');
        return;
      }
      if (data) {
        const { longitude, latitude } = data;
        this.infoWindow.open(this.map, [longitude, latitude]);
      } else this.infoWindow.open(this.map);
    },
    // 关闭窗体
    closeInfoWindow() {
      this.infoWindow.close();
    },
    // 获取自定义属性
    getExtData(mark) {
      return _.get(mark, 'target._opts.extData');
    },
    // 时间格式化
    getDate(date) {
      let p1 = moment(date.createdAt).format('YYYY-MM-DD HH:mm:ss');
      if (p1) return p1;
    },
    moveView(data) {
      const { longitude, latitude } = data;
      this.map.setCenter([longitude, latitude], 3000);
    },
  },
  computed: {
    ...mapState(['user']),
  },
};
</script>

<style lang="less" scoped>
.main {
  .one {
    height: 100px;
    .one_1 {
      height: 40px;
      line-height: 40px;
      border-bottom: 1px solid #ccc;
      margin: 0 0 10px 0;
      font-size: 18px;
      font-weight: bold;
    }
    .one_2 {
      .one_2txt {
        border: 1px solid #ccc;
        /deep/.el-form-item {
          margin: 0;
        }
        /deep/.el-date-editor.el-input,
        .el-date-editor.el-input__inner {
          width: 100%;
        }
        /deep/.el-select {
          width: 100%;
        }
        .btn {
          text-align: right;
          padding: 5px 5px;
        }
      }
    }
  }
  .two {
    #container {
      width: 100%;
      height: 650px;
    }
  }
}
.tip__div {
  width: 200px;
  position: absolute;
  top: 110px;
  right: 100px;
  background: #ffffff;
}
</style>
