<template>
  <div class="boxContent">
    <!-- 警情推送提示 -->
    <audio ref="audioRef">
      <source :src="src" />
    </audio>
    <div class="box-title box-jmqk">
      <span>街面情况</span>
      <el-tooltip class="media" effect="dark" :content="isPlay ? '关闭警情推送提示音' : '打开警情推送提示音'" placement="top-start">
        <el-switch v-model="isPlay" inline-prompt style="--el-switch-on-color:#13ce66;--el-switch-off-color:#ff4949"
          active-text="开" @change="changeSwitch" inactive-text="关">
        </el-switch>
      </el-tooltip>

    </div>
    <div class="boxInfo">
      <div class="buttonBox">
        <img src="@/assets/my/up.png" />
        <span class="btnsItem" :class="isActive == item ? 'isActiveBg' : ''" @click="changeDate(item)"
          v-for="item in btns" :key="item">{{ item }}</span>
      </div>
      <div class="choose_Box" v-show="isActive == '预警'">
        <el-radio-group v-model="radioyj">
          <el-radio v-for="item in radioList1" :key="item" :label="item" @change="changeData">{{ item }}</el-radio>
        </el-radio-group>
      </div>
      <div class="choose_Box" v-show="isActive == '警情'">
        <div class="SxBox">
          <el-radio-group v-model="radio">
            <el-radio v-for="item in radioList" :key="item" :label="item" @change="changeDataJQ">{{ item }}</el-radio>
          </el-radio-group>
          <el-popover placement="left" :visible="visible" width="460px">
            <template #reference>
              <el-icon @click="openSearch" title="筛选">
                <Grid />
              </el-icon>
            </template>
            <div class="detail_cnt_box">
              <el-form :model="listQuery" :inline="true" label-width="80px">
                <el-form-item label="报警时间" style="width:100%;">
                  <el-date-picker v-model="listQuery.bjsj" type="datetimerange" range-separator="至"
                    start-placeholder="开始日期" end-placeholder="结束日期" value-format="YYYY-M-D HH:mm:ss"
                    format="YYYY-M-D HH:mm:ss" @change="handelTime" />
                </el-form-item>
                <el-form-item label="报警内容" style="width:100%;">
                  <el-input v-model="listQuery.bjnr" placeholder="请输入报警内容"></el-input>
                </el-form-item>
                <el-form-item label="报警人" style="width:100%;">
                  <el-input v-model="listQuery.bjrXm" placeholder="请输入报警人"></el-input>
                </el-form-item>
                <div class="footBtm">
                  <el-button @click="handleFilter"> 查询 </el-button>
                  <el-button @click="reset"> 重置 </el-button>
                </div>
              </el-form>
            </div>
          </el-popover>
        </div>
        <div class="SxBox">
          <el-radio-group v-model="colors">
            <el-radio v-for="item in colorList" :key="item" :label="item"
              @change="changeDataJQColor">{{ item }}</el-radio>
          </el-radio-group>
        </div>
      </div>

      <ul class="cntBox" :class="isActive == '预警' ? 'cntBox-yj' : isActive == '警情' ? 'cntBox-jq' : ''"
        v-loading="loading" ref="jmxzScroll">
        <li class="cntBox-item" v-for="item in dataList" :key="item.id">
          <!-- 指令 -->
          <ZlItem v-if="isActive == '指令' || isActive == '需求'" :data="item" @lookDetail="lookDetail" :dic="{ zlzt: D_BZ_ZXZTAI }" />
          <!-- 指引 -->
          <ZlItem v-if="isActive == '指引'" :data="item" @lookDetail="lookDetail" :dic="{ zlzt: D_BZ_ZXZTAI }" />
        </li>
        <el-empty description="没有数据" :image-size="0.1" v-if="!loading && dataList.length <= 0" />
      </ul>
    </div>
  </div>
</template>

