<template>
  <div class="mm-box" v-if="modelValue">
    <div class="head_box_ii">
      <el-form v-model="form" inline>
        <el-form-item label="巡逻时间" prop="bksj">
          <el-date-picker
            size="small"
            v-model="playTime"
            type="datetimerange"
            unlink-panels
            start-placeholder="巡逻开始时间"
            end-placeholder="巡逻结束时间"
            range-separator="至"
            format="YYYY-MM-DD HH:mm:ss"
            value-format="YYYY-MM-DD HH:mm:ss"
            placeholder="选择巡逻时间"
            @change="handletime"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="设备号" prop="bksj">
          <el-input v-model="form.gpsId" placeholder="请输入设备号" disabled></el-input>
        </el-form-item>
        <el-form-item >
          <el-button size="small" class="btn" @click="getClDare">回放</el-button>
          <el-button size="small" @click="closeAddModel">关闭</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="map"><GdMap/> </div>
  </div>
</template>

<script setup>
import { spliceArray, spliceString } from "@/utils/auth.js";
import { ElMessage } from "element-plus";
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, reactive } from "vue";
import { timeValidate } from "@/utils/time.js";
const emits = defineEmits(["update:modelValue"]);
const { proxy } = getCurrentInstance();
const playTime = ref([]); //时间
const detailFiles = ref([]); //时间范围
const form = reactive({})
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) => {
    form.gpsId = val.sbbh
    getClDare();
  },
  {
    immediate: true,
    deep: true
  }
);

// 处理时间
function handletime(val){
  form.kssj = val ? val[0] : ''
  form.jssj = val ? val[1] : ''
}

// 获取车辆轨迹
function getClDare() {
 emitter.emit("deletePointArea", 'route');
  qcckPost(form,'/mosty-wzzx/tbWzXfwz/selectSbLswzMo').then(res=>{
    let arr = res || []
    let brr = arr.map(item=>{return [item.jd,item.wd]})
    if (brr.length > 0) {
      emitter.emit("drawLineAnimation", {coords:brr,isClear:true,flag:'clgjRoute'});
    } else {
      proxy.$message({ type: "warning", message: `没有轨迹数据` });
    }
  })
}

// 取消新增模板
const closeAddModel = () => {
  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;
  
  }
  .map {
    width: 100%;
    height: 62vh;
  }
}

</style>