<template>
  <div class="card">
    <div class="card-head" v-if="showHead">
      <div class="card-head_label"> {{ title }}</div>
      <div class="flex card-head_value">
        <slot name="headRight" />
        <i :class="['iconfont', icon]" v-if="icon" @click="handleIcon" />
      </div>
    </div>
    <div class="card-body">
      <slot name="body" />
    </div>
  </div>
</template>

<script setup lang="ts">
  interface Props {
    id?: string;
    // 标题
    title: string;
    // 是否显示head 部分
    showHead?: boolean;
    // icon
    icon?: string | unknown;
    iconType?: string;
    // 每行宽度
    wrapSpan?: number;
    type?: string;
    right?: {
      show: boolean;
      date?: string;
      doctor?: string;
      edit?: boolean;
      delete?: boolean;
      span?: number;
    };
    // 数据集
    data: Array<{
      filed?: string;
      label: string;
      value?: string;
      span?: number | unknown;
      dict?: boolean | unknown;
      dictName?: string | unknown;
      dictField?: string | unknown;
      hidden?: boolean | unknown;
      tags?:
        | Array<{
            id: string;
            label: string;
            type: string | 'warning' | 'error' | 'success' | 'primary' | 'muted';
            fontColor: string;
            bgColor: string;
          }>
        | unknown
        | any;
    }>;
  }
  const props = withDefaults(defineProps<Props>(), {
    title: '标题',
    showHead: true,
    wrapSpan: 6,
    type: '',
    data: () => [],
    right: () => {
      return {
        show: false,
        span: 4,
        edit: true,
        delete: false,
      };
    },
  });
  const emit = defineEmits(['icon']);

  function handleIcon() {
    const info = { id: props.id, type: props.type, action: props.iconType || 'icon' };
    emit('icon', info);
  }
</script>

<style lang="less" scoped>
  .card {
    border-radius: 4px;
    border: 1px solid #efefef;
    background-color: #fff;

    &-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 56px;
      background: #f6f8fa;
      box-shadow: 0 1px 0 0 #efefef;
      border-radius: 3px 3px 0 0;
      padding: 0 20px;

      &_label {
        font-size: 18px;
        font-weight: 600;
        color: #000a18;
      }

      &_value {
        & .iconfont {
          display: block;
          margin-right: 16px;
          background: #fff;
          border-radius: 50%;
          width: 32px;
          height: 32px;
          text-align: center;
          line-height: 32px;
          cursor: pointer;

          &:last-child {
            margin-right: 0;
          }

          &:hover {
            color: #0075ff;
          }
        }
      }
    }

    &-body {
      display: flex;
      align-items: center;
      padding: 20px;
    }
  }
</style>
