<!--
 * @Author: ZR
 * @Date: 2023-11-06 09:43:52
 * @LastEditTime: 2024-07-04 09:47:16
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
-->
<template>
  <div class="bigScrenn">
    <GdMap :isShow="true" />
    <!-- 头部 -->
    <Header></Header>
    <!-- <div class="upload_home">
      <el-button type="primary" @click="">上传</el-button>
      <el-button type="primary">下载</el-button>
    </div> -->
    <div class="leftSiecle transition" :style="{ left: showClassL ? '-20px' : '370px' }" @click="showClassL = !showClassL"></div>
    <div class="asideBox transition" :style="{ left: showClassL ? '-386px' : '0px' }">
      <!-- 工作情况 -->
      <div class="boder-small">
        <WorkCondition />
      </div>
      <!-- 街面巡组 -->
      <div class="boder-middle">
        <StreetGroup />
      </div>
    </div>
    <div class="rightSiecle transition" :style="{ right: showClassR ? '-20px' : '370px' }" @click="showClassR = !showClassR"></div>
    <div class="asideBox transition" :style="{ right: showClassR ? '-386px' : '0px' }">
      <div class="boder-big">
        <StreetCondition />
      </div>
    </div>
    <!-- 中间统计数据 -->
    <el-tooltip :content="isShowCount ? '关闭统计' : '展示统计'" placement="top">
      <span class="Rank" @click="isShowCount = !isShowCount"><el-icon>
          <Rank />
        </el-icon></span>
    </el-tooltip>
    <div class="statisModel" :class="isShowCount ? 'showCount' : 'heddenCount'">
      <CountModel />
    </div>
    <!-- 底部按钮 -->
    <!-- <BottomBtn /> -->
    <div class="footBox">
      <ul>
        <li v-for="(item, index) in btnTatol" :key="item">
          <div class="text_total">{{ item.total }}</div>
          <div class="img_total" :class="'img_total' + index"></div>
          <div class="text_total bg_text">{{ item.text }}</div>
        </li>
      </ul>
    </div>
    <!-- 指令时间按钮 -->
    <div class="addBox transition" :style="{ right: showClassR ? '0px' : '394px' }">
      <div @click="clickXfzl" class="imgBox">
        <span>下发指令</span>
      </div>
    </div>
    <!-- 左边弹窗 -->
    <LeftDialog :isPosition="showClassL" />
    <!-- 中间边弹窗 -->
    <CenterDialog />
    <!-- 右边弹窗 -->
    <RightDialog :isPosition="showClassR" />
    <!-- 警组弹框弹框 -->
    <PoliceGroupInfo v-if="isShowJzGroup" :data="jzxqList" />
    <!-- 下发指令 -->
    <XiafaZl />
    <!-- 犯罪预测 -->
    <FzycDialog v-if="isShowFZYC" :data="fzycInfo" />
  </div>
</template>

