<template>
  <div class="waterQuality">
    <el-button
      style="position: absolute; top: 40px; left: 66px"
      size="medium"
      round
      icon="el-icon-back"
      @click="handleBack()"
      >返回</el-button
    >

    <div class="waterQuality-box">
      <div class="waterQuality-box-top">
        <span>当前水质监测</span>
        <span>实时更新</span>
        <span style="position: absolute; right: 80px"
          >2025-05-06 12:25:06 已更新</span
        >
      </div>
      <div class="waterQuality-box-content">
        <div class="item">
          <img src="../../assets/img/waterQuality/shidu.png" alt="" />
          <div class="item-content">
            <div class="item-content-title">66%</div>
            <div class="item-content-value">湿度</div>
          </div>
        </div>

        <div class="item">
          <img src="../../assets/img/waterQuality/yang.png" alt="" />
          <div class="item-content">
            <div class="item-content-title">30.9%</div>
            <div class="item-content-value">溶氧度</div>
          </div>
        </div>
        <div class="item">
          <img src="../../assets/img/waterQuality/PH.png" alt="" />
          <div class="item-content">
            <div class="item-content-title">9.9PH</div>
            <div class="item-content-value">PH值</div>
          </div>
        </div>
      </div>
    </div>
    <div class="waterQuality-box-bottom">
      <el-table
        :data="tableData"
        height="350px"
        style="width: 100%"
        :header-cell-class-name="HeaderCell"
        stripe
        border
      >
        <el-table-column label="序号" type="index" width="80" align="center">
        </el-table-column>
        <el-table-column label="时间" align="center">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.time }}</span>
          </template>
        </el-table-column>
        <el-table-column label="湿度" align="center">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.humidity }}</span>
          </template>
        </el-table-column>
        <el-table-column label="溶氧度" align="center">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.oxygen }}</span>
          </template>
        </el-table-column>
        <el-table-column label="PH值" align="center">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.PH }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      data: {
        name: "",
      },
      token: "",
      tableData: [
        {
          time: "2025-05-06 12:25:06",
          humidity: "66%",
          oxygen: "30.9%",
          PH: "9.9PH",
        },
        {
          time: "2025-05-06 12:25:06",
          humidity: "66%",
          oxygen: "30.9%",
          PH: "9.9PH",
        },
        {
          time: "2025-05-06 12:25:06",
          humidity: "66%",
          oxygen: "30.9%",
          PH: "9.9PH",
        },
        {
          time: "2025-05-06 12:25:06",
          humidity: "66%",
          oxygen: "30.9%",
          PH: "9.9PH",
        },
        {
          time: "2025-05-06 12:25:06",
          humidity: "66%",
          oxygen: "30.9%",
          PH: "9.9PH",
        },
      ],
    };
  },
  methods: {
    handleBack() {
      this.$router.push({
        name: "deviceDetails",
      });
    },
    // 表头单元格样式
    HeaderCell() {
      return "HeaderCellClass";
    },
  },
  mounted() {},
  created() {},
  computed: {},
};
</script>
<style lang="scss" scoped>
.waterQuality::v-deep {
  margin: 30px;

  .waterQuality-box {
    width: 1544px;
    height: 216px;
    background: #ffffff;
    border-radius: 10px;

    .waterQuality-box-top {
      display: flex;
      padding-top: 40px;
      padding-left: 30px;

      > span:first-child {
        font-family: Microsoft YaHei;
        font-weight: bold;
        font-size: 22px;
        color: #000000;
        line-height: 50px;
      }

      > span:nth-child(2) {
        padding-left: 10px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        font-size: 16px;
        color: #666666;
        line-height: 50px;
      }
    }

    .waterQuality-box-content {
      display: flex;
      flex-direction: row;
      justify-content: space-evenly;

      .item {
        display: flex;
        flex-direction: row;
        align-items: center;

        .item-content {
          margin-left: 30px;
          display: flex;
          flex-direction: column;

          .item-content-title {
            font-family: Microsoft YaHei;
            font-weight: bold;
            font-size: 30px;
            color: #000000;
            line-height: 50px;
          }

          .item-content-value {
            font-family: Microsoft YaHei;
            font-weight: 400;
            font-size: 18px;
            color: #000000;
            line-height: 50px;
            opacity: 0.66;
          }
        }
      }
    }
  }

  .waterQuality-box-bottom {
    margin-top: 10px;
    padding: 10px;
    background-color: #fff;
    box-shadow: 0 0 5px #d0d0d0;
    border-radius: 5px;

    .HeaderCellClass {
      background: #859cb7;
      color: #fff;
    }
  }
}
</style>
