<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" v-if="activedname == '水雨情'">
      <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 class="Warning_Box_tp" v-if="activedname == '险情'">
      <yhhsqEch :data="YhList" :refresh="ryRefresh3" />
    </div>

    <div class="Warning_Box_gq" v-if="activedname == '工情'">
      <div class="flex flex-justcontent-spacebetween">
        <div class="drcpl">
          <div class="percent" style="width: 70%">
            <div class="round"></div>
            <div class="text">当日抽排量</div>
            <div class="value">878.9m³</div>
          </div>
        </div>
        <div class="percentVal flex-1">70%</div>
      </div>
      <div class="info flex flex-justcontent-spacebetween">
        <div class="flex">
          <div class="circle"></div>
          <div>累计抽排量</div>
          <div class="value">108.9</div>
          <div>万m³</div>
        </div>
        <div class="flex">
          <div class="circle"></div>
          <div>前水池水位</div>
          <div class="value">8.9</div>
          <div>m</div>
        </div>
      </div>
      <div class="StationList flex flex-justcontent-start">
        <div class="item" v-for="item in list" :key="item.name">
          <div class="img">
            <img :src="bengzhanyunxing" alt="" v-if="item.status == 1" />
            <img :src="bengzhantingzhi" alt="" v-else />
          </div>
          <div class="name">{{ item.name }}</div>
        </div>
      </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">管网报警(8个)</div>
        <div class="tabItem">积水报警(2个)</div>
        <div class="tabItem">排口告警(1个)</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 }}</span>
            <span class="tableBodyList_span3">{{ item.szzt }}</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 class="jqtabs flex flex-justcontent-spacebetween">
        <div
          class="tabItem flex"
          v-for="(item, index) in jqdtList"
          :key="index"
          :class="{ active: jqdtname === item.name }"
          @click="jqdtclick(item, index)"
        >
          <div class="tabItem_one">
            <span class="ycl">
              <img :src="item.Imgurl" class="upImg" />
            </span>
            <span style="margin-left: 5px">{{ item.name }}</span>
          </div>
          <div
            class="tabItem_two"
            :style="{
              color: item.value == 30 ? '#00F294FF' : item.value == 9 ? '#00E7FCFF' : '#FFC30EFF',
            }"
          >
            {{ item.value }}
          </div>
        </div>
      </div>
      <div class="problem">
        <div class="problemItem" v-for="item in problemList">
          <div class="problemOne flex flex-align-center flex-justcontent-center">
            <div>{{ item.num }}</div>
          </div>
          <div class="problemText">
            <div class="problemTextTop">
              <div class="problemContent">{{ item.remark }}</div>
              <div class="problemContent">{{ item.address }}</div>
              <div class="problemContent">{{ item.person }} {{ item.phone }}</div>
            </div>
            <div class="problemTextBottom">
              <div class="problemContent">上报：{{ item.startTime }}</div>
              <div class="problemContent">截止：{{ item.endTime }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, reactive, toRefs, onMounted, onBeforeUnmount } from 'vue';
import yhhsqEch from '@/views/oneMap/floodPrevention/yhhsqEch.vue';
import WarningEcharts from '@/views/oneMap/Echarts/WarningEcharts.vue';
import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
import bengzhantingzhi from '@/assets/images/fhpl/bengzhantingzhi.png';
import bengzhanyunxing from '@/assets/images/fhpl/bengzhanyunxing.png';

import clz from '@/assets/images/fhpl/clz.png'; //
import wcl from '@/assets/images/fhpl/wcl.png'; //
import ycl from '@/assets/images/fhpl/ycl.png'; //
const YhList = ref({});
const ryRefresh3 = ref('');
const list = [
  {
    name: '1#泵',
    status: 1,
  },
  {
    name: '2#泵',
    status: 0,
  },
  {
    name: '3#泵',
    status: 0,
  },

  {
    name: '4#泵',
    status: 1,
  },
];
const problemList = ref([
  {
    remark: '雨水箅子堵塞',
    address: '王家坪路',
    person: '陈先生',
    phone: '13700210026',
    startTime: '2024-10-17 10:13:43',
    endTime: '2024-10-19 10:13:43',
    num: '01',
  },
  {
    remark: '道路积水',
    address: '百米大道',
    person: '刘先生',
    phone: '15991561185',
    startTime: '2024-10-17 10:13:43',
    endTime: '2024-10-19 10:13:43',
    num: '02',
  },
  {
    remark: '雨水箅子堵塞',
    address: '凤凰广场',
    person: '张小姐',
    phone: '15191105280',
    startTime: '2024-10-17 10:13:43',
    endTime: '2024-10-19 10:13:43',
    num: '03',
  },
  {
    remark: '雨水井盖丢失',
    address: '百合花园',
    person: '黄先生',
    phone: '13638648812',
    startTime: '2024-10-17 13:24:41',
    endTime: '2024-10-17 13:24:41',
    num: '04',
  },
]);
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('值守上报');
const jqdtname = ref('已处理');