<script setup>
import { queryListfzyc } from "@/api/dpApi/home.js";
import { getRecentDay, getThistWeekDare } from "@/utils/tools.js";
import * as MOSTY from "@/components/MyComponents/index";
import { qcckGet } from "@/api/qcckApi.js";
import emitter from "@/utils/eventBus.js";
import router from "@/router/index.js";
import { getSelectVigilant } from "@/api/dpApi/home.js";
import GdMap from "@/components/Map/GdMap/index.vue";
import Header from "./layout/header.vue";
import CheckBox from "@/components/checkBox/index";
import XiafaZl from "./components/dialog/xiafaZl.vue";
import WorkCondition from "./layout/workCondition.vue";
import StreetGroup from "./layout/streetGroup.vue";
import StreetCondition from "./layout/streetCondition.vue";
import CountModel from "./layout/statisticsModel.vue";
import LeftDialog from "./components/leftDialog.vue";
import CenterDialog from "./components/centerDialog.vue";
import RightDialog from "./components/rightDialog.vue";
import BottomBtn from "./layout/bottomBtn.vue";
import PoliceGroupInfo from "./layout/streetInfo.vue";
import FzycDialog from "./layout/fzycDialog.vue";
import { onMounted, ref, onUnmounted, watch, getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance();
const { D_BZ_SF } = proxy.$dict("D_BZ_SF");
const showVisible = ref(false)
const selectTime_yc = ref('今日') //犯罪预测时间类型
const listQuery = ref({});
const fzycTime = ref([getRecentDay(0), getRecentDay(0)]);
const circleList = ref([]);
const showClassL = ref(false); //左列折叠
const showClassR = ref(false); //右列折叠
const isShowJzGroup = ref(false) //展示警组弹窗
const isShowFZYC = ref(false) //展示犯罪预测
const jzxqList = ref({}) //警组列表详情
const fzycInfo = ref({}) //犯罪预测
const btnTatol = ref([
  {
    text: '报备统计',
    total: 0
  },
  {
    text: '盘查人员',
    total: 0
  },
  {
    text: '盘查车辆',
    total: 0
  },
  {
    text: '打卡统计',
    total: 0
  },
  {
    text: '指令统计',
    total: 0
  },
  {
    text: '需求统计',
    total: 0
  },
  {
    text: '处警统计',
    total: 0
  },
])
const timeList = ref({
  list: ['09:00-13:00', '13:00-17:00', '17:00-21:00', '21:00-01:00', '01:00-09:00'],
  hasChoose: [],
})
const isShowCount = ref(false) //是否展示统计
watch(() => showClassR.value,
  (val) => { emitter.emit("followUp", !val); }
);
onMounted(() => {
  getBtnTotal()
  window.openTk = openTk;
  // getListData();
  // 融合通迅
  let idEntityCard = window.localStorage.getItem("idEntityCard");
  let sfrh = window.localStorage.getItem("SFRH");
  if (sfrh == 1 && idEntityCard) {
    try {
      SPPUC.init(idEntityCard, "",
        function () { },
        function (device_id, type, [lng, lat, speed]) { }
      );
    } catch { }
  }
  // 展示犯罪预测
  emitter.on("showFzycInfo", (res) => {
    isShowFZYC.value = res.type ? true : false
    fzycInfo.value = res.info;
  })
  // 展示警组
  emitter.on("showJzInfo", (res) => {
    isShowJzGroup.value = res ? true : false;
    if (res) {
      res.txzb = typeof res.txzb == "string" ? JSON.parse(res.txzb) : res.txzb ? res.txzb : [];
      res.pbmj = typeof res.pbmj == "string" ? JSON.parse(res.pbmj) : res.pbmj ? res.pbmj : [];
      res.pbfj = typeof res.pbfj == "string" ? JSON.parse(res.pbfj) : res.pbfj ? res.pbfj : [];
      res.jyqx = typeof res.jyqx == "string" ? JSON.parse(res.jyqx) : res.jyqx ? res.jyqx : [];
      res.pbcl = typeof res.pbcl == "string" ? JSON.parse(res.pbcl) : res.pbcl ? res.pbcl : [];
      jzxqList.value = res;
      jzxqList.value.openJyqx = [];
    }
    if (!isShowJzGroup.value) {
      emitter.emit("deleteText"); //清除巡防区文字
      emitter.emit("deletePointArea", "xfq"); //清除巡防区
    }
  });

});

const openTk = (id) => {
  let obj = circleList.value.find((item) => { return item.id == id; });
  if (obj) emitter.emit("showAj", [obj]);
};

// 获取列表
function getListData() {
  let data = { pageSize: 1000, pageNum: 1, zdjqtjlx: "03", czzt: "0,1" };
  getSelectVigilant(data).then((res) => {
    circleList.value = res.records;
    for (let i = 0; i < res.records.length; i++) {
      const el = res.records[i];
      emitter.emit("SsCircle", el);
      let { jd, wd } = el;
      emitter.emit("addPointArea", { coords: [{ jd, wd }], icon: require("@/assets/point/sos.png"), flag: "sosPoint" });
    }
  });
}
const getBtnTotal = async () => {
  btnTatol.value[0].total = await getTotal("/mosty-qwzx/tbQwXfbb/getBbCount");
  let prInfo = await getTotal("/mosty-hczx/tbHcCount/selectRCCount")
  btnTatol.value[1].total = prInfo.bpcryCount;
  btnTatol.value[2].total = prInfo.bpcclCount;
  btnTatol.value[3].total = await getTotal("/mosty-qwzx/jlqk/xfbb/dk/selectXfbbDkCount");
  let zlInfo = await getTotal("/mosty-yjzl/tbZlxxtj/selectRgzlCount")
  btnTatol.value[4].total = zlInfo.rgzlCount;
  btnTatol.value[5].total = zlInfo.sjqzCount;
  btnTatol.value[6].total = await getTotal("/mosty-qwzx/tbQwCjbs/selectCountToday");
}
// 获取统计数量
const getTotal = (url) => {
  return new Promise(ok => {
    qcckGet({}, url).then(res => {
      ok(res);
    })
  });
}
//点击下发指令
function clickXfzl() {
  emitter.emit("closeAllDialog");
  emitter.emit("showZlxf");
}
//点击犯罪预测
function clickAddEvent() {
  showVisible.value = !showVisible.value
  if (!showVisible.value) calcelFzyc('')
}

// 犯罪预测时间选择
function changeYcTime(val) {
  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;
  }
  fzycTime.value = time
}

