<template>
  <section class="historyList">
    <div flex>
      <b class="header" v-text="itemLabel"/>
    </div>
    <div v-for="row in list" :key="row.id" flex class="spb row">
      <div :class="{abnormal:row.abnormalStatus==1}" v-text="row.itemValue"/>
      <span v-text="row.sampleTime"/>
    </div>
    <ai-back/>
  </section>
</template>

<script>
import AiBack from "../../components/AiBack";

export default {
  name: "historyList",
  components: {AiBack},
  computed: {
    itemLabel() {
      return '历史' + this.$dict.getLabel('intelligentGuardianshipItem', this.$route.query.type) + `(${this.$dict.getLabel('intelligentGuardianshipItemUnit', this.$route.query.type)})`
    }
  },
  data() {
    return {
      list: []
    }
  },
  methods: {
    getHistory() {
      let {type: item, id: deviceId} = this.$route.query
      this.$http.post("/app/appintelligentguardianshipdevice/queryMonitorList", null, {
        params: {deviceId, size: 999, item}
      }).then(res => {
        if (res?.data) {
          this.list = res.data.records
        }
      })
    }
  },
  created() {
    this.$dict.load("intelligentGuardianshipItem", 'intelligentGuardianshipItemUnit')
    this.getHistory()
  }
}
</script>

<style lang="scss" scoped>
.historyList {
  font-size: 30px;

  & > div {
    padding: 0 32px;
    border-bottom: 1px solid #ddd;
    height: 96px;
    background: #FFFFFF;
  }

  .header {
    font-size: 32px;
  }

  .row {
    color: #5AAD6A;

    .abnormal {
      color: #CD413A;
    }

    & > span {
      color: #999;
    }
  }
}
</style>