const jqdtList = ref([
  { name: '已处理', value: 4, Imgurl: ycl },
  { name: '未处理', value: 1, Imgurl: wcl },
  { name: '处理中', value: 3, Imgurl: clz },
]);

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

function jqdtclick(val) {
  jqdtname.value = val.name;
  if (jqdtname.value == '已处理') {
    problemList.value = [
      {
        remark: '雨水箅子堵塞',
        address: '王家坪路',
        person: '陈先生',
        phone: '13700210026',
        startTime: '2024-10-17 10:13:43',
        endTime: '2024-10-19 10:13:43',
        num: '01',
      },
      {
        remark: '道路积水',
        address: '百米大道',
        person: '刘先生',
        phone: '15991561185',
        startTime: '2024-10-17 10:13:43',
        endTime: '2024-10-19 10:13:43',
        num: '02',
      },
      {
        remark: '雨水箅子堵塞',
        address: '凤凰广场',
        person: '张小姐',
        phone: '15191105280',
        startTime: '2024-10-17 10:13:43',
        endTime: '2024-10-19 10:13:43',
        num: '03',
      },
      {
        remark: '雨水井盖丢失',
        address: '百合花园',
        person: '黄先生',
        phone: '13638648812',
        startTime: '2024-10-17 13:24:41',
        endTime: '2024-10-17 13:24:41',
        num: '04',
      },
    ];
  } else if (jqdtname.value == '未处理') {
    problemList.value = [
      {
        remark: '水域不洁',
        address: '延河彩虹桥处',
        person: '鲁先生',
        phone: '15592914583',
        startTime: '2024-10-17 14:24:41',
        endTime: '2024-10-19 14:24:41',
        num: '01',
      },
    ];
  } else {
    problemList.value = [
      {
        remark: '排水管道堵塞',
        address: '大砭沟与北大街',
        person: '张先生',
        phone: '18391128539',
        startTime: '2024-10-17 14:24:48',
        endTime: '2024-10-17 14:24:48',
        num: '01',
      },
      {
        remark: '雨水箅子堵塞',
        address: '大砭沟与北大街',
        person: '张先生',
        phone: '18391128539',
        startTime: '2024-10-17 14:24:48',
        endTime: '2024-10-17 14:24:48',
        num: '02',
      },
      {
        remark: '排水管道堵塞',
        address: '百米大道',
        person: '陈女生',
        phone: '13700210026',
        startTime: '2024-10-19 14:43:15',
        endTime: '2024-10-19 14:43:15',
        num: '03',
      },
    ];
  }
}

function ListclickJq(val) {
  activedJq.value = val.name;
}

