<template>
  <van-popup v-model:show="props.show" round style="width: 95%" @click-overlay="onClickOverlay">
    <div style="padding: 3vw">
      <div class="other_type_title">附近力量</div>
      <div class="function_box">
        <div @click="onClickFjll(item)" v-for="item in points.fjllList" :key="item" class="function_item">
          <img :src="item.imgUrl" alt="" :class="{ imgBack: item.checked }" />
          <div class="function_title">{{ item.title }}</div>
        </div>
      </div>
      <div class="other_type_title">附近资源</div>
      <div class="function_box">
        <div @click="onClickFjzy(item)" v-for="item in points.fjzyList" :key="item" class="function_item">
          <img :src="item.imgUrl" alt="" :class="{ imgBack: item.checked }" />
          <div class="function_title">{{ item.title }}</div>
        </div>
      </div>
      <div class="other_type_title">附近场所</div>
      <div class="function_box">
        <div @click="onClickFjcs(item)" v-for="item in points.fjcsList" :key="item" class="function_item">
          <img :src="item.imgUrl" alt="" :class="{ imgBack: item.checked }" />
          <div class="function_title">{{ item.title }}</div>
        </div>
      </div>
    </div>
  </van-popup>
</template>
<script setup>
import { timeValidate} from "@/utils/tools.js";
import emitter from "@/utils/eventBus.js";
import { serviceHttp } from '@/api/serviceHttp.js'
import { getDictList, setDict } from "@/utils/dict";
import { defineProps, ref, reactive, defineEmits } from "vue";
const { JQLB_DP , D_BZ_BMYWLX} = getDictList( "JQLB_DP" ,"D_BZ_BMYWLX");
const props = defineProps({
  show:{
    type:Boolean,
    default:false
  }
})
const emits = defineEmits(["update:close"]);
//点位功能
const points = reactive({
  //附近力量
  fjllList: [
    {
      imgUrl: require("../../../assets/lz/xz.png"),
      title: "巡组",
      checked: false,
    },
    {
      imgUrl: require("../../../assets/lz/jwz.png"),
      title: "警务站",
      checked: false,
    },
    {
      imgUrl: require("../../../assets/lz/kfd.png"),
      title: "快反点",
      checked: false,
    },
  ],
  //附近资源
  fjzyList: [
    {
      imgUrl: require("../../../assets/lz/sp.png"),
      title: "视频",
      checked: false,
    },
    {
      imgUrl: require("../../../assets/lz/jtkk.png"),
      title: "交通卡口",
      checked: false,
    },
    {
      imgUrl: require("../../../assets/lz/zl.png"),
      title: "指令",
      checked: false,
    },
    {
      imgUrl: require("../../../assets/lz/jq.png"),
      title: "警情",
      checked: false,
    },
    {
      imgUrl: require("../../../assets/lz/jq.png"),
      title: "战果",
      checked: false,
    },
  ],
  //附近场所
  fjcsList: [
    {
      imgUrl: require("../../../assets/lz/ld.png"),
      title: "旅店",
      checked: false,
    },
    {
      imgUrl: require("../../../assets/lz/wb.png"),
      title: "网吧",
      checked: false,
    },
    {
      imgUrl: require("../../../assets/lz/dzjg.png"),
      title: "党政机关",
      checked: false,
    },
  ],
});
//点击遮罩层
function onClickOverlay() {
  emits("update:close", false);
}
//点击附近力量
function onClickFjll(item) {
  item.checked = !item.checked;
  points.fjllList.forEach(item=>{
    if(item.checked && item.title == '巡组') handleGroup();
    if(!item.checked && item.title == '巡组') emitter.emit("deletePointZBAll"); 
    if(item.checked && item.title == '警务站') getPoints('jwz');
    if(!item.checked && item.title == '警务站') emitter.emit("deletePoint", "jwz");
    if(item.checked && item.title == '快反点') getPoints('kfd');
    if(!item.checked && item.title == '快反点') emitter.emit("deletePoint", "kfd");
  })
}

// 获取巡组信息
const handleGroup = () => {
  let pramas = { xfzt:' 0,1,2', qwlx: '01,02,03', pageSize: 500, pageCurrent: 1 }
  serviceHttp.get(pramas,'/mosty-qwzx/tbQwXfbb/selectDeckList').then(res=>{
    let arr = res.records ? res.records : [];
    let brrSd = arr.filter((v) => { return v.jd && v.wd; });
    let pramas = { coords: brrSd,undel:true, icon: '', flag: "rx" }
    emitter.emit("addPointTakeTittle", pramas);
  })
}

// 处理警务站 - 快返回点
const getPoints = (type) =>{
  let data = {ysdl: "001", yszl: "001001"}
  let icon = ''
  switch(type){
    case 'jwz':
      data.ysxl = "001001007";
      icon = require("@/assets/pointIcon/jwz.png");
      break;
    case 'kfd':
      data.ysxl = "001001008";
      icon = require("@/assets/pointIcon/f.png");
      break;
  }
  serviceHttp.post(data,'/mosty-yszx/tbYsGajg/getList').then(res=>{
    let arr = res.records ? res.records : [];
    handlePoint(arr, icon, type);
  })
}

// 处理撒点
const handlePoint = (arr,icon,flag,scale) =>{
  let list = arr.filter((item) => { return item.jd && item.wd;  });
  emitter.emit("addPoint", { coords: list, icon: icon, flag: flag ,scale });
}
//点击附近资源
const onClickFjzy = (item) => {
  item.checked = !item.checked;
  points.fjzyList.forEach(item=>{
    if(item.checked && item.title == '指令') handleZl();
    if(!item.checked && item.title == '指令') emitter.emit("deletePoint", "yjMap");
    if(item.checked && item.title == '警情') handleJQ();
    if(!item.checked && item.title == '警情') emitter.emit("deletePoint", "jqMap");
  })
}

// 处理指令
const handleZl = () =>{
  let params = { startTime: timeValidate(new Date(), "ymd"),  endTime: timeValidate(new Date(), "ymd")};
  serviceHttp.get(params,'/mosty-yjzl/tbYjxx/getList').then(res=>{
    let arr = res ? res : [];
    let icon = require("@/assets/pointIcon/icon-zl.png")
    handlePoint(arr, icon, 'yjMap',1.2);
  })
}

// 处理警情
const handleJQ = () =>{
  let jqlb = JQLB_DP.value.map(item => {return item.value})
  let params = { 
    startTime: timeValidate(new Date(), "ymd"),  
    endTime: timeValidate(new Date(), "ymd"),
    bjlbs:jqlb.join(','),
    mylb:'1,2'
  };
  serviceHttp.get(params,'/mosty-sjzx/tbJq/getList').then(res=>{
    let arr = res ? res : [];
    let icon = require("@/assets/pointIcon/jqIcon.png")
    handlePoint(arr, icon, 'jqMap',1.2);
  })
}

//点击附近场所
function onClickFjcs(item) {
  item.checked = !item.checked;
}
</script>
<style lang="scss" scoped>
@import "../../../assets/styles/mixin.scss";
.function_box {
  @include font_size($font_medium_s);
  display: flex;
  flex-wrap: wrap;
  .function_item {
    text-align: center;
    width: 25%;
    padding: 3vw 0;
    .function_title {
      margin-top: 1vw;
    }
    > img {
      background: #3e6ee8;
      width: 25px;
      height: 25px;
      border-radius: 50%;
      padding: 2.5vw;
    }
    .imgBack {
      background: orange;
    }
  }
}
</style>