<template>
  <div
    class="dialogBox"
    :style="`left:${elLeft}px;top:${elTop}px`"
    draggable="true"
    ref="dialogBoxYpfx"
    @dragstart="dragstart($event)"
    @dragend="dragend($event)"
  >
    <div class="title">
      <span class="mc">{{ props.data.jzMc ? props.data.jzMc : props.data.fzrXm + "巡组" }}</span>
      <span @click="close" class="close">
        <el-icon><Close /></el-icon>
      </span>
    </div>
    <div class="info-Big-Box noScollLine">
      <div class="infoBox">
        <div class="xlStatus" :class="props.data.xfzt == 1 ? 'lineing' : props.data.xfzt == 2 ? 'unline': 'line'">
          {{props.data.xfzt == 1? "处警中": props.data.xfzt == 2? "离线": "巡逻中"}}
        </div>
        <div class="text">
          负责人：<span class="tag mj">民警</span>
          <el-tooltip :content=" '身份证号： ' + props.data.fzrSfzh + '  警号： ' + props.data.fzrId " placement="bottom">
            <span class="name">{{ props.data.fzrXm }} ({{ props.data.fzrLxdh }})</span>
          </el-tooltip>
        </div>
        <div class="text">
          开始时间：<span class="name">{{ props.data.bbkssj }}</span>
        </div>
        <div class="time">
          (计划 ( {{ props.data.kssj }} ~ {{ props.data.jssj }} )
        </div>
        <div class="text">
          组员：
          <span v-for="(item, index) in props.data.pbmj" :key="index" class="jc_box">
            <span class="tag mj">民警</span>
            <span class="name">{{ item.jlxm }}</span>
          </span>
          <span v-for="(item, index) in props.data.pbfj" :key="index" class="jc_box">
            <span class="tag fj">辅警</span>
            <span class="name">{{ item.jlxm }}</span>
          </span>
        </div>
        <div class="text">
          单位：<span class="name">{{ props.data.ssbm }}</span>
        </div>
        <div class="text zblist">
          通讯装备：
          <span class="zb-item" v-for="(item, index) in props.data.txzb" :key="index">
            <span class="sbinfo">{{ item.sbmc }}</span>
            <el-tooltip :content="'呼叫(' + item.hh + ')'" placement="bottom">
              <img style="width: 22px" src="@/assets/my/sxt.png" @click="getZFJLY(item)"/>
            </el-tooltip>
          </span>
          <span v-if="props.data.txzb.length <= 0">暂无</span>
        </div>

        <div class="text zblist" v-if="props.data.jyqx.length <= 0">
          警用器械：<span>暂无数据</span>
        </div>

        <div class="text zblist" v-else>
          <el-collapse v-model="props.data.openJyqx">
            <el-collapse-item title="警用器械：" name="1">
              <span class="zb-item" v-for="(item, index) in props.data.jyqx" :key="index">
                <span class="qxinfo">{{ item.qxmc }}（{{ item.qxsl }}）个</span>
              </span>
            </el-collapse-item>
          </el-collapse>
        </div>
        <div class="text zblist">
          警用车辆：
          <span class="zb-item" v-for="(item, index) in props.data.pbcl" :key="index">
            <span class="qxinfo">{{ item.jdchphm }}</span>
          </span>
          <span v-if="props.data.pbcl.length <= 0">暂无</span>
        </div>
        <div class="text" v-if="props.data.bz != ''">
          备注： <span class="name">{{ props.data.bz }}</span>
        </div>
      </div>
    </div>
    <div class="btnBox">
      <button class="dp-default small" v-if="props.data.xffwlx == 1" @click="getXfqData">巡防区</button>
      <button class="dp-default small" v-else-if="props.data.xffwlx == 2"  @click="getKfdData">快反点</button>
      <button class="dp-default small" v-else @click="getKfdData">检查站</button>
      <button class="dp-default small" @click="onClickZbyj">周边预警</button>
      <button class="dp-default small" @click="onClickSpsd">视频随动</button>
      <el-popover placement="bottom" :visible="visible" :width="476" :append-to-body="false">
        <template #reference>
          <button class="dp-default small" @click="visible = !visible">轨迹回放</button>
        </template>
        <div class="timeBox">
          <div class="time1">{{ dateRange[0] }}</div>
          <el-slider
            class="playtime-slider"
            v-model="playTime"
            id="playtimeSlider"
            :range="true"
            :min="sliderMIn"
            :max="sliderMax"
            :format-tooltip="playTimeFormat"
            @change="playTimeChange"
            :key="videoTndex"
          >
          </el-slider>
          <div class="time1">{{ dateRange[1] }}</div>
        </div>
        <div style="text-align: center; width: 100%">
          <el-button @click.stop="chooseTime">确定</el-button>
          <el-button @click.stop="onClickGjhf">回放</el-button>
        </div>
      </el-popover>
      <button class="dp-default small" @click="getDkqkData">打卡情况</button>
    </div>
  </div>
</template>

<script setup>
import Axios from "axios";
import { spliceArray, spliceString } from "@/utils/auth.js";
import { qcckPost } from "@/api/qcckApi.js";
import { ref, onMounted, onUnmounted, defineProps, getCurrentInstance, watch } from "vue";
import { timeValidate } from "@/utils/time.js";
import emitter from "@/utils/eventBus.js";
import { getTbWzXfwzSelectTrack } from "@/api/dpApi/zzzh.js";
import { getTbJcglXfqySelectById, getTpJcglKfdSelectByid, queryListfzyc } from "@/api/dpApi/home.js";
import { getXfgj } from "@/api/yjCenter.js";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
import { all } from "ol/events/condition";
const { proxy } = getCurrentInstance();
const props = defineProps({
  data: {
    type: Object,
    default: {}
  }
});
const visible = ref(false);
const times = ref(null);
const router = useRouter();

const zbList = ref(); //犯罪坐标
const fzycFlag = ref(false);

const dialogBoxYpfx = ref();
const initWidth = ref(0); //父元素宽度
const initHeight = ref(0); //父元素高度
const startClientX = ref(0); //元素拖拽前距离浏览器X轴位置
const startClientY = ref(0); //元素拖拽前距离浏览器Y轴位置
const elLeft = ref(400); //元素左偏移量
const elTop = ref(120); //元素右偏移量

const dateRange = ref([]); //时间
const playTime = ref();
const sliderMIn = ref(0)
const sliderMax = ref(0)
const videoTndex = ref(1)
watch(
  () => props.data,
  (val) => {
    visible.value = false;
    let ks  = val.bbkssj
    let js  = val.bbjssj ? val.bbjssj : timeValidate(new Date()) 
    dateRange.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]
  },{
    immediate:true,
    deep:true
  }
);
onMounted(() => {
  initBodySize();
});
onUnmounted(() => {
  emitter.emit("clearLine");
});