<script setup>
import CheckBox from "@/components/checkBox/index";
import people from "@/assets/images/peo.png";
import emitter from "@/utils/eventBus.js";
import { qcckPost, qcckGet, qcckPut } from "@/api/qcckApi.js";
import { getSelectVigilant, getSelectVigilantList, getSelectInstructList } from "@/api/dpApi/home.js";
import JqItm from "../components/jqIem.vue";
import YjItem from "../components/yjItem.vue";
import ZlItem from "../components/zlItem.vue";
import { onMounted, reactive, ref, getCurrentInstance, onBeforeUnmount } from "vue";
const { proxy } = getCurrentInstance();
const { D_BZ_ZXZTAI, D_BZ_CZZT } = proxy.$dict("D_BZ_ZXZTAI", "D_BZ_CZZT");
const jmxzScroll = ref(null);
const btns = reactive(["指令","需求"]);
const isActive = ref("指令");
const dataList = ref([]);
const loading = ref(false);
const total = ref(0);
const pageNum = ref(1)
const src = require("@/assets/sound.wav")
const listQuery = ref({ bjsj: '' })
const changeItemPoint = ref({})
const visible = ref(false)
const isPlay = ref(true)
const radio = ref('全部')
const radioList = ref(['全部', "特巡警", "交通警情", "其他"])
const radioyj = ref('全部')
const radioList1 = ref(['全部', "视觉", "融合", "在逃", '侵财'])
const colorList = ref(['全部', "红", "橙", "黄", '蓝'])
const colors = ref('全部');
const zlly=ref('01,02,03,04,05,06,07,08,09');
const audioRef = ref()
const timer = ref(null)
onMounted(() => {
  // _getSelectVigilant();//警情
  _getSelectInstructList();
  scroll();
  emitter.on("coordString", (res) => {
    if (res.type === "point") {
      changeItemPoint.value.jd = res.coord[0];
      changeItemPoint.value.wd = res.coord[1];
      proxy.$confirm("确定要修改点位吗？", "警告", { type: "warning" }).then(() => {
        qcckPut(changeItemPoint.value, "/mosty-sjzx/tbJq").then((res) => {
          proxy.$message({ type: "success", message: "修改成功" });
          emitter.emit("removePlot", "PIOT");
          emitter.emit("deletePointArea", "jq");
          dataList.value = dataList.value.map(v => {
            if (v.id == changeItemPoint.value.id) v = changeItemPoint.value
            return v
          })
        });
      }).catch(() => {
        proxy.$message.info("已取消");
        emitter.emit("deletePointArea", "jq");
        emitter.emit("removePlot", "PIOT");
      });
    }
  });
  emitter.on('socketJQ', (val) => {
    if (isActive.value == '警情') dataList.value.unshift(val);
    // 警情推送播放
    let count = 0
    if (isPlay.value && val.color == '1') {
      audioRef.value.play();
      timer.value = setInterval(() => {
        if (count < 2) audioRef.value.play();
        count++
      }, 0.2e3);
      if (count > 2) { clearInterval(timer.value); }
    }
  })
})

// change播放
function changeSwitch(val) {
  isPlay.value = val
  if (!val) clearInterval(timer.value);
}

// 打开警情搜索
function openSearch() {
  if (!visible.value) listQuery.value = { bjsj: '' }
  if (isActive.value == '警情') visible.value = !visible.value;
}

// 模拟数据
function handleModel() {
  qcckGet({}, '/mosty-other/lzJq/ysJq').then(res => { })
}

// 时间处理
function handelTime(val) {
  listQuery.value.startTime = val ? val[0] : ''
  listQuery.value.endTime = val ? val[1] : ''
}
// 搜索
function handleFilter() {
  pageNum.value = 1
  _getSelectVigilant();//警情
}
// 重置
function reset() {
  listQuery.value = { bjsj: '' };
  visible.value = false;
  _getSelectVigilant();//警情
}

// 警情切换经纬度
function changePoint(val) {
  changeItemPoint.value = JSON.parse(JSON.stringify(val));
}
// 切换数据
function changeDate(val) {
  visible.value = false;
  isActive.value = val;
  pageNum.value = 1;
  emitter.emit("deletePointArea", "yj");
  emitter.emit("deletePointArea", "jq");
  emitter.emit("deletePointArea", "zl");
  emitter.emit("closeAllDialog");
  dataList.value = []; //清空列表
  total.value = 0; // 总数
  listQuery.value = { bjsj: '' };
  getList(val);
}
// 根据不同类型掉接口
function getList(val) {
  switch (val) {
    case "警情":
      _getSelectVigilant();
      break;
    case "预警":
      _getSelectVigilantList();
      break;
    case "指令":
    case "指引":
    case "需求":
      if(val=='指令'){
        zlly.value='01,02,03,04,05,06,07,08,09'
      }else if(val=='需求'){
        zlly.value='10'
      }
      _getSelectInstructList();
      break;
  }
}



// 警情类型
function changeDataJQ(val) {
  pageNum.value = 1;
  dataList.value = [];
  colors.value = '全部';
  _getSelectVigilant();//警情
}

// 警情颜色
function changeDataJQColor(val) {
  pageNum.value = 1;
  dataList.value = [];
  _getSelectVigilant();//警情
}
//获取警情数据列表
function _getSelectVigilant() {
  loading.value = true;
  let data = { pageSize: 10, pageNum: pageNum.value, ...listQuery.value };
  delete data.bjsj;
  switch (radio.value) {
    case '交通警情':
      data.type = '01';
      break;
    case '特巡警':
      data.type = '02';
      break;
    case '其他':
      data.type = '03';
      break;
    case '重大':
      data.sfzdjq = 1;
      break;
    case '街面':
      data.sfjmjq = 1;
      break;
  }
  switch (colors.value) {
    case '红':
      data.color = '1';
      break;
    case '橙':
      data.color = '2';
      break;
    case '黄':
      data.color = '3';
      break;
    case '蓝':
      data.color = '4';
      break;
  }
  getSelectVigilant(data).then((res) => {
    let arr = res.records ? res.records : [];
    handleDate(arr, res.total);
  }).catch(() => {
    loading.value = false;
  });
}

