<template>
  <div class="dialogBox" :style="`right:${elRight}px;bottom:${elBottom}px`" draggable="true" ref="dialogBoxYpfx"
    @dragstart="dragstart($event)" @dragend="dragend($event)">
    <div class="title">
      <span class="mc">犯罪预测</span>
      <span @click="close" class="close"><el-icon>
          <Close />
        </el-icon></span>
    </div>
    <div class="info-Big-Box">
      <!-- <el-radio-group v-model="radioTime" @change="handleRadio">
        <el-radio-button label="今日" />
        <el-radio-button label="昨日" />
        <el-radio-button label="本周" />
        <el-radio-button label="本月" />
        <el-radio-button label="近30日" />
        <el-radio-button label="本季度" />
        <el-radio-button label="近半年" />
        <el-radio-button label="近一年" />
         <el-popover :width="400" trigger="click" placement="bottom" v-model:visible="showVisible">
          <template #reference><el-radio-button label="自定义" /></template>
<el-date-picker v-model="daterangeTime" type="daterange" unlink-panels style="width:100%;" range-separator="至"
  start-placeholder="开始日期" end-placeholder="结束日期" :teleported="false" format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
</el-popover>
</el-radio-group> -->
      <div class="tableBox noScollLine" v-loading="loading">
        <!-- 标题 -->
        <el-row>
          <el-col :span="4" class="grid-content-top">所属部门</el-col>
          <el-col :span="5" class="grid-content-top">时间</el-col>
          <el-col :span="15">
            <el-row style="width:100%;">
              <el-col :span="3" class="grid-content-top">巡逻警组</el-col>
              <el-col :span="3" class="grid-content-top">巡逻时长</el-col>
              <el-col :span="3" class="grid-content-top">巡逻里程</el-col>
              <el-col :span="3" class="grid-content-top">警情数</el-col>
              <el-col :span="3" class="grid-content-top">签收状态</el-col>
              <el-col :span="3" class="grid-content-top">盘查人员</el-col>
              <el-col :span="3" class="grid-content-top">盘查车辆</el-col>
              <el-col :span="3" class="grid-content-top">操作</el-col>
            </el-row>
          </el-col>
        </el-row>
        <div class="null" v-if="list.length <= 0 && !loading">
          <el-empty description="没有数据" />
        </div>
        <!-- 循环数据 -->
        <el-row v-for="(item, index) in list" :key="index">
          <el-col :span="4" class="grid-content-nr">
            <el-tooltip :content="item.ssbm" placement="bottom">
              <div class="flexTool">
                <div class="w-78">{{ item.ssbm }}</div>
              </div>
            </el-tooltip>
          </el-col>
          <el-col :span="20" v-if="item.children && item.children.length > 0">
            <el-row style="width:100%;" v-for="(it, idx) in item.children" :key="idx + 0.1">
              <el-col :span="6" class="grid-content-nr">
                <el-tooltip :content="it.xlkssj + ' ~ ' + it.xlkssj" placement="bottom">
                  <div class="flexTool">
                    <div class="w-115">{{ it.xlkssj }} ~ {{ it.xlkssj }}</div>
                  </div>
                </el-tooltip>
              </el-col>
              <el-col :span="18">
                <el-row style="width:100%;">
                  <el-col :span="3" class="grid-content-nr">{{ it.xzmc }}</el-col>
                  <el-col :span="3" class="grid-content-nr">{{ (it.xfsc / 3600).toFixed(2) }}</el-col>
                  <el-col :span="3" class="grid-content-nr">{{ (it.xflc / 1000).toFixed(2) }}</el-col>
                  <el-col :span="3" class="grid-content-nr">{{ props.data.prob }}</el-col>
                  <el-col :span="3" class="grid-content-nr"> <el-text type="warning">{{ it.sfqsmc }}</el-text> </el-col>
                  <el-col :span="3" class="grid-content-nr">{{ it.pcry }}</el-col>
                  <el-col :span="3" class="grid-content-nr">{{ it.pccl }}</el-col>
                  <el-col :span="3" class="grid-content-top" @click="ganhdleGJHF(it)">轨迹回放</el-col>
                </el-row>
              </el-col>
            </el-row>
          </el-col>

          <el-col :span="20" v-else>
            <el-row style="width:100%;">
              <el-col :span="6" class="grid-content-nr">
                <el-tooltip :content="item.xlkssj + ' ~ ' + item.xlkssj" placement="bottom">
                  <div class="flexTool">
                    <div class="w-115">{{ item.xlkssj }} ~ {{ item.xlkssj }}</div>
                  </div>
                </el-tooltip>
              </el-col>
              <el-col :span="18">
                <el-row style="width:100%;">
                  <el-col :span="3" class="grid-content-nr">{{ item.xzmc }}</el-col>
                  <el-col :span="3" class="grid-content-nr">{{ (item.xfsc / 3600).toFixed(2) }}</el-col>
                  <el-col :span="3" class="grid-content-nr">{{ (item.xflc / 1000).toFixed(2) }}</el-col>
                  <el-col :span="3" class="grid-content-nr">{{ props.data.prob }}</el-col>
                  <el-col :span="3" class="grid-content-nr"> <el-text type="warning">{{ item.sfqsmc }}</el-text> </el-col>
                  <el-col :span="3" class="grid-content-nr">{{ item.pcry }}</el-col>
                  <el-col :span="3" class="grid-content-nr">{{ item.pccl }}</el-col>
                  <el-col :span="3" class="grid-content-top" @click="ganhdleGJHF(item)">轨迹回放</el-col>
                </el-row>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
        <!-- 统计数据 -->
        <!-- <el-row>
          <el-col :span="4" class="grid-content-nr">合计</el-col>
          <el-col :span="5" class="grid-content-nr">-</el-col>
           <el-col :span="15">
            <el-row  style="width:100%;">
              <el-col :span="3" class="grid-content-top">-</el-col>
              <el-col :span="3" class="grid-content-top">11'45''</el-col>
              <el-col :span="3" class="grid-content-top">136公里</el-col>
              <el-col :span="3" class="grid-content-top">12</el-col>
              <el-col :span="3" class="grid-content-top">-</el-col>
              <el-col :span="3" class="grid-content-top">89</el-col>
              <el-col :span="3" class="grid-content-top">90</el-col>
              <el-col :span="3" class="grid-content-top">-</el-col>
            </el-row>
          </el-col>
        </el-row> -->
      </div>
    </div>
  </div>
