<template>
  <div class="systemBox">
    <GdMap></GdMap>
    <!-- 头部筛选 -->
    <div class="topSearch">
      <el-form v-model="listQuery">
        <MOSTY.Select v-model="listQuery.sd" :dictEnum="search.xd" />
        <MOSTY.Select v-model="listQuery.zs" :dictEnum="search.zs" />
        <MOSTY.Select v-model="listQuery.qy" :dictEnum="search.qy" />
        <MOSTY.Select v-model="listQuery.dz" :dictEnum="search.dz" />
      </el-form>
      <el-button type="primary">搜索</el-button>
    </div>
     <div class="systemBox">
    <!-- 左边列表 -->
    <div class="leftList">
      <div class="hed flex just-between align center">
        <span class="f14">预警列表</span>
        <span style="color: #00b7ff" class="pointer" @click="seeMoreFn">查看更多》</span>
      </div>
      <div class="ml10 mr10 mt10">
        <el-input v-model="keyword" placeholder="姓名、证件号码搜索">
          <template #append><el-icon><Search /></el-icon></template>
        </el-input>
      </div>
      <ul class="listContent noScollLine mt10" v-infinite-scroll="loadList" style="overflow: auto" v-loading="loading">
        <!-- @click.stop="showDetail(item)" -->
        <li v-for="(item, index) in personList" :key="index" >
          <YjItem :item="item" type="yj" :dic="{D_BZ_YJCZZT}"></YjItem>
        </li>
        <MOSTY.Empty :show="!loading && personList.length <= 0"></MOSTY.Empty>
      </ul>
    </div>
    <!-- 右边模块 -->
    <div class="rightList">
      <!-- 第一部门 -->
      <div class="model-commom">
        <div class="hed flex align-center">预警处置统计</div>
        <div class="comm-cnt" v-loading="list.YjczDate.loading">
          <BarHatEcharts echartsId="qylxEcharts" :data="list.YjczDate"></BarHatEcharts>
        </div>
      </div>
      <!-- 第二部分 -->
      <div class="model-commom mt10">
        <div class="hed flex align-center">布控区域统计</div>
        <div class="comm-cnt" v-loading="list.RylxDate.loading">
          <BarHatEcharts echartsId="rylxEcharts" :data="list.RylxDate"></BarHatEcharts>
        </div>
      </div>
      <!-- 第三部分 -->
      <div class="model-commom mt10">
        <div class="hed flex align-center">感知源统计</div>
        <div class="comm-cnt" v-loading="list.GzyDate.loading">
          <BarHatEcharts echartsId="gzyEcharts" :data="list.GzyDate"></BarHatEcharts>
        </div>
      </div>
      <!-- 第四部分 -->
      <div class="model-commom mt10">
        <div class="hed flex align-center">预警等级统计</div>
        <div class="comm-cnt" v-loading="loadingyj">
          <WarningCount ref="yjjbRef"></WarningCount>
        </div>
      </div>
    </div>
  </div>
  </div>
  <Information v-model="showDialog" title="发送指令" @submit='submit'  @close='close'>
  <SemdFqzl ref="semdFqzlRef" :itemData="itemData" @handleClose="handleClose" identification="yj" :tacitly="tacitly"/>
  </Information>

  <!-- 反馈按钮 -->
  <FkDialog @change="getList"></FkDialog>

</template>

<script setup>
import FkDialog from './components/fkDialog.vue'
import * as MOSTY from "@/components/MyComponents/index";
import { qcckPost,qcckGet } from "@/api/qcckApi.js";
import GdMap from "@/components/GdMap/index.vue";
import YjItem from "./components/yjItem.vue";
import WarningCount from "./components/WarningCount.vue";
import BarHatEcharts from "@/views/home/echarts/barHatEcharts.vue";
import { onMounted, reactive, ref,getCurrentInstance } from "vue";
import { useRouter } from "vue-router";
import Information from "@/views/home/model/information.vue";
import SemdFqzl from '@/components/instructionHasBeen/sendFqzl.vue'
const { proxy } = getCurrentInstance();
const { D_BZ_YJCZZT } = proxy.$dict('D_BZ_YJCZZT')
const router = useRouter()
const listQuery = ref({});
const keyword = ref('');
const yjjbRef = ref()
const search = reactive({
  xd: [
    { label: "吸毒", value: "10" },
    { label: "贩毒", value: "20" }
  ],
  zs: [
    { label: "酒店", value: "10" },
    { label: "名宿", value: "20" }
  ],
  qy: [
    { label: "县城", value: "10" },
    { label: "市区", value: "20" }
  ],
  dz: [
    { label: "网吧", value: "10" },
    { label: "酒馆", value: "20" }
  ]
});
const loading = ref(false)
const loadingyj = ref(false)
const list = reactive({
  // 预警处置统计
  YjczDate: {
    loading:false,
    xDate: [],
    list: [],
  },
  // 布控区域统计
  RylxDate: {
    loading:false,
    xDate: [],
    list: [],
  },
  // 感知源
  GzyDate: {
    xDate: [],
    list: [],
    loading:false,
  },
})
const personList = ref([]);
const pageNum = ref(1)
const total = ref(0)
onMounted(()=>{
  getList()
  init()
})

