<template>
  <div class="home">
    <nav-bar></nav-bar>
    <div class="bj"></div>
    
    <!-- 顶部信息区域 -->
    <div class="header-info" v-if="hospitalizationItem">
      <div class="info-header">
        <div class="info-left">
          <div class="info-item">
            <span class="info-label">住院号：</span>
            <span class="info-value">{{ hospitalizationItem.INHOSNUM }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">姓名：</span>
            <span class="info-value">{{ hospitalizationItem.PATIENTNAME }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">住院科室：</span>
            <span class="info-value">{{ hospitalizationItem.SECTIONTYPE }}</span>
          </div>
        </div>
        <!-- 【修改点1】替换Vant Tag为自定义状态标签，删除van-tag相关代码 -->
        <div class="info-right">
          <div class="state-tag state-tag--out" v-if="hospitalizationItem.HOSSTATE == '2'">已出院</div>
          <div class="state-tag state-tag--in" v-else>住院中</div>
        </div>
      </div>
      
      <!-- 费用信息 -->
      <div class="cost-info">
        <div class="cost-item">
          <span class="cost-value">{{ hospitalizationItem.HOSBALANCE }}</span>
          <span class="cost-label">可用余额</span>
        </div>
        <div class="cost-item">
          <span class="cost-value">{{ hospitalizationItem.BEDNO || '暂无' }}</span>
          <span class="cost-label">病床号</span>
        </div>
        <div class="cost-item">
          <span class="cost-value">{{ hospitalizationItem.PATIENTSOURCE == '1' ? '门诊患者' : '转诊患者' }}</span>
          <span class="cost-label">患者来源</span>
        </div>
      </div>
    </div>
    
    <!-- 业务办理模块 -->
    <div class="business-section">
      <h3 class="section-title">业务办理</h3>
      <div class="business-item" @click="navigateToZYCharge">
        <div class="business-icon">
          <img src="../assets/预交金.png" alt="预交金查询" />
        </div>
        <div class="business-content">
          <h4 class="business-title">我的预交金</h4>
          <p class="business-desc">查询充值记录，在线充值预交金</p>
        </div>
        <van-icon name="arrow" class="business-arrow" />
      </div>
      <div class="business-item" @click="navigateToZYdailylist">
        <div class="business-icon">
          <img src="../assets/住院费用清单.png" alt="日清单查询" />
        </div>
        <div class="business-content">
          <h4 class="business-title">日清单查询</h4>
          <p class="business-desc">每日费用明细</p>
        </div>
        <van-icon name="arrow" class="business-arrow" />
      </div>
    </div>
</template>

<script>
import Vue from "vue";
import { Icon } from "vant"; // 【修改点2】删除Tag的引入，只保留Icon即可

Vue.use(Icon); // 【修改点3】只注册Icon，删除Tag的注册
export default {
  mounted() {
    this.title = this.$route.meta.title;
  },
  computed: {},
  data() {
    return {
      title: "住院详情",
      hospitalizationItem: null
    };
  },
  created() {
    const item = sessionStorage.getItem('hospitalizationItem');
    if (item) {
      this.hospitalizationItem = JSON.parse(item);
    }
  },
  methods: {
    navigateToZYCharge() {
      sessionStorage.setItem('hospitalizationItem', JSON.stringify(this.hospitalizationItem));
      this.$router.push({ path: "/ZYCharge" });
    },
    navigateToZYdailylist() {
      sessionStorage.setItem('hospitalizationItem', JSON.stringify(this.hospitalizationItem));
      this.$router.push({ path: "/ZYdailylist" });
    }
  }
}
</script>

<style scoped lang="scss">
// 背景样式
.bj {
  background: #f5f5f5;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  z-index: -2;
}

// 顶部信息区域
.header-info {
  background-color: #d4e8ff;
  background-image: linear-gradient(#d4e8ff, #e7f1fe);
  border-radius: 15px;
  margin: 15px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.info-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
}

.info-left {
  flex: 1;
}

.info-item {
  margin-bottom: 12px;
  font-size: .4rem;
}
.info-item:first-child{
    font-size: .45rem;
    font-weight: 700;
}
.info-item:first-child .info-value{
   color: black;
  font-weight: 700;
}
.info-item:first-child .info-label{
   color: black;
  font-weight: 700;
}
.info-label {
  color: #666;
  margin-right: 10px;
}

.info-value {
  color: #333;
  font-weight: 500;
}

.info-right {
  margin-left: 15px;
  // 让标签垂直靠上对齐，和左侧信息匹配
  display: flex;
  align-items: flex-start;
}

// 【新增核心样式】自定义状态标签（住院中/已出院）
.state-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px; // 圆点和文字的间距
  padding: 4px 12px; // 内边距，上下小左右大，更精致
  font-size: .36rem; // 适配移动端的字体大小
  font-weight: 500;
  border-radius: 20px; // 超大圆角，柔化边缘
  white-space: nowrap; // 防止文字换行
  // 状态小圆点的通用样式
  &::before {
    content: '';
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 50%; // 圆形圆点
  }
}
// 住院中标签样式
.state-tag--in {
  background-color: #e6f7ef;
  color: #36c779;
  &::before {
    background-color: #36c779; // 圆点和文字同色，视觉统一
  }
}
// 已出院标签样式
.state-tag--out {
  background-color: #f5f2f8;
  color: #9061c7;
  &::before {
    background-color: #9061c7;
  }
}

// 费用信息
.cost-info {
  display: flex;
  justify-content: space-around;
  padding-top: 15px;
  border-top: 1px solid #f0f0f0;
}

.cost-item {
  text-align: center;
}

.cost-value {
  display: block;
  font-size: .44rem;
  font-weight: 600;
  color: #2196F3;
  margin-bottom: 5px;
}

.cost-label {
  font-size: .35rem;
  color: #666;
}

// 业务办理模块
.business-section {
  background-color: #fff;
  border-radius: 15px;
  margin: 0 15px 15px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.section-title {
  font-size: 26px;
  font-weight: 600;
  color: #333;
  margin: 0 0 20px;
}

.business-item {
  display: flex;
  align-items: center;
  padding: .5rem 0;
  border-bottom: 2px solid #f0f0f0;
  margin: 5px 0;
}

.business-item:last-child {
  border-bottom: none;
}

.business-icon {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background-color: #E3F2FD;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
  img {
    width: .6rem;
    object-fit: contain;
  }
}

.business-content {
  flex: 1;
}

.business-title {
  font-size: .4rem;
  font-weight: 500;
  color: #333;
  margin: 0 0 5px;
}

.business-desc {
  font-size: .32rem;
  color: #999;
  margin: 0;
}

.business-arrow {
  font-size: .4rem;
  color: #1296db;
}
</style>