</template>

<script setup>
import { queryQfzxl } from "@/api/dpApi/home.js";
import { getRecentDay, getThistWeekDare } from "@/utils/tools.js";
import MyTable from "@/components/aboutTable/DarkTable.vue";
import { qcckPost } from "@/api/qcckApi.js";
import { ref, onMounted, onUnmounted, reactive, defineProps, getCurrentInstance, watch } from "vue";
import { timeValidate } from "@/utils/time.js";
import emitter from "@/utils/eventBus.js";
const { proxy } = getCurrentInstance();
const props = defineProps({
  data: {
    type: Object,
    default: {}
  }
});
const showVisible = ref(false)
const daterangeTime = ref([])
const radioTime = ref('今日')
const dialogBoxYpfx = ref();
const initWidth = ref(0); //父元素宽度
const initHeight = ref(0); //父元素高度
const startClientX = ref(0); //元素拖拽前距离浏览器X轴位置
const startClientY = ref(0); //元素拖拽前距离浏览器Y轴位置
const elRight = ref(10); //元素右偏移量
const elBottom = ref(120); //元素底偏移量
const dateRange = ref([getRecentDay(0), getRecentDay(0)])
const list = ref([])
const loading = ref(false)

watch(() => props.data, (val) => {
  if (val) fzyjcJL(val.id);
}, { immediate: true, deep: true });

