<template>
<div>
  	 <common @asynCallBack="asynCallBack"></common>
       <top-header :pageTitle="pageTitle"  ></top-header>

		<div class="mui-content margin60">
			<div class="mui-content-padded vongi-qingjiadt vongi-editme">
				<form class="mui-input-group">
					<div class="mui-input-row">
						<label>就医医院<i style="color:red">*</i></label>
						<input type="text" class="mui-input-clear" v-model="detail.hospitalName" placeholder="请填写医院名称">
					</div>
					<div class="mui-input-row">
						<label>就医时间<i style="color:red">*</i></label>
						<button class="mui-btn mui-btn-block mui-navigate-right mui-ellipsis"
						  @click="selectDate"
						 type='button' style="width:65%">

							{{detail.hospitalTime?detail.hospitalTime:'请选择'}}

						</button>
					</div>
				</form>
			</div>
			<div class="vongi-meform-pho mui-content-padded">
				<h4>病因<i style="color:red">*</i></h4>
				<div class="mui-input-row">
					<textarea id="textarea" rows="5"  v-model="detail.pathogeny" placeholder="请填写病因"></textarea>
				</div>
			</div>
			<div class="vongi-meform-pho mui-content-padded">
				<h4>就医结果</h4>
				<div class="mui-input-row">
					<textarea id="textarea" rows="5" v-model="detail.result"  placeholder="请填写就医结果"></textarea>
				</div>
			</div>
			<div class="vongi-wordcard vongi-meform-pho mui-content-padded">
				<h4>结果图片记录</h4>
				<div class="fyy-upphoto">
					<div class="mui-col-xs-3 fyy-upphoto-close"  v-for="(picture,index) in resultImg" :key="index" >
						<img  v-if="picture" :src="picture + '?x-oss-process=image/resize,m_fill,w_128,h_128'"  />
						<a class="mui-icon mui-icon-closeempty"   @click="delImg('1',index)" ></a>
					</div>
					<div class="mui-col-xs-3">
						<a><span class="mui-icon mui-icon-camera" @click="changeImg('1')" ></span></a>
					</div>
				</div>
			</div>
			<div class="vongi-meform-pho mui-content-padded">
				<h4>使用药品</h4>
				<div class="mui-input-row">
					<textarea id="textarea" rows="5" v-model="detail.drugs" placeholder="请填写使用药品"></textarea>
				</div>
			</div>
			<div class="vongi-wordcard vongi-meform-pho mui-content-padded">
				<h4>药品图片记录</h4>
				<div class="fyy-upphoto">
					<div class="mui-col-xs-3 fyy-upphoto-close"  v-for="(picture,index) in drugsImg" :key="index" >
                    						<img  v-if="picture" :src="picture + '?x-oss-process=image/resize,m_fill,w_128,h_128'"  />
                    						<a class="mui-icon mui-icon-closeempty"   @click="delImg('2',index)" ></a>
                    					</div>
					<div class="mui-col-xs-3">
						<a><span class="mui-icon mui-icon-camera" @click="changeImg('2')"></span></a>
					</div>
				</div>
			</div>
			<div class="mui-content-padded vongi-qingjiadt vongi-editme">
				<form class="mui-input-group">
					<div class="mui-input-row">
						<label>诊疗费用(元)</label>
						<span  style=" padding-top: 0px;
                                   padding-bottom: 0px;">
                         <input v-model="detail.cost" placeholder="请填写诊疗费用" class="mui-input-clear" type="number" > </span>
					</div>
				</form>
			</div>
			<div class="vongi-wordcard vongi-meform-pho mui-content-padded">
				<h4>诊疗费用图</h4>
				<div class="fyy-upphoto">
					<div class="mui-col-xs-3 fyy-upphoto-close"  v-for="(picture,index) in costImg" :key="index" >
                    						<img  v-if="picture" :src="picture + '?x-oss-process=image/resize,m_fill,w_128,h_128'"  />
                    						<a class="mui-icon mui-icon-closeempty"    @click="delImg('3',index)" ></a>
                    					</div>
					<div class="mui-col-xs-3">
						<a><span class="mui-icon mui-icon-camera" @click="changeImg('3')"></span></a>
					</div>
				</div>
			</div>
		</div>
		<div class="fyy-footer">
			<div class="bindfyy-btn"><button type="submit" class="mui-btn mui-btn-pink "  @click="submit()">保  存</button></div>
		</div>
				 <loading :visible="isLoading"></loading>

</div>
</template>


