<template>
  <div class="environment-wrapper">
    <div class="search" @click.stop="handleSearch">
      <el-select
        v-model="searchData.itemId"
        placeholder="请选择..."
        @change="deviceChange"
        :teleported="false"
      >
        <el-option
          v-for="item in deviceList"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        >
        </el-option>
      </el-select>
    </div>
    <div class="content">
      <div class="item" v-for="item in list" :key="item.id">
        <div class="name">{{ item.name }}</div>
        <div class="num-con">
          <div class="num">{{ item.num }}</div>
          <div class="unit">{{ item.unit }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { environmentData, environmentItem } from "@/api/largeScreen";
import { onMounted } from "vue";

const props = defineProps(["buildingId"]);
const searchContent = ref("请选择...");
const searchData = ref({});
const deviceList = ref([]); //传感器list
const list = ref([
  { id: 0, name: "Ph值", num: "--", unit: "" },
  { id: 1, name: "色度", num: "--", unit: "度" },
  { id: 2, name: "浑浊度", num: "--", unit: "NTU" },
  { id: 0, name: "溶解氧", num: "--", unit: "%" },
  { id: 0, name: "细菌", num: "--", unit: "%" },
  { id: 0, name: "病毒", num: "--", unit: "%" },
]);
// el-select切换获取新数据
const deviceChange = (val) => {
  getItem(val);
};
// 获取传感器下监测项
const getItem = (val) => {
  environmentItem({ id: val }).then((res) => {
    list.value[0].num = res.data.noise;
    list.value[1].num = res.data.windSpeed;
    list.value[2].num = res.data.pm25;
    list.value[3].num = res.data.temperature;
    list.value[4].num = res.data.humidity;
    list.value[5].num = res.data.pressure;
  });
};
onMounted(() => {
  // 获取传感器list
  environmentData({ buildingIdList: props.buildingId }).then((res) => {
    deviceList.value = res.rows;
    if (res.rows.length !== 0) {
      searchData.value.itemId = deviceList.value[0].id;
      getItem(deviceList.value[0].id);
    }
  });
});
</script>

<style lang="scss" scoped></style>