<template>
  <div class="footBox">
    <ul class="btnsBox">
      <li class="btnsItem" v-for="(item, index) in footBtnImg" :key="index" @click="chooseIcon(item)">
        <img :src="item.isChecked ? item.iconActive : item.icon" :title="item.title" style="max-width:66px" />
        <div class="resourceBox" v-if="item.hastc">
          <div class="contant" :class="item.type == 'across' ? 'contantAcross' : ''">
            <!-- 公安资源 -->
            <div style="width: 274px;" v-if="item.title == '公安资源'">
              <div class="name">公安资源</div>
              <CheckBox ref="refGazy" :data="resource.checkGazy" @changeData="changeDataGazy"></CheckBox>
              <div class="popover" v-show="isShowPopover">
                <el-tag effect="dark" v-for="it in D_BZ_BMYWLX" :type="it.inChecek ? 'pramary' : 'info'"
                  @click="chooseTag(it)" :key="it.value">
                  {{ it.label }}
                </el-tag>
              </div>
            </div>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template> 

<script setup>
import CheckBox from "@/components/checkBox/index";
import emitter from "@/utils/eventBus.js";
import { ElMessage } from "element-plus";
import { dateFormat } from "@/utils/auth.js";
import { getRecentDay } from "@/utils/tools.js";
import { qcckPost, qcckGet } from "@/api/qcckApi.js";
import { ref, defineEmits, onMounted, getCurrentInstance, onUnmounted, watch } from "vue";
import { getGazyPointList, } from "@/api/dpApi/home.js";
const { proxy } = getCurrentInstance();
const { D_BZ_BMYWLX, JQLB_DP } = proxy.$dict("D_BZ_BMYWLX", "JQLB_DP");
const emit = defineEmits(["myClick"]);
const isShowPopover = ref(false)
const fzycTime = ref([getRecentDay(0), getRecentDay(0)]);
const jqLx = ref({
  list: [],
  hasChoose: [],
})
const isShowKeyBox = ref(false)
const gzymc = ref('')
const keyList = ref([])
const loading = ref(false)

watch(() => JQLB_DP, val => {
  jqLx.value.list = val.value.map(item => { return item.label })
  let arr = ['打架斗殴', '侵财(两抢一盗)']
  jqLx.value.list = jqLx.value.list.concat(arr)
}, { deep: true })
watch(() => gzymc.value, val => {
  if (val == '') isShowKeyBox.value = false
}, { deep: true })

const footBtnImg = ref([
  {
    hastc: true,
    isChecked: false,
    iconActive: require('@/assets/my/icon-gazy-active.png'),
    icon: require("@/assets/my/icon-gazy.png"),
    title: "公安资源",
    type: 'vertical'
  },
  {
    hastc: false,
    iconActive: require("@/assets/my/icon-clearn.png"),
    icon: require("@/assets/my/icon-clearn.png"),
    title: "清除",
    type: 'vertical'
  }
]);

let resource = ref({
  checkGazy: {
    list: ["公安局", "派出所", "警务站", '巡防区', '快反点', '重点防控点'],
    hasChoose: []
  },
})


const selectTime = ref("今日"); //选择的时间类型
const tcType = ref([]); //警情图层类型
const sjzyTime = ref([
  dateFormat(new Date(), "YY-MM-DD"),
  dateFormat(new Date(), "YY-MM-DD")
]);
const selectTimeYj = ref("今日"); //选择的时间类型
const tcYjType = ref([]); //预警图层类型
const fzycFlag = ref(false);
const sjzyTimeYj = ref([
  dateFormat(new Date(), "YY-MM-DD"),
  dateFormat(new Date(), "YY-MM-DD")
]);
const isSd = ref(true); //是否随动
const selectCircleDistance = ref("");

const isSelected = ref(false);
onMounted(() => {
  emitter.emit("getCoordinatePoint", "PIO");
  window.openTExt = openTExt;
  isSelected.value = false;
  emitter.on("followUp", (res) => { isSd.value = res; });
});


const cancelJl = ref([])
const cancelJl1 = ref([])

// 获取范围中心的
function getCenterPoint(dm, text, id) {
  qcckPost(dm, '/mosty-base/other/getZxd').then(res => {
    let points = [res.x, res.y]
    emitter.emit("addTEXT", { points, text, id });
  })
}

// 高亮巡防区域
function openTExt(id) {
  qcckGet({}, '/mosty-jcgl/tbJcglXfqy/selectById?id=' + id).then(res => {
    if (!res) return false
    let ddat = { arr: res.pgis, flag: 'xfqJS', color: '#b9332e', opacity: 0.6, isclear: true }
    handleArr(ddat)
  })
}

// 判断是否选择按钮
function chooseIcon(item) {
  switch (item.title) {
    case "清除":
      clearAll()
      break;
    case "设备位置":
      item.isChecked = !item.isChecked;
      emitter.emit("deletePointArea", "sbwz_car");
      emitter.emit("deletePointArea", "sbwz_sb");
      if (item.isChecked) showSbList()
      break;
  }
}


