<template>
  <!-- 适用于虫情设备 -->
  <div class="device-data" v-if="deviceType === 1">
    <el-row :gutter="10" class="device-data__header">
      <el-col :span="headerColNum" class="header-item" v-for="(item, index) in pestData.headerList" :key="index">
        <svg-icon :icon-class="item.svg" class="header-item__icon"/>
        <span class="header-item__name">{{ item.name }}：</span>
        <span class="header-item__value">{{ item.value || '--' }}</span>
      </el-col>
    </el-row>
    <el-row :gutter="10" class="device-data--body">
      <el-col :span="4" v-for="(item, index) in pestData.bodyList" :key="index">
        <div :class="['body-item', {'on': deviceData[item.key] == 1}, { 'mode': item.key === 'mode'}]">
          <p>{{ item.name }}</p>
          <span>{{ item.value ? item.value : '--' }}</span>
        </div>
      </el-col>
    </el-row>
  </div>
  <!-- 适用于土壤湿度、气象站 -->
  <div class="device-data" v-if="deviceType === 2 || deviceType === 3">
    <el-row :gutter="10">
      <el-col :span="6" v-for="(item, index) in otherData" :key="index">
        <div class="body-item">
          <p>{{ item.name }}</p>
          <span>{{ item.value }}</span>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  const defaultDataDict = readonly({
    pest: {
      mode: '0',
      deviceType: 'worm',
      insecticideTem: '20℃',
      dryingTem: '20℃',
      rain: '4mm',
      wormFlap: 0,
      insecticide: 0,
      illum: '10lux',
      status: 0,
      shake: '0',
      dryingFlap: 1,
      drying: '1',
      rainFlap: 0,
      moveWorm: 1,
      attractWorm: 0,
      fillLight: 0
    },
    met: {
      nodeId: 1,
      nodeName: '测试设备',
      temName: '温度',
      temValue: '20',
      temUnit: '℃',
      temValueStr: '20℃',
      humName: '湿度',
      humValue: '60',
      humUnit: '%',
      humValueStr: '60%',
      lightName: '光照',
      lightValue: '1000',
      lightUnit: 'lux',
      lightValueStr: '1000lux',
      rainName: '雨量',
      rainValue: '4',
      rainUnit:'mm',
      rainValueStr: '4mm',
      windName: '风速',
      windValue: '2',
      windUnit:'m/s',
      windValueStr: '2m/s',
      windDirName: '风向',
      windDirValue: '东北',
      windDirValueStr: '东北',
    }
  })
</script>

<script setup>
import { pestDeviceParamsDict } from '@/dict'

const deviceTypeDict = readonly({
  worm: 1,
  soil: 2,
  met: 3,
  other: 4
})

const props = defineProps({
  deviceData: {
    type: Object,
    required: false,
    default: () => defaultDataDict.pest
  }
})

const deviceType = computed(() => {
  return deviceTypeDict[props.deviceData.deviceType]
})

// 生产头部数据
const pestData = computed(() => {
  return formatPestDeviceData(props.deviceData)
})

const otherData = computed(() => {
  return formatOtherDeviceData(props.deviceData)
})

const headerColNum = computed(() => {
  return 24 / pestData.value.headerList.length 
})

// 格式化虫情设备数据
function formatPestDeviceData (deviceData) {
  const headerList = [];
  const bodyList = [];
  const headKeys = ['insecticideTem', 'dryingTem', 'rain', 'illum']
  Object.keys(deviceData).forEach(key => {
    const dictValue = pestDeviceParamsDict[key];
    if (!dictValue) return;
    if (headKeys.includes(key)) {
      headerList.push ({
        key: key,
        name: dictValue.name,
        svg: dictValue.svg,
        value: deviceData[key],
      })
    } else {
      bodyList.push({
        key: key,
        name: dictValue.name,
        value: dictValue.status[deviceData[key]]
      })
    }
  })
  return {
    headerList,
    bodyList
  }
}

// 格式化其他设备数据
function formatOtherDeviceData (deviceData) {
  return Object.keys(deviceData).map((key) => {
    return {
      key: key,
      name: deviceParamsDict[key].name,
      value: deviceData[key]
    }
  })
}
</script>

<style lang="scss" scoped>
.device-data__header {
  @apply mb-16px;
  padding: 16px 10px;
  border: 1px solid var(--el-border-color);
  border-radius: 6px;
}
.header-item {
  $icon-size: 36px;
  @apply flex! justify-center items-center;

  .header-item__icon {
    width: $icon-size;
    height: $icon-size;
    @apply mr-15px;
  }
  .header-item__name {
    @apply text-18px color-#333 mr-12px;
  }
  .header-item__value {
    color: var(--el-color-primary);
    @apply text-22px;
  }
}

.body-item {
  @apply flex flex-col justify-center items-center p-12px mb-12px;
  border: 1px solid var(--el-border-color-light);
  background-color: var(--el-border-color-light);
  border-radius: 6px;

  &.on {
    background-color: var(--el-color-primary);
    border: 1px solid var(--el-color-primary);

    p {
      color: #fff;
    }

    span {
      color: var(--el-color-warning);
    }
  }

  &.mode {
    background-color: var(--el-color-success);
    border: 1px solid var(--el-color-success);

    p {
      color: #fff;
    }

    span {
      color: #fff;
    }
  }

  p {
    @apply text-18px mb-5px;
    color: var(--el-text-color-primary);
    letter-spacing: 2px;
  }
  span {
    color: var(--el-color-primary);
    @apply text-16px font-700;
  }
}
</style>
