<template>
  <div class="container">
    <!-- 标题区域 -->
    <div class="title">
      <div class="title_text">设备总览</div>
      <div class="title_sub">Anlageuebersicht</div>
    </div>

    <!-- 内容区域 -->
    <div class="content">
      <div class="sub_title">设备情况</div>
      <div class="device">
        <!-- 水表情况 -->
        <div class="device_box">
          <div class="box_msg">
            <div class="msg_num">
              <span ref="waterValueDom">
                {{ waterValue }}
              </span>
              个
            </div>
            <div class="msg_icon">
              <img src="@/assets/images/device-icon.png" />
            </div>
            <div class="msg_name">水表</div>
          </div>
          <div class="box_content">
            <div>在线水表</div>
            <div>
              <span class="content_num" ref="waterOnDom">{{ waterOn }}</span>
              个
            </div>
          </div>
          <div class="box_content">
            <div>离线水表</div>
            <div>
              <span class="content_num" ref="waterOffDom">{{ waterOff }}</span>
              个
            </div>
          </div>
        </div>

        <!-- 电表情况 -->
        <div class="device_box">
          <div class="box_msg">
            <div class="msg_num">
              <span ref="eleValueDom">{{ eleValue }}</span
              >个
            </div>
            <div class="msg_icon">
              <img src="@/assets/images/device-icon.png" />
            </div>
            <div class="msg_name">电表</div>
          </div>
          <div class="box_content">
            <div>在线电表</div>
            <div>
              <span class="content_num" ref="eleOnDom">{{ eleOn }}</span>
              个
            </div>
          </div>
          <div class="box_content">
            <div>离线电表</div>
            <div>
              <span class="content_num" ref="eleOffDom">{{ eleOff }}</span>
              个
            </div>
          </div>
        </div>
      </div>
      <div class="sub_title">用水量实时监测</div>

      <div class="form_water form">
        <el-table :data="tableData">
          <el-table-column
            prop="building"
            label="楼栋"
            align="center"
            width="110"
            show-overflow-tooltip
          />
          <el-table-column prop="num" label="编号" align="center" width="50" />
          <el-table-column
            prop="value"
            label="用水量（m³）"
            align="center"
            width="110"
          />
          <el-table-column
            prop="time"
            label="通讯时间"
            align="center"
            width="132"
          />
        </el-table>
      </div>

      <div class="sub_title">用电量实时监测</div>

      <div class="form_ele form">
        <el-table :data="tableData">
          <el-table-column
            prop="building"
            label="楼栋"
            align="center"
            width="110"
            show-overflow-tooltip
          />
          <el-table-column prop="num" label="编号" align="center" width="50" />
          <el-table-column
            prop="value"
            label="用电量（kw.h）"
            align="center"
            width="110"
          />
          <el-table-column
            prop="time"
            label="通讯时间"
            align="center"
            width="132"
          />
        </el-table>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { countUpNum } from "@/utils/countUpNum";

const waterValue = ref(2345);
const waterOn = ref(1000);
const waterOff = ref(100);
const eleValue = ref(2345);
const eleOn = ref(1000);
const eleOff = ref(100);

const waterValueDom = ref(2345);
const waterOnDom = ref(1000);
const waterOffDom = ref(100);
const eleValueDom = ref(2345);
const eleOnDom = ref(1000);
const eleOffDom = ref(100);

const tableData = [
  {
    building: "教学楼 A",
    num: "123",
    value: "1233.00",
    time: "2023-11-29 15:49:12",
  },
  {
    building: "教学楼（A）",
    num: "123",
    value: "1233.00",
    time: "2023-11-29 15:49:12",
  },
  {
    building: "教学楼（A）",
    num: "123",
    value: "1233.00",
    time: "2023-11-29 15:49:12",
  },
  {
    building: "教学楼（A）",
    num: "123",
    value: "1233.00",
    time: "2023-11-29 15:49:12",
  },
  {
    building: "教学楼（A）",
    num: "123",
    value: "1233.00",
    time: "2023-11-29 15:49:12",
  },
  {
    building: "教学楼（A）",
    num: "123",
    value: "1233.00",
    time: "2023-11-29 15:49:12",
  },
];

