<template>
	<page-meta :page-font-size="fontValue+'px'" :root-font-size="fontValue+'px'"></page-meta>
  <view class="message-page">
	<view style="width: 94%;margin: 10px auto;height: 40px;display: flex;align-items: center;">
		<view style="display: flex;align-items: center;">
			<view class="unread-dot"></view>
		</view>
		<view style="margin-left: 10px;font-size: 30rpx;font-weight: bold;">
			体检记录
		</view>
	</view> 
    <!-- 列表 -->
    <!-- <view class="message-list"> -->
	<scroll-view style="width: 100%;height: 80vh;" scroll-y="true">
      <view class="message-item" v-for="(item, index) in messageList" :key="index" @click="handleMessageClick(item)">
        <!-- 左侧图标 -->
        <view class="icon-wrapper" style="background-color: #ffa361;">
          <u-icon name="file-text" color="#fff" size="32"></u-icon>
        </view>

        <!-- 内容 -->
        <view class="content">
          <view class="title-box">
			  <view class="title">体检日期：{{ item.medicalDate }}</view> 
		  </view>
          <view class="desc">{{ item.medicalMechanism }}</view>
        </view>

        <!-- 右侧信息 -->
		<view class="right-info">
          <view class="check-btn">查看详情</view> 
        </view> 
      </view>
    </scroll-view>
	
	
	<!-- 提交按钮 -->
	<view class="submit-btn">
	  <u-button
	    shape="squrd"
		@click="goAdd"
	    :customStyle="{
	      width: '100%',
	      height: '88rpx',
	      background: '#ffa361',
	      color: '#ffffff',
	      border: 'none'
	    }" style="font-size: 28rpx;"
	  >新增</u-button>
	</view>
  </view>
</template>

<script>

import { listMedicalReportApi } from '@/api/mine/survey.js'
export default {
	name: 'index',
	data() {
		return {
			fontValue:uni.getStorageSync('fontSize') || 8,
			searchText: '',
			currentTab: 0,
			// tabList: ['全部', '已查看', '未查看'],
			tabList: ['通知列表'],
			pageNum: 1,
			pageSize: 10, 
			messageList: [], 
		}
	},
	onShow(){ 
		this.getReportList()
	},
	methods: {  
		//获取列表
		async getReportList() {
			let param = {
				"userId":uni.getStorageSync('userId')
			}
			const res = await listMedicalReportApi(param)
			console.log(res, '列表') 
			this.messageList = res .data
		}, 
		handleMessageClick(item) {
			console.log('?? ~ handleMessageClick ~ ', item)   
			uni.navigateTo({
				url: `/pages/survey/details?params=${JSON.stringify(item)}`
			})
		},
		goAdd(){
			uni.navigateTo({
				url: `/pages/survey/details?params=${JSON.stringify({})}`
			})
		}
	}
}
</script>

<style scoped lang="scss">
  page {
    background: #fff;
  }
  .message-page {
    min-height: 94vh;
    background-color: #f5f5f5;
    background: #fff;
    padding: 12px;
  }

  .message-list {
    padding: 12px 0;
  }

  .message-item {
    display: flex;
    align-items: flex-start;
    background-color: #ffffff;
    padding: 16px;
    margin-bottom: 12px;
    border-radius: 8px;
  }

  .icon-wrapper {
    width: 50px;
    height: 60px;
    // border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
  }

  .upgrade {
    background-color: #2ed573;
  }

  .warning {
    background-color: #ff7f50;
  }

  .read {
    background-color: #b5bec9;
  }

	.content {
		width: 60%;
		margin-right: 12px;
	}
	.title-box{
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 4px;
	
	}

  .desc {
    font-size: 24rpx;
    color: #666;
    line-height: 1.4;
	height: 32px;
	overflow: hidden; /* 隐藏溢出的文本 */
	text-overflow: ellipsis; /* 显示省略号 */
  }

  .right-info {
	width: 25%;
	height: 100rpx;
    display: flex; 
	justify-content: center;
	align-items: center;
	
  }
	.check-btn{
		width: 160rpx;
		height: 60rpx;
		font-size: 24rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 1px solid #999;
		border-radius: 8rpx;
		color: #999;
	}
  .time {
    font-size: 24rpx;
    color: #999;
    margin-bottom: 4px;
  }

  .unread-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #ff0000;
  }
  .submit-btn {
    position: fixed;
    left: 30rpx;
    right: 30rpx;
    bottom: 40rpx;
  }
</style>