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

		<div class="mui-content">
			<div class="mui-content-padded vongi-qingjiadt vongi-editme">
				<form class="mui-input-group">
					<div class="mui-input-row">
						<label>姓名<i class="colorfe616c">*</i></label>
						<input type="text" v-model="subForm.name" class="mui-input-clear" placeholder="请填写联系人姓名">
					</div>
					<div class="mui-input-row">
						<label>手机号码<i class="colorfe616c">*</i></label>
						<input type="number" v-model="subForm.phone" class="mui-input-clear" placeholder="请填写联系人手机号码">
					</div>
					<div class="mui-input-row">
						<label style="width:50%">设为紧急联系人</label>
						<div @click="subForm.urgentStatus=!subForm.urgentStatus" :class="'mui-switch '+(subForm.urgentStatus?'mui-active':'')">
							<div class="mui-switch-handle"></div>
						</div>
					</div>
				</form>
			</div>
			<div class="vongi-btn vongi-login-btn">
				<button class="mui-btn mui-btn-pink" @click="save">保 存</button>
				<button v-show="actionType=='edit'" @click="del" class="mui-btn mui-btn-danger mui-btn-outlined">删除联系人</button>
			</div>
		</div>

		<loading :visible="isLoading"></loading>
	</div>
</template>

<script>
	import * as API_Relatives from '@/apis/Master/relatives'
	import Common from '$project/components/Common.vue'
	import Loading from '$project/components/Loading.vue'
	import TopHeader from '$project/components/TopHeader.vue'
	import {
		mapGetters,
		mapMutations
	} from 'vuex'
	import {
		checkPhone,
	} from '$project/utils'
	export default {
		name: 'MasterRelativesPhoneSave',
		components: {
			Common,
			Loading,
			TopHeader,
		},
		data() {
			return {

				isLoading: false,

				subForm: {
					bookId: this.$route.query.bookId,
					name: '',
					phone: '',
					urgentStatus: false
				},

				//detail: {}
			}
		},
		created() {

		},
		methods: {
			//获取详情
			getInfo() {
				this.isLoading = true;
				API_Relatives.getPhoneNumberInfo(this.subForm.bookId).then(response => {
					this.isLoading = false;

					this.subForm.name = response.person.name;
					this.subForm.phone = response.person.phone;
					this.subForm.urgentStatus = response.person.urgentStatus;

				}).catch(error => {
					this.isLoading = false;
					mui.toast(error);
				})
			},
			//检测表单
			checkForm() {
				let phoneResult = checkPhone(this.subForm.phone);
				if (!this.subForm.name) {
					mui.toast('请输入姓名');
					return false;
				} else if (typeof phoneResult == 'string') {
					mui.toast(phoneResult);
					return false;
				} else {
					return true;
				}
			},
			//保存
			save() {
				if (this.checkForm()) {
					this.isLoading = true;
					API_Relatives.updatePhoneNumber(this.subForm).then(response => {
						this.isLoading = false;

						mui.toast('保存成功');
						this.$router.go(-1);

					}).catch(error => {
						this.isLoading = false;
						mui.toast(error);
					})
				}
			},
			//删除
			del() {
				var _this = this;
				var btnArray = ['取消', '确定'];
				mui.confirm('确定删除此联系人吗？', '删除联系人', btnArray, function(e) {
					if (e.index == 1) {
						_this.isLoading = true;
						API_Relatives.delPhoneNumber(_this.subForm.bookId).then(response => {
							_this.isLoading = false;

							mui.toast('处理成功');
							_this.$router.go(-1);

						}).catch(error => {
							_this.isLoading = false;
							mui.toast(error);
						})
					}
				});
			},
			asynCallBack() {},
		},
		mounted() {
			if (this.actionType == 'edit') {
				//获取详情
				this.getInfo();
			}
		},
		destroyed() {},
		computed: {
			pageTitle: {
				// getter
				get: function() {
					if (this.subForm.bookId) {
						return '编辑紧急联系人';
					} else {
						return '新增紧急联系人';
					}
				},
				// setter
				set: function(newValue) {
					console.log(newValue)
				}
			},
			actionType: {
				// getter
				get: function() {
					if (this.subForm.bookId) {
						return 'edit';
					} else {
						return 'add';
					}
				},
				// setter
				set: function(newValue) {
					console.log(newValue)
				}
			},
			...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>
</style>