//一键清除
function clearAll() {
  calesrnSP()
  emitter.emit("deletePointArea", "zdxl_fzyc");
  emitter.emit("deletePointArea", "xfq");
  emitter.emit("bd_closeOverlay", true);
  emitter.emit("closeAllDialog");
  emitter.emit("deletePointArea", "xfqJS"); //清除巡防区高亮
  emitter.emit("removePlot", 'quan'); //移除绘制工具
  emitter.emit("clearThermodynamicChart", 'yjMap'); //清除热力图
  emitter.emit("clearThermodynamicChart", 'jqMap'); //清除热力图
  emitter.emit("clearmakerSqure");
  emitter.emit("drawLineAnimation", 'route');
  emitter.emit("deletePointArea", 'yuan');
  emitter.emit("deletePointArea", "centerpoint");
  emitter.emit("removeEara", 'quan');
  emitter.emit("deletePointArea", "sbwz_car");
  emitter.emit("deletePointArea", "sbwz_sb");
  emitter.emit("deletePointArea", "ohterline");
  emitter.emit("deletePointArea", "gapTextTitle");
  emitter.emit("deletePointArea", "gapline");
  selectTime.value = "今日";
  selectTimeYj.value = "今日";
  gzymc.value = ''
  sjzyTime.value = [getRecentDay(0), getRecentDay(0)];
  sjzyTimeYj.value = [getRecentDay(0), getRecentDay(0)];
  tcType.value = [];
  tcYjType.value = [];
  isShowPopover.value = false
  resource.value.checkGazy.hasChoose = [];
  cancelJl1.value = []
  cancelJl.value = []
  jqLx.value.hasChoose = [];
  keyList.value = [];
  gzymc.value = '';
  selectCircleDistance.value = ''
  D_BZ_BMYWLX.value.forEach(v => { v.inChecek = false })
  footBtnImg.value.forEach(v => { v.isChecked = false })
  isShoePolice([])
}

function calesrnSP() {
  emitter.emit("deletePointArea", "sp");
  emitter.emit("deletePointArea", "kk");
  emitter.emit("deletePointArea", "jqMap");
  emitter.emit("deletePointArea", "yjMap");
}

// 选择公安资源
function changeDataGazy(val) {
  footBtnImg.value[2].isChecked = val.length > 0 ? true : false //公安资源是否选中
  let arr = JSON.parse(JSON.stringify(resource.value.checkGazy.hasChoose))
  val.forEach(item => { if (!arr.includes(item)) showGazyMarker(item) })
  resource.value.checkGazy.hasChoose = val //缓存选中的值
  isShowPopover.value = val.includes('巡防区') ? true : false //巡访区的选项弹窗（目前是单选）
  if (!val.includes('公安局')) emitter.emit("deletePointArea", "gaj"); //清除公安局
  if (!val.includes('派出所')) emitter.emit("deletePointArea", "pcs"); //清除派出所
  if (!val.includes('警务站')) emitter.emit("deletePointArea", "jwz"); //清除警务站
  if (!val.includes('重点防控点')) emitter.emit("deletePointArea", "zdfkd"); //清除重点防控点
  if (!val.includes('巡防区')) {
    emitter.emit("deletePointArea", "xfq"); //清除巡防区
    emitter.emit("deletePointArea", "ohterline");
    emitter.emit("deletePointArea", "gapline");
    emitter.emit("deletePointArea", "gapTextTitle");
  }
  if (!val.includes('快反点')) {
    emitter.emit("deletePointArea", "kfd");//清除快反点
    emitter.emit("deletePointArea", "kfdArea");
  }
}


function chooseTag(item) {
  D_BZ_BMYWLX.value.forEach(v => { if (v.label != item.label) v.inChecek = false })
  emitter.emit("deletePointArea", "xfq");
  emitter.emit("deleteText");
  item.inChecek = !item.inChecek;
  if (item.inChecek) {
    showGazyMarker('巡防区', item.dm)
  } else {
    showGazyMarker('巡防区')
  }
}

