<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 == '险情'"></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" v-for="item in problemList">
        <div class="problemItem">
          <div :class="item.class">{{ item.scale }}</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 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 list = [
  {
    name: '1#泵',
    status: 1,
  },
  {
    name: '2#泵',
    status: 0,
  },
  {
    name: '3#泵',
    status: 0,
  },

  {
    name: '4#泵',
    status: 1,
  },
];
const problemList = ref([
  {
    scale: 'Ⅳ',
    remark: '污水井盖丢失',
    address: '小河沟',
    person: '张三',
    phone: '13277980987',
    startTime: '2022-02-27 10:00',
    endTime: '2022-02-28 10:00',
    class: 'highProblem',
  },
  {
    scale: 'Ⅲ',
    remark: '污水井盖丢失',
    address: '小河沟',
    person: '张三',
    phone: '13277980987',
    startTime: '2022-02-27 10:00',
    endTime: '2022-02-28 10:00',
    class: 'middleProblem',
  },
  {
    scale: 'Ⅱ',
    remark: '污水井盖丢失',
    address: '小河沟',
    person: '张三',
    phone: '13277980987',
    startTime: '2022-02-27 10:00',
    endTime: '2022-02-28 10:00',
    class: 'lowProblem',
  },
]);
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: 30, Imgurl: ycl },
  { name: '未处理', value: 9, Imgurl: wcl },
  { name: '处理中', value: 61, 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;
}

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',
  },
]);
</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;
        // 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: 14px;
        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 {
      // height: calc(100% - 45px);
      height: 45px;
      margin-bottom: 10px;

      .problemItem {
        display: flex;
        height: 45px;
        background: linear-gradient(0deg, #008599 0%, #08596d 100%);
        border-radius: 3px;
        // opacity: 0.6;
        .highProblem {
          text-align: center;
          font-weight: 400;
          font-size: 16px;
          color: #d3f6ff;
          height: 35px;

          line-height: 35px;
          width: 14%;
          background: linear-gradient(0deg, #8e1e1e 0%, #420606 100%);
          border-image: linear-gradient(0deg, #fd4d62, #ac241a) 10 10;
          border: rgb(141, 28, 21) 1px solid;
          border-radius: 10%;
          margin-top: 5px;
          margin-left: 10px;
        }
        .middleProblem {
          text-align: center;
          font-weight: 400;
          font-size: 16px;
          color: #d3f6ff;
          height: 35px;
          width: 14%;
          background: linear-gradient(0deg, #f1b500 0%, #331e02 100%);
          border-image: linear-gradient(0deg, #ffb61a, #f5a100) 10 10;
          border: rgb(193, 133, 4) 1px solid;
          border-radius: 10%;
          line-height: 35px;
          margin-top: 5px;
          margin-left: 10px;
        }
        .lowProblem {
          text-align: center;
          font-weight: 400;
          font-size: 16px;
          color: #d3f6ff;
          height: 35px;
          width: 14%;
          background: linear-gradient(0deg, #d3d50f 0%, #31310c 100%);
          border-image: linear-gradient(0deg, #fcff00, #c1c311) 10 10;
          border: rgb(202, 199, 6) 1px solid;
          border-radius: 10%;
          line-height: 35px;
          margin-top: 5px;
          margin-left: 10px;
        }
        .problemText {
          width: 85%;
          margin-left: 20px;
          display: flex;
          flex-direction: column;
          // background: red;
          .problemTextTop {
            display: flex;
            height: 50%;

            margin-top: 4px;
            .problemContent {
              margin-right: 39px;
              text-align: center;
              font-weight: 500;
              font-size: 13px;
              color: #d3f6ff;
              // background: red;
            }
          }
          .problemTextBottom {
            display: flex;
            text-align: center;
            font-family: Source Han Sans CN;
            font-weight: 330;
            font-size: 11px;
            color: #d3f6ff;

            // background: blue;
            .problemContent {
              margin-right: 50px;
            }
          }
        }
      }
      // 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;
      }
    }
  }
}
</style>