<template>
  <el-descriptions class="margin-top" :column="1" size="small" border>
    <el-descriptions-item align="center">
      <template #label align="center"> 描述 </template>
      值
    </el-descriptions-item>

    <el-descriptions-item class="tag-info">
      <template #label>
        <div class="cell-item">
          <el-icon class="iconStyle">
            <tickets />
          </el-icon>
          灯光状态
        </div>
      </template>
      <el-tag size="default" type="success">开启</el-tag>
    </el-descriptions-item>

    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          <el-icon class="iconStyle">
            <MostlyCloudy />
          </el-icon>
          湿度
        </div>
      </template>
      80%
    </el-descriptions-item>

    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          <el-icon class="iconStyle">
            <Sunrise />
          </el-icon>
          温度
        </div>
      </template>
      36℃%
    </el-descriptions-item>

    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          <el-icon class="iconStyle">
            <House />
          </el-icon>
          节点ID
        </div>
      </template>
      2100210
    </el-descriptions-item>
  </el-descriptions>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue';
import {
  Iphone,
  Location,
  OfficeBuilding,
  Tickets,
  User,
  House,
  MostlyCloudy,
  Sunrise
} from '@element-plus/icons-vue';

import type { ComponentSize } from 'element-plus';

const size = ref<ComponentSize>('default');
</script>

<style scoped>
.iconStyle {
  marginright: 4px;
}
.el-descriptions {
  margin-top: 20px;
}
.cell-item {
  display: flex;
  align-items: center;
}
.tag-info {
  align-items: center;
}
.margin-top {
  margin-top: 20px;
}
</style>