onMounted(() => {
  getCountUpNum();
});

const getCountUpNum = () => {
  countUpNum(waterValueDom.value, waterValue.value);
  countUpNum(waterOnDom.value, waterOn.value);
  countUpNum(waterOffDom.value, waterOff.value);
  countUpNum(eleValueDom.value, eleValue.value);
  countUpNum(eleOnDom.value, eleOn.value);
  countUpNum(eleOffDom.value, eleOff.value);
};
</script>

<style lang="scss" scoped>
.container {
  width: 435px;
  height: 951px;
  color: #fff;
  background-image: url(@/assets/images/box-bg.png);

  .title {
    display: flex;
    align-items: center;
    width: 430px;
    height: 47px;
    font-family: "庞门正道标题体";
    background-image: url(@/assets/images/title-bg.png);
    background-size: 100% 100%;

    .title_text {
      margin-left: 38px;
      font-size: 20px;
      text-shadow: 0px 0px 9px #158eff;
    }

    .title_sub {
      margin-left: 19px;
      font-size: 12px;
      color: #215a8e;
    }
  }

  .content {
    padding: 20px 19px 0 14px;
    height: 904px;

    .sub_title {
      padding-left: 28px;
      height: 35px;
      line-height: 18px;
      color: #abd6ff;
      font-weight: bold;
      background-image: url(@/assets/images/title-bg2.png);
      background-size: 100% 100%;
    }

    .device {
      display: flex;
      flex-direction: column;
      padding: 10px 0;
      height: 248px;
      .device_box {
        flex: 1;
        display: flex;
        justify-content: space-evenly;
        align-items: center;

        .box_msg {
          display: flex;
          flex-direction: column;
          justify-content: space-evenly;
          align-items: center;
          height: 100%;
          .msg_num {
            // margin-bottom: 10px;
            font-size: 12px;
            animation: float 3s linear infinite;

            span {
              font-size: 20px;
              font-weight: bold;
            }
          }
          .msg_icon {
            position: relative;
            width: 58px;
            height: 36px;
            background-image: url(@/assets/images/device-icon2.png);
            background-size: 100% 100%;

            img {
              position: absolute;
              top: -46px;
              left: 6px;
              width: 44px;
              height: 81px;
            }
          }

          .msg_name {
            font-size: 14px;
            font-weight: bold;
          }
        }

        .box_content {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 0 8px;
          width: 144px;
          height: 49px;
          font-size: 12px;
          background-image: linear-gradient(
            to right,
            rgba(7, 27, 51, 0.72),
            rgba(7, 27, 51, 0)
          );

          .content_num {
            color: #2acfff;
            font-size: 16px;
            font-weight: bold;
          }
        }
      }
    }

    .form_water {
      margin-bottom: 6px;
      padding-top: 15px;
      height: 260px;
      overflow: hidden;
    }

    .form_ele {
      padding-top: 15px;
      height: 260px;
      overflow: hidden;
    }
  }
}

/*最外层透明*/
.form ::v-deep(.el-table),
.form ::v-deep(.el-table__expanded-cell) {
  background-color: transparent;
  color: white;
  border: none;
}
/* 表格内背景颜色 */
.form ::v-deep(.el-table th),
.form ::v-deep(.el-table tr),
.form ::v-deep(.el-table td),
::v-deep(.el-table th.el-table__cell.is-leaf) {
  background-color: transparent !important;
  color: white;
  font-size: 12px;
  border-color: rgba(255, 255, 255, 0.1);
  height: 40px;
}

// 表格底部白线清除
::v-deep(.el-table__inner-wrapper::before) {
  height: 0;
}

// 修改表头背景颜色
::v-deep(.el-table__header) {
  background-color: rgba(58, 126, 199, 0.5);
}
// 清除表格默认padding
::v-deep(.el-table .cell) {
  padding: 0;
}

// 动画滚动
::v-deep(.el-scrollbar__view) {
  animation: run 12s linear infinite;
}
</style>