//初始化
const initBodySize = () => {
  initWidth.value = dialogBoxYpfx.value.clientWidth;
  initHeight.value = dialogBoxYpfx.value.clientHeight;
};
//拖拽开始
const dragstart = (e) => {
  startClientX.value = e.clientX;
  startClientY.value = e.clientY;
};
//拖拽结束
const dragend = (e) => {
  let x = e.clientX - startClientX.value;
  let y = e.clientY - startClientY.value;
  elLeft.value += x;
  elTop.value += y;
};

// 执法记录仪呼叫
function getZFJLY(item) {
  if (item.sfrh == "1") SPPUC.rdCard(item.hh, 6, ["60%", "40%"]);
}
//关闭弹窗
function close() {
  emitter.emit("deletePointArea", "largeIcon");
  visible.value = false;
  emitter.emit("showJzInfo", false);
  emitter.emit("deletePointArea", "xfq");
  emitter.emit("deletePointArea", "route");
  emitter.emit("deletePointArea", "kfdArea");
  emitter.emit("deletePointArea", "kfd");
}

// 滑块提示
function playTimeFormat(val) {
  let time = new Date(val)
  return timeValidate(time)
}

  //选中时间
function playTimeChange(val) {
  let kssj = timeValidate(val[0])
  let jssj = timeValidate(val[1])
  dateRange.value = [kssj,jssj]
}