// 触底加载
const loadList = () => {
  if( personList.value.length == total.value) return;
  pageNum.value++;
  getList()
}

const getList = () =>{
  let params = {  pageSize:10, pageNum:pageNum.value };
  loading.value = true;
  qcckPost(params,'/mosty-gsxt/tbYjxx/getPageList').then(res=>{
    loading.value = false;
    let arr = res.records || [];
    personList.value = pageNum.value == 1 ? arr : personList.value.concat(arr);
    total.value = res.total;
  }).catch(()=>{
    loading.value = false;
  })
}

const init = () =>{
  // 预警处置统计
  list.YjczDate.loading = true;
  qcckGet({},'/mosty-gsxt/tbYjxx/getYjCzztTj').then(res=>{
    list.YjczDate.loading = false;
    list.YjczDate.xDate = res.map(item=>item.zdmc);
    list.YjczDate.list = [{
      value: res.map(item=>item.count),
      color: ['rgba(0,244,255,1)', 'rgba(0,77,167,1)'],
      hatColor: '#087df9'
    }]
  })
  // 布控区域统计
  list.RylxDate.loading = true;
  qcckGet({},'/mosty-gsxt/tbGsxtBkQy/getBkQytj').then(res=>{
    list.RylxDate.loading = false;
    list.RylxDate.xDate = res.map(item=>item.qymc);
    list.RylxDate.list = [{
      value: res.map(item=>item.num),
      color: ['rgba(0,244,255,1)', 'rgba(0,77,167,1)'],
      hatColor: '#087df9'
    }]
  })

  // 感知元统计
  list.GzyDate.loading= true;
  qcckGet({},'/mosty-gsxt/tbYjxx/getGzyTj').then(res=>{
    list.GzyDate.loading = false;
    list.GzyDate.xDate = res.map(item=>item.yj_gzymc);
    list.GzyDate.list = [{
      value: res.map(item=>item.num),
      color: ['rgba(0,244,255,1)', 'rgba(0,77,167,1)'],
      hatColor: '#087df9'
    }]
  })

  // 预警级别
  loadingyj.value = true;
  qcckGet({},'/mosty-gsxt/tbYjxx/getYjxxTj').then(res=>{
    loadingyj.value = false;
    yjjbRef.value.initCharts(res)
  })
}

const seeMoreFn = () => {
  router.push('/ControlApproval')
}
const showDialog = ref(false)
const itemData=ref()
const showDetail = (item) => {
  showDialog.value = true;
  itemData.value=item
}
const handleClose = () => {
  showDialog.value = false;
}
const semdFqzlRef = ref()
const tacitly = {
    title:'yjBt',
    instructionContent:'yjNr'
}
const submit=()=>{
  semdFqzlRef.value.getsendFqzl()
}
const close = () => {
  semdFqzlRef.value.close()
}
</script>

<style lang="scss" scoped>
@import "@/assets/css/layout.scss";
@import "@/assets/css/element-plus.scss";

.systemBox {
  position: relative;
  left: -20px;
  top: 0;
  width: calc(100% + 40px);
  height: calc(100% + 20px);
  background: #e9edf6;

  .topSearch {
    position: absolute;
    top: 10px;
    right: 500px;
    width: 600px;
    height: 60px;
    display: flex;
    align-items: center;
    z-index: 9;

    .el-form {
      display: flex;

      ::v-deep .el-input__inner {
        background: rgba(0, 22, 83, 0.4);
        border: 1px solid #0072ff;
        color: #fff;
      }
    }
  }

  .leftList {
    position: absolute;
    left: 20px;
    top: 10px;
    width: 427px;
    height: calc(100% - 20px);
    border-radius: 6px 6px 6px 6px;
    background: rgba(0, 29, 75, 0.4);
    z-index: 9;

    .listContent {
      height: calc(100% - 96px);
      overflow: hidden;
      overflow-y: auto;
      padding: 10px 10px 0;
      box-sizing: border-box;
    }

    ::v-deep .el-input__inner {
      background: rgba(0, 22, 83, 0.4);
      border: 1px solid #0072ff;
    }

    ::v-deep .el-input-group__append {
      background: #0386fb;
      color: #fff;
      border: 1px solid #0072ff;
    }
  }

  .rightList {
    position: absolute;
    right: 30px;
    top: 10px;
    width: 427px;
    height: calc(100% - 20px);
    z-index: 9;

    .model-commom {
      height: calc((100% / 4) - 10px);
    }

    .comm-cnt {
      height: calc(100% - 40px);
      background: rgba(0, 29, 75, 0.6);
    }
  }


  .hed {
    height: 40px;
    line-height: 40px;
    padding-left: 10px;
    background: linear-gradient(90deg, #124cb3 0%,  rgba(18, 76, 179, 0.23) 77%,  rgba(18, 76, 179, 0) 100%);
  }
}
</style>

<style>
.el-loading-mask{
  background: rgba(0,0,0,0.5);
}
</style>
