<template>
	<view>
		<view class="text-bold text-left margin-top margin-left" v-if="signUp"> 
			已成功报名，以下内容不可修改！
		</view>
		<form @submit="formSubmit" @reset="formReset">
			<view class="cu-form-group margin-top">
				<view class="title">姓名</view>
				<input class="text-right" :disabled="signUp" placeholder="请输入姓名" :value="form.name" name="input" @input="updateInputVal($event,'name')"></input>
			</view>
			<view class="cu-form-group margin-top">
				<view class="title">身份证</view>
				<input class="text-right" :disabled="signUp" placeholder="请输入身份证" type="idcard" :value="form.IDCard" name="input" @input="updateInputVal($event,'IDCard')"></input>
			</view>
			<view class="cu-form-group margin-top">
				<view class="title">手机号码</view>
				<input class="text-right" :disabled="signUp" placeholder="请输入手机号码" type="number" :value="form.cellphone" name="input" @input="updateInputVal($event,'cellphone')"></input>
			</view>
			<view class="cu-form-group margin-top">
				<view class="title">其它联系方式</view>
				<input class="text-right" :disabled="signUp" placeholder="请输入其它联系方式" type="number" :value="form.telephone" name="input" @input="updateInputVal($event,'telephone')"></input>
			</view>
			<view class="cu-form-group margin-top">
				<view class="title">家庭地址</view>
				<input class="text-right" :disabled="signUp" placeholder="请输入家庭地址" type="number" :value="form.address" name="input" @input="updateInputVal($event,'address')"></input>
			</view>

			<view class="cu-form-group margin-top" v-show="!signUpFlag">
				<view class="title">关系</view>
				<picker @change="updatePickerVal($event,'relation')"  range-key="label"  :disabled="signUp" :value="form.relation" :range="relationPicker">
					<view class="picker">
						{{form.relation>-1?relationPicker[form.relation].label:'请选择关系'}}
					</view>
				</picker>
			</view>

			<view class="padding" v-if="!signUp">
				<button form-type="submit" class="cu-btn block bg-blue margin-tb-sm lg">
					保存
				</button>
			</view>
		</form>
	</view>
</template>

<script>
	import validate from '@/utils/validate.js'
	import {
		getAge
	} from '@/utils/index.js'

	export default {
		data() {
			return {
				modalName: '',
				signUp:false,
				signUpFlag: false,
				addressPicker: ['街道1', '街道2', '街道3'],
				relationPicker: [],
				captchaFlag: false,
				id:'',
				form: {
					name: '',
					IDCard: '',
					cellphone: '',
					telephone: '',
					address: '',
					relation: -1,
				}
			}
		},

		onLoad(option) {
			this.relationPicker = this.$store.getters.familyRelation
			this.signUpFlag = option.type == 'self'
			if(option.id){
				this.id = option.id
				this.getInfo(option.id)
			}
			uni.setNavigationBarTitle({
				title: this.id ? '查看成员' : '添加成员'
			});
		},
		
		methods: {
			// 获取信息
			getInfo(id) {
				this.$http.get(`/gastric-cancer-data/report/selectReportBySampleId?id=${id}`).then(res => {
					const d = res.data
					if (d.code == 1) {
						this.form =  Object.assign(this.form,d.object.reportContent.data)    
						
						this.signUp = d.object.auditStatus == -3
						
						if(!this.signUpFlag){
							for (var i = 0; i < this.relationPicker.length; i++) {
								if(d.object.reportContent.data.relation == this.relationPicker[i].value){
									this.form.relation = i
								}
							}
						}
					}
				}).catch(err => {
					console.log(err)
				})
			},
			// 更新输入框绑定的表单内容
			updateInputVal(event, props) {
				this.form[props] = event.target.value
			},
			
			// 提交信息
			formSubmit(e) {
				let loginRules = [{
						name: 'name',
						required: true,
						errmsg: '请输入姓名'
					},
					{
						name: 'IDCard',
						required: true,
						type: 'idCard',
						errmsg: '请输入18位身份证号码'
					},
					{
						name: 'cellphone',
						required: true,
						type: 'phone',
						errmsg: '请输入正确的手机号码'
					}
				]
				let valLoginRes = validate.validate(this.form, loginRules)
				if (!valLoginRes.isOk) {
					uni.showToast({
						icon: 'none',
						title: valLoginRes.errmsg
					})
					return false
				} else if(!this.form.address){
					uni.showToast({
						icon: 'none',
						title: "请输入家庭住址"
					})
				}else if(this.form.relation < 0){
					uni.showToast({
						icon: 'none',
						title: "请选择关系"
					})
				}else{
					this.addMember()
				}
			},

			// 更新下拉框绑定的表单内容
			updatePickerVal(event, props) {
				this.form[props] = event.detail.value
			},

			// 添加成员
			addMember() {
				let obj = {
					"auditStatus": -5,
					"data":{
						"data": {
						},
					}
				}
				
				obj.data.data = Object.assign({},this.form)
				if(this.id){
					obj.id = this.id
				}
				obj.data.data.age = getAge(this.form.IDCard)+''
				obj.data.data.sex = parseInt(this.form.IDCard.substr(16, 1)) % 2 == 1 ?'a':'b'
				obj.data.data.birthday =  this.form.IDCard.substr(6, 4) + '-'+ this.form.IDCard.substr(10, 2) + '-'+ this.form.IDCard.substr(12, 2)
				obj.data.data.relation = this.relationPicker[this.form.relation].value
				this.$http.post(`/gastric-cancer-data/wechat/report`,obj).then(res => {
					const d = res.data
					if(d.code == 1){
						uni.showToast({
							title: '保存成功！'
						});
						setTimeout(function() {
							uni.navigateTo({
								url: '/person/memberManage/index'
							});
						}, 1500);
					}else{
						uni.showToast({
							icon: 'none',
							title: d.message
						});
						setTimeout(function() {
							uni.navigateTo({
								url: '/person/memberManage/index'
							});
						}, 1500);
					}
				}).catch(err => {
					console.log(err)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.cu-dialog {
		max-height: 100vh;
		height: 100vh;
		overflow-y: auto;
	}

	.green-word {}
</style>
