<template>
	<view class="page">
		<pyh-nv ref="nv" :config="nvConfig"></pyh-nv>
		<view class="listBox" :style="{'padding-top':(pageTop+'px')}">
		<view class="content">
			
			<view class="message-list">
			<view class="titleall-box">
				<view class="titleall-left"><view class="titleall-left-line"></view>逝者信息<text style="color: red;">（必填）</text></view>
			</view>
			<view class="info-box">
				<view class="info-box-list">
					<view class="info-box-width">
						<view><input class="input-text" v-model="from.deceasedName" type="text" placeholder="请输入" placeholder-class="inputtext" /></view>
						<view class="info-box-small">逝者姓名</view>
					</view>
					<view class="info-box-width">
						<view><input class="input-text" v-model="from.deceasedAge" type="text" placeholder="请输入" placeholder-class="inputtext" /></view>
						<view class="info-box-small">逝者年龄</view>
					</view>
				</view>
				<view class="info-box-list">
					<view class="info-box-width">
						<view @click="xbshow = true">
							{{sex}}
						</view>
						<view class="info-box-small">逝者性别</view>
					</view>
					<view class="info-box-width">
						<view><input class="input-text" v-model="from.idCardNumber" type="text" placeholder="请输入" placeholder-class="inputtext" /></view>
						<view class="info-box-small">逝者身份证号</view>
					</view>
				</view>
				<view class="info-box-list">
					<view class="info-box-width">
						<view><input class="input-text" v-model="from.ethnicity" type="text" placeholder="请输入" placeholder-class="inputtext" /></view>
						<view class="info-box-small">逝者民族</view>
					</view>
				</view>
				<u-picker :show="xbshow" @confirm="xbconfirm" @close="xbclose" :columns="xbcolumns"></u-picker>
			</view>
			</view>
			
			<view class="message-list">
			<view class="titleall-box">
				<view class="titleall-left"><view class="titleall-left-line"></view>预约人信息<text style="color: red;">（必填）</text></view>
			</view>
			<view class="info-box">
				<view class="info-box-list">
					<view class="info-box-width">
						<view><input class="input-text" v-model="from.contactName" type="text" placeholder="请输入" placeholder-class="inputtext" /></view>
						<view class="info-box-small">预约人姓名</view>
					</view>
					<view class="info-box-width">
						<view><input v-model="from.contactPhone" class="input-text" type="text" placeholder="请输入" placeholder-class="inputtext" /></view>
						<view class="info-box-small">预约人电话</view>
					</view>
				</view>
			</view>
			</view>
			<u-calendar :show="jytimeshow" @confirm="jytimeconfirm" @close="jytimeclose"></u-calendar>
			<view class="message-list">
			<view class="titleall-box">
				<view class="titleall-left"><view class="titleall-left-line"></view>死亡相关<text style="color: red;">（必填）</text></view>
			</view>
			<view class="info-box">
				<view class="info-box-list">
					<view class="info-box-width">
						<view><input v-model="from.deathCase" class="input-text" type="text" placeholder="请输入" placeholder-class="inputtext" /></view>
						<view class="info-box-small">死亡原因</view>
					</view>
					<view class="info-box-width" @click="timeshow = true">
						<view>{{from.deathdate}}</view>
						<view class="info-box-small">死亡日期</view>
					</view>
				</view>
			</view>
			</view>
			<u-calendar minDate="2023-11-01" maxDate="3050-12-01" :show="timeshow" @confirm="timeconfirm" @close="timeclose"></u-calendar>
			<view class="message-list">
			<view class="titleall-box">
				<view class="titleall-left"><view class="titleall-left-line"></view>家属信息<text>（选填）</text></view>
			</view>
			<view class="info-box">
				<view class="info-box-list">
					<view class="info-box-width">
						<view><input v-model="from.relativeName" class="input-text" type="text" placeholder="请输入" placeholder-class="inputtext" /></view>
						<view class="info-box-small">家属姓名</view>
					</view>
					<view class="info-box-width">
						<view><input v-model="from.relativePhone" class="input-text" type="text" placeholder="请输入" placeholder-class="inputtext" /></view>
						<view class="info-box-small">家属电话</view>
					</view>
				</view>
				<view class="info-box-list">
					<view class="info-box-width">
						<view class="" @click="qsgxshow = true">
							{{from.deceasedRelationship}}
						</view>
						<!-- <view><input class="input-text" type="text" placeholder="请选择" placeholder-class="inputtext" /></view> -->
						<view class="info-box-small">与逝者关系</view>
					</view>
					<u-picker :show="qsgxshow" @confirm="qsgxconfirm" @close="xbclose" :columns="qsgxcolumns"></u-picker>
					<view class="info-box-width">
						<view><input class="input-text" v-model="from.relativeIdCardNumber" type="text" placeholder="请输入" placeholder-class="inputtext" /></view>
						<view class="info-box-small">家属证件号码</view>
					</view>
				</view>
				<view class="info-box-list">
					<view class="info-box-width">
						<view><input class="input-text"  v-model="from.relativeAddress" type="text" placeholder="请输入" placeholder-class="inputtext" /></view>
						<view class="info-box-small">家属地址</view>
					</view>
				</view>
			</view>
			</view>
			
			<view class="page-footer">
			  <view class="footer-buy">
			    <view class="cart-add">
					<view><image src="../../static/btn2.png"></image></view>
					<view class="cart-add-text"><image src="../../static/phone.png"></image><text>联系电话</text></view>
			    </view>
			    <view class="buy-at" @click="funeralreportmove">
					<image src="../../static/btn1.png"></image>
			      <text>下一步</text>
			    </view>
			  </view>
			</view>
			
		</view>
		</view>
	</view>
