<template>
  <div class="mm-box" v-if="modelValue">
    <div class="head_box_ii">
      <div class="timeBox">
        <div class="time-map">{{ times[0] }}</div>
        <el-slider
          v-model="playTime"
          id="playtimeSlider"
          :range="true"
          :min="sliderMIn"
          :max="sliderMax"
          :format-tooltip="playTimeFormat"
          @change="playTimeChange"
          :key="videoTndex">
        </el-slider>
        <div class="time-map">{{ times[1] }}</div>
        <div style="display:flex;" v-if="props.lxtype == 'gjhf'">
          <el-button size="small" @click="chooseTime">搜索</el-button>
          <el-button size="small" @click="getGjDare">轨迹回放</el-button>
          <el-button size="small" v-if="props.data.xffwlx == 1" @click="getXfqData">巡防区 </el-button>
          <el-button size="small" v-else-if="props.data.xffwlx == 2" @click="getKfdData">快反点</el-button>
        </div>
        <div v-else class="hphmBox">
          <div style="width:260px;">
            <el-select v-model="hphm" placeholder="请选择号牌号码" >
              <el-option v-for="item in props.data.clList" :key="item.id" :label="item.jdchphm" :value="item.jdchphm"></el-option>
            </el-select>
          </div>
          <el-button size="small" class="btn" @click="getClDare">车辆回放</el-button>
        </div>
      </div>
      <el-button size="small" @click="closeAddModel">关闭</el-button>
    </div>
    <div class="map"><GdMap /></div>
  </div>
</template>

<script setup>
import { spliceArray, spliceString } from "@/utils/auth.js";
import { ElMessage } from "element-plus";
import {
  getTbJcglXfqySelectById,
  getTpJcglKfdSelectByid
} from "@/api/dpApi/home.js";
import { qcckGet, qcckPost } from "@/api/qcckApi.js";
import GdMap from "@/components/Map/GdMap/index.vue";
import emitter from "@/utils/eventBus.js";
import { ref, watch, getCurrentInstance } from "vue";
import { timeValidate } from "@/utils/time.js";
const emits = defineEmits(["update:modelValue"]);
const { proxy } = getCurrentInstance();
const playTime = ref(null); //时间
const detailFiles = ref([]); //时间范围
const sliderMIn = ref(0);
const sliderMax = ref(0);
const videoTndex = ref(1);
const hphm = ref("");
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  data: {
    type: Object,
    default: {}
  },
  lxtype: String
});

const isClearn = ref(true);
const times = ref([1, 1]);
watch(() => props.data,(val) => {
    hphm.value = ''
    let ks = val.bbkssj;
    let js = val.bbjssj ? val.bbjssj : timeValidate(new Date());
    times.value = [ks, js];
    let start = new Date(ks).getTime();
    let end = new Date(js).getTime();
    sliderMIn.value = start;
    sliderMax.value = end;
    playTime.value = [start, end];
    if (props.lxtype == "gjhf") { getGjDare(); }
  },
  {
    immediate: true,
    deep: true
  }
);

// 滑块提示
function playTimeFormat(val) {
  let time = new Date(val);
  return timeValidate(time);
}
//选中时间
function playTimeChange(val) {
  let kssj = timeValidate(val[0]);
  let jssj = timeValidate(val[1]);
  times.value = [kssj, jssj];
}

// 根据时间来画轨迹
function chooseTime() {
  let params = { bbId: props.data.id, kssj: times.value[0], jssj: times.value[1] };
  emitter.emit("deletePointArea", "route");
  qcckPost(params, "/mosty-wzzx/tbWzXfwz/selectLswz").then((res) => {
    let arr = res || [];
    handleRoute(arr)
  });
}

// 获取轨迹
function getGjDare(bbId) {
  let params = { bbId: props.data.id, kssj: props.data.bbkssj, jssj: props.data.bbjssj ? props.data.bbjssj : timeValidate(new Date())};
  emitter.emit("deletePointArea", "route");
  qcckPost(params, "/mosty-wzzx/tbWzXfwz/selectLswz").then((res) => {
    let arr = res || [];
    handleRoute(arr)
  });
}
// 画轨迹
  function handleRoute(arr){
    let points = arr.map(item=>{return [item.jd, item.wd]});
    if (points.length > 0) {
      emitter.emit("drawLineAnimation", {coords:points,isClear:true,flag:'route'});
    } else {
      proxy.$message({ type: "warning", message: `没有轨迹数据` });
    }
 }

