<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-3 gap-20rpx">
          <view class="text-center shadow shadow-sm py-10rpx" v-for="item in list" :key="item.key">
            <view>{{ item.label }}</view>
            <view>
              <text class="text-34rpx">{{ item.value }}</text>
              <text class="ml-1">{{ item.unit }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
import { http } from '@/api/index.js'
const defaultList = [
  {
    label: '空气温度',
    value: 0,
    unit: '℃',
    key: 'air_temperature',
  },
  {
    label: '空气湿度',
    value: 0,
    unit: '%',
    key: 'air_humidity',
  },
  {
    label: '光照强度',
    value: 0,
    unit: 'lux',
    key: 'illumination',
  },
  {
    label: '降雨量',
    value: 0,
    unit: 'mm',
    key: 'current_rainfall',
  },
  {
    label: '风速',
    value: 0,
    unit: 'm/s',
    key: 'wind_speed',
  },
  {
    label: '大气压力',
    value: 0,
    unit: 'Kpa',
    key: 'air_pressure',
  },
]
export default {
  props: {
    baseId: {
      type: [String, Number],
    },
  },
  data() {
    return {
      list: defaultList,
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      http
        .get('/api/devices', {
          params: {
            base_id: this.baseId,
            type: 4,
            status: 1,
          },
        })
        .then(({ data }) => {
          const resData = data.data
          if (resData.length) {
            this.getData(resData[0])
          }
        })
    },
    async getData(device) {
      try {
        const { data } = await http.get('/api/device-data-statics', {
          params: {
            device_id: device.id,
          },
        })
        const resData = data?.data?.list ?? {}
        this.list.forEach(
          (e) => (e.value = parseFloat(resData[e.key]).toFixed(0) ?? 0)
        )
      } catch (error) {}
    },
  },
}
</script>
