<template>
  <div>
    <div class="head"> 查房 </div>
    <div class="filter">
      <!-- select 组件 -->
      <div class="select" />
    </div>
    <div class="list">
      <div class="list-item">
        <!-- list-item_tit s-->
        <div class="list-item_tit">
          <span>未称量</span>
          <span>12</span>
        </div>
        <!-- list-item_tit e -->
        <!-- list-item_body s  -->
        <div class="list-item_body">
          <!-- card 组件 -->
          <div class="card" :style="{ borderLeftColor: '#cccc' }">
            <div class="card-head">
              <div class="card-head-left">
                <div class="card-head-tit"> A区-99 </div>
                <div class="card-head-desc">
                  <span>姓名</span>
                  <i class="iconfont icon-xt-boy" />
                  <span>年龄</span>
                </div>
              </div>
              <div class="card-head-right"> 其他 </div>
            </div>
            <div class="card-body">
              <div class="card-body_item">
                <div class="card-body_item-label">时间: </div>
                <div class="card-body_item-value">4:00</div>
              </div>
              <div class="card-body_item">
                <div class="card-body_item-label">超滤量: </div>
                <div class="card-body_item-value">
                  <span>2.1</span>
                  <span class="card-body_item-suffix">kg</span>
                </div>
              </div>
            </div>
            <div class="card-foot">
              <div class="card-foot_link">下机</div>
              <div class="card-foot_link">下机</div>
              <div class="card-foot_link">下机</div>
              <div class="card-foot_link">下机</div>
            </div>
          </div>
        </div>
        <!-- list-item_body e  -->
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  interface Form {
    name: string;
    label: string;
    type: string | null;
    componentType: string;
    format?: string | null;
    placeholder?: string;
    [propName: string]: any;
  }
  interface CardItem {
    // 边框颜色
    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;
    }>;
    // 方法数组
    way?: Array<{
      // 标题
      label: string;
      // 类型
      type: string;
      // 数量
      badge?: string | number;
    }>;
  }
  interface CardGroupValue {
    // card组 值
    value: string | number | null | undefined;
    // card组 值颜色
    color: string;
    // card组 值背景色
    background: string;
  }
  interface Card {
    // card组 名称 待确认/未签到
    groupTit: string | Array<string>;
    // card组 值 12 1
    groupValue: Array<CardGroupValue>;
    // card组 值是否显示
    groupValueShow: boolean;
    // card 数组
    list: Array<CardItem>;
  }

  interface Props {
    // 标题
    tit: string;
    // 打印
    hasPrint?: boolean;
    hasUpload?: boolean;
    // select
    select: Array<any>;
    selectShow: boolean;
    // form
    form: Array<Form>;
    // card
    card: Array<Card>;
  }

  withDefaults(defineProps<Props>(), {
    tit: '',
    select: () => [],
    form: () => [],
    card: () => [],
    selectShow: false,
  });

  console.log('XTForm');
  console.log('XTCard');
  console.log('XTTable');
  console.log('XTTab ');
</script>

<style lang="less" scoped></style>