const activeIndex = ref(0);
const munuList = [
  {
    name: '管网(29)',
  },
  {
    name: '积水点(16)',
  },
  {
    name: '排口(24)',
  },
];
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: '300mm',
    zt: '水深:450mm',
  },
  {
    zb: '二道街管网',
    sz: '04-15 14:23:13',
    szzt: '300mm',
    zt: '水深:345mm',
  },
  {
    zb: '王家坪旧址门口',
    sz: '04-15 14:23:14',
    szzt: '30mm',
    zt: '水深:55mm',
  },
  {
    zb: '东三巷排口',
    sz: '04-15 14:23:15',
    szzt: '10m³/h',
    zt: '流量:43m³/h',
  },
]);
// 延河
function getDataYh() {
  let obj = {
    listName: ['安塞水文站', '延安水文站', '甘谷驿水文站'],
    diduan: ['1200', '1600', '2000'],
    zhengzhi: ['100', '120', '130'],
  };
  YhList.value = obj;
  ryRefresh3.value = Math.random();
}
onMounted(() => {
  getDataYh();
});
</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);
    .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);
    }
  }
  .Warning_Box_tp {
    margin: 10px auto;
    width: 420px;
    height: calc(100% - 65px);
    // background: url("@/assets/images/fhpl/sqjca.png") no-repeat;
    // background-size: 100% 100%;
  }
  .Warning_Box_gq {
    margin: 5px auto;
    width: 435px;
    height: calc(100% - 65px);
    // background: yellow;
    .drcpl {
      width: 360px;
      height: 22px;
      background: #155a89;
      border-radius: 11px;
      color: #fff;
      margin-top: 15px;
      .percent {
        position: relative;
        height: 100%;
        background: linear-gradient(90deg, #0066e5, #00b6ff);
        border-radius: 11px;
        .round {
          position: absolute;
          left: 4px;
          top: 3px;
          width: 16px;
          height: 16px;
          background: #02fff0;
          border-radius: 50%;
        }
        .text {
          position: absolute;
          left: 36px;
          top: 3px;
        }
        .value {
          position: absolute;
          right: 10px;
          top: 4px;
        }
      }
    }
    .percentVal {
      margin-top: 15px;
      color: #fff;
      font-size: 18px;
      font-weight: 400;
      color: #ffffff;
      margin-left: 30px;
    }
    .info {
      color: #fff;
      height: 32px;
      background: linear-gradient(0deg, rgba(26, 109, 255, 0.2) 0%, rgba(40, 193, 250, 0.2) 100%);
      border-radius: 3px;
      padding: 0 20px;
      margin-top: 15px;
      line-height: 30px;

      > div {
        .circle {
          width: 7px;
          height: 7px;
          border-radius: 50%;
          margin-right: 5px;
        }
        .value {
          font-size: 18px;
          margin-left: 5px;
          margin-right: 3px;
        }
        &:nth-of-type(1) {
          .circle {
            background-color: rgba(58, 255, 248, 1);
            position: relative;
            top: 11px;
          }
          .value {
            color: rgba(58, 255, 248, 1);
          }
        }
        &:nth-of-type(2) {
          .circle {
            background-color: rgba(24, 232, 122, 1);
            position: relative;
            top: 11px;
          }
          .value {
            color: rgba(24, 232, 122, 1);
          }
        }
      }
    }
    .StationList {
      height: calc(100% - 100px);
      margin-top: 15px;
      // background: red;
      .item {
        padding-left: 5px;
        margin-top: 15px;
        margin-left: 48px;
        &:first-of-type {
          margin-left: 0;
        }
        .img {
          width: 66px;
          height: 66px;
          cursor: pointer;
          img {
            display: block;
            width: 100%;
            height: 100%;
          }
        }
        .name {
          text-align: center;
          color: #fff;
          font-size: 16px;
        }
      }
    }
  }
}
.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;
      font-family: Source Han Sans CN;
      font-weight: 500;
      font-size: 14px;
      .tabItem {
        width: 135px;
        line-height: 36px;
        height: 100%;
        border-radius: 6px;
        text-align: center;
        cursor: pointer;
        font-size: 16px;
        // 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%;
    .jqtabs {
      height: 36px;
      color: #fff;
      margin-bottom: 5px;
      .tabItem {
        width: 135px;
        line-height: 32px;
        height: 32px;
        border-radius: 6px;
        text-align: center;
        cursor: pointer;
        // border: 1px solid;
        background: linear-gradient(0deg, #00496f 0%, #001c2a 100%);
        border: 1px solid #2cfce9;
        font-family: Source Han Sans CN;
        font-weight: 400;
        font-size: 16px;
        color: #d3f6ff;
        .tabItem_one {
          // background: red;
          width: 65%;
          display: flex;
          .ycl {
            margin-left: 5px;

            width: 20px;
            height: 20px;
          }
        }
        .tabItem_two {
          // background: rgb(202, 185, 185);
          width: 35%;
        }
        &.active {
          border: 1px solid #2cfce9;
          color: #e4f5ff;
          background: #166f84;
        }
      }
    }
    .problem {
      width: 430px;
      height: calc(100% - 55px);
      overflow: auto;
      .problemItem {
        display: flex;
        height: 45px;
        background: linear-gradient(0deg, #008599 0%, #08596d 100%);
        border-radius: 3px;
        margin-top: 5px;
        // opacity: 0.6;
        .problemOne {
          width: 10%;
          font-family: DIN;
          font-weight: 500;
          font-size: 16px;
          color: #01ffea;
          text-align: center;
          background: rgba(0, 93, 114, 0.8);
        }
        .problemText {
          width: 90%;
          display: flex;
          flex-direction: column;
          // background: yellow;
          .problemTextTop {
            display: flex;
            align-items: center;
            height: 50%;
            width: 98%;
            margin: 0 auto;
            // background: yellow;
            // text-align: center;
            .problemContent {
              width: 130px;
              flex-direction: row;
              flex-wrap: nowrap;
              font-weight: 300;
              font-family: Source Han Sans CN;
              font-size: 13px;
              color: #ffffff;
            }
          }
          .problemTextBottom {
            display: flex;
            justify-content: space-around;
            align-items: center;
            font-family: Source Han Sans CN;
            font-weight: 320;
            font-size: 12px;
            color: #ffffff;
            height: 50%;
            .problemContent {
              .problemContent {
                width: 130px;
                flex-direction: row;
                flex-wrap: nowrap;
                text-align: center;
              }
            }
          }
        }
      }
      // background: yellow;
      // 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;
      }
    }
  }
}
::-webkit-scrollbar {
  width: 5px; /* 设置滚动条的宽度 */
}
</style>