<template>
  <div class='app-card-demo'>
    <p>带珊格布局的概览卡片</p>
    <KsViewCard :data="data" title="云资源概览" span="12" height="110" />
    <p>带珊格布局的概览卡片-只有左侧内容且不带背景颜色</p>
    <KsViewCard :data="data1" title="云资源概览" span="6" height="110" nobg/>
    <!-- 详情卡片 -->
    <p>详情卡片</p>
    <KsDetailCard :data="onecard" class="app-card-box" nobg/>

    <p>单条数据卡片</p>
    <p>带图片</p>
    <KsOneCard :info="info0" class="app-card-onebox"/>
    <span>控制图片和num大小</span>
    <KsOneCard :info="info1" class="app-card-onebox"/>
    <p>不带图片</p>
    <KsOneCard :info="info2"/>
  </div>
</template>
<script setup>
import { KsViewCard,KsDetailCard,KsOneCard } from '@ksconsole/components';
import { Input,Button,Icon,Message } from "@king-design/vue";
import serve from '../assets/serve.png';
import balance from '../assets/balance.png';
import tb from '../assets/tb.png';
import cpu from '../assets/cpu.png';
const data = [
  {
    total: {
      title: '云服务器',
      num: 30,
      unit: '台',
      img: cpu,
      // numSize: 18
      // imgSize: 56
    },
    list: [
      {
        title: '云服务器',
        num: 3,
        unit: '台',
        color: 'red',
      },
      {
        title: '云数据库',
        num: 10,
        unit: '台',
        color: 'green',
      },
      {
        title: '云存储',
        num: 7,
        unit: '台',
      },
      // {
      //   title: '云负载均衡',
      //   num: 10,
      //   unit: '台'
      // },
    ],
  },
  {
    total: {
      title: '块存储',
      num: 23,
      unit: '个',
      img: serve,
    },
    list: [
      {
        title: '云服务器',
        num: 4,
        unit: '台',
      },
      {
        title: '云数据库',
        num: 9,
        unit: '台',
      },
      {
        title: '云存储',
        num: 6,
        unit: '台',
      },
    ],
  },
  {
    total: {
      title: '对象存储',
      num: 30,
      unit: '个',
      img: tb,
    },
    list: [
      {
        title: '云服务器',
        num: 3,
        unit: '台',
      },
      {
        title: '云数据库',
        num: 10,
        unit: '台',
      },
      {
        title: '云存储',
        num: 7,
        unit: '台',
      },
      {
        title: '云负载均衡',
        num: 10,
        unit: '台',
      },
    ],
  },
  {
    total: {
      title: '负载均衡',
      num: 23,
      unit: '个',
      img: balance,
    },
    list: [
      {
        title: '云服务器',
        num: 4,
        unit: '台',
      },
      {
        title: '云数据库',
        num: 9,
        unit: '台',
      },
      {
        title: '云存储',
        num: 6,
        unit: '台',
      },
      {
        title: '云负载均衡',
        num: 4,
        unit: '台',
      },
    ],
  },
];
const data1 = [
  {
    total: {
      title: '云服务器',
      num: 30,
      unit: '台',
      img: cpu,
      // numSize: 18
      // imgSize: 56
    },
  },
  {
    total: {
      title: '块存储',
      num: 23,
      unit: '个',
      img: serve,
    },
   
  },
  {
    total: {
      title: '对象存储',
      num: 30,
      unit: '个',
      img: tb,
    },
   
  },
  {
    total: {
      title: '负载均衡',
      num: 23,
      unit: '个',
      img: balance,
    },
    
  },
];
const onecard = data[0]
const info0 = {
  title: '云服务器1',
  num: 30,
  unit: '台',
  img: cpu,
}

const info1 = {
  title: '云服务器1',
  num: 30,
  unit: '台',
  img: cpu,
  imgSize: 36,
  numSize: 18
}
const info2 = {
  color:'red',
  title: '云服务器2',
  num: 30,
  unit: '台',
}
</script>

<style scoped>
.app-card-demo {
  padding: 24px;
}
.app-card-box {
  margin: 24px;
  background: #f8f9fa;
}
.app-card-onebox {
  width: 200px;
  margin: 24px;
}

.app-card-onebox2 {
  width: 100px;
  margin: 24px;
  padding: 16px;
  background: #f8f9fa;
}

</style>
