<template>
	<view>
		<view v-if="showObiFirst">
			<!-- 基础信息区域 -->
			<view class="baseInfoWrap">
				<view class="baseInfoItem">
					<view class="infoLeft">
						<span>*</span>逝者姓名
					</view>
					<view class="infoRight">
						<input type="text" v-model="obi.die_name" placeholder="请输入逝者姓名"/>
					</view>
				</view>
				<view class="baseInfoItem">
					<view class="infoLeft">
						<span>*</span>逝者性别
					</view>
					<view class="infoRight" @tap="sexFlag=true">
						<text>{{obi.die_sex}}</text>
						<image src="/static/image/rightMore.png" mode=""></image>
					</view>
				</view>
				<w-picker
					:visible.sync="sexFlag"
					mode="selector"
					default-type="name"
					:default-props="defaultProps"
					:options="sexList"
					@confirm="onConfirm($event,'sex')"
					@cancel="onCancel"
					ref="selector" 
				></w-picker>
				<view class="baseInfoItem">
					<view class="infoLeft">
						<span>*</span>逝者生日
					</view>
					<view class="infoRight" @tap="birthDateFlag=true">
						<text>{{obi.die_birthday}}</text>
						<image src="/static/image/rightMore.png" mode=""></image>
					</view>
				</view>
				<w-picker
					:visible.sync="birthDateFlag"
					mode="date" 
					startYear="1920" 
					endYear="2120"
					:current="false"
					fields="day"
					@confirm="onConfirm($event,'birthDate')"
					@cancel="onCancel"
					:disabled-after="false"
					ref="date1"
				></w-picker>
				<view class="baseInfoItem">
					<view class="infoLeft">
						<span>*</span>逝世时间
					</view>
					<view class="infoRight" @tap="diedDateFlag=true">
						<text>{{obi.die_time}}</text>
						<image src="/static/image/rightMore.png" mode=""></image>
					</view>
				</view>
				<w-picker
					:visible.sync="diedDateFlag"
					mode="date" 
					startYear="1920"
					endYear="2120"
					:current="false"
					fields="day"
					@confirm="onConfirm($event,'diedDate')"
					@cancel="onCancel"
					:disabled-after="false"
					ref="date1"
				></w-picker>
				<view class="baseInfoItem">
					<view class="infoLeft">
						享年
					</view>
					<view class="infoRight">
						<text>{{happy_year}}</text>
					</view>
				</view>
				<view class="baseInfoItem">
					<view class="infoLeft">
						<span>*</span>出殡日期
					</view>
					<view class="infoRight" @tap="funDateFlag=true">
						<text>{{obi.go_out}}</text>
						<image src="/static/image/rightMore.png" mode=""></image>
					</view>
				</view>
				<w-picker
					:visible.sync="funDateFlag"
					mode="date" 
					startYear="1920"
					endYear="2120"
					:current="false"
					fields="day"
					@confirm="onConfirm($event,'funDate')"
					@cancel="onCancel"
					:disabled-after="false"
					ref="date1"
				></w-picker>
				<view class="baseInfoItem">
					<view class="infoLeft">
						<span>*</span>爱人情况
					</view>
					<view class="infoRight" @tap="marryFlag=true">
						<text>{{obi.love_what}}</text>
						<image src="/static/image/rightMore.png" mode=""></image>
					</view>
				</view>
				<w-picker
					:visible.sync="marryFlag"
					mode="selector"
					default-type="name"
					:default-props="defaultProps"
					:options="marryList"
					@confirm="onConfirm($event,'marry')"
					@cancel="onCancel"
					ref="selector" 
				></w-picker>
			</view>
			<!-- 位置信息区域 -->
			<view class="baseInfoWrap" style="margin-top: 16rpx;">
				<view class="baseInfoItem">
					<view class="infoLeft">
						灵堂地点<text>（选填）</text>
					</view>
					<view class="infoRight" @click="chooseAddress('lt')">
						<text>{{hall_address}}</text>
						<image src="/static/image/rightMore.png" mode=""></image>
					</view>
				</view>
				<view class="baseInfoItem">
					<view class="infoLeft">
						追悼会时间<text>（选填）</text>
					</view>
					<view class="infoRight" @tap="memTimeFlag=true">
						<text>{{mourn_time}}</text>
						<image src="/static/image/rightMore.png" mode=""></image>
					</view>
				</view>
				<w-picker
					:visible.sync="memTimeFlag"
					mode="date" 
					:current="false"
					startYear="1920"
					endYear="2120"
					fields="minute"
					@confirm="onConfirm($event,'memTime')"
					@cancel="onCancel"
					:disabled-after="false"
					ref="date1"
				></w-picker>
				<view class="baseInfoItem" @click="chooseAddress('zdh')">
					<view class="infoLeft">
						追悼会地址<text>（选填）</text>
					</view>
					<view class="infoRight">
						<text>{{mourn_address}}</text>
						<image src="/static/image/rightMore.png" mode=""></image>
					</view>
				</view>
				<view class="baseInfoItem">
					<view class="infoLeft">
						答谢宴时间<text>（选填）</text>
					</view>
					<view class="infoRight" @tap="thankTimeFlag=true">
						<text>{{thank_time}}</text>
						<image src="/static/image/rightMore.png" mode=""></image>
					</view>
				</view>
				<w-picker
					:visible.sync="thankTimeFlag"
					mode="date" 
					:current="false"
					startYear="1920"
					endYear="2120"
					fields="minute"
					@confirm="onConfirm($event,'thankTime')"
					@cancel="onCancel"
					:disabled-after="false"
					ref="date1"
				></w-picker>
				<view class="baseInfoItem" @click="chooseAddress('dxy')">
					<view class="infoLeft">
						答谢宴地点<text>（选填）</text>
					</view>
					<view class="infoRight">
						<text>{{thank_address}}</text>
						<image src="/static/image/rightMore.png" mode=""></image>
					</view>
				</view>
			</view>
			<!-- 图片列表区域 -->
			<view class="imgListWrap">
				<mk-upload :imgList="imgList" @onDelete="onDelete" @onChoose="onChoose"></mk-upload>
			</view>
			<!-- 服务商区域 -->
			<view class="serviceWrap">
				<view class="service">
					<view class="serviceImg">
						<image :src="shopInfo.image" mode=""></image>
					</view>
					<view class="serviceInfo">
						<view class="serviceName">
							{{shopInfo.title}}
						</view>
						<view class="serviceDesc"> 
							<parse :content="shopInfo.content" :imageProp="{'domain':apiUrl}"></parse>
						</view>
						<view class="serviceAddress">
							<view class="addrImg">
								<image src="/static/image/dizhi-29-1-@2x@2x.png" mode=""></image>
							</view>
							<view class="addrTxt">
								{{shopInfo.address}}
							</view>
						</view>
					</view>
				</view>
				<!-- <view class="serviceDetail">
					查看商家详情
					<image src="/static/image/rightMore.jpg" mode=""></image>
				</view> -->
			</view>
			<!-- 操作按钮区域 -->
			<view class="bottomBtnWrap">
				<view class="bottomBtn" @click="nextHandle">
					下一步
				</view>
			</view>
		</view>
		<view class="mapWrap" v-if="showMap">
			<iframe id="mapPage" width="100%" height="100%" frameborder=0
			    src="https://apis.map.qq.com/tools/locpicker?search=1&type=1&key=XOKBZ-DLNW4-WEHUT-XKTM3-6NBLK-WUFN7&referer=myapp">
			</iframe>
		</view>
	</view>
