<template> 
	<page-meta :page-font-size="fontValue+'px'" :root-font-size="fontValue+'px'"></page-meta>
	<view class="report-detail">
		<view style="border-bottom: 1rpx solid #ccc;margin-bottom: 20rpx;">
			<view class="info-item">
				<text class="label">体检日期</text>
				<view class="value-wrapper" @click="dateShow=true">
					<!-- <uni-easyinput v-model="medicalDate" placeholder="请选择体检日期" border="none" maxlength="24" /> -->
					<view class="value" :class="medicalDate? '' :'placeholder'">{{medicalDate || '请选择体检日期'}}</view> 
				</view>
			</view>
			<view class="info-item">
				<text class="label">体检机构</text>
				<view class="value-wrapper" style="border: none;">
					<uni-easyinput v-model="medicalMechanism" placeholder="请输入体检机构" maxlength="24" />
				</view>
			</view> 
		</view>
		<u-datetime-picker :minDate="minDate" :maxDate="maxDate" :show="dateShow" v-model="defaultDate" mode="date"
			:closeOnClickOverlay="true" :formatter="formatter" @cancel="dateShow = false" @confirm="birthDayConfirm">
		</u-datetime-picker>
		<scroll-view style="width: 100%;height: 72vh;" scroll-y="true">
			<view style="height: auto;padding-bottom: 20rpx;">
				<view v-for="(item,index) in reportList":key="index">
					<view class="list-title">
						<text>{{item.medicalProjectName}}</text> 
					</view>
					<view class="list-item" v-for="(dItem,dIndex) in item.medicalReportDetailVOList":key="dIndex">
						<view class="label">
							<text>{{dItem.medicalProjectDetailName}}</text> 	
							<text v-if="dItem.medicalProjectDetailUnit">({{ dItem.medicalProjectDetailUnit }})</text>
						</view>
						<view class="value-wrapper">
							<u-input v-model="dItem.result" :placeholder="'请输入'+dItem.medicalProjectDetailName" border="none" maxlength="24"></u-input>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<!-- 提交按钮 -->
		<view class="submit-btn">
		  <u-button 
		    shape="squrd"
			@click="saveReport"
		    :customStyle="{
		      width: '100%',
		      height: '88rpx',
		      background: '#ff9253',
		      color: '#ffffff',
		      border: 'none'
		    }" style="font-size: 28rpx;"
		  >保存</u-button>
		</view>
	  
    
	</view>
</template>

<script> 
import { listTemplateApi,getTemplateInfoApi,getMedicalReportInfoApi,editMedicalReportApi } from '@/api/mine/survey.js'

export default {
  name: 'details', 
  data() {
    return {
		fontValue:uni.getStorageSync('fontSize') || 8,
		dateShow: false,
		defaultDate: Number(new Date()),
		minDate: 7200000,
		maxDate: Number(new Date()),
		medicalDate:uni.$u.timeFormat(new Date(), 'yyyy-mm-dd'),
		medicalMechanism:"",
		paramsData:{},
		medicalTemplateId:"",
		reportList:[],
		sumbitStaus:true
    }
  },
  onLoad(opt) {
		console.log(opt)
		opt = JSON.parse(opt.params)
		this.paramsData = opt
		if(this.paramsData.medicalId&&this.paramsData.medicalId!=""){ 
			// 编辑
			this.getMedicalReportInfo()
			this.medicalTemplateId = this.paramsData.medicalTemplateId
			this.medicalMechanism = this.paramsData.medicalMechanism
			this.medicalDate = this.paramsData.medicalDate
		}else{
			//新增
			this.listTemplate() 
		}
	 
  },
  methods: { 
		//模板列表
		async listTemplate() {
			let param = {  }
			const res = await listTemplateApi(param)
			this.medicalTemplateId = res[0].medicalTemplateId
			this.getTemplateInfo() 
			console.log(res, '模板--------')
		},
		//模板详情
		async getTemplateInfo() {
			let param = {
				"medicalTemplateId": this.medicalTemplateId, 
			}
			const res = await getTemplateInfoApi(param)
			this.reportList = res
			console.log(res, '模板--------')
		},
		//模板详情
		async getMedicalReportInfo() {
			let param = {
				"medicalId": this.paramsData.medicalId, 
			}
			const res = await getMedicalReportInfoApi(param)
			this.reportList = res
			console.log(res, '详情--------')
		},
		async saveReport() {
			if(this.sumbitStaus){
				this.sumbitStaus=false
				let param = {}
				if(this.paramsData.medicalId&&this.paramsData.medicalId!=""){
					 param = {
						"medicalId": this.paramsData.medicalId,
						"custId": uni.getStorageSync('custId'),
						"medicalDate": this.medicalDate,
						"medicalTemplateId": this.medicalTemplateId,
						"medicalMechanism": this.medicalMechanism,
						"reportProjectVOS":this.reportList
					}
				}else{
					param = { 
						"custId": uni.getStorageSync('custId'),
						"medicalDate": this.medicalDate,
						"medicalTemplateId": this.medicalTemplateId,
						"medicalMechanism": this.medicalMechanism,
						"reportProjectVOS":this.reportList
					}
				} 
				const res = await editMedicalReportApi(param)
				if(res.code==200){
					uni.showToast({
						title: '提交成功',
						icon: 'none'
					}); 
					setTimeout(()=>{
						uni.navigateBack()
					},800)
				}
				this.sumbitStaus=true
			}
		},
		
		
		
		
		// 体检日期
		birthDayConfirm(e) {
			this.medicalDate = uni.$u.timeFormat(e.value, 'yyyy-mm-dd'); 
			this.dateShow = false;
		},
		formatter(type, value) {
			if (type === 'year') {
				return `${value}年`
			}
			if (type === 'month') {
				return `${value}月`
			}
			if (type === 'day') {
				return `${value}日`
			}
			return value
		},
  },
}
</script>

<style scoped>
.report-detail { 
  background-color: #fff;
  min-height: 96vh;
}
.info-item {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 28rpx;
	border-bottom: 1rpx solid #FFFFFF;

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

	.label {
		width: 25%;
		font-size: 32rpx;
		color: #333;
		margin-right: 10rpx;
	}

	.value-wrapper {
		display: flex;
		align-items: center;
		border: 1px solid rgb(229, 229, 229);
		border-radius: 10rpx;
		width: 70%;
		height: 70rpx;
		 
		.value {	
			font-size: 28rpx;
			color: #333;
			padding-left: 16rpx; 
			&.placeholder {
				color: #999;
			}
		}
	}
}

.list-title{
	height: 50rpx;
	width: 200rpx;
	padding-left: 10rpx;
	padding-right: 10rpx;
	margin-bottom: 20rpx;
	background: red;
	color: #FFF;
	border-top-right-radius: 20rpx;
	border-bottom-right-radius: 20rpx;
}

.list-item{
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 32rpx;
	border-bottom: 1rpx solid #ccc;
	margin-bottom: 10rpx;
	
	.label {
		font-size: 32rpx;
		color: #333;
		margin-right: 10rpx;
		width: 35%;
	}
	.value-wrapper {
		display: flex;
		align-items: center;
		border: 1px solid rgb(229, 229, 229);
		border-radius: 10rpx;
		width: 60%;
		height: 60rpx;
	}
	
}


.submit-btn{
	 
	width: 96%;
	margin: 10rpx auto;
}




</style>