<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>
			<!--  -->
			<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 width100">
							<!-- <view @click="areashow = true">{{area}}</view> -->
							<view>
								<input v-model="area" class="input-text" type="text" placeholder="请输入详细地址" placeholder-class="inputtext" />
							</view>
							<view class="info-box-small">接运地点</view>
						</view>
					</view>
					<u-picker :show="areashow"  :columns="areacolumns" @confirm="areaconfirm" @close="areaclose"></u-picker>
					<view class="info-box-list">
						<view class="info-box-width width100">
							<view @click="timeshow = true">
								<label>{{accessTime}}</label>
							</view>
							<view class="info-box-small">接运时间</view>
						</view>
					</view>
					<view class="info-box-list">
						<view class="info-box-width width100">
							<view>
								<input v-model="remarks" class="input-text" type="text" placeholder="请输入" placeholder-class="inputtext" />
							</view>
							<view class="info-box-small">备注</view>
						</view>
					</view>
				</view>
			</view>
			<u-datetime-picker
			    :show="timeshow1"
			    mode="datetime"
				v-model="accessTimeby"
				@confirm="xztime"
				@cancel="qxtime"
			></u-datetime-picker>
			<!--  -->
			<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 @click="swyyshow = true"><input disabled 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>
					<u-picker :show="swyyshow" @confirm="swyyconfirm" @close="swyyclose" :columns="swyycolumns"></u-picker>
				</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="funeralresult">
					<image src="../../static/btn1.png"></image>
			      <text>提交</text>
			    </view>
			  </view>
			</view>
		</view>
		</view>
		<u-toast ref="uToast"></u-toast>
	</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:"",
					
					accessLocation:"",
					accessTime:"",
					obituaryType:"",
					remarks:"",
					userId:"",
				},
				xbshow:false,
				xbcolumns: [
				    ['男', '女']
				],
				qsgxshow:false,
				qsgxcolumns: [
				    ['爱人', '兄弟','父亲','母亲','其他']
				],
				timeshow:false,
				jytimeshow:false,
				swyycolumns:[
					['自然死亡','疾病死亡','意外死亡']
				],
				swyyshow:false,
				
				
				// 
				timeshow1:false,
				accessLocation:"",
				area:"",
				xxarea:"",
				areashow:false,
				areacolumns:[
					['地区1', '地区2']
				],
				
				accessTime:"请选择",
				accessTimeby:2,
				timeshow:false,
				remarks:"",
				info:{}
				// 
			};
		},
		onPageScroll(e) {this.$refs.nv.pageScroll(e)},
		computed:{
			pageTop(){return parseInt(88*uni.getSystemInfoSync().windowWidth/750) + uni.getSystemInfoSync().statusBarHeight}
		},
		onLoad(params) {
			const timestamp = Date.now();
			this.accessTime = this.timestampToTime(timestamp);
			
		},
		methods:{
			// 
			xztime(value){
				this.timeshow1 = false
				var that = this;
				let selectTime =this.timestampToTime(value.value);
				that.accessTime = selectTime;
			},
			qxtime(){
				this.timeshow1 = false
			},
			timeclose(){
				this.timeshow1 = false
			},
			timestampToTime(timestamp) {
			    timestamp = timestamp ? timestamp : null;
			    let date = new Date(timestamp);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
			    let Y = date.getFullYear() + '-';
			    let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
			    let D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
			    let h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
			    let m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
			    let s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
			    return Y + M + D + h + m + s;
			},
			funeralresult(){
				this.from.accessLocation = this.area
				this.from.accessTime = this.accessTime
				// this.info.obituaryType = "网上报丧"
				if(uni.getStorageSync('dh') == 2){
					this.from.obituaryType = "电话报丧"
				}else{
					this.from.obituaryType = "网上报丧"
				}
				this.from.remarks = this.remarks
				this.from.userId = uni.getStorageSync("USERS_KEY").userId
				// console.log(this.from);
				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 == '请选择' || this.area != '请输入详细地址' || this.accessTime != "请选择" || this.remarks != ''){
					uni.showToast({
						icon:"error",
						title:"请填写完整必填信息"
					})
				}else{
					// console.log(1123);
					this.API.tjwsyy(this.info).then(res=>{
						console.log("网上报丧",res);
					})
					uni.navigateTo({
						url: '/pages/funeralresult/funeralresult',
					})
				}
			},
			// 地区选择确认回调
			areaconfirm(e){
				this.areashow = false
				this.area = e.value[0];
			},
			areaclose(){
				this.areashow = false
			},
			timeclose(){
				this.timeshow = false
			},
			// 
			// 上传图片
			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(){
				// this.from.deceasedSex = this.sex
				var info = JSON.stringify(this.from)
				console.log("提交的数据",this.from,this.sex);
				// 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]
				this.from.deceasedSex = 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
			},
			// 死亡原因确认
			swyyconfirm(e){
				console.log("e",e);
				this.from.deathCase = e.value[0]
				this.swyyshow = false
			},
			// 死亡原因取消
			swyyclose(){
				this.swyyshow = false
			}
			
		}
	}
</script>

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