</template>

<script>
	import mkUpload from '@/components/mk-upload.vue'
	import wPicker from "@/components/w-picker/w-picker.vue"
	import parse from '../../components/gaoyia-parse/parse.vue'
	var that
	export default{
		data() {
			return {
				type:'',
				showMap:false,
				showObiFirst:false,
				apiUrl:this.apiUrl,
				shopInfo:{},
				obi:{
					//详情页URL 用于生成二维码扫码进入
					url:'',
					//1=用户生成,2=商家生成
					enmu:1,
					//1=新增,2=更改
					status:1,
					//讣告进度:1=逝者信息,2=家属信息,3=选择模板
					type:1,
					die_name:'',
					die_sex:'请选择逝者性别',
					die_birthday:'请选择逝者生日',
					die_time:'请选择逝世时间',
					go_out:'请选择出殡日期',
					love_what:'请选择爱人情况',
					hall_address:'',
					hall_lng:'',
					hall_lat:'',
					mourn_address:'',
					mourn_lng:'',
					mourn_lat:'',
					mourn_time:'',
					thank_address:'',
					thank_lng:'',
					thank_lat:'',
					thank_time:'',
					after_images:'',
					//讣告标题
					title:'',
					//家属姓名
					family_name:'',
					//家属联系方式
					family_mobile:'',
					//称呼关系
					call:'',
					//悼念文本
					content:'',
					//遗像上传
					portrait_image:'',
					moban_id:''
				},
				defaultProps:{
					label:"name",
					value:"id"
				},
				sexList: [
					{
						name:"男",
						id:"1"
					},{
						name:"女",
						id:"2"
					}
				],
				sexFlag: false,
				marryList: [
					{
						name:"未知",
						id:"1"
					},{
						name:"健在",
						id:"2"
					},{
						name:"已故",
						id:"3"
					}
				],
				hall_address:'请选择灵堂地点',
				marryFlag: false,
				birthDateFlag:false,
				diedDateFlag:false,
				funDateFlag:false,
				mourn_time:'请选择追悼会时间',
				mourn_address:'请选择追悼会地点',
				memTimeFlag:false,
				thank_time:'请选择答谢宴时间',
				thankTimeFlag:false,
				thank_address:'请选择答谢宴地点',
				imgList: []
			}
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			},
			happy_year(){
				if(this.obi.die_time != '请选择逝世时间' && this.obi.die_birthday != '请选择逝者生日'){
					var returnAge;
					//逝者生日
					var strBirthdayArr = this.obi.die_birthday.split('-');
					var birthYear = strBirthdayArr[0];
					var birthMonth = strBirthdayArr[1];
					var birthDay = strBirthdayArr[2];
					//逝世时间
					var dieTimeArr = this.obi.die_time.split('-');
					var nowYear = dieTimeArr[0];
					var nowMonth = dieTimeArr[1];
					var nowDay = dieTimeArr[2];
					if (nowYear == birthYear) {
						returnAge = 0; //同年 则为0岁
					} else {
						var ageDiff = nowYear - birthYear; //年之差
						if (ageDiff > 0) {
							if (nowMonth == birthMonth) {
								var dayDiff = nowDay - birthDay; //日之差
								if (dayDiff < 0) {
									returnAge = ageDiff - 1;
								} else {
									returnAge = ageDiff;
								}
							} else {
								var monthDiff = nowMonth - birthMonth; //月之差
								if (monthDiff < 0) {
									returnAge = ageDiff - 1;
								} else {
									returnAge = ageDiff;
								}
							}
						} else {
							returnAge = -1; //返回-1 表示出生日期输入错误 晚于今天
						}
					}
					return returnAge.toString(); //返回周岁年龄
				}
			}
		},
		components:{
			mkUpload,
			wPicker,
			parse
		},
		onLoad(option){
			that = this
			uni.request({
				url: this.apiUrl+'/api/Config/KefuConfig',
				method:'post',
				success: (res) => {
					this.shopInfo = res.data.data
					this.showObiFirst = true
				}
			});
		},
		onShow() {
			if(uni.getStorageSync('ob_id') != ''){
				this.getData()
			}
		},
		methods: {
			getData(){
				this.$request('/api/Index/ObBack',{ob_id:uni.getStorageSync('ob_id')}).then((res)=>{
					this.obi = res.data
					this.imgList = this.obi.after_images2
					this.obi.url = this.obiUrl
					//1=用户生成,2=商家生成
					this.obi.enmu = 1
					//1=新增,2=更改
					this.obi.status = 2
					this.obi.moban_id = ''
					this.showObiFirst = true
					console.log('生成讣告第一步详情',this.obi)
				})
			},
			//选择地点
			chooseAddress(type){
				this.showMap = true
				this.showObiFirst = false
				this.type = type
				
			},
			onConfirm(res,type){
				if(type == 'sex'){
					this.obi.die_sex = res.result;
				}
				if(type == 'marry'){
					this.obi.love_what = res.result;
				}
				if(type == 'memTime'){
					this.mourn_time = res.result;
					this.obi.mourn_time = res.result;
				}
				if(type == 'thankTime'){
					this.thank_time = res.result;
					this.obi.thank_time = res.result;
				}
				if(type == 'birthDate'){
					this.obi.die_birthday = res.result;
				}
				if(type == 'diedDate'){
					this.obi.die_time = res.result;
				}
				if(type == 'funDate'){
					this.obi.go_out = res.result;
				}								  
			},
			 onCancel(){
			 	
			 },
			  getDate(type) {
				 const date = new Date();
				 let year = date.getFullYear();
				 let month = date.getMonth() + 1;
				 let day = date.getDate();
	 
				 if (type === 'start') {
					 year = year - 60;
				 } else if (type === 'end') {
					 year = year + 2;
				 }
				 month = month > 9 ? month : '0' + month;;
				 day = day > 9 ? day : '0' + day;
				 return `${year}-${month}-${day}`;
			 },
			 sexPickerChange(e){
				this.sexIndex = e.target.value
			 },
			 birthDateChange(e){
				this.birthDate = e.target.value
			 },
			 diedDateChange(e){
				this.diedDate = e.target.value
			 },
			 funDateChange(e){
				this.funDate = e.target.value
			 },
			 marryPickerChange(e){
				this.marryIndex = e.target.value
			 },
			//下一步
			nextHandle(){
				this.obi.happy_year = this.happy_year
				this.obi.after_images = this.imgList.join(',')
				this.obi.portrait_image = this.obi.portrait_image2
				if(this.obi.die_name == ''){
					uni.showToast({
						title:'请输入逝者姓名',
						icon:'none'
					})
					return
				}
				if(this.obi.die_sex == '请选择逝者性别'){
					uni.showToast({
						title:'请选择逝者性别',
						icon:'none'
					})
					return
				}
				if(this.obi.die_birthday == '请选择逝者生日'){
					uni.showToast({
						title:'请选择逝者生日',
						icon:'none'
					})
					return
				}
				if(this.obi.die_time == '请选择逝世时间'){
					uni.showToast({
						title:'请选择逝世时间',
						icon:'none'
					})
					return
				}
				if(this.obi.go_out == '请选择出殡日期'){
					uni.showToast({
						title:'请选择出殡日期',
						icon:'none'
					})
					return
				}
				if(this.obi.love_what == '请选择爱人情况'){
					uni.showToast({
						title:'请选择爱人情况',
						icon:'none'
					})
					return
				}
				if(this.obi.after_images == ''){
					uni.showToast({
						title:'请上传生前照片',
						icon:'none'
					})
					return
				}
				this.$request('/api/Index/UserAddOb',this.obi,2).then((res)=>{
					if(res.data.id){
						uni.setStorageSync('ob_id',res.data.id)
					}
					uni.navigateTo({
						url:'createObituarySecond'
					})
				})
				
			},
			onDelete(index){
				console.log(index)
				//删除成功回调后执行 只做演示
				uni.showLoading({
					title: '删除中'
				});
				setTimeout(()=>{
					this.imgList.splice(index, 1);
					wx.showToast({
						title: '删除成功',
						icon: 'success',
						duration: 1000
					});
				}, 1000);
			},
			onChoose(e){
				//上传成功后回调执行push  只做演示
				uni.showLoading({
					title: '上传中'
				});
				const tempFilePaths = e.tempFilePaths;
				uni.uploadFile({
					url: this.apiUrl+'/api/common/uploadQiniu',
					filePath: tempFilePaths[0],
					success: (uploadFileRes) => {
						this.imgList.push(JSON.parse(uploadFileRes.data).data.url)
						uni.hideLoading();	
					}
				});
			},
			onPreviewTake(index){
				console.log(index)
				wx.showActionSheet({
				  itemList: ['预览图片', '删除图片'],
				  success (res) {
					console.log(res.tapIndex)
				  },
				  fail (res) {
					console.log(res.errMsg)
				  }
				})
			},
			// onDeleteTake(index){
			//  console.log(index)
			//  wx.showToast({
			//      title: '删除事件被接管,请根据自己的需求自定义吧',
			//      icon: 'none',
			//      duration: 1000
			//  });
			// }
		}
	}
	window.addEventListener('message', function(event) {
		// 接收位置信息，用户选择确认位置点后选点组件会触发该事件，回传用户的位置信息
		var loc = event.data;
		if (loc && loc.module == 'locationPicker') {//防止其他应用也会向该页面post信息，需判断module是否为'locationPicker'
		  if(that.type == 'dxy'){
		  	that.thank_address = loc.poiname
		  	that.obi.thank_address = loc.poiname
		  	that.obi.thank_lat = loc.latlng.lat
		  	that.obi.thank_lng = loc.latlng.lng
		  }
		  //灵堂地点
		  if(that.type == 'lt'){
		  	that.hall_address = loc.poiname
		  	that.obi.hall_address = loc.poiname
		  	that.obi.hall_lat = loc.latlng.lat
		  	that.obi.hall_lng = loc.latlng.lng
		  }
		  //追悼会地点
		  if(that.type == 'zdh'){
		  	that.mourn_address = loc.poiname
		  	that.obi.mourn_address = loc.poiname
		  	that.obi.mourn_lat = loc.latlng.lat
		  	that.obi.mourn_lng = loc.latlng.lng
		  } 
		  that.showMap = false
		  that.showObiFirst = true
		}
	}, false)
