<template>
  <!-- 预警回顾 -->
  <div class="WarningReview">
    <div class="ListBoxHeader">
      <div class="ListBoxHeader_font">预警回顾</div>
      <div class="List_box" style="margin-bottom: 0">
        <div
          class="headcenter"
          v-for="(item, index) in ListBox"
          :key="item"
          :class="activedname == item.name ? 'activedright' : ''"
          @click="Listclick(item, index)"
        >
          {{ item.name }}
        </div>
      </div>
    </div>
    <div class="Warning_Box">
      <div class="flex flex-r button_box_list">
        <div
          class="button_box flex flex-1 flex-justcontent-center flex-align-center"
          v-for="(item, index) in munuList"
          :key="index"
          :class="[activeIndex == index ? 'activeClass' : '']"
          @click="activeIndex = index"
        >
          {{ item.name }}
        </div>
      </div>
      <div class="Warning_Echarts">
        <WarningEcharts :data="chartData1" :refresh="chartData1.refresh1" />
      </div>
    </div>
  </div>
  <!-- 监测告警 -->
  <div class="MonitoringAlarms">
    <div class="ListBoxHeader">
      <div class="ListBoxHeader_font">监测告警</div>
    </div>
  </div>
  <!-- 警情动态 -->
  <div class="PoliceSituation">
    <div class="ListBoxHeader">
      <div class="ListBoxHeader_font">警情动态</div>
    </div>
  </div>
</template>
<script setup>
import { ref, reactive, toRefs, onMounted, onBeforeUnmount } from 'vue';
import WarningEcharts from '@/views/oneMap/Echarts/WarningEcharts.vue';
const ListBox = ref([
  { name: '水雨情', value: 1 },
  { name: '险情', value: 2 },
  { name: '工情', value: 3 },
]);
const activedname = ref('水雨情');
// 点击事件
function Listclick(val) {
  activedname.value = val.name;
}

const activeIndex = ref(0);
const munuList = [
  {
    name: '管网(40)',
  },
  {
    name: '积水点(24)',
  },
  {
    name: '排口(10)',
  },
];
const chartData1 = ref({
  xAxis: ['1号点', '2号点', '3号点', '4号点', '5号点', '6号点', '7号点', '8号点', '9号点'],
  yAxis: [1.1, 1.3, 2, 1.25, 1.1, 3, 3.5, 1.3, 3.8, 1.2, 2, 1], //最高流量
  yAxis2: [0.1, 0.2, 0.3, 0.2, 0.1, 0.4, 0.5, 0.23, 0.6, 0.1, 0.2, 0.1], //最高水位
  refresh: 1,
});
</script>

<style lang="scss" scoped>
.WarningReview {
  width: 450px;
  height: 33%;
  // background: rgb(204, 184, 184);
  .Warning_Box {
    margin: 5px auto;
    width: 435px;
    height: calc(100% - 52px);
    // background: rgb(190, 28, 28);
    .button_box_list {
      width: 100%;
      height: 40px;
      // background: yellow;
      .button_box {
        height: 36px;
        background: #00344f;
        border-radius: 6px;
        font-family: Source Han Sans CN;
        font-weight: 500;
        font-size: 16px;
        color: #ffffff;
        margin-right: 9px;
        cursor: pointer;
      }
      .activeClass {
        border: 1px solid #2cfce9;
        color: #e4f5ff;
        background: #166f84;
      }
    }
    .Warning_Echarts {
      margin-top: 8px;
      height: calc(100% - 50px);
      // background: rgb(228, 223, 223);
    }
  }
}
.MonitoringAlarms {
  width: 450px;
  height: 32%;
  // background: rgb(204, 184, 184);
}
.PoliceSituation {
  width: 450px;
  height: 32%;
  //   background: rgb(204, 184, 184);
}
.ListBoxHeader {
  height: 44px;
  line-height: 50px;
  width: 98%;
  background: url('@/assets/newImgs/partBg.png') no-repeat;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 7px 0px 0px 8px;
  .ListBoxHeader_font {
    font-family: PangMenZhengDao;
    font-weight: 400;
    font-size: 23px;
    color: #ebfeff;
    padding-left: 34px;
  }
  //
  .List_box {
    width: 50%;
    margin-bottom: 8px;
    // background: red;
    color: #ffffff;
    font-size: 14px;
    display: flex;
    cursor: pointer;

    .headcenter {
      // cursor: pointer;
      width: 80px;
      height: 30px;
      background: #00344f;
      text-align: center;
      margin-right: 10px;
      line-height: 30px;
    }
    .activedright {
      border: 1px solid #2cfce9;
      color: #e4f5ff;
      background: #166f84;
    }
  }
}
</style>