<template>
  <div id="LeftBox2">
    <div class="ChouPaiLiangSites">
      <div
        class="ChouPaiList"
        v-for="(item, index) in ChouPaiListData"
        :key="index"
        :class="{ ChouPaiListCheck: ChouPaiListIndex == index }"
        @click="ChouPaiListCheck(item, index)"
      >
        <n-ellipsis style="max-width: 113px">
          {{ item.name }}
        </n-ellipsis>
      </div>
    </div>
     <div class="ChouPaiLiangDatas">
        <div class="ChouPaiLiangList">
          <img
            src="@/assets/imgs/oneMapCPL.png"
            class="ChouPaiLiangList_img"
            alt=""
          />
          <p class="ChouPaiLiangList_name">前池液位</p>
          <p class="ChouPaiLiangList_values">
            <span class="ChouPaiLiangList_value1">{{
              ChouPaiCheckValue1
            }}</span>
            m
          </p>
        </div>
        <div class="ChouPaiLiangList">
          <img
            src="@/assets/imgs/oneMapCPL.png"
            class="ChouPaiLiangList_img"
            alt=""
          />
          <p class="ChouPaiLiangList_name">集水池液位</p>
          <p class="ChouPaiLiangList_values">
            <span class="ChouPaiLiangList_value2">{{
              ChouPaiCheckValue2
            }}</span>
            m
          </p>
        </div>
        <div class="ChouPaiLiangList">
          <img
            src="@/assets/imgs/oneMapCPL.png"
            class="ChouPaiLiangList_img"
            alt=""
          />
          <p class="ChouPaiLiangList_name">抽排量</p>
          <p class="ChouPaiLiangList_values">
            <span class="ChouPaiLiangList_value3">{{
              ChouPaiCheckValue3
            }}</span>
            m³/H
          </p>
        </div>
      </div>
  </div>
</template>
<script>
import { ref, reactive, toRefs, onMounted } from "vue";
export default {
  name: "LeftBox2",
  setup() {
    const Alldata=reactive({
       //   实时抽排量
      ChouPaiListData: [
        {
          name: "后湖二期泵站",
          value1: "63.3",
          value2: "64.4",
          value3: "1.42",
        },
        {
          name: "铁路桥泵站",
          value1: "53.3",
          value2: "57.4",
          value3: "1.42",
        },
        {
          name: "机场河补水泵站",
          value1: "63.3",
          value2: "64.4",
          value3: "1.42",
        },
      ],
      ChouPaiListIndex: 0,
      ChouPaiCheckValue1: null,
      ChouPaiCheckValue2: null,
      ChouPaiCheckValue3: null,

    })
     // 抽排量站点点击切换
    function ChouPaiListCheck(item, index) {
      Alldata.ChouPaiListIndex = index;
      Alldata.ChouPaiCheckValue1 = item.value1;
      Alldata.ChouPaiCheckValue2 = item.value2;
      Alldata.ChouPaiCheckValue3 = item.value3;
    }
    onMounted(() => {
       Alldata.ChouPaiCheckValue1 = Alldata.ChouPaiListData[0].value1;
      Alldata.ChouPaiCheckValue2 = Alldata.ChouPaiListData[0].value2;
      Alldata.ChouPaiCheckValue3 = Alldata.ChouPaiListData[0].value3;
    });
    return {
      ...toRefs(Alldata),ChouPaiListCheck
    };
  },
  computed: {},
  methods: {},
};
</script>
<style lang="less" scoped>
#LeftBox2 {
  width: 100%;
  height: 100%;
}
.ChouPaiLiangSites {
  width: 100%;
  height: 110px;
  // background: coral;
  overflow: auto;

  .ChouPaiList {
    float: left;
    width: calc(33.33% - 10px);
    height: 26px;
    line-height: 26px;
    text-align: center;
    margin: 5px;
    cursor: pointer;
  }

  .ChouPaiListCheck {
    background: #1f78f7;
    color: white;
  }

}
    .ChouPaiLiangDatas {
    width: 100%;
    height: 130px;

    .ChouPaiLiangList {
      width: 120px;
      height: 120px;
      float: left;
      margin-right: 3px;
      font-size: 0px;

      .ChouPaiLiangList_img {
        width: 58px;
        height: 79px;
        margin-left: 30px;
        display: inline-block;
      }
      .ChouPaiLiangList_name {
        width: 100%;
        height: 20px;
        line-height: 20px;
        font-size: 16px;
        font-family: Alibaba PuHuiTi;
        font-weight: 400;
        text-align: center;
        margin-bottom: 10px;
      }
      .ChouPaiLiangList_values {
        width: 100%;
        height: 20px;
        line-height: 20px;
        text-align: center;
        font-size: 14px;
        font-family: Alibaba PuHuiTi;
        font-weight: 400;

        .ChouPaiLiangList_value1 {
          font-size: 18px;
          font-family: DIN;
          font-weight: 500;
          color: #1f78f7;
        }
        .ChouPaiLiangList_value2 {
          font-size: 18px;
          font-family: DIN;
          font-weight: bold;
          color: #51c430;
        }
        .ChouPaiLiangList_value3 {
          font-size: 18px;
          font-family: DIN;
          font-weight: bold;
          color: #ec1a5a;
        }
      }
    }
  }
</style>