<script setup>
import {ref} from "vue";

const operationLeftList = ref([
  {
    name: '1号排水点',
    children: [
      {
        name: '1#泵',
        state: 1
      },
      {
        name: '2#泵',
        state: 0
      }
    ]
  },
  {
    name: '2号排水点',
    children: [
      {
        name: '3#泵',
        state: 1
      },
      {
        name: '4#泵',
        state:0
      }
    ]
  },
  {
    name: '3号排水点',
    children: [
      {
        name: '5#泵',
        state: 1
      },
      {
        name: '6#泵',
        state: 0
      }
    ]
  }
  , {
    name: '4号排水点',
    children: [
      {
        name: '7#泵',
        state: 1
      },
      {
        name: '8#泵',
        state: 0
      }
    ]
  },
  {
    name: '5号排水点',
    children: [
      {
        name: '9#泵',
        state: 1
      },
      {
        name: '10#泵',
        state: 0
      }
    ]
  },
  {
    name: '6号排水点',
    children: [
      {
        name: '11#泵',
        state: 1
      },
      {
        name: '12#泵',
        state: 0
      }
    ]
  },
  {
    name: '7号排水点',
    children: [
      {
        name: '13#泵',
        state: 1
      },
      {
        name: '14#泵',
        state: 0
      }
    ]
  },
])
const operationRightList = ref([
  {
    name: '8号排水点',
    children: [
      {
        name: '15#泵',
        state: 1
      },
      {
        name: '16#泵',
        state: 0
      }
    ]
  },
  {
    name: '9号排水点',
    children: [
      {
        name: '17#泵',
        state: 1
      },
      {
        name: '18#泵',
        state: 0
      }
    ]
  },
  {
    name: '10号排水点',
    children: [
      {
        name: '19#泵',
        state: 1
      },
      {
        name: '20#泵',
        state: 0
      }
    ]
  }
  , {
    name: '11号排水点',
    children: [
      {
        name: '21#泵',
        state: 1
      },
      {
        name: '22#泵',
        state: 0
      }
    ]
  },
  {
    name: '12号排水点',
    children: [
      {
        name: '23#泵',
        state: 1
      },
      {
        name: '24#泵',
        state: 0
      }
    ]
  },
  {
    name: '13号排水点',
    children: [
      {
        name: '25#泵',
        state: 1
      },
      {
        name: '26#泵',
        state: 0
      }
    ]
  },
  {
    name: '14号排水点',
    children: [
      {
        name: '27#泵',
        state: 1
      },
      {
        name: '28#泵',
        state: 0
      }
    ]
  },
])
</script>

<template>
  <div class="page m100">
    <div class="page-left-box">
      <div class="title ">
        <span>运行情况</span>

      </div>
      <div class="page-big-box margin10">
        <div v-for="(item,index) in operationLeftList" class="system-item">
          <span class="system-item-title">{{ item.name }}</span>
          <div class="system-item-right">
            <p v-for="(s,i) in item.children">
              <span>{{ s.name }}</span>
              <span :class="'state' + s.state"></span>
            </p>
          </div>
        </div>
      </div>
    </div>
    <div class="page-right-box">
      <div class="title ">
        <span>运行情况</span>

      </div>
      <div class="page-big-box margin10">
        <div v-for="(item,index) in operationRightList" class="system-item">
          <span class="system-item-title">{{ item.name }}</span>
          <div class="system-item-right">
            <p v-for="(s,i) in item.children">
              <span>{{ s.name }}</span>
              <span :class="'state' + s.state"></span>
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.page-big-box {
  display: flex;
  flex-wrap: wrap;
  align-content: space-evenly;
  padding: 0 .5rem;
  box-sizing: border-box;
}

.system-item {
  height: 12.6%;
  //background-color: #fff;
  width: 100%;
  background-size: 100% 100%;
  background-image: url("@/assets/images/drainage/drainage-item-bg.png");
  position: relative;

  &-title {
    position: absolute;
    top: 68%;
    left: 6%;
    font-family: 'title';
    font-size: .8rem;
  }

  &-right {
    height: 100%;
    margin-left: 8.275rem;
    display: flex;
    flex-wrap: wrap;
    align-content: space-evenly;

    p {
      padding-left: 2rem;
      padding-right: 2rem;
      box-sizing: border-box;
      height: 40%;
      width: 100%;
      //background-color: #fff;
      display: flex;
      align-items: center;
      font-size: .9rem;
      justify-content: space-between;
    }
  }
}

.state0, .state1 {
  width: 1.7rem;
  height: 1.7rem;
  background-size: 100% 100%;
}

.state0 {
  background-image: url("@/assets/images/drainage/state0.png");
}

.state1 {
  background-image: url("@/assets/images/drainage/state1.png");
}
</style>