</template>

<script>
	import BASE_URL from "@/common/config.js"
	export default {
		data() {
			return {
				BASE_URL,
				fileList: [],
				nvConfig:{
					title:"填写基本信息",
					bgColor:"#ffffff",
					color:"#000000",
					fixedAssist:{
						hide:true,
					},
				},
				sex:"请选择",
				from:{
					deceasedName:"",
					deceasedAge:"",
					deceasedSex:"请选择",
					idCardNumber:"",
					ethnicity:"",
					
					contactName:"",
					contactPhone:"",
					
					deathCase:null,
					deathdate:"请选择",
					
					
					relativeName:"",
					relativePhone:"",
					deceasedRelationship:"请选择",
					relativeIdCardNumber:"",
					relativeAddress:"",
					
					provelmage:""
				},
				xbshow:false,
				xbcolumns: [
				    ['男', '女']
				],
				qsgxshow:false,
				qsgxcolumns: [
				    ['爱人', '兄弟','父亲','母亲','其他']
				],
				timeshow:false,
				jytimeshow:false,
			};
		},
		onPageScroll(e) {this.$refs.nv.pageScroll(e)},
		computed:{
			pageTop(){return parseInt(88*uni.getSystemInfoSync().windowWidth/750) + uni.getSystemInfoSync().statusBarHeight}
		},
		onLoad(params) {
		},
		methods:{
			// 上传图片
			async afterRead(event) {
				console.log(event);
				var res = await this.uploadImg(event.file.url)
				console.log("上传图片",res,this.BASE_URL)
				res = JSON.parse(res.data)
				this.from.provelmage = this.BASE_URL + res.fileName
				this.fileList.push({
					name:res.fileName,
					fileId:res.newFileName,
					url: this.BASE_URL + res.fileName
				})
			},
			uploadImg(url) {
				return new Promise((r, e) => {
					uni.uploadFile({
						url: this.BASE_URL + "/common/upload",
						filePath: url,
						name: "file",
						success: (d) => r(d)
					})
				})
			},
			deletePic(event) {
				this.fileList.splice(event.index, 1)
			},
			funeralreportmove(){
				var info = JSON.stringify(this.from)
				console.log("提交的数据",this.from);
				// return
				// deceasedName deceasedAge idCardNumber ethnicity contactName contactPhone deathCase deathdate  sex 
				if(this.from.deceasedName == '' || this.from.deceasedAge == '' || this.from.idCardNumber == '' || this.from.ethnicity == '' || this.from.contactName == '' || this.from.contactPhone == '' || this.from.deathCase == '' || this.from.deathdate == '请选择' || this.sex == '请选择'){
					uni.showToast({
						title: '请输入完整必填',
						//将值设置为 success 或者直接不用写icon这个参数
						icon: 'error',
						//显示持续时间为 2秒
						duration: 2000
					})  
				}else{
					uni.navigateTo({
						url: '/pages/funeralreportmove/funeralreportmove?info=' + info,
					})
				}
				
			},
			// 性别确认选择
			xbconfirm(e){
				this.xbshow = false
				this.sex  = e.value[0]
				console.log("性别选择",e);
			},
			// 性别取消选择
			xbclose(){
				this.xbshow = false
			},
			// 亲属关系确认选择
			qsgxconfirm(e){
				this.qsgxshow = false
				this.from.deceasedRelationship = e.value[0]
			},
			qsgxclose(){
				this.qsgxshow = false
			},
			// 死亡日期确认
			timeconfirm(e){
				console.log("死亡时间",e);
				this.from.deathdate = e[0]
				this.timeshow = false
			},
			timeclose(){
				this.timeshow = false
			},
		}
	}
</script>

<style scoped lang="scss">
	@import 'funeralreport.scss';
</style>
