<template>
  <!-- 泵站运行监控 -->
  <div class="pumpJKPage">
    <div class="partTitleHM">
      泵站运行监控
      <el-select
        clearable
        filterable
        v-model="rainCode"
        placeholder="请选择雨量站"
        style="float: right; width: 130px; margin: 10px 60px 0px 0px"
        size="small"
      >
        <el-option v-for="dict in rainType" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
      </el-select>
    </div>
    <div class="partContHM">
      <el-tabs v-model="activeName" class="pumptabs" @tab-click="handleClick">
        <el-tab-pane :label="item.label" :name="item.value" v-for="item in tabList" :key="item.value"></el-tab-pane>
      </el-tabs>
      <div class="pumpCount flex">
        <div class="part"><span class="yellow circle"></span>当日抽排量 <span style="color: #ffed52">10.8</span>m³</div>
        <div class="part"><span class="blue circle"></span>累计抽排量 <span style="color: #3afff8">--</span>万m³</div>
        <div class="part"><span class="green circle"></span>前池水位 <span style="color: #18e87a">--</span>m</div>
      </div>
      <div class="flex flex-justcontent-spacearound mt10">
        <div class="pumpStatus">
          <img src="@/assets/newImgs/HMScreen/pumpOff.png" alt="" />
          <p>1#泵</p>
        </div>
        <div class="pumpStatus">
          <img src="@/assets/newImgs/HMScreen/pumpOpen.png" alt="" />
          <p>2#泵</p>
        </div>
        <div class="pumpStatus">
          <img src="@/assets/newImgs/HMScreen/pumpOpen.png" alt="" />
          <p>3#泵</p>
        </div>
        <div class="pumpStatus">
          <img src="@/assets/newImgs/HMScreen/pumpOff.png" alt="" />
          <p>4#泵</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
const { proxy } = getCurrentInstance();
const rainCode = ref('1');
const rainType = ref([
  { value: '1', label: '雨水泵站' },
  { value: '2', label: '污水泵站' },
  { value: '3', label: '合流泵站' },
]);
const activeName = ref('2');
const tabList = ref([
  { value: '1', label: '一号泵站' },
  { value: '2', label: '二号泵站' },
  { value: '3', label: '三号泵站' },
  { value: '4', label: '四号泵站' },
  { value: '5', label: '五号泵站' },
  { value: '6', label: '六号泵站' },
]);

// tab泵站切换点击
function handleClick(params) {
  console.log(params);
}

onMounted(() => {});
</script>

<style lang="scss">
.pumpJKPage {
  width: 100%;
  .partContHM {
    .pumptabs {
      .el-tabs__item {
        font-family: Source Han Sans CN;
        font-weight: 500;
        font-size: 16px;
        color: #b8ecff !important;
      }
      .el-tabs__item.is-active {
        color: #3afff8 !important;
        background: linear-gradient(0deg, #2ddaff 0%, rgba(45, 218, 255, 0) 100%);
      }
      .el-tabs__active-bar {
        background: #3afff8 !important;
      }
      svg path {
        fill: #3afff8 !important;
        font-weight: bold;
      }
    }
    .pumpCount {
      width: 100%;
      height: 15px;
      background: url('@/assets/newImgs/HMScreen/pumpBg.png') no-repeat;
      background-size: 100% 100%;
      justify-content: space-around;
      padding-bottom: 15px;
      margin-top: 10px;

      .part {
        width: 33%;
        font-size: 13px;
        display: flex;
        align-items: center;
        justify-content: center;
        span {
          margin: 0 5px;
        }
        .circle {
          display: inline-block;
          width: 5px;
          height: 5px;
          border-radius: 50%;
          margin-right: 5px;
        }
        .yellow {
          background: #ffed52;
        }
        .blue {
          background: #3afff8;
        }
        .green {
          background: #18e87a;
        }
      }
    }
    .pumpStatus {
      justify-content: center;
      img {
        width: 66px;
        height: 66px;
      }
      p {
        text-align: center;
        font-family: Source Han Sans CN;
        font-weight: 400;
        font-size: 16px;
        color: #b8ecff;
      }
    }
  }
}
</style>