<!--
 * @Author: Devin
 * @Date: 2023-02-07 14:24:35
 * @LastEditors: Devin
 * @LastEditTime: 2023-02-17 14:55:46
 * @Description: card-demo
-->
<template>
  <div class="demo">
    <common-card-group
      :card-numbers="cardNumbers"
      :card-infos="cardInfos"
      :span="6"
      :btns="btns"
      :cards="cards"
      @handel-click-create-card="handelClickCreateCard"
    ></common-card-group>
  </div>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus';
import { ref } from 'vue';

function edit() {
  ElMessage('编辑');
}
function start() {}
//
const cardNumbers = ref<any>([
  { label: '信息1', name: 'name1' },
  { label: '信息2', name: 'name2' },
  { label: '信息3', name: 'name3' }
]);

function deleteFn(data: any) {
  console.log(data);

  console.log('点击删除');
}

const cardInfos = ref<any>([{ label: '厂商', name: 'name' }]);
const btns = ref<any>([
  {
    label: '启用',
    name: 'start',
    icon: 'common-bianji',
    color: '#7b93a7',
    onClick: start
  },
  {
    label: '编辑',
    name: 'edit',
    icon: '',
    onClick: edit
  },
  {
    label: '删除',
    name: 'delete',
    icon: 'tool-baocun',
    color: '#7b93a7',
    onClick: deleteFn
  },
  {
    label: '发布',
    name: 'publish',
    icon: 'tool-baocun',
    color: '#7b93a7',
    onClick: edit
  },
  {
    label: '查看',
    name: 'view',
    icon: 'tool-baocun',
    color: '#7b93a7',
    onClick: edit
  }
]);
const cards = ref<any>([
  {
    url: '',
    title:
      '大标题大标题大标题大标题大标题大标题大标题大标题大标题大标题大标题大标题大标题',
    subTitle: '2022-12-24c12:12:12',
    tags: [
      { label: '成功', type: 'success' },
      { label: '失败', type: 'danger' }
    ],

    desc: '这个是描述信息，可以有最多三行这个是描述信息，可以有最多三行这个是描述信息，可以有最多三行这个是描述信息，可以有最多三行这个是描述信息，可以有最多三行这个是描述信息，可以有最多三行这个是描述信息，可以有最多三行这个是描述信息，可以有最多三行',
    infos: {
      name: '海康威视'
    },
    name1: 1,
    name2: 2,
    name3: 3
  },
  {
    url: '',
    title:
      '大标题大标题大标题大标题大标题大标题大标题大标题大标题大标题大标题大标题大标题',
    subTitle: '2022-12-24c12:12:12',
    tags: [
      { label: '成功', type: 'success' },
      { label: '失败', type: 'danger' }
    ],

    desc: '这个是描述信息，可以有最多三行这个是描述信息，可以有最多三行这个是描述信息，可以有最多三行这个是描述信息，可以有最多三行这个是描述信息，可以有最多三行这个是描述信息，可以有最多三行这个是描述信息，可以有最多三行这个是描述信息，可以有最多三行',
    infos: {
      name: '海康威视'
    },
    name1: 1,
    name2: 2,
    name3: 3
  },
  {
    url: '',
    title:
      '大标题大标题大标题大标题大标题大标题大标题大标题大标题大标题大标题大标题大标题',
    subTitle: '2022-12-24c12:12:12',
    tags: [
      { label: '成功', type: 'success' },
      { label: '失败', type: 'danger' }
    ],

    desc: '这个是描述信息，可以有最多三行这个是描述信息，可以有最多三行这个是描述信息，可以有最多三行这个是描述信息，可以有最多三行这个是描述信息，可以有最多三行这个是描述信息，可以有最多三行这个是描述信息，可以有最多三行这个是描述信息，可以有最多三行',
    infos: {
      name: '海康威视'
    },
    name1: 1,
    name2: 2,
    name3: 3
  }
]);

// 添加新卡片
function handelClickCreateCard() {
  ElMessage('123131233');
}
</script>

<style scoped lang="scss"></style>