<template>
  <div class="card">
    <div class="card-head">
      <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>
    <Row class="card-body" v-if="data.length">
      <Row
        v-for="item in data"
        :key="item.id"
        :class="['w-full', data.length > 1 ? 'card-body-list' : '']"
      >
        <Col class="card-body_left" :span="item.right.show ? 20 : 24">
          <Row class="w-full">
            <Col
              :span="cItem?.span || wrapSpan"
              class="card-body-item"
              v-for="cItem in item.data"
              :key="cItem.label"
              :style="{ display: cItem.hidden ? 'none' : 'block' }"
            >
              <div class="card-body-item_label" v-if="cItem.label">{{ cItem.label }}</div>
              <div class="card-body-item_value">
                <div v-if="cItem.value">{{ cItem.value }}</div>
                <div v-if="cItem.tags" class="flex ml-3">
                  <div
                    v-for="t in cItem.tags"
                    :key="t.id"
                    :class="['card-body-item_tag', t.type ? 'card-body-item_tag--' + t.type : '']"
                    :style="{
                      color: t.fontColor,
                      backgroundColor: t.bgColor,
                    }"
                    :title="t.label"
                  >
                    {{ t.label }}
                  </div>
                </div>
                <div>
                  <slot name="tags" />
                </div>
              </div>
            </Col>
          </Row>
        </Col>
        <Col class="card-body_right" v-if="item.right.show" span="4">
          <div>{{ item.right.date ? item.right.date + '/' : '' }} {{ item.right.doctor }}</div>
          <div class="flex">
            <div v-if="item.right.edit" class="card-body_right-btn" @click="handleEdit(item)">
              <i class="iconfont icon-xt-details_edit_default" />
            </div>
            <div v-if="item.right.delete" class="card-body_right-btn" @click="handleDel(item)">
              <!-- 删除 -->
              <i class="iconfont icon-xt-details_delete_default" />
            </div>
          </div>
        </Col>
      </Row>
    </Row>
  </div>
</template>

<script setup lang="ts">
  import { Row, Col } from 'ant-design-vue';
  interface Props {
    id?: string;
    // 标题
    title: string;
    // icon
    icon?: string | unknown;
    iconType?: string;
    // 每行宽度
    wrapSpan?: number;
    type?: string;
    // 数据集
    data: Array<{
      id?: 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;
      }>;
    }>;
  }
  const props = withDefaults(defineProps<Props>(), {
    title: '标题',
    wrapSpan: 6,
    type: '',
    data: () => [],
  });
  const emit = defineEmits(['edit', 'delete', 'icon']);

  function handleEdit(item) {
    const info = { id: props.id, type: props.type, action: 'edit', data: item };
    emit('edit', info);
  }
  function handleDel(item) {
    const info = { id: props.id, type: props.type, action: 'delete', data: item };
    emit('delete', info);
  }

  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 20px 0;

      &_right {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        font-size: 12px;
        color: #818694;

        &-btn {
          // margin-right: 16px;
          color: #3d4155;
          background: #f4f6f9;
          border-radius: 50%;
          width: 32px;
          height: 32px;
          text-align: center;
          line-height: 32px;
          cursor: pointer;
          margin-left: 10px;

          &:last-child {
            margin: 0;
            margin-left: 16px;
          }

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

      &-list {
        border-bottom: 1px solid rgb(238 240 241 / 100%);
        width: 100%;
        margin-bottom: 20px;

        &:last-child {
          border-bottom: 0;
          margin-bottom: 0;
        }
      }

      &-item {
        display: flex;
        flex-direction: column;
        margin-bottom: 30px;

        &_label {
          font-size: 12px;
          font-weight: 400;
          color: #818694;
        }

        &_value {
          display: flex;
          font-size: 14px;
          font-weight: 500;
          color: #000a18;
        }

        &_tag {
          font-size: 12px;
          height: 20px;
          border-radius: 12px;
          padding: 1px 10px;
          margin: 0 4px;
          white-space: nowrap;
          max-width: 200px;
          overflow: hidden;
          text-overflow: ellipsis;

          &:first-child {
            margin-left: 0;
          }

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

          &--warning {
            background: #fff6e7;
            color: #f90;
          }

          &--error {
            background: #ffeee3;
            color: #ff5d39;
          }

          &--success {
            color: #19be6b;
            background: #ecf8f2;
          }

          &--primary {
            color: #0075ff;
            background: #e5f1ff;
          }

          &--muted {
            color: #828890;
            background: #e1e3e7;
          }
        }
      }
    }
  }
</style>
