<template>
  <div class="comom-title">
    <span class="title">态势研判预警</span>
  </div>
  <div class="comom-cnt zdryBox">
    <ul class="ryBox" v-loading="loading" v-infinite-scroll="loadList" style="overflow: auto">
      <li v-for="item in personList" :key="item.id" @click="onClickPush(item)">
        <Assessment :item="item" :dict="{D_SG_TSYPGZ}" :lx="1"/>
      </li>
      <MOSTY.Empty :show="!loading && personList.length <= 0" :imgSize="100"></MOSTY.Empty>
    </ul>
  </div>
</template>

<script setup>
import emitter from "@/utils/eventBus.js";
import { qcckPost } from "@/api/qcckApi.js";
import Assessment from "@/views/home/components/assessmentItem.vue";
import * as MOSTY from "@/components/MyComponents/index";
import CheckBox from "@/components/checkBox/index.vue";
import { ref, reactive, onMounted, getCurrentInstance } from 'vue';
import {useRouter} from 'vue-router'
const { proxy } = getCurrentInstance();
const {D_SG_TSYPGZ} =proxy.$dict('D_SG_TSYPGZ')
const router = useRouter()
const total = ref(0);
const pageNum = ref(1);
const loading = ref(false); // 加载中
const personList = ref([]);
onMounted(()=>{
  getList()
})


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

const getList = () =>{
  let data = {  pageSize:10, pageCurrent:pageNum.value };
  loading.value = true;
  qcckPost(data,'/mosty-gsxt/tsyp/selectPage').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 onClickPush = (val) => {
  router.push({ path: '/tsypHome', query: { id: val.id } })
}

</script>

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

<style lang="scss" scoped>
@import "@/assets/css/homeScreen.scss";
.zdryBox{
  background: #052249;
  height: 100%;
  .ryBox{
    height: 100%;
    overflow: hidden;
    overflow-y: auto;
  }
}

::-webkit-scrollbar {
  background-color: #263b70;
}
::-webkit-scrollbar-thumb {
  background-color: #146bbe;
}
::-webkit-scrollbar-track {
  background-color: #263b70;
}
::-webkit-scrollbar-corner {
  background-color: #142141;
}

::v-deep .el-checkbox__label{
  color:#fff;
}
::v-deep .el-checkbox__input.is-checked+.el-checkbox__label{
  color:#00FFFF;
}
::v-deep .el-checkbox__inner{
  background:rgba(0,144,255,0.2);
  border:1px solid #0072FF;
}
::v-deep .el-checkbox__input.is-checked .el-checkbox__inner{
  background-color: #00FFFF;
  border-color:#00FFFF;
}
::v-deep .el-checkbox__input.is-indeterminate .el-checkbox__inner{
  background-color: #00FFFF;
  border-color:#00FFFF;
}
::v-deep .el-checkbox__inner::after{
  border:2px solid #000;
  border-left:0;
  border-top:0;
  left:3px;
  top:0px;
}
::v-deep .el-checkbox__input.is-indeterminate .el-checkbox__inner::before{
  background: #000;
}

</style>
