<script setup lang="ts">
const list = [{
  name: '园区名称',
  value: 'xx科技园',
}, {
  name: '简称年份',
  value: '2021年',
}, {
  name: '物业公司',
  value: 'xx物业公司',
}, {
  name: '建筑面积',
  value: '10000平方米',
}, {
  name: '占地面积',
  value: '10000平方米',
}, {
  name: '容积率',
  value: '10000',
}]

const digitals = [
  {
    title: '总面积(m2)',
    value: 87512,
  },
  {
    title: '楼栋数量',
    value: 1000,
  },
  {
    title: '办公人数',
    value: 1000,
  },
  {
    title: '总入住企业',
    value: 1000,
  },
  {
    title: '入住率',
    value: 1000,
  },
  {
    title: '总人数',
    value: 1000,
  },
]

const digitalsV2 = [
  {
    title: '公寓',
    value: 123,
    unit: '加',
    icon: 'solar:airbuds-remove-line-duotone',
  },
  {
    title: '停车位',
    value: 123,
    unit: '加',
    icon: 'solar:airbuds-remove-line-duotone',
  },
  {
    title: '超市',
    value: 123,
    unit: '加',
    icon: 'solar:airbuds-remove-line-duotone',
  },
  {
    title: '扒拉',
    value: 123,
    unit: '加',
    icon: 'solar:airbuds-remove-line-duotone',
  },
  {
    title: '餐厅',
    value: 123,
    unit: '加',
    icon: 'solar:airbuds-remove-line-duotone',
  },
  {
    title: '休想学',
    value: 123,
    unit: '加',
    icon: 'solar:airbuds-remove-line-duotone',
  },
]
</script>

<template>
  <FrameV1 title="园区简介">
    <div class="">
      <div class="grid grid-cols-2 gap-1 px-6">
        <div v-for="(item, index) in list" :key="index" class="grid grid-cols-5 ">
          <div class="col-span-2 font-medium text-[12px] text-[#E4F3FF] opacity-60">
            {{ item.name }} :
          </div>
          <div class="col-span-3 font-medium text-[14px] text-[#D9F1FD]">
            {{ item.value }}
          </div>
        </div>
      </div>

      <div class="grid grid-cols-3 mt-4 gap-x-5">
        <DigitalV1 v-for="(item, index) in digitals" :key="index" v-bind="item" />
      </div>
      <div class="flex items-center justify-center mt-6 mb-4">
        <TitleV1 title="园区环境" />
      </div>

      <div class="w-full">
        <div class="grid grid-cols-2 mx-auto gap-x-4 w-fit -gap-1">
          <DigitalV2 v-for="(item, index) in digitalsV2" :key="index" v-bind="item" />
        </div>
      </div>
    </div>
  </FrameV1>
</template>
