<template>
  <div class="inPatientBarDoctorFold-container">
    <div class="basic_info">
      <div class="patient-header white-bg">
        <div class="select_wrapper_div">
          <b class="bedNumber">{{ patientInfo?.bedName || '未分床' }}</b>
          <label class="patient-name">
            {{ patientInfo?.patientName || '-' }}
            <span class="sex-age">
              {{ formatSexAge(patientInfo?.sexName, patientInfo?.age) }}
            </span>
          </label>
          <div class="tag-list" v-if="patientInfo?.list && patientInfo.list.length > 0">
            <ball-tag
              v-for="item in patientInfo.list"
              :key="item"
              :tagId="item"
              class="tag-item"
            ></ball-tag>
          </div>
          <div class="gray-border" v-if="patientInfo?.feeTypeName">
            {{ patientInfo.feeTypeName }}
          </div>
          <label class="info-label">
            <span class="label-text-color">住院：</span>
            <span class="content-text-color">{{ formatDays(patientInfo?.inHospitalDays) }}</span>
          </label>
          <label class="info-label" v-if="patientInfo?.inOrgTime">
            <span class="label-text-color">入科：</span>
            <span class="content-text-color">{{ patientInfo.inOrgTime }}</span>
          </label>
          <label class="info-label" v-if="patientInfo?.inHospitalTime">
            <span class="label-text-color">入院时间：</span>
            <span class="content-text-color">{{ patientInfo.inHospitalTime }}</span>
          </label>
          <label class="info-label" v-if="patientInfo?.busNo">
            <span class="label-text-color">住院号：</span>
            <span class="content-text-color">{{ patientInfo.busNo }}</span>
          </label>
          <label class="info-label diagnosis-label" v-if="patientInfo?.regDiagnosisName">
            <span class="label-text-color">诊断：</span>
            <span class="content-text-color">{{ patientInfo.regDiagnosisName }}</span>
          </label>
          <label class="info-label">
            <span class="label-text-color">费用：</span>
            <span class="content-text-color">{{ formatMoney(patientInfo?.totalAmount) }}</span>
          </label>
          <label class="info-label">
            <span class="label-text-color">余额：</span>
            <span class="content-text-color">{{ formatMoney(patientInfo?.balanceAmount) }}</span>
          </label>
        </div>
      </div>
    </div>
    <div v-if="expand" class="expand_more">
      <div class="expand-content">
        <div class="expand-section">
          <label class="expand-label">
            <span class="primary-text">过敏：</span>
            <span class="primary-text">{{ patientInfo?.allergies || '无过敏史' }}</span>
          </label>
          <label class="expand-label" v-if="patientInfo?.insuplcAdmdvsName">
            <span class="primary-text">医保统筹区：</span>
            <span class="primary-text">{{ patientInfo.insuplcAdmdvsName }}</span>
          </label>
          <label class="expand-label" v-if="patientInfo?.ciType">
            <span class="primary-text">商保信息：</span>
            <span class="primary-text">{{ patientInfo.ciType }}</span>
          </label>
          <div class="info-tags">
            <div class="blue-bg">
              <span class="content-text-color">
                {{ formatHeightWeight(patientInfo?.height, patientInfo?.weight) }}
              </span>
            </div>
            <div class="blue-bg" v-if="patientInfo?.postoperativeDays">
              <span class="content-text-color">术后{{ patientInfo.postoperativeDays }}天</span>
            </div>
            <div class="blue-bg" v-if="patientInfo?.poorTypeName">
              <span class="label-text-color">贫困类型：</span>
              <span class="content-text-color">{{ patientInfo.poorTypeName }}</span>
            </div>
            <div class="blue-bg" v-if="patientInfo?.pathwayName">
              <span class="label-text-color">路径情况：</span>
              <span class="content-text-color">{{ patientInfo.pathwayName }}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="expand-content">
        <div class="expand-section">
          <div class="patient-board">
            <div class="item-center">
              <div class="line-block">
                <div class="line-block-top">
                  <span class="label-text-color">科室：</span>
                  <span class="content-text-color">{{
                    patientInfo?.admissionDeptName || '-'
                  }}</span>
                </div>
                <div class="line-block-bottom">
                  <span class="label-text-color">病区：</span>
                  <span class="content-text-color">{{ patientInfo?.deptNurseName || '-' }}</span>
                </div>
              </div>
              <div class="line-block">
                <div class="line-block-top">
                  <span class="label-text-color">主治医生：</span>
                  <span class="content-text-color">{{ patientInfo?.masterDoctorName || '-' }}</span>
                </div>
                <div class="line-block-bottom">
                  <span class="label-text-color">责任护士：</span>
                  <span class="content-text-color">{{ patientInfo?.masterNurseName || '-' }}</span>
                </div>
              </div>

              <div class="line-blockMoney">
                <div class="line-blockMoney-top">
                  <span class="label-text-color">预交金</span>
                </div>
                <div class="line-blockMoney-bottom">
                  <b class="money-content size-15">{{ formatMoney(patientInfo?.prepayAmount) }}</b>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, watch } from 'vue';
import BallTag from './components/BallTag.vue';
import { patientInfo } from '@/views/inpatientDoctor/home/store/patient.js';
interface Props {
  visitCode?: string;
}