// 获取车辆轨迹
function getClDare() {
  emitter.emit("deletePointArea", "route");
  if (hphm.value == "") return proxy.$message({ type: "warning", message: `请选择车辆` });
  let list = props.data.clList;
  let obj = list.find(item=>{
    return item.jdchphm == hphm.value
  })
  if(obj && obj.gpsId){
    let params = {
    gpsId:obj.gpsId,
    kssj: props.data.bbkssj,
    jssj: props.data.bbjssj ? props.data.bbjssj : timeValidate(new Date())
  };
    qcckPost(params,'/mosty-wzzx/tbWzXfwz/selectSbLswzMo').then(res=>{
      let arr = res || []
      handleRoute(arr)
    })
  }else{
    proxy.$message({ type: "warning", message: `该车辆暂时没有轨迹` });
  }
 
}
//获取巡防区数据
function getXfqData() {
  isClearn.value = !isClearn.value;
  emitter.emit("deletePointArea", "xfq");
  emitter.emit("deletePointArea", "kfd");
  let ids = props.data.xffwid.split(",");
  if (ids.length > 0) {
    ids.forEach((el) => {
      getTbJcglXfqySelectById({id: el }).then((res) => {
        if (!res) return ElMessage({ message: "暂无巡防区数据", type: "warning" });
        if (res.jd && res.wd) emitter.emit("setMapCenter", { location: [res.jd, res.wd], zoomLevel: 14 });
        if (res.pgis.length <= 0) return; 
        let obj = { position:[res.pgis], text:res.xfqMc, id: res.id} 
        emitter.emit("echoPlane", { type:'polygon', coords: [obj], flag: "xfq",isclear: true });
      });
    });
  } else {
    ElMessage({ message: "暂无巡防区数据", type: "warning" });
  }
}

//获取快反点数据
function getKfdData() {
  isClearn.value = !isClearn.value;
  if (isClearn.value) {
    emitter.emit("deletePointArea", "kfd");
    emitter.emit("deletePointArea", "kfdArea");
  } else {
    getTpJcglKfdSelectByid({ id: props.data.xffwid }).then((res) => {
      if (res) {
      //点位数据
      if (!res.jd || !res.wd) return;
      //一分钟范围
      if (res.yfzfw.length > 0) {
        let obj = { position:[res.yfzfw], text:'', id: '11'} 
        emitter.emit("echoPlane", { type:'polygon', coords: [obj], flag: "kfdArea", color: "rgba(255,0,0,0.6)", linecolor:'#ff0000'});
      }
      //三分钟范围
      if (res.sfzfw.length > 0) {
        let obj1 = { position:[res.sfzfw], text:'', id: '211'} 
        emitter.emit("echoPlane", { type:'polygon', coords: [obj1], flag: "kfdArea", color: "rgba(253,174,46,0.5)",linecolor:'#fdae2e'});
      }
      //五分钟范围
      if (res.wfzfw.length > 0) {
        let obj2 = { position:[res.wfzfw], text:'', id: '131'} 
        emitter.emit("echoPlane", { type:'polygon', coords: [obj2], flag: "kfdArea", color: "rgba(0,102,255,0.4)", linecolor:'#0066ff'});
      }
      let icon = require("@/assets/point/f.png");
      emitter.emit("showPoint", { coords: [res], icon: icon, flag: "kfd" });
      emitter.emit("setMapCenter", { location: [res.jd, res.wd], zoomLevel: 14 });
    } else {
      ElMessage({ message: "暂无快反点数据", type: "warning" });
    }
    });
  }
}
// 取消新增模板
const closeAddModel = () => {
  emitter.emit("deletePointArea", "route");
  emits("update:modelValue", false);
};
</script>

<style lang="scss" scoped>
.mm-box {
  width: 100%;
  height: 100%;
  .head_box_ii {
    width: 100%;
    display: flex;
    height: 60px;
    align-items: center;
    justify-content: space-between;
    .timeBox {
      display: flex;
      align-items: center;
      .time-map {
        width: 212px;
        margin: 0 10px;
        color: #fff;
      }
    }
  }
  .map {
    width: 100%;
    height: 60vh;
  }
}
.hphmBox {
  display: flex;
  height: 60px;
  align-items: center;
  .btn {
    margin-left: 10px;
  }
}
</style>