onMounted(() => {
  initBodySize();
});
function fzyjcJL(id) {
  loading.value = true
  queryQfzxl({ id }).then((res) => {
    loading.value = false
    let arr = res || []
    let brr = [];
    let dms = []
    arr.forEach((item) => {
      if (!dms.includes(item.ssbmdm)) {
        dms.push(item.ssbmdm);
        let obj = { ...item }
        obj.children = [item];
        brr.push(obj)
      } else {
        let inx = dms.findIndex(val => val == item.ssbmdm)
        brr[inx].children.push(item)
      }
    });
    list.value = brr;
  }).catch(() => { loading.value = false });
};
// 处理时间单选
function handleRadio(val) {
  showVisible.value = val == '自定义' ? true : false;
  let time = []
  switch (val) {
    case '今日':
      time = [getRecentDay(0), getRecentDay(0)]
      break;
    case '昨日':
      time = [getRecentDay(-1), getRecentDay(-1)]
      break;
    case '本周':
      time = getThistWeekDare('week')
      break;
    case '本月':
      time = getThistWeekDare('month')
      break;
    case '近30日':
      time = [getRecentDay(-30), getRecentDay(0)]
      break;
    case '本季度':
      time = getThistWeekDare('quarter')
      break;
    case '近半年':
      time = [getRecentDay(-181), getRecentDay(0)]
      break;
    case '近一年':
      time = [getRecentDay(-365), getRecentDay(0)]
      break;
  }
  dateRange.value = time;
}

//初始化
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;
  elRight.value -= x;
  elBottom.value -= y;
};
// 轨迹回放
function ganhdleGJHF(item) {
  emitter.emit("deletePointArea", "routeGj");;
  let arr = item.zbList || [];
  if (arr.length > 0) {
    emitter.emit("drawLineAnimation", { coords: arr, isClear: true, flag: 'routeGj' });
  } else {
    proxy.$message({ type: "warning", message: `没有轨迹数据` });
  }
}

//关闭弹窗
function close() {
  emitter.emit("showFzycInfo", { type: false });
  emitter.emit("deletePointArea", "routeGj");
}
</script>

<style lang="scss" scoped>
@import "@/assets/css/largeScreen.scss";
@import "@/assets/css/homeScreen.scss";

.dialogBox {
  position: absolute;
  padding: 0;
  box-sizing: border-box;
  width: 1000px !important;

  .title {
    border-bottom: 1px solid #275288;
    margin-bottom: 6px;
    margin-left: 11px;
    margin-right: 20px;

    .mc {
      margin-left: 10px;
    }
  }

  .info-Big-Box {
    padding: 4px 10px;
    box-sizing: border-box;

    .tableBox {
      padding: 10px 20px;
      box-sizing: border-box;
      height: 57vh;
      overflow: hidden;
      overflow-y: auto;

      .grid-content-top {
        background: #052466;
        border: 1px solid #013995;
        text-align: center;
        padding: 4px 0;
        box-sizing: border-box;
      }

      .grid-content-nr {
        border: 1px solid #013995;
        text-align: center;
        padding: 4px 0;
        box-sizing: border-box;
      }
    }
  }
}

.el-radio-group {
  margin-left: 20px;
}

.el-radio-button {
  margin: 0 2px;
}

::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;
}

::v-deep .el-popper.is-light {
  transform: translate(5px, 336px) !important;
}

.flexTool {
  height: 100%;
  display: flex;
  align-items: center;
}

.w-78 {
  width: 150px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-left: 4px;
}

.w-115 {
  width: 188px;
  white-space: nowrap;
  overflow: hidden;
  margin-left: 4px;
  text-overflow: ellipsis;
}

.null {
  text-align: center;
}

:v-deep .el-loading-mask {
  background-color: rgba(0, 0, 0, .5) !important;
}
</style>
<style>
.el-loading-mask {
  background-color: rgba(0, 0, 0, .5) !important;
}
</style>
