<template>
  <view class="patient-info-container">

    <!-- 导航栏 -->
    <navBar title="患者信息" />
    
    <!-- 标签页 -->
    <view class="tab-bar">
      <view 
        class="tab-item" 
        :class="{ active: activeTab === 'basic' }"
        @click="switchTab('basic')"
      >
        基本资料
      </view>
      <view 
        class="tab-item" 
        :class="{ active: activeTab === 'history' }"
        @click="switchTab('history')"
      >
        病史信息
      </view>
    </view>
    
    <!-- 内容区域 -->
    <scroll-view class="content-area" scroll-y>
      <!-- 基本资料内容 -->
      <view v-if="activeTab === 'basic'" class="basic-info">
        <view class="info-item">
          <text class="info-label">姓名</text>
          <text class="info-value">{{ maskName(patientInfo.name) }}</text>
        </view>
        <view class="info-item">
          <text class="info-label">性别</text>
          <text class="info-value">{{ patientInfo.gender }}</text>
        </view>
        <view class="info-item">
          <text class="info-label">年龄</text>
          <text class="info-value">{{ patientInfo.age }}</text>
        </view>
        <view class="info-item">
          <text class="info-label">地址</text>
          <text class="info-value twoline" style="max-width:380rpx;flex:none">{{ patientInfo.address }}</text>
        </view>
        <view class="info-item" v-if="patientInfo.gender=='女'">
          <text class="info-label">是否怀孕</text>
          <text class="info-value">{{ formatwhetherpregnant(patientInfo.whether_pregnant) }}</text>
        </view>
        <view class="info-item" v-if="patientInfo.gender=='女' && patientInfo.expected_date_of_childbirth" >
          <text class="info-label">预产期</text>
          <text class="info-value">{{ patientInfo.expected_date_of_childbirth }}</text>
        </view>
        <view class="info-item">
          <text class="info-label">肝硬化或肝癌家族史</text>
          <text class="info-value">{{ whetherHbv(patientInfo.whether_hbv) }}</text>
        </view>
      </view>
      
      <!-- 病史信息内容 -->
      <view v-if="activeTab === 'history'" class="history-info">
        <view class="info-item">
          <text class="info-label">前往医院就诊该疾病情况</text>
          <text class="info-value">{{ goHospital(patientInfo.go_hospital) }}</text>
        </view>
        <view class="info-item">
          <text class="info-label">患病时间</text>
          <text class="info-value">{{ patientInfo.disease_date }}</text>
        </view>
        <view class="info-item">
          <text class="info-label">目前肝脏状态</text>
          <text class="info-value">{{ patientInfo.liver_status }}</text>
        </view>
        <view class="info-item">
          <text class="info-label">当前服用肝病用药情况</text>
          <text class="info-value">{{ patientInfo.boolean_medication }}</text>
        </view>
        <view class="info-item column"  v-if="patientInfo.medication_info">
          <text class="info-label" style="padding-top: 20rpx;">当前服用的肝病药物以及服用时长</text>
          <text class="info-content">{{ patientInfo.medication_info }}</text>
        </view>
        <view class="info-item column" >
          <text class="info-label" style="padding-top: 20rpx;">是否合并其他慢性疾病</text>
          <view class="otherbox" v-if="patientInfo.other_disease">
             <view class="cell" v-for="item in patientInfo.other_disease.split(',')" :key="item">{{ item}}</view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import { ref, reactive, onMounted, computed } from 'vue'
import navBar from '@/components/navBar/navBar.vue'
import { onLoad } from '@dcloudio/uni-app'
import api from '@/api/api.js'
// 响应式数据
const statusBarHeight = ref(0)
const activeTab = ref('basic');
const step1_uuid = ref('');
const patientInfo = reactive({
  name: '提**',
  gender: '男',
  age: '15',
  address: '北京市东城区',
  familyHistory: '未知'
})
onLoad((options) => {
 step1_uuid.value = options.step1_uuid || ''
 interrogationPatientInfo()
})
const interrogationPatientInfo=()=>{
  api.interrogationPatientInfo({
    step1_uuid: step1_uuid.value
  }).then(res=>{
    if(res.code == 200 && res.data){
      const d = res.data;
      Object.assign(patientInfo, d);
      // patientInfo.name = d.name || '提**'
      patientInfo.gender = d.sex === 1 ? '女' : '男'
       patientInfo.age = d.birthday ? calculateAge(d.birthday) : '未知'
      // patientInfo.address = d.address || ''
      // // 家族史字段接口未提供，设为未知
      // patientInfo.familyHistory = '未知'
    }
  })
}
const maskName = (name)=>{
	if(!name) return '**'
	const first = name.slice(0,1)
	return `${first}**`
}
function calculateAge(birthday){
  const birth = new Date(birthday)
  const today = new Date()
  let age = today.getFullYear() - birth.getFullYear()
  const m = today.getMonth() - birth.getMonth()
  if(m < 0 || (m === 0 && today.getDate() < birth.getDate())){
    age--
  }
  return String(age)
}
// 计算属性
const statusBarStyle = computed(() => ({
  height: statusBarHeight.value + 'px'
}))