// 显示公安资源信息
function showGazyMarker(val, dm) {
  if (val == "公安局") {
    let data = { ysdl: "001", yszl: "001001", ysxl: "001001003" };
    getGazyPointList(data).then((res) => {
      let arr = res.records ? res.records : [];
      let icon = require("@/assets/point/gaj.png");
      handlePoint(arr, icon, "gaj");
    });
  } else if (val == "派出所") {
    let data = { ysdl: "001", yszl: "001001", ysxl: "001001004" };
    getGazyPointList(data).then((res) => {
      let arr = res.records ? res.records : [];
      let icon = require("@/assets/point/pcs.png");
      handlePoint(arr, icon, "pcs");
    });
  } else if (val == "警务站") {
    let data = { ysdl: "001", yszl: "001001", ysxl: "001001007" };
    getGazyPointList(data).then((res) => {
      let arr = res.records ? res.records : [];
      let icon = require("@/assets/point/jwz.png");
      emitter.emit("showPoint", { coords: arr, icon, flag: 'jwz' });
    });
  } else if (val == "快反点") {
    let data = { ysdl: "001", yszl: "001001", ysxl: "001001008" };
    getGazyPointList(data).then((res) => {
      if (res) {
        let icon = require("@/assets/point/f.png")
        emitter.emit("showPoint", { coords: res.records, icon, flag: 'kfd' });
      } else {
        ElMessage({ message: "暂无快反点数据", type: "warning" });
      }
    });
  } else if (val == "重点防控点") {
    let data = { ysdl: "001", yszl: "001001", ysxl: "001001011" };
    getGazyPointList(data).then((res) => {
      let arr = res.records ? res.records : [];
      let icon = require("@/assets/point/kfd.png");
      handlePoint(arr, icon, "zdfkd");
    });
  } else if (val == "巡防区") {
    let data = { ysdl: "001", yszl: "001001", ysxl: "001001006" };
    if (dm) data.bz = dm
    getGazyPointList(data).then((res) => {
      if (res) {
        let color = { stops: [], property: 'FID', }
        let linecolor = { stops: [] }
        let arrs = res.records.map((item, idx) => {
          let ys = changeColor(item.color, 0.4)
          linecolor.stops.push(ys.replace(0.4, 1))
          color.stops.push([idx + 1, ys])
          let obj = { position: [item.dtm], FID: idx + 1, text: item.gajgmc, id: item.id }
          if (item.dtm) return obj;
        })
        let params = { coords: arrs, type: 'polygon', flag: 'xfq', color }
        emitter.emit("echoPlane", params);
      } else {
        ElMessage({ message: "暂无巡防区数据", type: "warning" });
      }
    });
  }
}
// 颜色转换成rgba格式
function changeColor(hex, opacity) {
  return 'rgba(' + parseInt('0x' + hex.slice(1, 3)) + ',' + parseInt('0x' + hex.slice(3, 5)) + ',' + parseInt('0x' + hex.slice(5, 7)) + ',' + opacity + ')'
}



// 处理撒点
function handlePoint(arr, icon, flag, scale) {
  let list = arr.filter((item) => { return item.jd && item.wd; });
  if (list.length > 0) emitter.emit("addPoint", { coords: list, icon: icon, flag: flag, scale });
}
// 处理1-3-5数据
function handleArr(obj) {
  let brr = [];
  let crr = [];
  obj.arr.forEach((val1) => { brr.push(...val1); });
  let str = brr.toString();
  crr.push(str);
  let params = { coords: crr, flag: obj.flag, color: obj.color, opacity: obj.opacity, isclear: obj.isclear || false }
  emitter.emit("polygonFigure", params);
}

onUnmounted(() => {
  emitter.off("followUp");
  emitter.off("getCoord");
  emitter.off("getcentercoord");
  emitter.off("coordString");
  emitter.off("showGazy");
});
</script>

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

.search_gzy_box {
  position: relative;

  .search_key_outBox {
    width: 100%;
    bottom: 52px;
    position: absolute;

    .search_key {
      width: 100%;
      padding: 10px;
      background: #041f6e;
      border-radius: 4px;
      max-height: 60vh;
      overflow: hidden;
      overflow-y: auto;

      .key_item {
        line-height: 30px;
        border-bottom: 1px solid #565656;
        padding-left: 10px;
      }

      .key_item:hover {
        background: #0d4a62;
        color: #12d2b0;
      }
    }
  }

  .search_key_outBox::after {
    // position:absolute;
    // content:'';
    // width:0;
    // height:0;
    // bottom:-20px;
    // left:50%;
    // transform: tanslateX(-50%);
    // border:10px solid;
    // border-color:#041f6e transparent transparent  transparent;
  }
}

.depBox {
  display: flex;
  align-items: center;
  padding-left: 20px;
  color: #00BFFF;
}

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

::v-deep .el-range-editor.el-input__inner {
  width: 100%;
}

::v-deep .el-radio-group {
  width: 100%;
  // padding-left:20px;

}

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

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

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

::v-deep .el-checkbox__input.is-checked+.el-checkbox__label {
  color: #01E9ED;
}

::v-deep .el-checkbox__input.is-checked .el-checkbox__inner {
  background-color: #01E9ED;
  border-color: #01E9ED;
}

::v-deep .el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color: #01E9ED;
  border-color: #01E9ED;
}

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

::v-deep .el-input-group__append {
  background-color: transparent;
  border: none;
  padding: 0 12px;
}

.jqTimeBox {
  ::v-deep .el-date-range-picker {
    width: 500px;
  }

  ::v-deep .el-input__inner {
    color: #000;
  }

  ::v-deep .el-time-panel {
    left: -52px;
  }
}
</style>
