<template>
  <full-page mainStyle="background:#f0f0f0">
    <template v-if="order">
      <view class="info" :class="{ 'info--elder': elderMode }">
        <view class="info-row" :class="{ 'info-row--elder': elderMode }">
          <text class="name" :class="{ 'name--elder': elderMode }">{{ order.doctorName }}</text>
          <text class="title" :class="{ 'title--elder': elderMode }">{{ order.title }}</text>
        </view>
        <view class="info-row" :class="{ 'info-row--elder': elderMode }">
          <text class="hospital" :class="{ 'hospital--elder': elderMode }">震元堂中医院</text>
          <text v-if="order.deptName" class="dept" :class="{ 'dept--elder': elderMode }"> | {{ order.deptName }}</text>
        </view>
      </view>
      <disease-summary :order="order" :elderMode="elderMode" />
      
    </template>
    <empty-data v-else  />
   
  </full-page>
</template>
<script setup>
import { ref, onMounted, onUnmounted } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import {
  getPayStatus,
  getPatientOrder,
} from "@/utils/api";
import { toast } from "@/utils/widget";

import diseaseSummary from "@/pages/consult/components/disease-summary.vue";
import emptyData from "@/components/empty.vue";
import fullPage from "@/components/full-page.vue";

// 长辈模式状态
const elderMode = ref(false);

// 处理长辈模式变化
const handleElderModeChange = () => {
  try {
    const storedElderMode = uni.getStorageSync('elderMode');
    elderMode.value = storedElderMode === 'true' || storedElderMode === true;
    
    // 同步到全局数据
    const app = getApp();
    if (app && app.globalData) {
      app.globalData.elderMode = elderMode.value;
    }
  } catch (error) {
    console.error('获取长辈模式状态失败:', error);
    elderMode.value = false;
  }
};

onMounted(() => {
  handleElderModeChange();
  // 监听长辈模式变化事件
  uni.$on('elderModeChanged', handleElderModeChange);
});

onUnmounted(() => {
  // 移除事件监听
  uni.$off('elderModeChanged', handleElderModeChange);
});

const order = ref(null)
const msg = ref('')

onLoad(e => {
  // 读取长辈模式状态
  handleElderModeChange();
  
  try{
    const item = uni.getStorageSync('chat-room-consult');
    order.value = JSON.parse(item)
  }catch(e){
    order.value = null
   }
  // payStatus();
})

</script>
<style lang="scss" scoped>
.order-form {
  margin-top: 20rpx;
  background: #fff;
}

.order-form-row {
  display: flex;
  padding: 24rpx 30rpx;
  font-size: 28rpx;
  color: #333;

  @at-root &+& {
    border-top: 1px solid #e5e5e5;
  }
}

.order-form-label {
  color: #666;
}


.info {
  padding: 24rpx 30rpx;
  margin-bottom: 20rpx;
  background-color: #fff;
  line-height: 40rpx;
  color: #666;
  font-size: 28rpx;

  // 长辈模式样式
  &.info--elder {
    padding: 32rpx 36rpx; // 增加内边距
    line-height: 50rpx; // 增加行高
    font-size: 36rpx; // 字体放大 (28rpx → 36rpx)
  }
}

.info-row {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 8rpx;

  // 长辈模式样式
  &.info-row--elder {
    margin-bottom: 12rpx; // 增加行间距
  }

  &:last-child {
    margin-bottom: 0;
  }
}

text {
  white-space: nowrap;
}

.name {
  margin-right: 12rpx;
  font-size: 32rpx;
  font-weight: bold;
  color: #333;

  // 长辈模式样式
  &.name--elder {
    font-size: 42rpx; // 字体放大 (32rpx → 42rpx)
    margin-right: 16rpx; // 增加间距
  }
}

.title {
  color: #999;
  
  // 长辈模式样式
  &.title--elder {
    font-size: 36rpx; // 字体放大
  }
}

.hospital {
  font-weight: 600;
  
  // 长辈模式样式
  &.hospital--elder {
    font-size: 36rpx; // 字体放大
  }
}

.dept {
  color: #999;
  
  // 长辈模式样式
  &.dept--elder {
    font-size: 36rpx; // 字体放大
  }
}
.footer{
  display: flex;
}
</style>
