<template>
  <view class="px-20rpx">
    <view class="bg-white">
      <view class="h-80rpx px-20rpx flex items-center text-bold text-32rpx"
        >设备运行状态</view
      >
      <view>
        <u-line></u-line>
      </view>
      <view class="p-20rpx">
        <view class="grid grid-cols-2 gap-20rpx">
          <sbztItem v-for="(item, i) in list" :key="i" :data="item"></sbztItem>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
import sbztItem from './sbzt-item.vue'
import { http } from '@/api/index.js'
import d01 from '@/static/img/01.png'
import d02 from '@/static/img/02.png'
import d03 from '@/static/img/03.png'
import d04 from '@/static/img/04.png'
import d05 from '@/static/img/05.png'

const defaultDevice = [
  {
    name: 'AI智能监控',
    value: [0, 0, 0],
    img: d01,
    key: 1,
  },
  {
    name: '水质监测',
    value: [0, 0, 0],
    img: d02,
    key: 3,
  },
  {
    name: '土壤监测',
    value: [0, 0, 0],
    img: d03,
    key: 2,
  },
  {
    name: '气象监测',
    value: [0, 0, 0],
    img: d04,
    key: 4,
  },
  {
    name: '虫情监测',
    value: [0, 0, 0],
    img: d05,
    key: 5,
  },
]

export default {
  props: {
    baseId: {
      type: [String, Number],
    },
  },
  components: {
    sbztItem,
  },
  data() {
    return {
      list: defaultDevice,
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      http
        .get('/api/devices-num', {
          params: {
            base_id: this.baseId,
          },
        })
        .then(({ data }) => {
          const resData = data.data
          Object.keys(resData).map((e) => {
            const zindex = this.list.findIndex(({ key }) => key == e)

            if (zindex >= 0) this.list[zindex].value = resData[e].slice(1)
          })
        })
    },
  },
}
</script>
