<template>
  <div class="systemBox">
    <GdMap></GdMap>
    <!-- 头部筛选 -->
    <div class="topSearch">
      <el-form v-model="listQuery">
        <!-- <MOSTY.Department clearable width="400px" v-model="listQuery.ssbmdm" /> -->
        <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="leftList">
      <div class="hed flex just-between align center">
        <span class="f14">布控列表</span>
        <span style="color: #00b7ff" class="pointer">查看更多》</span>
      </div>
      <div class="ml10 mr10 mt10">
        <el-input v-model="searchForm.keyword" placeholder="姓名、证件号码搜索">
          <template #append><el-icon><Search /></el-icon ></template>
        </el-input>
      </div>
      <ul class="listContent noScollLine mt10">
        <li v-for="(item, index) in personList" :key="index">
          <YjItem :item="item"></YjItem>
        </li>
      </ul>
    </div>
    <!-- 右边模块 -->
    <div class="rightList">
      <!-- 第一部门 -->
      <div class="model-commom">
        <div class="hed flex align-center">区域统计</div>
        <div class="comm-cnt">
          <BarHatEcharts echartsId="qylxEcharts" :data="list.QylxDate"></BarHatEcharts>
        </div>
      </div>
      <!-- 第二部分 -->
      <div class="model-commom mt10">
        <div class="hed flex align-center">人员类型统计</div>
        <div class="comm-cnt">
          <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">
          <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">
          <WarningCount></WarningCount>
        </div>
      </div>
    </div>

    <!-- 底部按钮 -->
    <ul class="footBox">
      <li class="footItem" v-for="it in btn.footBtn" :key="it"> {{ it }} </li>
    </ul>
  </div>
</template>

<script setup>
import GdMap from "@/components/GdMap/index.vue";
import * as MOSTY from "@/components/MyComponents/index";
import YjItem from "./components/yjItem.vue";
import WarningCount from "./components/WarningCount.vue";
import BarHatEcharts from "@/views/home/echarts/barHatEcharts.vue";
import { reactive, ref } from "vue";
const listQuery = ref({
  keyword: ""
});

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 searchForm = ref({
  keyword: ""
});
const list = reactive({
  GzyDate: {
    xDate: ['巴宜区', '工布江达县', '波密县', '朗县', '墨脱县', '察隅县', '米林县'],
    list:[
      { name: "总数", value: [10,20,30,40,50,60,70] ,color:['rgba(0,244,255,1)','rgba(0,77,167,1)'] ,hatColor:'#087df9'},
      { name: "已处置", value: [10,20,30,40,50,60,70],color:['rgba(24, 232, 229, 1)','rgba(3, 110, 83, 1)'],hatColor:'#00FFFF'  },
    ],
  },
  RylxDate: {
    xDate: ['类型1', '类型2', '类型3', '类型4', '类型5', '类型6'],
    list:[
      { name: "总数", value: [10,20,30,40,50,60] ,color:['rgba(0,244,255,1)','rgba(0,77,167,1)'] ,hatColor:'#087df9'},
      { name: "已处置", value: [10,20,30,40,50,60],color:['rgba(24, 232, 229, 1)','rgba(3, 110, 83, 1)'],hatColor:'#00FFFF'  },
    ],
  },
  QylxDate: {
    xDate: ['区域1', '区域2', '区域3', '区域4', '区域5', '区域6'],
    list:[
      { name: "总数", value: [10,20,30,40,50,60] ,color:['rgba(0,244,255,1)','rgba(0,77,167,1)'] ,hatColor:'#087df9'},
      { name: "已处置", value: [10,20,30,40,50,60],color:['rgba(24, 232, 229, 1)','rgba(3, 110, 83, 1)'],hatColor:'#00FFFF'  },
    ],
  },
})
const personList = ref([
  {
    name: "张三",
    idCard: "330102199001011234",
    gender: "男",
    sspcs: "xxx上城区派出所",
    address: "xxxx上城区",
    yjjb: "10",
    yjbq: "吸贩毒",
    yy: "2023-01-01 12:00:00"
  },
  {
    name: "张三",
    idCard: "330102199001011234",
    gender: "男",
    sspcs: "xxx上城区派出所",
    address: "xxxx上城区",
    yjjb: "40",
    yjbq: "吸贩毒",
    yy: "2023-01-01 12:00:00"
  },
  {
    name: "张三",
    idCard: "330102199001011234",
    gender: "男",
    sspcs: "xxx上城区派出所",
    address: "xxxx上城区",
    yjjb: "20",
    yjbq: "吸贩毒",
    yy: "2023-01-01 12:00:00"
  },
  {
    name: "张三",
    idCard: "330102199001011234",
    gender: "男",
    sspcs: "xxx上城区派出所",
    address: "xxxx上城区",
    yjjb: "30",
    yjbq: "吸贩毒",
    yy: "2023-01-01 12:00:00"
  }
]);
const btn = reactive({
  bkBtn: ["布控人员", "布控群体"],
  yrBtn: ["人员身份标签统计", "人员行为标签统计"],
  footBtn:['预警','布控']
});
const active = ref("布控人员");
const active1 = ref("人员身份标签统计");
</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: 10px;
    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);
    }
  }
  .footBox{
    position: absolute;
    left: 50%;
    bottom: 10px;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    z-index: 9;
    .footItem{
      width: 195px;
      height: 42px;
      text-align: center;
      line-height: 42px;
      margin: 0 10px;
      background-image: linear-gradient( 95deg,#0072ff 0%,  #0072ff 100%);
      transform: skew(-20deg);
      font-size: 16px;
      border-radius: 4px;
      &:nth-child(2){
        background-image: linear-gradient( 95deg,#FFA800 0%,  #FFA800 100%);
      }
    }
  }
  .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>