// 预警类型
function changeData(val) {
  pageNum.value = 1;
  emitter.emit("removePlot", "PIOT");
  _getSelectVigilantList()
}

//获取预警数据列表
function _getSelectVigilantList() {
  loading.value = true;
  let data = { pageSize: 10, pageNum: pageNum.value };
  switch (radioyj.value) {
    case '视觉':
      data.yjlyids = '01'
      break;
    case '融合':
      data.yjlyids = '02'
      break;
    case '在逃':
      data.bqfl = '01'
      break;
    case '侵财':
      data.bqfl = '02'
      break;
  }
  getSelectVigilantList(data).then((res) => {
    let arr = res.records ? res.records : [];
    arr.forEach((item) => {
      item.bqlist = item.yjlyBqmc ? item.yjlyBqmc.split(",") : [];
    });
    handleDate(arr, res.total);
  }).catch(() => {
    loading.value = false;
  });
}
//获取指令数据列表 
function _getSelectInstructList() {
  loading.value = true;
  let data = { pageSize: 10, pageNum: pageNum.value,zlly:zlly.value };
  if (isActive.value == '指引') data.zlxflx = 3
  getSelectInstructList(data).then((res) => {
    let arr = res.records ? res.records : [];
    handleDate(arr, res.total);
  })
    .catch(() => {
      loading.value = false;
    });
}
// 获取接口返回的数据
function handleDate(arr, all) {
  loading.value = false;
  dataList.value = pageNum.value == 1 ? arr : dataList.value.concat(arr);
  total.value = all;
}

// 查看详情
function lookDetail(item) {
  emitter.emit("closeAllDialog");
  emitter.emit("closeVideo");
  emitter.emit("deletePointArea", 'jq');
  emitter.emit("deletePointArea", 'yj');
  emitter.emit("deletePointArea", 'zl');
  emitter.emit("removePlot", "PIOT");
  switch (isActive.value) {
    case "警情":
      _setPointsAndShowModle(item, 'jq', "showAj", 0.8);
      break;
    case "预警":
      _setPointsAndShowModle(item, 'yj', "showYjxq");
      break;
    case "指令":
    case "需求":
    case "指引":
      _setPointsAndShowModle(item, "zl", "showYjzl");
      break;
  }
}

///显示详情及撒点
const _setPointsAndShowModle = (item, flag, modle, scale) => {
  console.log(item, flag, modle, scale,'item, flag, modle, scale');
  if (item.jd && item.wd) {
    emitter.emit("addPoint", { coords: [item], icon: require(`@/assets/point/${flag}.png`), flag, scale });
    emitter.emit("setMapCenter", { location: [item.jd, item.wd], zoomLevel: 15 });
  }
  emitter.emit(modle, [item]);
};

//触底加载
function scroll() {
  let scrollTargetBox = jmxzScroll.value;
  scrollTargetBox.onscroll = (e) => {
    var scrollHeight = scrollTargetBox.scrollHeight; //251
    var scrollTop = scrollTargetBox.scrollTop; //0-18
    var clientHeight = scrollTargetBox.clientHeight; //233
    if (scrollHeight - clientHeight == scrollTop) {
      //滚动条滚到最底部
      if (dataList.value.length < total.value) {
        pageNum.value++;
        console.log(isActive.value,'isActive.value')
        getList(isActive.value); //根据不同类型掉接口
      }
    }
  };
}
</script>
<style lang="scss" scoped>
@import "@/assets/css/homeScreen.scss";

.boxInfo {
  .buttonBox {
    display: flex;
    align-items: center;

    .btnsItem {
      display: inline-block;
      width: 110px;
      height: 43px;
      text-align: center;
      line-height: 43px;
      background: url("~@/assets/my/btn.png") no-repeat;
      background-size: 110px 43px;
    }

    .isActiveBg {
      width: 110px;
      height: 43px;
      background: url("~@/assets/my/btnActive.png") no-repeat;
      background-size: 110px 43px;
    }
  }

  .cntBox {
    height: calc(100% - 48px);
    padding-top: 10px;
    box-sizing: border-box;
    overflow: hidden;
    overflow-y: auto;
  }

  .cntBox-yj {
    height: calc(100% - 73px);
  }

  .cntBox-jq {
    height: calc(100% - 100px);
  }
}

::v-deep .el-loading-mask {
  background: rgba(0, 0, 0, .3);
}

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

::v-deep .el-checkbox__input.is-checked+.el-checkbox__label {
  color: yellow;
}

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

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

::v-deep .el-checkbox {
  margin-right: 14px;
}

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

.footBtm {
  text-align: center;
}

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

.box-jmqk {
  display: flex;
  justify-content: space-between;
  align-items: center;

  .media {
    font-size: 12px;
    text-shadow: none;
  }
}

.SxBox {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>