<template>
  <div style="height:100vh">
    <GdMap />
    <div class="point-pop-alert">
      <img :src="require('../../assets/images/p1.png')" @click="onClickYjbj" alt />
      <img :src="require('../../assets/images/p2.png')" @click="functionShow = true" alt />
    </div>
    <div class="hsf">
      <van-popover v-model:show="showThemeSetting" :actions="actions" :theme="defaultThemeQp" :offset="[16, 0]"
        placement="bottom-end" @select="onSelectSeting" :teleport="isbody">
        <template #reference>
          <van-icon name="weapp-nav" color="#fff" size="22px" @click.stop="showThemeSetting = true" />
        </template>
      </van-popover>
    </div>
    <FjFunction :show="functionShow" @update:close="functionShow = false" />
    <div class="homeTotal_box">
      <TopTabs :list="zdModule" :kkid="route.query.kkid" :kkmc="route.query.kkmc" @onPcTypeShow="onPcTypeShow"
        :xzList="xzList" />
      <div class="home_box">
        <!-- 检查站 -->
        <ul class="count-box count-box-jcz" v-if="isShowModel">
          <li class="count-item-jcz">
            <div class="count-item-jcz-name">执勤时长</div>
          </li>
          <li class="count-item-jcz" v-for="(item, index) in countJczList" :key="index">
            <div class="count-item-jcz-num">
              <div class="count-item-jcz-num-left">
                <span class="num-red">{{ item.total1 }}</span> <br />
                <span class="text">{{ item.text1 }}</span>
              </div>
              <div class="count-item-jcz-num-right">
                <span class="num">{{ item.total2 }}</span> <br />
                <span class="text">{{ item.text2 }}</span>
              </div>
            </div>
            <div class="count-item-jcz-name">{{ item.title }}</div>
          </li>
        </ul>
        <!-- 巡防 -->
        <div class="count-box" v-else>
          <div class="count-item" v-for="(item, index) in countList" :key="index">
            <div class="bottom-box">
              <div class="inner-box">{{ item.title }}</div>
            </div>
            <div class="left" @click="uploadSsxz(item, 'L')">
              <div class="num1">{{ item.total1 }}</div>
              <div class="text-box">{{ item.text1 }}</div>
            </div>
            <div class="right" @click="uploadSsxz(item, 'R')">
              <div :class="item.title === '实时巡组'
                ? 'num1'
                : item.title === '指令信息'
                  ? 'num2'
                  : 'num3'
                ">
                {{ item.total2 }}
              </div>
              <div class="text-box">{{ item.text2 }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <van-dialog :show="showUserChangePicker" title="选择角色" show-cancel-button @confirm="onConfirm"
      @cancel="showUserChangePicker = false" confirmButtonColor="#3e6ee8">
      <van-radio-group v-model="isActive">
        <van-radio v-for="item in radioList" :key="item.id" :name="item.id">{{
          item.homename
        }}</van-radio>
      </van-radio-group>
    </van-dialog>
    <BottomTabs type="sy" />
    <!-- 盘人 街面巡防 -->
    <checkedPeople ref="pr" :key="pcKey + 'pr'" />
    <!-- 盘车 -->
    <checkedCar ref="pc" :key="pcKey + 'pc'" />
  </div>
</template>

<script setup>
import Axios from "axios";
import { getyjzlCount } from "../../api/checkponit.js";
import checkedCar from "../spsHome/components/checkCar.vue";
import { qcckGet } from "@/api/qcckApi.js";
import checkedPeople from "../spsHome/components/checkPeople.vue";
import {
  dateFormat,
  setUserHome,
  hintToast,
  timeValidate,
} from "../../utils/tools.js";
import TopTabs from "../../components/topTabs.vue";
import GdMap from "../../components/GdMap/index.vue";
import BottomTabs from "../../components/bottomTabs.vue";
import FjFunction from "./components/fjFunction.vue";
import { setUserDefaultModleData, getUserLzLocation } from "../../api/user.js";
import {
  getRypcList,
  getRypcCount,
  getClpcCount,
  getClpcPcList,
  getNearXz,
  queryListfzyc,
} from "../../api/common.js";
import {
  getUserSelectPage,
  selectDeck1,
  getZlsl,
  selectDeck3,
  addYjbj,
} from "../../api/gxHomeApi.js";
import emitter from "../../utils/eventBus.js";
import {
  ref,
  onMounted,
  onUnmounted,
  reactive,
  nextTick,
  onBeforeUnmount,
} from "vue";
import { useRouter, useRoute } from "vue-router";
import { Dialog } from "vant";
const route = useRoute();
const timeHour = ref(0); //小时
const timeMine = ref(0); //分钟
const timeSec = ref(0); //秒
const Loadtion = ref({
  address: "暂无地址信息",
  lng: "暂无",
  lat: "暂无",
  ly: "暂无",
});
const isShowModel = ref(false); //展示底部模块
//统计数据
const countJczList = ref([
  {
    text1: "执勤",
    text2: "接收",
    title: "预警指令",
    total1: 0,
    total2: 0,
  },
  {
    text1: "盘查",
    text2: "移交",
    title: "盘查人员",
    total1: 0,
    total2: 0,
  },
  {
    text1: "盘查",
    text2: "移交",
    title: "盘查车辆",
    total1: 0,
    total2: 0,
  },
]);

//统计数据
const countList = ref([
  {
    text1: "巡组",
    text2: "警力",
    title: "实时巡组",
    total1: 0,
    total2: 0,
  },
  {
    text1: "完成",
    text2: "执行中",
    title: "预警指令",
    total1: 0,
    total2: 0,
  },
  {
    text1: "总数",
    text2: "移交",
    title: "盘查人员",
    total1: 0,
    total2: 0,
  },
  {
    text1: "总数",
    text2: "移交",
    title: "盘查车辆",
    total1: 0,
    total2: 0,
  },
]);

function uploadSsxz(row, type) {
  switch (row.title) {
    case "实时巡组":
      router.push("/qwCenter");
      break;
    case "预警指令":
      router.push("/yyzx/zlzx/zlzxIndex");
      break;
    case "盘查人员":
      router.push("/yyzx/views/pcry");
      break;
    case "盘查车辆":
      router.push("/yyzx/views/clpc");
      break;
  }
}
let timer;
onMounted(() => {
  localStorage.removeItem('NFC')
  localStorage.removeItem('OCR')
  _getUserLocation(true); //获取当前位置
  setInterval(() => {
    _getUserLocation(false); //获取当前位置
  }, 5000);

  if (route.query.kkid) {
    isShowModel.value = true; //展示检查站
    getCountJcz(); //获取检查站预警指令统计
    getPcCountJcz(); //获取盘查统计接口
    setInterval(() => { getTimer(); }, 1000);
  } else {
    isShowModel.value = false; //展示街面巡防
    onShowFZYC(); //显示犯罪区域
    _getUserSelectPage();
    getTjdata();
    timer = setInterval(() => {
      getJmxzList();
    }, 5e3);
  }
});



//获取当前位置信息
function _getUserLocation(sfdw) {
  let { lng, lat, zbly } = getLocation();
  if (lng && lat) {
    // qcckGet({ longitude: lng, latitude: lat }, "/mosty-wzzx/gxga/locationInfo/wgs842Mercator").then(res => {
    //   emitter.emit("deletePointArea", "dw");
    //   emitter.emit("addPointArea", {
    //     coords: [{ jd: res.longitude, wd: res.latitude }],
    //     icon: require("../../assets/lz/dw.png"),
    //     flag: "dw",
    //     sfdw: sfdw,
    //     sizeX: 30,
    //     sizeY: 35
    //   });
    // })
    Loadtion.value.lng = lng;
    Loadtion.value.lat = lat;
    Loadtion.value.ly = zbly == 1 ? "GPS" : "融合";
    emitter.emit("deletePointArea", "dw");
    //地图撒点然后移动
    emitter.emit("addPointArea", {
      coords: [{ jd: lng, wd: lat }],
      icon: require("../../assets/lz/dw.png"),
      flag: "dw",
      sfdw: sfdw,
      sizeX: 30,
      sizeY: 35
    });
  } else {
    hintToast("暂无坐标信息");
  }
}

// 获取计数器
function getTimer() {
  timeSec.value++;
  if (timeSec.value >= 60) {
    timeSec.value = 1;
    timeMine.value++;
  }
  if (timeMine.value >= 60) {
    timeMine.value = 1;
    timeHour.value++;
  }
}

onUnmounted(() => {
  clearInterval(timer);
});

// 获取检查站-预警指令统计数据
function getCountJcz() {
  let params = {
    beginDate: dateFormat() + " 00:00:00",
    checkpointCode: route.query.kkid,
  };
  getyjzlCount(params).then((res) => {
    countJczList.value[0].total1 = res.completed; //执勤
    countJczList.value[0].total2 = res.received; //接收
  });
}
// 获取检查站 - 盘查 人-车-统计数据
function getPcCountJcz() {
  // 盘查人员 移交
  getRypcList({
    pageCurrent: 1,
    pageSize: 10,
    pcclJg: 2,
    kkid: route.query.kkid,
  }).then((res) => {
    countJczList.value[1].total2 = res.total;
  });
  // 盘查人员 盘查
  getRypcList({
    pageCurrent: 1,
    pageSize: 10,
    pcclJg: 9,
    kkid: route.query.kkid,
  }).then((res) => {
    countJczList.value[1].total1 = res.total;
  });
  // 盘查车辆 移交
  getClpcPcList({
    pageCurrent: 1,
    pageSize: 10,
    pcclJg: 2,
    kkid: route.query.kkid,
  }).then((res) => {
    countJczList.value[2].total2 = res.total;
  });
  // 盘查车辆  盘查
  getClpcPcList({
    pageCurrent: 1,
    pageSize: 10,
    pcclJg: 9,
    kkid: route.query.kkid,
  }).then((res) => {
    countJczList.value[2].total1 = res.total;
  });
}

// 盘查数据tab
function onPcTypeShow(type) {
  pcKey.value++;
  switch (type) {
    case "pr":
      nextTick(() => {
        pr.value.handleOpen();
      });
      break;
    case "pc":
      nextTick(() => {
        pc.value.handleOpen();
      });
      break;
  }
}

// *******************************************************
const userInfo = getStorage("userInfo");
const pcKey = ref(1);
const pr = ref(null);
const pc = ref(null);
const router = useRouter();
const isActive = ref(7); //用户选中的身份
const radioList = ref([]); //用户身份数据
const showUserChangePicker = ref(false); //用户换身份弹窗
const showThemeSetting = ref(false); //是否显示设置主题模板
const defaultThemeQp = ref("light"); //默认的右侧气泡框主题
const isbody = ref("body");
const xzList = ref([]); //巡组数据
const actions = [
  {
    text: "切换身份",
    icon: "exchange",
  },
];

const functionShow = ref(false); //是否显示点位功能区
const zdModule = ref([
  {
    bkmc: "报备",
  },
  {
    bkmc: "特殊报备",
  },
  {
    bkmc: "盘人",
  },
  {
    bkmc: "盘车",
  },
  {
    bkmc: "指令",
  },
]);

// 查询巡组并撒点
function getJmxzList(xfzt) {
  let data = {
    bbrq: timeValidate(new Date(), "ymd"),
    xfzt: "0,1,2",
    pageSize: 500,
    pageCurrent: 1,
  };
}
//点击一键报警
function onClickYjbj() {
  let { lng, lat, zbly } = getLocation();
  if (lng && lat) {
    Loadtion.value.lng = lng;
    Loadtion.value.lat = lat;
    getUserLzLocation({ lng, lat }).then((res) => {
      if (res) {
        Loadtion.value.address = res.city + res.suburb + res.town + res.village;
      }
    });
  } else {
    Loadtion.value.lng = jd;
    Loadtion.value.lat = wd;
    Loadtion.value.address = address;
  }

  Dialog.confirm({
    title: "提示",
    message: "是否一键报警?",
  })
    .then((res) => {
      addYjbj({
        jd: Loadtion.value.lng,
        wd: Loadtion.value.lat,
        sfdz: Loadtion.value.address,
      }).then((res) => { });
      hintToast("您选择了一键报警！");
    })
    .catch((err) => {
      hintToast("您取消了一键报警！");
    });
}
//获取用户首页模板
function _getUserSelectPage() {
  getUserSelectPage({
    size: 20,
    current: 1,
  }).then((res) => {
    res.records.forEach((item) => {
      radioList.value.push(item);
    });
  });
}
//选中的设置信息
function onSelectSeting(e) {
  switch (e.text) {
    case "切换身份":
      showUserChangePicker.value = true;
      break;
  }
}
//获取统计数据
function getTjdata() {
  selectDeck1({}).then((res) => {
    countList.value[0].total2 = res.jmfjsl + res.jmmjsl;
    countList.value[0].total1 = res.sjsl;
  });
  // 模块二
  getZlsl({}).then((res) => {
    if (res) {
      countList.value[1].total2 = res.all - res.wwc;
      countList.value[1].total1 = res.all;
    }
  });

  // 模块三 盘查人员
  // 移交
  // getRypcList({ pageCurrent: 1, pageSize: 10, pcclJg: 2 }).then((res) => {
  //   countList.value[2].total1 = res.total;
  // });
  // // 盘查
  // getRypcList({
  //   pageCurrent: 1,
  //   pageSize: 10,
  //   pcclJg: 9,
  // }).then((res) => {
  //   countList.value[2].total2 = res.total;
  // });

  getRypcCount({}).then((res) => {
    countList.value[2].total1 = res.All;
    countList.value[2].total2 = res.yj;
  });
  // 模块四 盘查车辆
  // 移交
  // getClpcPcList({
  //   pageCurrent: 1,
  //   pageSize: 10,
  //   pcclJg: 2,
  // }).then((res) => {
  //   countList.value[3].total1 = res.total;
  // });
  // // 盘查
  // getClpcPcList({
  //   pageCurrent: 1,
  //   pageSize: 10,
  //   pcclJg: 9,
  // }).then((res) => {
  //   countList.value[3].total2 = res.total;
  // });
  getClpcCount({}).then((res) => {
    countList.value[3].total1 = res.All;
    countList.value[3].total2 = res.yj;
  });
}
//用户选中身份
function onConfirm() {
  showUserChangePicker.value = false;
  setUserHome(isActive.value);
}
//犯罪区域撒点
function onShowFZYC() {
  emitter.emit("deletePointArea", 'fzyc')
  queryListfzyc().then((res) => {
    if (res.length == 0) return false;
    res.forEach((item, index) => {
      emitter.emit("setFzyc", { data: item, index: index, });
    });
  });
}
</script>

<style lang="scss" scoped>
@import "../../assets/styles/mixin.scss";

::v-deep .van-radio-group {
  padding: 5vw;
}

::v-deep .van-radio {
  padding: 2vw 0;
}

.homeTotal_box {
  position: absolute;
  bottom: 13.5vw;
  z-index: 20;
  background: #fff;
  width: 100%;
  border-top-left-radius: 2vw;
  border-top-right-radius: 2vw;
}

.home_box {
  padding: 1vw 3vw 3vw 3vw;
}

.point-pop-alert {
  position: absolute;
  display: flex;
  flex-direction: column;
  top: 80px;
  right: 10px;

  >img {
    width: 45px;
    height: 45px;
    margin: 2vw 0;
  }
}

.count-box {
  display: flex;
  flex-wrap: wrap;
  line-height: 3.5vh;
  justify-content: space-around;
  @include font_size($font_medium_s);

  .count-item {
    margin-top: 1vh;
    width: 47%;
    display: flex;
    margin-top: 3%;
    align-items: center;
    background-color: rgba(140, 175, 206, 0.1);
    border-radius: 1.5vw;

    .bottom-box {
      flex: 1;
      box-sizing: border-box;
      padding: 10px;
      border-right: 1px dashed rgb(172, 171, 171);
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      line-height: 2.5vh;

      .inner-box {
        width: 70%;
        text-align: center;
      }
    }

    .text-box {
      color: rgb(179, 179, 179);
    }

    .left {
      flex: 1;
      text-align: center;
      // margin-right: 4vw;
    }

    .right {
      flex: 1;
      text-align: center;
      // margin-left: 4vw;
    }

    .num1 {
      color: rgb(16, 16, 16);
      font-weight: bold;
    }

    .num2 {
      color: rgb(5, 167, 24);
      font-weight: bold;
    }

    .num3 {
      color: rgb(241, 8, 8);
      font-weight: bold;
    }

    .top {
      display: flex;
    }
  }

  // 检查站
  .count-item-jcz {
    width: calc(50% - 1px);
    text-align: center;
    color: #999;
    border-top: 1px solid #e9e9e9;

    .count-time-jcz {
      font-size: 1rem;
      color: #222;
      line-height: 12vw;
    }

    .count-item-jcz-num {
      display: flex;
      @include font_size($font_medium_s);

      .count-item-jcz-num-left {
        position: relative;
        width: 50%;
        text-align: right;
        padding: 0 3vw;
        box-sizing: border-box;
      }

      .count-item-jcz-num-right {
        width: 50%;
        text-align: left;
        padding: 0 3vw;
        box-sizing: border-box;
      }

      .count-item-jcz-num-left::after {
        content: "";
        position: absolute;
        right: 0;
        top: 10px;
        bottom: 10px;
        width: 1px;
        background: #e9e9e9;
        border-radius: 1px;
      }

      .num-red {
        color: #f00;
        font-size: 14px;
      }

      .num {
        color: #000;
        font-size: 14px;
      }
    }
  }

  .count-item-jcz:nth-child(2n + 1) {
    border-right: 1px solid #e9e9e9;
  }
}

.count-box-jcz {
  padding-top: 1vh;
  box-sizing: border-box;
}

.hsf {
  position: absolute;
  top: 20px;
  right: 18px;
}
</style>
