<!--
 * @Author: Devin
 * @Date: 2023-01-11 17:12:51
 * @LastEditors: Devin
 * @LastEditTime: 2023-02-22 14:51:15
 * @Description: 卡片集合
-->
<template>
  <common-panel>
    <el-row :gutter="gutter">
      <el-col v-if="hasAdd" :span="span">
        <div class="__group-card" @click.stop="handelClickCreateCard">
          <!-- <common-icon name="common-yuanxingxinzeng" :size="28"></common-icon> -->
          <span class="__group-card-plus">＋</span>
          {{ cardText }}
        </div>
      </el-col>
      <el-col v-for="(card, index) in cards" :key="index" :span="span">
        <common-card
          :card-info="card"
          :btns="btns"
          :infos="infos"
          :card-infos="cardInfos"
          :card-numbers="cardNumbers"
          @click.stop="handelCardClick(card)"
        ></common-card>
      </el-col>
    </el-row>
  </common-panel>
</template>

<script setup lang="ts">
import { defineEmits, defineProps } from 'vue';

const emits = defineEmits(['handelClickCreateCard', 'handelCardClick']);
defineProps({
  cards: {
    type: Array,
    default: () => []
  },
  hasAdd: {
    type: Boolean,
    default: () => true
  },
  span: {
    type: Number,
    default: () => 8
  },
  gutter: {
    type: Number,
    default: () => 20
  },
  cardText: {
    type: String,
    default: () => '新增'
  },
  infos: {
    type: Array,
    default: () => []
  },
  layer: {
    type: String,
    default: () => 'col'
  },
  cardInfos: {
    type: Array,
    default: () => []
  },

  btns: {
    type: Array,
    default: () => []
  },
  cardNumbers: {
    type: Array,
    default: () => []
  }
});

// 新增事件暴露
function handelClickCreateCard() {
  emits('handelClickCreateCard');
}

function handelCardClick(data: any) {
  emits('handelCardClick', data);
}
</script>
<script lang="ts">
export default {
  name: 'CommonCardGroup'
};
</script>

<style scoped lang="scss">
.__group-card {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: calc(100% - 16px);
  min-height: 150px;
  font-size: 16px;
  color: #7b93a7;
  background: #ffffff;
  border: 2px dashed #ebebeb;
  border-radius: 4px;
  box-sizing: border-box;
  line-height: 28px;
  .__group-card-plus {
    font-size: 24px;
    line-height: 28px;
  }
}
</style>