</script>

<style>
	page{background: #f7f8fa;}
	/* 基础信息区域 */
	.baseInfoWrap{padding: 0 32rpx;font-size: 28rpx;background: #fff;}
	.baseInfoWrap input{font-size: 28rpx;text-align: end;color: #969799;}
	.baseInfoWrap .baseInfoItem{height: 88rpx;display: flex;justify-content: space-between;align-items: center;}
	.infoLeft text{color: #969799;}
	.infoLeft span{color: red;padding-right: 10rpx;}
	.baseInfoItem .infoRight{display: flex;align-items: center;}
	.infoRight text{padding-right: 8rpx;color: #969799;}
	.infoRight image{width: 36rpx;height: 36rpx;}
	/* 位置信息区域 */
	/* 图片列表区域 */
	.imgListWrap{padding: 0 32rpx;margin-top: 16rpx;background: #fff;}
	/* 服务商区域 */
	.serviceWrap{margin-top: 20rpx;padding: 24rpx 32rpx;background: #fff;}
	.service{display: flex;}
	.service .serviceImg{width: 140rpx; height: 140rpx;border-radius: 8rpx;}
	.serviceImg image{width: 140rpx;height: 140rpx;}
	.service .serviceInfo{padding-left:20rpx;}
	.serviceInfo .serviceName{color: #4D5B66;font-size: 28rpx;font-weight: 600;}
	.serviceInfo .serviceDesc{color: #4D5B66;font-size: 24rpx;line-height: 50rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp:1;
		-webkit-box-orient:vertical;
	}
	.serviceInfo .serviceAddress{display: flex;align-items: center;line-height: 50rpx;color: #4D5B66;font-size: 24rpx;}
	.serviceAddress .addrImg{width: 40rpx;padding-right: 10rpx;}
	.addrImg image{width: 30rpx;height: 24rpx;}
	/* .serviceDetail{display: flex;justify-content: center;align-items: center;font-size: 24rpx;color: #646566;}
	.serviceDetail image{width: 24rpx;height: 24rpx;margin-left: 8rpx;} */
	/* 操作按钮区域 */
	.bottomBtnWrap{padding: 32rpx;}
	.bottomBtnWrap .bottomBtn{border-radius: 8rpx;background: #894746;color: #fff;font-size: 32rpx;height: 80rpx;text-align: center;line-height: 80rpx;}

	.mapWrap{width: 100%;height: 100vh;}
</style>