<template>
  <div class="topIconBox">
    <template v-for="item in props.list" : :key="item.id">
      <div v-if="item.bkmc == '报备'" @click="clickNav()">
        <img src="../assets/images/leader/top_bb.png" /><br />{{isBb ? "已报备" : "报备打卡" }}
      </div>
      <div v-if="item.bkmc == '特殊报备'" @click="clickTsbb()">
        <img src="../assets/images/leader/top_bb.png" /><br />特殊报备
      </div>
      <div v-if="item.bkmc == '指令'" @click="onClickZl()">
        <img src="../assets/images/leader/top_zl.png" /><br />指令
      </div>
      <div v-if="item.bkmc == '盘人'" @click="clickPc('pr')">
        <img src="../assets/images/menu-yyhc.png" /><br />盘人
      </div>
      <div v-if="item.bkmc == '盘车'" @click="clickPc('pc')">
        <img src="../assets/images/menu-clhc.png" /><br />盘车
      </div>
    </template>
  </div>
</template>
<script setup>
import emitter from "../utils/eventBus.js";
import { getXfqListById,getKfdListById } from "../api/xfbbAndZbbb.js";
import { getMybbTodayNew } from "../api/common";
import { ContactList } from "vant";
import { ref, reactive, onMounted, defineEmits,onUnmounted } from "vue";
import { useRouter } from "vue-router";
import { getItem } from "../utils/storage";
const router = useRouter();
const props = defineProps({
  list: Array, //展示数据
  pcType: Object, //盘查类型,
  kkid: String,
  kkmc: String,
  xzList: Array, //巡组数据，如果有巡组数据  显示已报备
});
const emit = defineEmits(["onPcTypeShow"]);
const userInfo = ref({});
const userInfoAs = getItem("userInfo");
const isBb = ref(false); //报备数据
const bbxx = ref({}); //报备数据
onMounted(() => {
  _getBbInfo();
  try {
    userInfo.value = JSON.parse(bridge.getLocation());
  } catch (error) {}
});

//获取用户的报备信息
function _getBbInfo() {
  emitter.emit("deletePointArea", "kfd");
  emitter.emit("deletePointArea", "kfdArea");
  getMybbTodayNew().then((res) => {
    bbxx.value = res;
    if (res) {
      userInfoAs.bbId = res.id;
      userInfoAs.jzId = res.jzId;
      userInfoAs.jzMc = res.jzMc;
       if (res.xffwlx == 1) {
         let ids = res.xffwid.split(',')
         ids.forEach(item => {
            _getXfqList(item,'xfq') //巡防区
         });
       
      } else if (res.xffwlx == 2) {
        _getKfdList(res.xffwid,'kfd')
      } else if (res.xffwlx == 3) {
        _getKfdList(res.xffwid,'jcz')
      }
      localStorage.setItem('GET_BBINFO',JSON.stringify(res))
      setStorage("userInfo", JSON.stringify(userInfoAs));
    }else{
      window.localStorage.removeItem('GET_BBINFO')
    }
    isBb.value = res ? true : false;
  });
}

// 巡防区
function _getXfqList(id) {
  getXfqListById(id).then((res) => {
    let list = res.pgis ? res.pgis : []
    let arrString = list.join(',')
    emitter.emit("polygonFigure", { coords: [arrString], flag:'kfdArea', color: '#ff0000'});
  });
}
//获取快反点数据
function _getKfdList(id,type) {
  getKfdListById(id).then((res) => {
    if(type == 'kfd'){
      let yfz = res.yfzfw ? res.yfzfw : []
      emitter.emit("polygonFigure", { coords: [yfz.join(',')], flag:'kfdArea', color: '#ff0000',opacity:0.5});
      let sfz = res.yfzfw ? res.sfzfw : []
      emitter.emit("polygonFigure", { coords: [sfz.join(',')], flag:'kfdArea', color: '#fdae2e',opacity:0.3});
      let wfz = res.yfzfw ? res.wfzfw : []
      emitter.emit("polygonFigure", { coords: [wfz.join(',')], flag:'kfdArea', color: '#0066ff',opacity:0.1});
    }else{
      let icon = require("@/assets/pointIcon/kfd.png")
      emitter.emit("addPointArea", { coords: [res], flag:'kfd', icon: icon});
    }
  });
}

//代办任务
function onClickDbrw() {
  router.replace("/rw");
}
//今日勤务
function onClickJrqw() {
  router.push("/qwCenter");
}
//今日预警
function onClickJryj() {
  router.push("/jqfx");
}
function onClickTz() {
  let user = JSON.parse(window.localStorage.getItem("userInfo"));
  try {
    bridge.to3RdPage(
      `sjzh/index.html?idCard=${user.idEntityCard}&page=orderList`
    );
  } catch (error) {}
}
function onClickZl() {
  if (props.kkid) {
    router.push({ path: "/lmjHome/zlJcz", query: { kkid: props.kkid } });
  } else {
    router.push("/yyzx/zlzx/zlzxIndex");
    // try {
    //   bridge.to3RdPage(
    //     `sjzh/index.html?idCard=${userInfo.value.app_sfzh}&page=orderList`
    //   );
    // } catch (error) {}
  }
}
//点击盘车人员与车辆
function clickPc(type) {
  emit("onPcTypeShow", type);
}
//跳转页面
function clickNav() {
  if (bbxx.value && bbxx.value.bblx == "02") {
    router.push("/yyzx/xfbb/addtsXfbb");
  } else {
    router.push("/yyzx/xfbb/addXfbb");
  }
}
// 特殊报备
function clickTsbb(){
  router.push("/yyzx/xfbb/addtsXfbb");
}
</script>

<style lang="scss" scoped>
@import "../assets/styles/mixin.scss";
.topIconBox {
  display: flex;
  justify-content: space-around;
  padding: 2vw 4vw;
  position: relative;
  @include font_color($font-color-theme);
  margin: 3vw 3.5vw 0vw 3.5vw;
  border-radius: 2.5vw;
  @include bg_color($background-color-theme);
  @include border_outer_color($border-outer-color-theme);
}

.topIconBox > div {
  text-align: center;
  font-size: 3.06667vw;
  line-height: 5vw;
  width: 15vw;
  position: relative;
}

.topIconBox > div .numb {
  position: absolute;
  height: 4.54vw;
  line-height: 4.54vw;
  padding: 0 1.5vw;
  font-size: 3.2vw;
  display: block;
  background: #f85452;
  border-radius: 2.27vw;
  left: 10vw;
  top: -1vw;
}

.topIconBox > div img {
  width: 11.46667vw;
}
</style>