const props = withDefaults(defineProps<Props>(), {
  visitCode: '',
});

const expand = ref<boolean>(false);

// 格式化性别和年龄
const formatSexAge = (sexName?: string, age?: number | string): string => {
  const sex = sexName || '';
  const ageStr = age !== undefined && age !== null ? String(age) : '';
  if (sex && ageStr) {
    return `${sex}/${ageStr}`;
  } else if (sex) {
    return sex;
  } else if (ageStr) {
    return ageStr;
  }
  return '-';
};

// 格式化天数
const formatDays = (days?: number | string): string => {
  if (days === undefined || days === null || days === '') {
    return '-';
  }
  return `${days}天`;
};

// 格式化身高体重
const formatHeightWeight = (height?: number | string, weight?: number | string): string => {
  if (height && weight) {
    return `${height}cm/${weight}kg`;
  }
  return '身高/体重';
};

// 格式化金额
const formatMoney = (amount?: number | string): number => {
  if (amount === undefined || amount === null || amount === '') {
    return 0;
  }
  return Number(amount) || 0;
};

defineOptions({
  name: 'NurserDoctorPatientBarminimal',
});
</script>

<style lang="scss" scoped>
.inPatientBarDoctorFold-container {
  border-bottom: 1px solid #ebeef5;
  background-color: #ffffff;
  align-items: center;
  .basic_info {
    min-height: 44px;
    padding: 0 8px;
    display: flex;
    align-items: center;
  }

  .expand_more {
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 0 8px;
  }

  .expand-content {
    background-color: #ffffff;
  }

  .expand-section {
    margin-top: -10px;
    padding: 8px 0;
  }

  .patient-header {
    width: 100%;
    padding: 6px 0;
    font-size: 13px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;

    .select_wrapper_div {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 8px;
      width: 100%;
    }

    .bedNumber {
      font-weight: bold;
      font-size: 18px;
      margin-left: 12px;
      color: #1f2933;
    }

    .patient-name {
      margin-left: 12px;
      color: #a15209;
      font-weight: 500;
    }

    .sex-age {
      margin-left: 8px;
      color: var(--hip-color-text-description);
      font-size: 14px;
      font-weight: normal;
    }

    .tag-list {
      display: flex;
      align-items: center;
      margin-left: 8px;
      gap: 4px;
    }

    .tag-item {
      margin-right: 4px;
    }

    .gray-border {
      display: inline-flex;
      color: var(--hip-color-text-description);
      justify-content: center;
      align-items: center;
      border: 1px solid var(--hip-color-text-description);
      border-radius: 20px;
      padding: 0 8px;
      font-size: 12px;
    }

    .info-label {
      margin-left: 24px;
      white-space: nowrap;

      &:first-of-type {
        margin-left: 0;
      }
    }

    .diagnosis-label {
      margin-left: 30px;
    }

    .copy-svg {
      fill: var(--hip-color-primary);
      cursor: pointer;
      margin-left: 4px;
      transition: opacity 0.2s;

      &:hover {
        opacity: 0.8;
      }
    }
  }

  .expand-label {
    font-size: 14px;
    margin-right: 32px;
    white-space: nowrap;

    &:first-child {
      margin-right: 32px;
    }
  }

  .info-tags {
    display: flex;
    flex-wrap: nowrap;
    margin-top: 8px;
    white-space: nowrap;
    gap: 16px;
  }

  .size-15 {
    font-size: 15px;
  }

  .primary-text {
    color: var(--hip-color-primary);
  }

  .item-center {
    display: flex;
    align-items: center;
  }

  .patient-board {
    margin-left: 20px;

    .line-block {
      position: relative;
      min-width: 73px;
      padding-left: 15px;
      padding-right: 10px;

      &::before {
        content: '';
        position: absolute;
        width: 1px;
        height: 50%;
        top: 25%;
        left: 0;
        background-color: #e1e1e1;
      }

      &-top {
        margin-bottom: 8px;
      }

      &-bottom {
        margin-top: 4px;
      }
    }

    .line-blockMoney {
      position: relative;
      min-width: 73px;
      padding-left: 15px;
      padding-right: 10px;

      &::before {
        content: '';
        position: absolute;
        width: 1px;
        height: 50%;
        top: 25%;
        left: 0;
        background-color: #e1e1e1;
      }

      &-top {
        margin-bottom: 0;
      }

      .money-content {
        color: #ff8616;
        font-size: 20px;
        font-weight: 500;
      }
    }

    :deep(.color-content) {
      background-color: rgba(252, 252, 252, 0.8);
    }
  }

  .white-bg {
    background-color: #ffffff;
  }

  .blue-bg {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background-color: #f1faff;
    padding: 4px 8px;
    border-radius: 4px;
    flex-shrink: 0;
    min-width: fit-content;
    white-space: nowrap;

    .content-text-color {
      margin-left: 0;
    }

    .label-text-color {
      margin-right: 4px;
    }
  }

  .label-text-color {
    font-size: 14px;
    color: #666666;
  }

  .content-text-color {
    font-size: 14px;
    color: #666666;
  }
}
</style>
