<script setup lang="ts">
const items = [{
  title: '人员统计',
  value: 'people',
}, {
  title: '设备统计',
  value: 'equipment',
}, {
  title: '能耗统计',
  value: 'energy',
}]

const selected = ref(0)

function change(value: number) {
  selected.value = value
}

const digital = [
  {
    title: '员工',
    value: 245,
    icon: 'solar:adhesive-plaster-line-duotone',
  },
  {
    title: '安保',
    value: 245,
    icon: 'solar:adhesive-plaster-line-duotone',
  },
  {
    title: '访客',
    value: 245,
    icon: 'solar:adhesive-plaster-line-duotone',
  },
]
</script>

<template>
  <FrameV1 title="人测统计">
    <div class="space-y-4 ">
      <TabsV2 v-model:model-value="selected" :items="items" :selected="selected" :change="change" />
      <DigitalV4 title="园区现有总人数" :value="4555" unit="人" icon="solar:adhesive-plaster-line-duotone" />
      <div class="flex justify-between">
        <DigitalV5 v-for="item in digital" :key="item.title" v-bind="item" />
      </div>
    </div>
  </FrameV1>
</template>