//获取轨迹回放数据
function _getTbWzXfwzSelectTrack() {
  getTbWzXfwzSelectTrack().then((res) => {});
}
// 根据时间来画轨迹
function chooseTime() {
  let params = {
    bbId: props.data.id,
    kssj: dateRange.value.length > 0 ? dateRange.value[0] : "",
    jssj: dateRange.value.length > 0 ? dateRange.value[1] : ""
  };

  emitter.emit("deletePointArea", "route");
  qcckPost(params, "/mosty-wzzx/tbWzXfwz/selectLswz").then((res) => {
    let arr = res || [];
    let points = [];
    arr.forEach((item) => { points.push([item.jd, item.wd]) });
    if (points.length > 0) {
      emitter.emit("drawLineAnimation", {coords:points,isClear:true,flag:'route'});
    } else {
      proxy.$message({ type: "warning", message: `没有轨迹数据` });
    }
  });
}
// 巡防轨迹
function onClickGjhf() {
  emitter.emit("deletePointArea", "route");
  getXfgj({ bbid: props.data.id }).then((res) => {
    if (res.zbList && res.zbList.length > 0) {
      emitter.emit("drawLineAnimation", {coords:res.zbList,isClear:true,flag:'route'});
    } else {
      proxy.$message({ type: "warning", message: `没有轨迹数据` });
    }
  });
}
// 巡防轨迹-把数据拆分个多个-模拟动态加载
function handleAnimation(arr, subLen) {
  let newAarry = [];
  let index = 0;
  while (index < arr.length) {
    newAarry.push(arr.slice(index, (index += subLen)));
  }
  return newAarry;
}
//获取巡防区数据
function getXfqData() {
  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 getCenterPoint(dm, text) {
  qcckPost(dm, "/mosty-base/other/getZxd").then((res) => {
    let points = [res.x, res.y];
    emitter.emit("addTEXT", { points, text });
  });
}
//获取快反点数据
function getKfdData() {
  emitter.emit("deletePointArea", "xfq");
  getTpJcglKfdSelectByid({ id: props.data.xffwid }).then((res) => {
    if (res) {
      console.log('点击巡防去');
      //点位数据
      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" });
    }
  });
}

//点击视频随动
function onClickSpsd() {
  emitter.emit("closeVideo");
  let { jd, wd } = props.data;
  emitter.emit("clickSpsd", { jd, wd });
}
//点击周边预警
function onClickZbyj() {
  emitter.emit("closeVideo");
  let { jd, wd } = props.data;
  emitter.emit("clickZbyj", { jd, wd });
}
const getDkqkData=()=>{
  emitter.emit("closeVideo");
  emitter.emit("clickDkqk", props.data);
}

</script>

<style lang="scss" scoped>
@import "@/assets/css/largeScreen.scss";
@import "@/assets/css/homeScreen.scss";
.dialogBox {
  position: absolute;
  padding: 0;
  width: 484px !important;
  .title {
    border-bottom: 1px solid #275288;
    margin-bottom: 6px;
    .mc {
      margin-left: 10px;
    }
  }
  .info-Big-Box {
    max-height: 70vh;
    overflow: hidden;
    overflow: auto;
    padding: 4px 10px;
    box-sizing: border-box;
  }
  .infoBox {
    position: relative;
    padding: 10px !important;
    .text {
      color: #00bfff;
      line-height: 26px;
    }
    .tag {
      margin: 0 4px;
    }
    .name {
      color: #fff;
    }
    .time {
      color: #3ad2d4;
    }
    .jc_box {
      margin: 0 4px;
    }
    .zblist {
      display: flex;
      flex-wrap: wrap;
      .zb-item {
        margin-right: 10px;
        .sbinfo {
          color: yellow;
        }
        img {
          margin-left: 4px;
          cursor: pointer;
        }
        .qxinfo {
          color: rgb(127, 177, 217);
          padding: 2px 4px;
          border: 1px solid rgb(61, 116, 219);
          border-radius: 4px;
          display: inline;
          white-space: nowrap;
        }
      }
    }
  }
}
.all-dialog .dialogBox > .btnBox {
  padding-top: 0;
  padding-bottom: 0;
}
.timeBox{
  width: 100%;
  display: flex;
  align-items: center;
  .time1{
    margin: 0 10px;
    text-align: center;
    color: #fff;
  }
}

::v-deep .el-collapse{
  width: 100%;
  --el-collapse-header-height:auto;
  --el-collapse-header-bg-color:transparent;
  --el-collapse-border-color:transparent;
}
::v-deep .el-collapse-item__header{
  color: #00bfff;
}
::v-deep .el-collapse-item__wrap{
  background-color:transparent;
}
::v-deep .el-collapse-item__content {
  color: #fff;
}
.null{
  text-align: center;
}
::v-deep .el-popper.is-light{
  transform: translate(5px, 336px) !important;
}
</style>
