<template>
  <show-item>
    {{'报警设备汇总'}}
    <template #container>
      <div class="progressBox">
        <progress-bar :deviceAlarm="deviceAlarm" :percent="deviceAlarm[0].context" wrapColor="" borderColor="" dotColor="#00A3CC" >{{deviceAlarm[0].title}}</progress-bar>
      </div>
      <div class="progressBox">
        <progress-bar :deviceAlarm="deviceAlarm" :percent="deviceAlarm[1].context" wrapColor="" borderColor="" dotColor="#00A3CC" >{{deviceAlarm[1].title}}</progress-bar>
      </div>
      <div class="progressBox">
        <progress-bar :deviceAlarm="deviceAlarm" :percent="deviceAlarm[2].context" wrapColor="" borderColor="" dotColor="#00A3CC" >{{deviceAlarm[2].title}}</progress-bar>
      </div>
      <div class="progressBox">
        <progress-bar :deviceAlarm="deviceAlarm" :percent="deviceAlarm[3].context" wrapColor="" borderColor="" dotColor="#00A3CC" >{{deviceAlarm[3].title}}</progress-bar>
      </div>
    </template>
  </show-item>
</template>

<script>

import progressBar from '@/views/zhangqiu/components/progressBar.vue'
import ProgressBar from '@/views/zhangqiu/components/progressBar.vue'
import showItem from '@/views/zhangqiu/components/showItem.vue'
import { getAlarm } from "@/views/zhangqiu/api/zq.js"
export default {
  name: 'DeviceAlarmSum',
  components: {showItem, ProgressBar, progressBar },
  data() {
    return {
      deviceAlarm: [
        {
          title: '井盖状态监测仪',
          context: '',
        },
        {
          title: '燃气智能监测终端',
          context: '',
        },
        {
          title: '可燃气体监测仪',
          context: '',
        },
        {
          title: '燃气管盯',
          context: '',
        }
      ]
    }
  },
  created() {
    // this.getWellPercent()
    // this.getGasPercent()
    // this.getGasdectorPercent()
    // this.getTubePercent()
    this.getAlarmList()
  },
  methods: {
    // getWellPercent() {
    //   this.deviceAlarm[0].context = '10'
    // },
    // getGasPercent() {
    //   this.deviceAlarm[1].context = '70'
    // },
    // getGasdectorPercent() {
    //   this.deviceAlarm[2].context = '50'
    // },
    // getTubePercent() {
    //   this.deviceAlarm[3].context = '45'
    // }
    getAlarmList() {
      getAlarm().then(response => {
        console.log(response)
        this.deviceAlarm[0].context = parseFloat(response.data[0].rate).toFixed(3).substring(0, parseFloat(response.data[0].rate).toFixed(3).length - 1)
        this.deviceAlarm[1].context = parseFloat(response.data[1].rate).toFixed(3).substring(0, parseFloat(response.data[1].rate).toFixed(3).length - 1)
        this.deviceAlarm[2].context = parseFloat(response.data[2].rate).toFixed(3).substring(0, parseFloat(response.data[2].rate).toFixed(3).length - 1)
        this.deviceAlarm[3].context = parseFloat(response.data[3].rate).toFixed(3).substring(0, parseFloat(response.data[3].rate).toFixed(3).length - 1)
      })
    }
  }
}
</script>

<style lang="scss">
.showItem{
  display: flex;
  .progressBox{
    margin-top: 15px;
  }
}
</style>