// 取消犯罪预测
function calcelFzyc(val) {
  // if(val) emitter.emit("deletePointArea", "zdxl_fzyc");
  fzycTime.value = [getRecentDay(0), getRecentDay(0)];
  listQuery.value.ssbmdm = '';
  listQuery.value.sfxl = '';
  listQuery.value.keyWord = '';
  selectTime_yc.value = '今日';
  showVisible.value = false
  timeList.value.hasChoose = []
}
// 选择班次
function changeDataBC(val) {
  timeList.value.hasChoose = val;
}
// 犯罪预测
function handleFzyc() {
  emitter.emit("deletePointArea", "zdxl_fzyc");
  let list = timeList.value.hasChoose.map(item => {
    return item.slice(0, 2) + item.slice(5, 8)
  })
  let params = {
    ...listQuery.value,
    bcList: list,
    kssj: fzycTime.value[0],
    jssj: fzycTime.value[1],
  }
  queryListfzyc(params).then((res) => {
    if (res.length == 0) return false;
    let cc = []
    let list = res.map((el, index) => {
      let centerPoint = [el.zxX, el.zxY]
      if (index == 0) cc = centerPoint;
      let position = [[Number(el.x1), Number(el.y1)], [Number(el.x2), Number(el.y2)]]
      let text = el.realDate + ' ' + el.bc
      let obj = { position: position, text, id: el.id, userData: el, sfxl: el.sfxl }
      return obj;
    });
    let arr1 = list.filter(v => { return v.sfxl == 1 })
    let arr2 = list.filter(v => { return v.sfxl != 1 })
    let params1 = { fontColor: '#12fdb8', coords: arr2, type: 'rectangle', flag: 'zdxl_fzyc', color: 'rgba(2,20,51,0.5)', linecolor: '#f51616' }
    let params2 = { fontColor: '#12fdb8', coords: arr1, type: 'rectangle', flag: 'zdxl_fzyc', color: 'rgba(2,20,51,0.5)', linecolor: '#1C97FF' }
    emitter.emit("echoPlane", params1);
    emitter.emit("echoPlane", params2);
    emitter.emit("setMapCenter", { location: cc, zoomLevel: 14 });
  });
}
</script>

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

// 中间统计数据
.statisModel {
  position: absolute;
  top: 100px;
  left: 50%;
  transform: translateX(-50%);
  overflow: hidden;
}

.Rank {
  left: 500px;
  position: absolute;
  z-index: 999;
  color: #010f30;
  font-size: 20px;
  top: 100px;
  left: 390px;
  cursor: pointer;
}

.showCount {
  width: 1100px;
  height: 90px;
  transition: height 1s;
  -webkit-transition: height 1s;
}

.heddenCount {
  width: 1100px;
  height: 0px;
  transition: height 1s;
  -webkit-transition: height 1s;
}

.transition {
  transition: all 0.5s;
}

.depBox {
  display: flex;
  align-items: center;
  color: #00BFFF;
  margin-bottom: 10px;
}

.addBox {
  ::v-deep .el-radio {
    width: 74px;
    margin-right: 15px;
    color: #fff;
  }
}

.footerBtns {
  margin-top: 10px;
  text-align: center;
}

::v-deep .el-input__inner {
  background-color: transparent;
  border: 1px solid #224ab5;
  color: #fff;
  margin-right: 10px;
}

::v-deep .el-range-editor .el-range-input {
  background: transparent;
  color: #fff;
}

::v-deep .el-date-editor .el-range-separator {
  color: #fff;
}

::v-deep .el-checkbox {
  color: #fff;
}

.upload_home {
  position: absolute;
  top: 10%;
  right: 21%;
}

.footBox {
  bottom: 80px !important;

  ul {
    display: flex;
    justify-content: space-between;
    align-items: center;

    li {
      text-align: center;
      border-radius: 50%;

      .text_total {
        font-size: 16px;
        font-weight: 600;
        color: #0072FF;
      }
      .bg_text{
        background-color: #2D598F;
        color: #fff;
      }
    }
  }
}

.img_total {
  height: 80px;
  width: 100px;
  margin-top: -16px;
}

.img_total0 {
  background: url('~@/assets/home/bb_total.png')no-repeat;
  background-size: 100% 100%;
}
.img_total1 {
  background: url('~@/assets/home/rc_total.png')no-repeat;
  background-size: 100% 100%;
}
.img_total2 {
  background: url('~@/assets/home/rc_total.png')no-repeat;
  background-size: 100% 100%;
}
.img_total3 {
  background: url('~@/assets/home/dk_total.png')no-repeat;
  background-size: 100% 100%;
}
.img_total4 {
  background: url('~@/assets/home/zl_total.png')no-repeat;
  background-size: 100% 100%;
}
.img_total5 {
  background: url('~@/assets/home/zl_total.png')no-repeat;
  background-size: 100% 100%;
}
.img_total6 {
  background: url('~@/assets/home/cj_total.png')no-repeat;
  background-size: 100% 100%;
}
</style>