<template>
  <el-row>
    <el-col :span="24">
      <div class="sub-nav">
        <el-button link class="sub-btn">分管患者</el-button>
        <el-button link class="sub-btn">科室患者</el-button>
        <el-button link class="sub-btn">授权患者</el-button>
        <el-button link class="sub-btn">出院三天内患者</el-button>
        <el-button link class="sub-btn">出院三天未归档患者</el-button>
        <el-button link class="sub-btn">我关注的患者</el-button>
        <el-button link class="sub-btn">诊疗组患者</el-button>
      </div>
    </el-col>
  </el-row>

  <el-row class="patient-cards" :gutter="16">
    <!-- First patient Card -->
    <el-col :xs="24" :sm="12" :md="8" :lg="6">
      <div class="patient-card">
        <div class="ribbon in-hospital"></div>
        <div class="card-header">
          <h3>17床</h3>
        </div>
        <div class="card-content">
          <div class="patient-info">
            <div class="patient-name">
              张三
              <span class="gender-age">男 43岁</span>
            </div>
            <div class="patient-id">152322</div>
            <div class="history-note">无过敏史</div>
            <div class="admit-time">入院时间: 2022-11-02 04:18</div>
            <div class="insurance">费别信息: 医保</div>
            <div class="stay-days">住院天数: 4天</div>
            <div class="total-cost">费用合计: 4000.00</div>
            <div class="diagnosis">诊断信息: 糖尿病</div>
            <div class="doctor">管床医生: 张夫</div>
            <div class="nurse">责任护士:</div>
            <div class="danger-flag"></div>
          </div>
        </div>
      </div>
    </el-col>

    <!-- Second patient Card -->
    <el-col :xs="24" :sm="12" :md="8" :lg="6">
      <div class="patient-card">
        <div class="ribbon new-patient"></div>
        <div class="card-header">
          <h3>+01床</h3>
        </div>
        <div class="card-content">
          <div class="patient-info">
            <div class="patient-name">
              李四
              <span class="gender-age">女 34岁</span>
            </div>
            <div class="patient-id">152323</div>
            <div class="history-note">无过敏史</div>
            <div class="admit-time">入院时间: 2022-11-01 17:11</div>
            <div class="insurance">费别信息: 医保</div>
            <div class="stay-days">住院天数: 12天</div>
            <div class="total-cost">费用合计: ¥5000.22</div>
            <div class="diagnosis">诊断信息: I型呼吸衰竭</div>
            <div class="doctor">管床医生: 王俊</div>
            <div class="nurse">责任护士:</div>
          </div>
        </div>
      </div>
    </el-col>
  </el-row>
</template>

<script setup lang="ts"></script>

<style scoped lang="scss">
.header-row {
  margin-bottom: 10px;
}

.nav-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  background-color: #e6e6e6;
  padding: 8px;
}

.nav-btn {
  margin-right: 5px;
  font-size: 14px;
}

.sub-nav {
  display: flex;
  align-items: center;
  background-color: #f5f5f5;
  padding: 8px;
  margin-bottom: 15px;
  flex-wrap: wrap;
}

.sub-btn {
  margin-right: 5px;
  font-size: 14px;
}

.view-toggle {
  margin-left: auto;
  display: flex;
  align-items: center;
}

.patient-cards {
  margin-top: 20px;
}

.patient-card {
  border: 1px solid #ddd;
  border-radius: 5px;
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
  background-color: #fff;
}

.ribbon {
  position: absolute;
  top: 0;
  left: 0;
  width: 30px;
  height: 30px;
  transform: rotate(45deg);
  transform-origin: top left;
}

.in-hospital {
  background-color: #2c8cf4;
}

.new-patient {
  background-color: #ff5c4a;
}

.card-header {
  padding: 10px;
  background-color: #f9f9f9;
  border-bottom: 1px solid #eee;
}

.card-header h3 {
  margin: 0;
  font-size: 18px;
  padding-left: 20px;
}

.card-content {
  padding: 15px;
}

.patient-info > div {
  margin-bottom: 5px;
  font-size: 14px;
}

.patient-name {
  font-weight: bold;
  font-size: 16px;
}

.gender-age {
  font-weight: normal;
  margin-left: 5px;
}

.patient-id {
  color: #2c8cf4;
}

.history-note {
  color: #4caf50;
}

.diagnosis {
  color: #2c8cf4;
}

.danger-flag {
  position: absolute;
  bottom: 10px;
  left: 10px;
  color: #ff5c4a;
  font-weight: bold;
  font-size: 18px;
}
</style>
