<!--智慧排水左侧面板 -->
<template>
  <!-- 普查现状 -->
  <div class="CensusStatus">
    <div class="partTitleHM">普查现状</div>
    <div class="partTop">
      <div class="partTP flex flex-justcontent-spacebetween">
        <div class="part" v-for="(item, index) in tableData" :key="index">
          <div class="parttop">
            <img :src="item.Imgurl" class="upImg" />
          </div>
          <div class="upper">
            <div class="upperNum">
              <div
                class="oflower"
                :style="{ color: item.name == '易涝点' ? '#a2fff8FF' : item.name == '风险点' ? '#faecabFF' : '#92edbfFF' }"
              >
                {{ item.num }}
              </div>
              <div class="oflowerDw">{{ item.dw }}</div>
            </div>
            <div class="upperMc">{{ item.name }}</div>
          </div>
        </div>
      </div>
      <div class="partList">
        <div class="head">
          <span style="width: 10%; text-align: center">序号</span>
          <span style="width: 45%; padding-left: 15px">易涝点</span>
          <span style="width: 45%; padding-left: 130px">位置</span>
        </div>
        <Vue3SeamlessScroll :list="dataList" :singleHeight="36" :singleWaitTime="1500" :hover="true" class="scrollCont">
          <div class="scrollCont">
            <li
              v-for="(item, index) in dataList"
              :key="index"
              :class="Pointname == item.yls ? 'activedright' : ''"
              @click="Pointclick(item, index)"
            >
              <span style="width: 10%">{{ item.num }}</span>
              <span style="width: 45%">{{ item.yls }}</span>
              <span
                style="
                  width: 45%;
                  text-align: right;
                  font-family: Source Han Sans CN;
                  font-weight: 400;
                  font-size: 14px;
                  color: #00f2ff;
                "
                >{{ item.wz }}</span
              >
            </li>
          </div>
        </Vue3SeamlessScroll>
      </div>
    </div>
  </div>
  <!-- 降雨预测 -->
  <div class="RainfallForecast">
    <div class="partTitleHM">降雨预测</div>
    <div class="RainfallTop">
      <div class="subRightBox">
        <div
          class="headcenter"
          v-for="(item, index) in yearList"
          :key="item"
          :class="activedname == item.name ? 'activedright' : ''"
          @click="yearclick(item, index)"
        >
          {{ item.name }}
        </div>
      </div>
      <div class="rainImgBox">
        <div class="rainend"></div>
        <div class="rainLegend flex flex-align-center">
          <div class="flex flex-align-center" v-for="(item, index) in ranLeng[timeActive]" :key="index">
            <span :class="index == 0 ? 'sBorder' : ''" :style="`background:${item.color}`"></span>
            <div class="number"><em v-show="index == ranLeng[timeActive].length - 1">></em>{{ item.value }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- 群众反馈 -->
  <div class="PublicFeedback">
    <div class="partTitleHM">群众反馈</div>
    <div class="BarChart"></div>
  </div>
</template>
<script setup>
import { ref, reactive, toRefs, onMounted, onBeforeUnmount } from 'vue';
import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
import fxd from '@/assets/images/zhps/fxd.png'; //风险点
import qxgw from '@/assets/images/zhps/qxgw.png'; //缺陷管网
import yld from '@/assets/images/zhps/yld.png'; //易涝点
const AllData = reactive({});
const tableData = ref([
  { name: '易涝点', num: '7', Imgurl: yld, dw: '处' },
  { name: '风险点', num: '9', Imgurl: fxd, dw: '处' },
  { name: '缺陷管网', num: '6.1', Imgurl: qxgw, dw: '座' },
]);
const Pointname = ref('');
const dataList = ref([
  { num: '1', yls: '永安路', wz: '百米大道永安路' },
  { num: '2', yls: '永昌路北口', wz: '双拥大道永昌路' },
  { num: '3', yls: '桥儿沟隧道', wz: '双拥大道桥儿沟' },
  { num: '4', yls: '原水果市场', wz: '双拥大道东十里铺' },
  { num: '5', yls: '王家坪旧址门口', wz: '圣地路' },
  { num: '6', yls: '桥儿沟隧道1', wz: '双拥大道桥儿沟' },
  { num: '7', yls: '原水果市场1', wz: '双拥大道东十里铺' },
]);
// 普查现状点击事件
function Pointclick(val) {
  Pointname.value = val.yls;
}

const yearList = ref([
  { name: '1小时', value: 1 },
  { name: '3小时', value: 2 },
  { name: '12小时', value: 3 },
  { name: '24小时', value: 4 },
]);
const activedname = ref('1小时');
// 时间点击事件
function yearclick(val) {
  activedname.value = val.name;
}
const timeActive = ref(0);
const ranLeng = [
  [
    { value: '0-10', color: 'rgba(7, 213, 118, 0)' },
    { value: '10-25', color: 'rgba(7, 213, 118, 1)' },
    { value: '25-50', color: 'rgba(38, 129, 240,1)' },
    { value: '50-100', color: 'rgba(247, 223, 56, 1)' },
    { value: '100-250', color: 'rgba(230, 85, 41, 1)' },
    { value: '250', color: 'rgba(255, 55, 168, 1)' },
  ],
];
</script>

<style lang="scss" scoped>
.CensusStatus {
  width: 450px;
  height: 45%;
  // background: red;
  .partTop {
    width: 450px;
    height: calc(100% - 60px);
    position: relative;
    top: 15px;
    // background: yellow;
    .partTP {
      width: 430px;
      height: 85px;
      // background: red;
      margin: 0 auto;
      .part {
        width: 133px;
        height: 76px;
        cursor: pointer;
        .parttop {
          height: 76px;
        }
      }
      .upper {
        width: 60px;
        height: 60px;
        position: relative;
        top: -67px;
        left: 60px;
        .upperNum {
          display: flex;
          height: 50%;
          // background: red;
          .oflower {
            width: 50%;
            font-family: DINPro;
            font-weight: bold;
            font-size: 22px;
            color: #33ffcc;
            // background: linear-gradient(0deg, #faffff 0%, #00ffea 100%);
            // -webkit-background-clip: text;
            // -webkit-text-fill-color: transparent;
            line-height: 40px;
            display: flex;
            justify-content: space-around;
          }
          .oflowerDw {
            width: 50%;
            font-family: Source Han Sans CN;
            font-weight: 400;
            font-size: 12px;
            color: #ffffff;
            line-height: 40px;
            display: flex;
            justify-content: space-around;
          }
        }
        .upperMc {
          display: flex;
          justify-content: space-around;
          align-items: center;
          height: 50%;
          font-family: Source Han Sans CN;
          font-weight: 400;
          font-size: 14px;
          color: #ffffff;
        }
      }
    }
    .partList {
      width: 450px;
      height: calc(100% - 85px);
      // background: yellowgreen;
      .head {
        height: 38px;
        width: 430px;
        margin: 0 auto;
        background: linear-gradient(0deg, rgba(22, 193, 216, 0.8) 0%, rgba(0, 43, 67, 0.8) 100%);
        border-radius: 6px;
        border: 1px solid #15d2fd;
        display: flex;
        align-items: center;
        font-family: Source Han Sans CN;
        font-weight: 400;
        font-size: 14px;
        color: #ffffff;
      }
      .scrollCont {
        width: 430px;
        margin: 0 auto;
        height: calc(100% - 40px);
        overflow: auto;
        cursor: pointer;
        // background: red;
        li {
          width: 100%;
          height: 34px;
          display: flex;
          // justify-content: space-between;
          align-items: center;
          margin-top: 2px;
          padding: 10px 20px;
          background: url('@/assets/images/zhps/liebiao.png') no-repeat;
          background-size: 100% 100%;
          span {
            font-size: 14px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #b4c9e0;
          }
        }
        .activedright {
          background: url('@/assets/images/zhps/lbxz.png') no-repeat;
          background-size: 100% 100%;
        }
      }
    }
  }
}
.RainfallForecast {
  width: 450px;
  height: 30%;
  .RainfallTop {
    width: 450px;
    height: calc(100% - 60px);
    position: relative;
    top: 10px;
    .subRightBox {
      width: 440px;
      margin: 0 auto;
      height: 35px;
      display: flex;
      cursor: pointer;
      font-size: 14px;
      color: #ffffff;

      .headcenter {
        width: 100px;
        height: 26px;
        padding: 2px 3px;
        background: #00344f;
        text-align: center;
        margin-top: 5px;
        margin-left: 10px;
      }
      .activedright {
        border: 1px solid #2cfce9;
        color: #e4f5ff;
        background: #166f84;
      }
    }
    .rainImgBox {
      margin: 0 auto;
      width: 440px;
      height: calc(100% - 35px);
      // background: rgb(153, 153, 214);
      .rainend {
        width: 440px;
        height: 85%;
        background: url('@/assets/images/zhps/hsRain.png') no-repeat;
        background-size: 100% 100%;
      }
      .rainLegend {
        width: 440px;
        height: 15%;
        justify-content: space-evenly;
        color: #fff;
        z-index: 10;
        .flex {
          height: 24px;
        }
        .number {
          font-size: 14px;
          color: #fff;
        }
        span {
          display: block;
          width: 14px;
          height: 14px;
          border-radius: 4px;
          margin-right: 5px;
        }
        .sBorder {
          border: 1px solid #39f7ff;
        }
      }
    }
  }
}
.PublicFeedback {
  width: 450px;
  height: 25%;
  .BarChart {
    margin: 15px auto;
    width: 420px;
    height: calc(100% - 65px);
    background: url('@/assets/images/zhps/bingtu.png') no-repeat;
    background-size: 100% 100%;
  }
}
.partTitleHM {
  top: 8px;
  position: relative;
  width: 408px;
  height: 44px;
  background: url('@/assets/newImgs/partBg.png') no-repeat;
  background-size: 100% 100%;
  font-family: PangMenZhengDao;
  font-weight: 400;
  font-size: 23px;
  color: #ebfeff;
  line-height: 44px;
  padding-left: 35px;
  margin-left: 10px;
}
::-webkit-scrollbar {
  width: 5px; /* 设置滚动条的宽度 */
}
</style>