// 方法
const goBack = () => {
  uni.navigateBack()
}
const formatwhetherpregnant = (value)=>{
  if(value==1){
    return '无计划'
  }else if(value==2){
    return '计划中'
  }else if(value==3){
    return '已怀孕'
  }else if(value==4){
    return '家有宝宝'
  }
}
const goHospital = (val)=>{
  if(val==1){
    return '是'
  }else if(val==0){
    return '否'
  }
}
const whetherHbv = (value)=>{
  if(value==0){
    return '无'
  }else if(value==1){
    return '有'
  }else{
    return '未知'
  }
}
const switchTab = (tab) => {
  activeTab.value = tab
}

// 生命周期
onMounted(() => {
  // 获取状态栏高度
  const systemInfo = uni.getSystemInfoSync()
  statusBarHeight.value = systemInfo.statusBarHeight || 0
})
</script>

<style lang="scss" scoped>
// 变量定义
$primary-color: #8B2316;
$text-color: #333333;
$text-color-light: #666666;
$border-color: #f0f0f0;
$border-color-light: #e0e0e0;
$background-color: #ffffff;
$nav-height: 88rpx;
$tab-height: 88rpx;
$info-item-height: 100rpx;
$padding-horizontal: 30rpx;
$padding-small: 10rpx;
.info-content{
  font-size: 28rpx;
  color:#999;
  width: 100%;
  background-color: #f0f0f0;
  border-radius: 16rpx;
  padding:20rpx;
  box-sizing: border-box;
margin-top: 20rpx;
margin-bottom: 20rpx;
}
.column{
  flex-direction: column;
  justify-content: flex-start!important;
  align-items: flex-start!important;
}
.patient-info-container {
  background-color: $background-color;
  min-height: 100vh;
}

.status-bar {
  background-color: $background-color;
}
.otherbox{
    display: flex;
    flex-wrap: wrap;
    margin-top: 20rpx;
    .cell{
      font-size: 24rpx;
      padding: 10rpx 12rpx;
      border-radius: 20rpx;
      margin-bottom: 20rpx;
      background-color: #fff;
      color:#8B2316;
      border: 1rpx solid #8B2316;
      margin-right: 10rpx;
    }
  }
.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: $nav-height;
  padding: 0 $padding-horizontal;
  background-color: $background-color;
  border-bottom: 2rpx solid $border-color;

  .nav-left {
    width: 60rpx;
    height: 60rpx;
    display: flex;
    align-items: center;
    justify-content: center;

    .back-arrow {
      font-size: 48rpx;
      color: $primary-color;
      font-weight: bold;
    }
  }
  
  .nav-title {
    flex: 1;
    text-align: center;
    font-size: 36rpx;
    font-weight: 500;
    color: $primary-color;
  }

  .nav-right {
    width: 60rpx;
  }
}

.tab-bar {
  top:calc(var(--status-bar-height) + 44px);
  position: fixed;
  left: 0;
  right: 0;
  display: flex;
  background-color: $background-color;
  border-bottom: 2rpx solid $border-color-light;

  .tab-item {
    flex: 1;
    height: $tab-height;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32rpx;
    color: $text-color;
    position: relative;

    &.active {
      color: $primary-color;
      font-weight: 500;

      &::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 60rpx;
        height: 4rpx;
        background-color: $primary-color;
      }
    }
  }
}

.content-area {
  top:calc(var(--status-bar-height) + 44px + 90rpx);
  position: fixed;
  left: 0;
  right: 0;
  flex: 1;
  background-color: $background-color;
}

.basic-info,
.history-info {
  padding: 0 $padding-horizontal;

  .info-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: $info-item-height;
    border-bottom: 2rpx solid $border-color;
    padding: 0 $padding-small;

    &:last-child {
      border-bottom: none;
    }

    .info-label {
      font-size: 32rpx;
      color: $text-color;
      text-align: left;
      flex:1.5;
    }

    .info-value {
      font-size: 32rpx;
      color:#999;
      text-align: right;
      flex: 1;
      display: flex;
      justify-content: flex-end;
    }
  }
}
</style>
