<template> 
	<page-meta :page-font-size="fontValue+'px'" :root-font-size="fontValue+'px'"></page-meta>
	<view class="report-detail">
		<u-loading-page :loading="sumbitStaus" loading-text="提交中..."></u-loading-page>
		<view style="border-bottom: 1rpx solid #ccc;margin-bottom: 20rpx;" v-if="!sumbitStaus">
			<view class="info-item">
				<view class="label">体检日期</view>
				<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">
				<view class="label">体检机构</view>
				<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: 70vh;" scroll-y="true" v-if="!sumbitStaus">
			<table style="width: 100%;" v-for="(itmes,index) in reportList">
			  <tr>
			    <td colspan="3" align="left"><span>{{itmes.medicalProjectName}}</span></td>
			  </tr>
			  <tr>
			    <td><span>项目名称</span></td>
			    <td><span>检查结果</span></td>
			    <td><span>单位</span></td>
			  </tr>
			  <tr v-for="(itme,indexd) in itmes.healthMedicalReportDetails">
			    <td>{{itme.medicalProjectDetailName}}</td>
			    <td><u-input
			      v-model="itme.result"
			      placeholder="请输入结果"
			      maxlength="5"
			      show-word-limit
			    /></td>
			    <td>{{itme.medicalProjectDetailUnit}}</td>
			  </tr>
			</table>
			<!-- <view style="height: auto;padding-bottom: 20rpx;">
				<view v-for="(item,index) in this.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" v-if="!sumbitStausV">
		  <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:false,
		sumbitStausV:true,
		reportModelId:"",
    }
  },
  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.sumbitStausV=false;
			this.listTemplate() 
		}
	 
  },
  methods: { 
		//模板列表
		async listTemplate() {
			let param = {  }
			const res = await listTemplateApi(param)
			console.log(res, '模板--------')
			this.medicalTemplateId = res.data[0].medicalTemplateId
			this.getTemplateInfo() 
		},
		//模板详情
		async getTemplateInfo() {
			let param = {
				"medicalTemplateId": this.medicalTemplateId, 
			}
			const res = await getTemplateInfoApi(param)
			console.log(res, '模板--------')
			this.reportList = res.data
		},
		//模板详情
		async getMedicalReportInfo() {
			let param = {
				"medicalId": this.paramsData.medicalId, 
			}
			const res = await getMedicalReportInfoApi(param)
			this.reportList = res.data
			console.log(res, '详情--------')
		},
		saveReport() {
			if(!this.sumbitStaus){
				this.sumbitStaus=true
				console.log("确认获取数据",this.reportList)
				if(this.medicalDate==null||this.medicalDate==""||this.medicalDate==undefined||this.medicalMechanism==null||this.medicalMechanism==""||this.medicalMechanism==undefined){
				  this.$modal.msgSuccess("请检查机构或时间是否填入");
				  return;
				}
				let params={
				    "medicalTemplateId":this.medicalTemplateId,
				    "medicalDate":this.medicalDate,
				    "medicalMechanism":this.medicalMechanism,
				    "userId":uni.getStorageSync('userId'),
				    "reportDatas":this.reportList
				}
				console.log("params",params)
				editMedicalReportApi(params).then(response => {
				    this.sumbitStaus=false
					uni.navigateBack() 
				});
				// let param = {}
				// if(this.paramsData.medicalId&&this.paramsData.medicalId!=""){
				// 	 param = {
				// 		"medicalId": this.paramsData.medicalId,
				// 		"userId": uni.getStorageSync('userId'),
				// 		"medicalDate": this.medicalDate,
				// 		"medicalTemplateId": this.medicalTemplateId,
				// 		"medicalMechanism": this.medicalMechanism,
				// 		"reportProjectVOS":this.reportList
				// 	}
				// }else{
				// 	param = { 
				// 		"userId": uni.getStorageSync('userId'),
				// 		"medicalDate": this.medicalDate,
				// 		"medicalTemplateId": this.medicalTemplateId,
				// 		"medicalMechanism": this.medicalMechanism,
				// 		"reportProjectVOS":this.reportList
				// 	}
				// } 
				// editMedicalReportApi(param).then((res)=>{
				// 	if(res.code==200){
				// 		this.sumbitStaus=false
				// 		uni.navigateBack() 
				// 	}else{
				// 		this.sumbitStaus=false
				// 	}
				// }).catch(()=>{
				// 	this.sumbitStaus=false
				// })
				
			}
		},
		
		
		// 体检日期
		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: 94vh;
}
.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{
	position: fixed;
	left: 30rpx;
	right: 30rpx;
	bottom: 40rpx;
	display: flex;align-items: center;
	justify-content: space-between;
}
.addReportStyle{
      width: 880px;
      height: 100%;
      margin-right: 0;
      margin-left: auto;
    }
    .el-dialog {
      margin: 0 !important; /* 重置默认的margin */
      position: fixed !important; /* 固定定位 */
      top: 20px; /* 距离顶部距离 */
      right: 20px; /* 靠右距离 */
    }
    .remind-question{
        width: 100%;
        height: 50px;
        font-size: 22px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .remind-title{
        width: 100%;
        height: 40px;
        font-size: 16px;
        font-weight: bold;
        color: #000;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    table td, table th{
        border: 1px solid #dfe6ec;
    }
    .table-title {
        height: 45px;
        background-color: #f8f8f9;
    }
    .table-label{
        height: 45px;
        width: 110px;
        min-width: 100px;
        background-color: #f8f8f9;
    }
    .table-content{
        min-width: 250px;
    }
    //隐藏图片上传框的css
    ::v-deep.disabled {
        .el-upload--picture-card {
            display: none;
        }
    }
    .box-content {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
    }
    .box {
      width: 100%;
      height: 100%;
      min-width: 1000px;
      text-align: center;
      color: rgba(80, 81, 82, .9098039215686274);
    }
    .box .title {
        margin-top: 40px;
        font-size: 24px;
        font-weight: 700;
        color: #101d34;
    }
    .header-box {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        font-weight: 600;
        margin-top: 40px;
        -ms-flex-pack: distribute;
        justify-content: space-around;
        font-size: 16px;
        font-weight: 400;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        color: #8195a5;
        border-bottom: 1px solid #e5ebef;
        padding-bottom: 20px;
        margin-bottom: 40px;
    }
    .tabledata span{
      font-size: 16px;
      font-weight: 700;
      color: #000;
    }

</style>