<template>
  <div class="xt-card">
    <div class="xt-card_item" v-for="item in data" :key="item.groupKey">
      <!-- card 组件 -->
      <div class="group">
        <div class="group-tit">
          <div class="group-tit_label">{{ item.groupTit }}</div>
          <div class="group-tit_value">
            <div
              class="group-tit_value-item"
              v-for="v in item.groupValue"
              :key="v.color"
              :style="{ backgroundColor: v.background, color: v.color }"
            >
              {{ v.value }}
            </div>
          </div>
        </div>
      </div>
      <div
        :class="['card', c.type == '3' ? 'card--muted' : '']"
        :style="{ borderLeftColor: c.borderLeftColor }"
        v-for="c in item.groupData"
        :key="c.id"
      >
        <div class="card-head" v-if="item.groupMode == 'default'">
          <div class="card-head_info">
            <div class="card-head_info-left"> {{ c.ward }}-{{ c.bed }} </div>
            <div class="card-head_info-right"> {{ c.cure }}</div>
          </div>
          <div class="card-head_desc">
            <span>{{ c.name }}</span>
            <i class="iconfont icon-xt-boy" />
            <span>{{ c.age }}</span>
          </div>
        </div>
        <div class="card-head card-head--simple" v-if="item.groupMode == 'simple'">
          <div class="card-head_info">
            <div class="card-head_info-left">
              <span>{{ c.name }}</span>
              <i class="iconfont icon-xt-boy" />
              <span>{{ c.age }}</span>
            </div>
            <div class="card-head_info-right"> {{ c.ward }}-{{ c.bed }} </div>
          </div>
        </div>
        <Row class="card-body" v-if="c.infoShow">
          <Col :span="info.span" class="card-body_item" v-for="info in c.info" :key="info.label">
            <div class="card-body_item-label">{{ info.label }} : </div>
            <div class="card-body_item-value">
              <span>{{ info.value }}</span>
              <span class="card-body_item-suffix">{{ info.suffix }}</span>
            </div>
          </Col>
        </Row>
        <div class="card-foot">
          <div :class="['card-foot_link', c.way?.length > 3 ? 'card-foot_link--more' : '']">
            <Badge
              v-for="way in c.way"
              :key="way.label"
              :count="way.badge"
              @click="handleType(c.id, way.type)"
            >
              {{ way.label }}
            </Badge>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { Badge, Row, Col } from 'ant-design-vue';
  interface CardItem {
    // id
    id: string;
    // 类型
    type: string;
    // 边框颜色
    borderLeftColor: string;
    // 病区
    ward: string;
    // 床位
    bed: string;
    // 治疗方式
    cure?: string;
    // 年龄
    age: string | number;
    // 姓名
    name: string;
    // 性别
    gender: string;
    // 是否显示信息
    infoShow?: boolean;
    // 信息数组
    info?: Array<{
      label: string;
      value: string | number | null | undefined;
      suffix?: string;
      span: number;
    }>;
    // 方法数组
    way?: Array<{
      // 标题
      label: string;
      // 类型
      type: string;
      // 数量
      badge?: string | number;
    }>;
  }
  interface CardGroupValue {
    // card组 值
    value: string | number | null | undefined;
    // card组 值颜色
    color: string;
    // card组 值背景色
    background: string;
  }
  interface Props {
    data: Array<{
      // card组 key
      groupKey: string;
      // card组 名称 待确认/未签到
      groupTit: string | Array<string>;
      // card组 值 12 1
      groupValue: Array<CardGroupValue>;
      // card组 值是否显示
      groupValueShow: boolean;
      // card组 模式 'default' | 'simple'
      groupMode: string;
      // card 数组
      groupData: Array<CardItem>;
    }>;
  }
  withDefaults(defineProps<Props>(), {
    data: () => [],
  });

  const emit = defineEmits(['itemClick']);

  function handleType(id: string, type: string) {
    console.log('🚀 ~ file: XTCard.vue:128 ~ handleType ~ type:', type);
    console.log('🚀 ~ file: XTCard.vue:128 ~ handleType ~ id:', id);
    emit('itemClick', { type, id });
  }
</script>

<style lang="less" scoped>
  .xt-card {
    &_item {
      min-width: 300px;
      max-width: 310px;
    }
  }

  .group {
    margin-bottom: 18px;

    &-tit {
      display: flex;

      &_label {
        font-size: 16px;
        font-weight: 600;
        color: #8a99ac;
      }

      &_value {
        display: flex;
        margin-left: 10px;

        &-item {
          padding: 2px 10px;
          margin-right: 4px;
          border-radius: 13px;
        }
      }
    }
  }

  .card {
    border-left-width: 3px;
    border-left-style: solid;
    border-radius: 4px;
    padding: 22px 20px 14px;
    background-color: #fff;
    margin-bottom: 20px;
    transition: all 0.3s cubic-bezier(0.39, 0.575, 0.565, 1);

    &:hover {
      box-shadow: 0 0 18px 0 rgb(0 37 74 / 12%);
    }

    &--muted {
      filter: grayscale(1);
    }

    &-head {
      margin-bottom: 10px;

      &_info {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-weight: 600;
        color: #000a18;

        &-left {
          font-size: 18px;
        }

        &-right {
          font-size: 14px;
        }
      }

      &_desc {
        font-size: 14px;
        color: #8a99ac;
      }
    }

    &-body {
      margin-bottom: 10px;
      display: flex;

      &_item {
        display: flex;
        margin-bottom: 8px;
        font-size: 14px;

        &-label {
          min-width: 50px;
          color: #8a99ac;
          margin-right: 6px;
        }

        &-value {
          color: #000a18;
        }
      }
    }

    &-foot {
      border-top: 1px solid #edf1f6;
      padding-top: 16px;

      &_link {
        display: flex;
        justify-content: flex-end;

        & span {
          display: block;
          margin-left: 32px;
          font-size: 14px;
          color: #818694;
          min-width: 30px;
          cursor: pointer;

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

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

        &--more {
          & span {
            margin-left: 15px;
          }
        }
      }
    }
  }

  ::v-deep(.ant-badge-count) {
    background: rgb(255 93 57 / 80%);
    color: #fff;
    font-size: 6px;
    height: 16px;
    line-height: 16px;
    min-width: 14px;
    padding: 0 2px;
    transform: translate(75%, -60%);
  }
</style>
