<template>
  <div class="comom-title">
    <span class="title">重点人员动态预警</span>
  </div> 
  <div class="comom-cnt zdryBox">
    <div style="height:33px;">
     <CheckBox :data="checkData" @changeData="changeData"></CheckBox>
    </div>
    <ul class="ryBox" v-loading="loading">
      <li :class="item.isChecked ? 'active':''" v-for="item in personList" :key="item.id" >
        <YjItem :item="item"></YjItem>
      </li>
      <MOSTY.Empty :show="!loading && personList.length <= 0" :imgSize="120"></MOSTY.Empty>
    </ul>
  </div>
</template>

<script setup>
import YjItem from "@/views/home/components/yjItem.vue";
import * as MOSTY from "@/components/MyComponents/index";
import CheckBox from "@/components/checkBox/index.vue";
import { ref ,reactive} from 'vue';
const checkData = reactive({
  list: ["红", "橙", "黄", "蓝"],
  hasChoose: ["红"]
});
const loading = ref(false); // 加载中
const personList = ref([
  {
    image: require("@/assets/images/person.png"),
    name: "张三",
    gender: "男",
    similarity: 85,
    sfzh:'11010119900307121X',
    age: 25,
    mz:'汉',
    warningTime: "2025-02-15 13: 00",
    location: "林艺市八宫区天山路宫区天山路宫区天山路",
    yjjb:'10',
    yjnr:'2024-02-05 12:10:10 默默人在在某某公园持枪抢劫'
  },
  {
    image: require("@/assets/images/person.png"),
    name: "张三",
    gender: "男",
    age: 25,
    sfzh:'11010119900307121X',
    mz:'汉',
    similarity: 85,
    warningTime: "2025-02-15 13: 00",
    location: "林艺市八宫区天山路宫区天山路宫区天山路",
    yjjb:'20',
    yjnr:'2024-02-05 12:10:10 默默人在在某某公园持枪抢劫'
  },
  {
    image: require("@/assets/images/person.png"),
    name: "张三",
    gender: "男",
    age: 25,
    mz:'汉',
    sfzh:'11010119900307121X',
    similarity: 85,
    warningTime: "2025-02-15 13: 00",
    location: "林艺市八宫区天山路...",
    yjjb:'30',
    yjnr:'2024-02-05 12:10:10 默默人在在某某公园持枪抢劫'
  },
  {
    image: require("@/assets/images/person.png"),
    name: "张三",
    gender: "男",
    age: 25,
    mz:'汉',
    sfzh:'11010119900307121X',
    similarity: 85,
    warningTime: "2025-02-15 13: 00",
    location: "林艺市八宫区天山路...",
    yjjb:'40',
    yjnr:'2024-02-05 12:10:10 默默人在在某某公园持枪抢劫'
  },
]);
// 复选框切换
function changeData(){
  console.log('切换');
}


const contentItem = ref([
    {label:'线索总数',value:'892'},
    {label:'下发总数',value:'892'},
    {label:'已处置总数',value:'892'},
    {label:'反馈总数',value:'892'},
    {label:'未反馈总数',value:'892'},
    {label:'未处置总数',value:'892'},
])
</script>


<style lang="scss" scoped>
@import "@/assets/css/homeScreen.scss";
.zdryBox{
  background: #052249;
  .ryBox{
    height: calc(100% - 33px);
    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>