<template>
  <div class="basic-main" style="height: 100%">
    <work-busy :is-busy="isShowLogging" v-show="isShowLogging"></work-busy>
    <div v-show="!isShowLogging">
      <div class="form-horizontal select-overspread container-fluid auto">
        <div class="row">
          <div class="col-sm-3 form-input-group" style="width: 20%">
            <label class="control-label">安检员</label>
            <v-select :value.sync="f_userids" v-model='f_userids'
                      :value-single="false" clear-button search multiple
                      :options='checkers' placeholder='安检员'
                      ></v-select>
          </div>
          <div class="col-sm-3 form-input-group" style="width: 20%">
            <label class="control-label" >开始时间</label>
            <datepicker placeholder="时间"
                        :value.sync="userinfo.start_date"
                        v-model="userinfo.start_date"
                        :format="'yyyy-MM-dd 00:00:00'">
            </datepicker>
          </div>
          <div class="col-sm-3 form-input-group" style="width: 20%">
            <label class="control-label" >结束时间</label>
            <datepicker placeholder="结束时间"
                        :value.sync="userinfo.end_date"
                        v-model="userinfo.end_date"
                        :format="'yyyy-MM-dd 23:59:59'">
            </datepicker>
          </div>
          <div class="col-sm-3 form-input-group" style="width: 20%;float:right;">
            <button class="btn btn-primary"  @click="search">查询</button>
          </div>

        </div>
      </div>
      <div class="row amap-main">
        <amap-trajectory :outerlinedata.sync="outerlinedata" :pathnavigatorstyle="pathnavigatorstyle" ></amap-trajectory>
      </div>
    </div>
  </div>
</template>

<script>
import co from 'co'
import * as Util from '../Util'
import {computedTimeInterval} from '../Util'

let select = function * (self) {
    let getGasman = yield self.$resetpost('/rs/search', {
      source: 'tool.getChildrenOfResName($安检员$)',
      userid: self.$login.f.id
    }, {resolveMsg: null, rejectMsg: null})
    getGasman.data.forEach((checker)=>{
      self.checkers.push({label:checker.name,value:checker.id})
    })
}

export default {
  title: "安检员轨迹展示",
  data() {
    return {
      userinfo: {
        f_userinfo_code: '',
        start_date: Util.getYesterDay() + ' 00:00:00',
        end_date: Util.toStandardDateString() + ' 23:59:59',
        f_user_id: '',
      },
      f_userids: [],
      checkers: [],
      maxTimeInterval: 2, //最大时间间隔 单位天
      isShowLogging: false, //logging.....
      outerlinedata: [],
      pathnavigatorstyle: {
        width: 16, //图标宽度
        height: 32, // 图标高度
        iconBase64: 'https://webapi.amap.com/ui/1.1/ui/misc/PathSimplifier/examples/imgs/car.png'//图标地址（外链地址或者Base64）
      }
    }
  },
  methods: {
    async search() {
      if (Util.computedTimeInterval(this.userinfo.start_date,this.userinfo.end_date,'day') > this.maxTimeInterval) {
        this.userinfo.start_date= Util.getYesterDay() + ' 00:00:00'
        this.userinfo.end_date=Util.toStandardDateString() + ' 23:59:59'
        return this.$showMessage("因定位点数据量较大，时间间隔不允许大于2天,已为您回复到默认时间")
      }
      if (this.f_userids.length <= 0 ){
        return this.$showMessage("请选择需要查看的员工")
      }
      if (!this.userinfo.start_date || !this.userinfo.end_date) {
        return this.$showMessage("请核实开始和结束时间是否正确")
      }
      this.userinfo.f_user_id = "("
      for (let fUseridElement of this.f_userids) {
        this.userinfo.f_user_id += `'${fUseridElement}',`
      }
      this.userinfo.f_user_id = this.userinfo.f_user_id.substring(0, this.userinfo.f_user_id.length - 1);
      this.userinfo.f_user_id += ")"
      this.isShowLogging = true;
      let res = await this.$resetpost("/rs/sql/queryPhoneLocationToUser?pageSize=99999&pageNo=1",
        {"data": this.userinfo},
        {resolveMsg : '查询位置信息成功！', rejectMsg : '查询位置信息失败！'})
      if (res.data && res.data.length>=20) {
        let resultd = []
        for (let useridItem of this.f_userids) { //循环id
          let obj = {f_user_id:'',name:'',path:[]}
          obj.f_user_id = useridItem
          let lastdata = '';
          let hasName = true
          for (let i = 0; i < res.data.length; i++) {
            if (useridItem === res.data[i].f_user_id) {
              if (hasName) {
                obj.name = '安检员' + res.data[i].f_user_name + res.data[i].f_realtime //这条线的名称
                hasName= false
              }
              if (lastdata === '' ) {
                obj.path.push([res.data[i].f_longitude,res.data[i].f_latitude]) //所有的点（点集）
                lastdata = res.data[i].f_realtime
              }else if (Util.computedTimeInterval(lastdata,res.data[i].f_realtime,'m')>= 30) {
                obj.name +=  '到' + lastdata + '的轨迹';
                obj.speed =  Math.ceil(obj.path.length / 2) //速度
                if (obj.path.length>20) {
                  resultd.push(obj)
                }
                obj = {f_user_id:'',name:'',path:[]}
                lastdata = ''
                hasName = true
                i = i-1
              } else {
                obj.path.push([res.data[i].f_longitude,res.data[i].f_latitude]) //所有的点（点集）
                lastdata = res.data[i].f_realtime
              }
            }
          }
          obj.name +=  '到' + lastdata + '的轨迹';
          if (obj.path.length > 20) {
            obj.speed =  Math.ceil(obj.path.length / 2) //速度
            resultd.push(obj)
          }
        }
        if (resultd.length === 0) {
          this.$showMessage("没有查找到当前相关人员的轨迹信息！")
        }else {
          this.outerlinedata = resultd
        }
        this.isShowLogging = false;
      } else {
        this.$showMessage("当前点过少，无法渲染轨迹")
        this.isShowLogging = false;
      }
      this.isShowLogging = false;
    },

  },
  ready(){
    let gen = select(this)
    return co(gen)
  },
  watch: {
    'userinfo.start_date': function (val) {
      if (Util.computedTimeInterval(val,this.userinfo.end_date,'day') > this.maxTimeInterval) {
         this.$showMessage("因定位点数据量较大，时间间隔不允许大于2天")
      }
    },
    'userinfo.end_date': function (val) {
      if (Util.computedTimeInterval(this.userinfo.start_date,this.userinfo.end_date,'day') > this.maxTimeInterval) {
        this.$showMessage("因定位点数据量较大，时间间隔不允许大于2天")
      }
    }
  }
}
</script>

<style lang="less" scoped>
.amap-main {
  height: 90%;
}
</style>
