<template>
  <!-- 预警回顾 -->
  <div class="WarningReview">
    <div class="ListBoxHeader">
      <div class="ListBoxHeader_font">预警回顾</div>
      <div class="ListBoxHeader_Sel">
        <div class="tabs flex">
          <div
            class="tabItem"
            v-for="(item, index) in ListBox"
            :key="item"
            :class="{ active: activedname === item.name }"
            @click="Listclick(item, index)"
          >
            {{ item.name }}
          </div>
        </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 class="csyld">
      <div class="tabs flex flex-justcontent-spacebetween">
        <div class="tabItem">指标报警(28个)</div>
        <div class="tabItem">故障报警(2个)</div>
        <div class="tabItem">泵站告警(10个)</div>
      </div>
      <div class="table_content">
        <div class="tableHeader">
          <span class="tableHeaderList tableList1">告警信息</span>
          <span class="tableHeaderList tableList2">监测水位</span>
          <span class="tableHeaderList tableList3">设防阈值</span>
          <span class="tableHeaderList tableList4">告警时间</span>
        </div>

        <Vue3SeamlessScroll :list="FXJCData" :singleHeight="34" :singleWaitTime="1500" :hover="true" class="tableBody">
          <div class="tableBodyList" v-for="item in FXJCData">
            <span class="tableBodyList_span1">{{ item.zb }}</span>
            <span class="tableBodyList_span2"> {{ item.zt }}m</span>
            <span class="tableBodyList_span3">{{ item.szzt }}m</span>
            <span class="tableBodyList_span4">
              {{ item.sz }}
            </span>
          </div>
        </Vue3SeamlessScroll>
      </div>
    </div>
  </div>
  <!-- 警情动态 -->
  <div class="PoliceSituation">
    <div class="ListBoxHeader">
      <div class="ListBoxHeader_font">警情动态</div>
      <div class="ListBoxHeader_Sel">
        <div class="tabs flex">
          <div
            class="tabItem"
            v-for="(item, index) in ListBoxJq"
            :key="item"
            :class="{ active: activedJq === item.name }"
            @click="ListclickJq(item, index)"
          >
            {{ item.name }}
          </div>
        </div>
      </div>
    </div>
    <div class="PoliceLisy"></div>
  </div>
</template>
<script setup>
import { ref, reactive, toRefs, onMounted, onBeforeUnmount } from 'vue';
import WarningEcharts from '@/views/oneMap/Echarts/WarningEcharts.vue';
import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
const ListBox = ref([
  { name: '水雨情', value: 1 },
  { name: '险情', value: 2 },
  { name: '工情', value: 3 },
]);
const ListBoxJq = ref([
  { name: '值守上报', value: 1 },
  { name: '公众电话', value: 2 },
]);
const activedname = ref('水雨情');
const activedJq = ref('值守上报');

// 点击事件
function Listclick(val) {
  console.log(val, 'val');
  activedname.value = val.name;
}

