<template>
  <div class="system-situation">
    <div class="card-title">
      卸载设备维度分布TOP10
    </div>
    <div class="content">
      <el-row :gutter="12" style="padding: 0; row-gap: 12px;">
        <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
          <SystemItem :title="'来源渠道'" :icon="'1'" :list="getList()" />
        </el-col>
        <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
          <SystemItem :title="'末次使用机型'" :icon="'2'" :list="getList()" />
        </el-col>
        <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
          <SystemItem :title="'末次使用应用版本'" :icon="'3'" :list="getList()" />
        </el-col>
        <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
          <SystemItem :title="'末次操作系统版本'" :icon="'4'" :list="getList()" />
        </el-col>
        <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
          <SystemItem :title="'末次活跃城市'" :icon="'5'" :list="getList()" />
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue'
import SystemItem from './SystemItem.vue'

const getList = () => {
  const length = Math.floor(Math.random() * 10) + 1;
  const list = [];
  for (let i = 0; i < length; i++) {
    list.push({ name: `渠道${i + 1}`, value: Math.floor(Math.random() * 100), percentage: `${Math.floor(Math.random() * 100)}%` })
  }
  return list;
}

</script>

<style scoped lang="scss">
@import '../../../styles/common.scss';

.system-situation {
  .card-title {
    vertical-align: middle;
  }
}
</style>