<template>
  <a-card class="admin-todo-list">
    <template slot="title">
      <a-icon v-if="icon" :type="icon" :style="{ fontSize: `${iconSize}px` }" style="color: #1890ff" />
      {{ title }}
    </template>
    <template slot="extra">
      <a-space size="small">
        <slot name="options" />
      </a-space>
    </template>
    <div v-if="filters">
      <a-row :gutter="gutter">
        <slot />
      </a-row>
    </div>
    <div v-else>
      <!-- class="pt-2" -->
      <div>
        <slot />
      </div>
    </div>
  </a-card>
</template>

<script>
export default {
  name: 'AdminTodoList',
  props: {
    icon: {
      type: String,
      required: false,
      default: 'tag'
    },
    iconSize: {
      type: String,
      required: false,
      default: '16'
    },
    title: {
      type: String,
      required: false,
      default: '标题'
    },
    gutter: {
      type: Number,
      required: false,
      default: 24
    },
    filters: {
      type: Boolean,
      required: false,
      default: false
    },
    label: {
      type: String,
      required: false,
      default: '字段'
    }
  }
}
</script>

<style lang="scss" scoped>
.admin-todo-list {
  border-radius: 4px;
  overflow: hidden;
}
.a-icon {
  color: #1890ff;
}
</style>