function ListclickJq(val) {
  console.log(val, 'val');
  activedJq.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,
});
const FXJCData = ref([
  {
    zb: '乐天大街管网',
    sz: '04-15 14:23:12',
    szzt: 5,
    zt: 6.5,
  },
  {
    zb: '乐天大街管网',
    sz: '04-15 14:23:13',
    szzt: 5,
    zt: 6.5,
  },
  {
    zb: '乐天大街管网',
    sz: '04-15 14:23:14',
    szzt: 5,
    zt: 6.5,
  },
  {
    zb: '乐天大街管网',
    sz: '04-15 14:23:15',
    szzt: 5,
    zt: 6.5,
  },
  {
    zb: '乐天大街管网',
    sz: '04-15 14:23:16',
    szzt: 5,
    zt: 6.5,
  },
  {
    zb: '乐天大街管网',
    sz: '04-15 14:23:17',
    szzt: 5,
    zt: 6.5,
  },
]);
</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% - 60px);
    // background: rgb(190, 28, 28);
    .button_box_list {
      width: 100%;
      height: 40px;
      background: url('@/assets/images/fhpl/bj_img.png') no-repeat;
      background-size: 100% 100%;
      margin-top: 10px;
      padding: 0 10px;
      .button_box {
        position: relative;
        left: 5px;
        top: 2px;
        height: 36px;
        width: 120px;
        // 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 {
        background: url('@/assets/images/fhpl/Select_img.png') no-repeat;
        background-size: 100% 100%;
        // background: red;
        color: #fdffff;
      }
    }
    .Warning_Echarts {
      margin-top: 8px;
      height: calc(100% - 50px);
      // background: rgb(228, 223, 223);
    }
  }
}
.MonitoringAlarms {
  width: 450px;
  height: 32%;
  // background: rgb(199, 28, 28);
  .csyld {
    margin: 5px auto;
    width: 430px;
    height: calc(100% - 55px);
    // background: rgb(204, 184, 184);
    .tabs {
      height: 36px;
      color: #fff;
      margin-bottom: 5px;
      // background: red;
      .tabItem {
        width: 135px;
        line-height: 36px;
        height: 100%;
        border-radius: 6px;
        text-align: center;
        cursor: pointer;
        // border: 1px solid;
        &:nth-of-type(1) {
          background: linear-gradient(0deg, #8e1e1e 0%, #420606 100%);
          border-image: linear-gradient(0deg, #fd4d62, #ac241a) 10 10;
        }
        &:nth-of-type(2) {
          background: linear-gradient(0deg, #f1b500 0%, #331e02 100%);

          border-image: linear-gradient(0deg, #ffb61a, #f5a100) 10 10;
        }
        &:nth-of-type(3) {
          background: linear-gradient(0deg, #0e91d5 0%, #0d1b32 100%);
          border-image: linear-gradient(0deg, #00fcff, #0f6dc1) 10 10;
        }
      }
    }
    .table_content {
      width: 430px;
      height: calc(100% - 43px);

      .tableHeader {
        width: 100%;
        height: 34px;
        background: linear-gradient(0deg, #00fbffa3 0%, #00fbff00 100%);
        border-radius: 2px;
        border: 1px solid #74dde1;
        display: flex;

        .tableHeaderList {
          font-family: Source Han Sans CN;
          font-weight: 400;
          font-size: 14px;
          color: #ffffff;
          height: 34px;
          line-height: 34px;
          // padding-left: 5px;
          // text-align: center;
        }
        .tableList1 {
          width: 30%;
          // text-align: center;
          padding-left: 10px;
        }
        .tableList2 {
          width: 20%;
          text-align: center;
        }
        .tableList3 {
          width: 20%;
          text-align: center;
        }
        .tableList4 {
          width: 30%;
          text-align: center;
        }
      }
      .tableBody {
        width: 100%;
        height: calc(100% - 35px);
        overflow: hidden;
        .tableBodyList {
          height: 34px;
          line-height: 34px;
          width: 100%;
          display: flex;
          /* 选择偶数行 */
          &:nth-child(even) {
            background: linear-gradient(0deg, #008599 0%, #08596d 100%);
          }

          .tableBodyList_span1 {
            font-family: Source Han Sans CN;
            font-weight: 400;
            font-size: 14px;
            color: #ffffff;
            height: 34px;
            line-height: 34px;
            width: 30%;
            padding-left: 10px;
          }
          .tableBodyList_span2 {
            font-family: Source Han Sans CN;
            font-weight: 400;
            font-size: 14px;
            color: #ffffff;
            height: 34px;
            line-height: 34px;
            text-align: center;
            width: 20%;
          }
          .tableBodyList_span3 {
            font-family: Source Han Sans CN;
            font-weight: 400;
            font-size: 14px;
            color: #ffffff;
            height: 34px;
            line-height: 34px;
            text-align: center;
            width: 20%;
          }
          .YJClass {
            color: #ffe243;
          }
          .tableBodyList_span4 {
            font-family: Source Han Sans CN;
            font-weight: 400;
            font-size: 14px;
            color: #ffffff;
            height: 34px;
            line-height: 43px;
            text-align: center;
            width: 30%;
            // background: red;
            // cursor: pointer;
          }
        }
      }
    }
  }
}
.PoliceSituation {
  width: 450px;
  height: 32%;
  .PoliceLisy {
    margin: 5px auto;
    width: 430px;
    height: calc(100% - 55px);
    background: url('@/assets/images/fhpl/normsadal.png') no-repeat;
    background-size: 100% 100%;
  }
}
.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;
  }
  .ListBoxHeader_Sel {
    height: 30px;
  }
  .tabs {
    .tabItem {
      position: relative;
      right: 20px;
      line-height: 30px;
      width: 60px;
      height: 30px;
      background: #00344f;
      margin-left: 10px;
      font-size: 14px;
      color: #ffffff;
      text-align: center;
      cursor: pointer;

      &.active {
        border: 1px solid #2cfce9;
        color: #e4f5ff;
        background: #166f84;
      }
    }
  }
}
</style>