<script>
	require('$project/assets/js/mui.picker.min.js');

	import * as API from '@/apis/Master/hospital'
	import Common from '$project/components/Common.vue'
	import Loading from '$project/components/Loading.vue'
	import TopHeader from '$project/components/TopHeader.vue'
	import * as WxJsApi from '$project/utils/wxJsApi'

	import {
		mapGetters,
		mapMutations
	} from 'vuex'

	import {


	} from '$project/utils'
	export default {
		name: 'MasterHospitalForm',
		components: {
			Common,
			Loading,
			TopHeader
		},
		data() {
			return {
				pageTitle: '就医记录',
				isLoading: false,
				drugsImg:[],
				resultImg:[],
				costImg:[],
 				detail:{
                       		"cost": '',//费用
                       		"costImg": "",

                       		"delFlag": false,
                       		"drugs": "",//药品
                       		"drugsImg": "",
                       		"hospitalName": "",//医院
                       		"hospitalTime": "",
                       		"id": "",
                       		"personId": "",
                       		"pathogeny": "",//病因
                       		"result": "",//就医结果
                       		"resultImg": "",//结果图片
                       		"updateBy": "",
                       		"updateTime": ""
                       	},
			}
		},
		created() {

		 },
		methods:  {
		checkForm(){
		    if (!this.detail.hospitalName) {
            					mui.toast('请输入就医医院');
            					return false;
            				} else if (!this.detail.hospitalTime) {
            					mui.toast('请选择就医时间');
            					return false;
            				} else if (!this.detail.pathogeny) {
                                         mui.toast('请输入病因');
                                         return false;
                           }
                           return true;
		},
		submit(){

		if (!this.checkForm()) {
		       return;
		}
		this.detail.personId=this.person_data.id
		this.detail.resultImg=this.resultImg.join(",")
		this.detail.drugsImg=this.drugsImg.join(",")
		this.detail.costImg=this.costImg.join(",")

 				this.isLoading = true;
                if(!this.detail.id){
                	API.medicalRecordAdd(this.detail).then(res=>{
                                             this.$router.push({
                                             					name: 'MasterHospital',
                                             					query: {
                                              					}
                                             				})
                                                    this.detail=res;
                                					mui.toast("已提交");

                                  }).catch(error => {
                                  			this.isLoading = false;

                                					mui.toast(error);

                                    })
                }else{
                API.medicalRecordUpdate(this.detail).then(res=>{
                                                             this.$router.push({
                                                             					name: 'MasterHospital',
                                                             					query: {
                                                              					}
                                                             				})
                                                                    this.detail=res;
                                                					mui.toast("已提交");

                                                  }).catch(error => {
                                                  			this.isLoading = false;

                                                					mui.toast(error);

                                                    })
                }

		},
		 changeImg(type) {
		 var sz=[];
		    if(type==1){
		        sz=this.resultImg
		    }else if(type==2){
		        sz=this.drugsImg
		    }else if(type==3){
		         sz=this.costImg
		    }

         				if (sz.length >= 10) {
         					mui.toast("只能上传10张照片");
         					return;
         				}
         				var _this = this;

         				WxJsApi.chooseImage().then(res => {
         					var localData = res.localData;

         					if (localData.indexOf('data:image') != 0) {
         						//判断是否有这样的头部
         						localData = 'data:image/jpeg;base64,' + localData
         					}
         					localData = localData.replace(/\r|\n/g, '').replace('data:image/jgp', 'data:image/jpeg')
         					this.imgBase64 = localData;
         					//显示裁剪图片
         					//_this.showCropper(field);
         					this.uploadpic(sz);
         				}).catch(error => {
         					mui.toast(error);
         				})


         			},	delImg(type,index) {
         			var sz;
            if(type==1){
		        sz=this.resultImg
		    }else if(type==2){
		        sz=this.drugsImg
		    }else if(type==3){
		         sz=this.costImg
		    }
               sz.splice(index, 1);
                      			},
                      				//上传图片
                                			uploadpic(sz) {
                                				this.isLoading = true;

                                				WxJsApi.uploadPic(this.imgBase64).then(response => {
                                					this.isLoading = false;
                                					sz.push(response);
                                				}).catch(error => {
                                					this.isLoading = false;
                                					mui.toast(error);
                                				})
                                			},
			selectDate(){
			            var dtPicker = new mui.DtPicker({
            					type: 'date',
            					"beginYear": 1900,
            					"endDate": new Date(),
            				});

            				dtPicker.show((selectItems) => {
            					var year = selectItems.y.value;
            					var month = selectItems.m.value;
            					var day = selectItems.d.value;

            					var curDate = year + "-" + month + "-" + day;
                                this.detail.hospitalTime=curDate;

            				});
			},
		getDetail(){
						this.isLoading = true;

	        	API.medicalRecordDetail(this.$route.query.id).then(res=>{
                    this.detail=res;
				this.isLoading = false;
				if(this.detail.resultImg){
				 	        	this.resultImg=this.detail.resultImg.split(",")
				}
				if(this.detail.drugsImg){
				 		 		this.drugsImg=this.detail.drugsImg.split(",")

				}
				if(this.detail.costImg){
				 	        	this.costImg=this.detail.costImg.split(",")

                				}


         		}).catch(error => {
                    this.isLoading = false;
        		})
		}

		 ,asynCallBack(){},
		},
		mounted() {
					WxJsApi.getWxConfig();
            if(this.$route.query.id){
                 this.getDetail();
            }
           //
		},
		destroyed() {

		},
		computed: {
			...mapGetters({
				openId: 'wx_openid',
				token: 'token',
				person_data: 'person_data',
				person_popedom: 'person_popedom',
			})
		}
	}
</script>

<style scoped src="$project/assets/css/pension.css"></style>
<style scoped src="$project/assets/css/xpwyfyy.css"></style>
<style src="$project/assets/css/iconfont.css"></style>
<style src="$project/assets/css/mui.picker.min.css"></style>

<style>
</style>
