<template>
	<view class="maincontent contentBg">
		<view class='btnAdd' @click="showEdit(null,null)">添加</view>
		<view class="clear"></view>
		<view v-for="item,index in list" v-if="item" class="item">
			<view class="itemTitle">紧急联系人{{index+1}}</view>
			<view class="center main">
				<view class="phone">{{item}}</view>
				<view class="btns">
					<view class="btnEdit" @click.stop="showEdit(item,index)">修改</view>
					<view class="btnDrop" @click.stop="dropPerson(item,index)">删除</view>
				</view>

			</view>
			<view class="line" v-if="index%2==0"></view>
		</view>

		<mescroll-empty v-show="calcList.length==0" :option="Status.optEmpty"></mescroll-empty>

		<!-- 编辑弹窗 -->
		<MsgBox ref="editPop">
			<view>
				编辑紧急联系人
			</view>
			<view class="w60">

				<input type="text" placeholder="输入手机号" class="uni-input" v-model="cEdit.txt" />
			</view>

		</MsgBox>


		<MsgBox ref="msgPop" />
		<global-loading ref="loading" />
	</view>
</template>

<script>
	import request from '@/utils/request.js';
	import {
		showLoading,
		hideLoading,
		updateLoading
	} from '@/utils/loading.js';

	import {
		MsgSuccess,
		MsgError,
		MsgClose,
		MsgWarning,
		showPop,
		MsgInfo,
		MsgPrompt
	} from '@/utils/MsgPops.js'
	import Common from '@/utils/Common.js';
	import api from '@/api/670/HBY670.js';
	
	var these = null;
	var eventChannel = null;
	import {deviceInfo} from '@/api/common/index.js'
	export default {
		data() {
			return {
				list: ['', ''],
				cEdit: {
					txt: '',
					index: -1
				},
				Status: {
					optEmpty: {
						tip: '暂无数据',
						icon: '/static/images/common/empty.png'
					}
				},
				device: {
					id: "",
					deviceName: "",
					deviceImei: "",
					deviceMac: "",
					communicationMode: 0,
					devicePic: "",
					typeName: "",
					bluetoothName: null,
					deviceStatus: null,
					bindingTime: "",
					onlineStatus: 0,
					battery: "0",
					latitude: null,
					longitude: null,
					alarmStatus: null,
					detailPageUrl: "/pages/650/HBY650",
					showConfirm: false,
					contact1Phone:null,
					contact2Phone:null
				}
			}
		},
		computed: {
			calcList() {
				let f = this.list.filter((v, i) => {
					return v;
				});

				return f;
			}

		},

		onUnload() {



		},
		onShow() {

		},
		onHide: function() {

		},

		onLoad() {

			these = this;


			eventChannel = this.getOpenerEventChannel();

			eventChannel.on('device', (data) => {

				console.log("收到父页面的参数：" + JSON.stringify(data));
				these.device = data;

				
				this.init();
			});


		},
		methods: {
			init(){
				api.getDetail(this.device.id).then(res => {
				
					if (res && res.code == 200) {
						let data = res.data;
						if(data.length){
							data=data[0];
						}
						let keys = Object.keys(data);
						let dKeys = Object.keys(this.device);
						for (let i = 0; i < keys.length; i++) {
							let key = keys[i];
				
							let dk = dKeys.find(k => {
								return key.toLowerCase() == k.toLowerCase();
							});
							if (dk) {
								this.$set(this.device, dk, data[key]);
							} else {
								this.$set(this.device, key, data[key]);
							}
						}
						
						this.list[0] = data.contact1Phone;
						this.list[1] = data.contact2Phone;
					}
				});
			},
			notifyPrevPage(){//通知上一个页面
				if (eventChannel) {
					eventChannel.emit('linkManOver', this.list);
				}
			},
			saveData(json) {
				return request({
					url: "/app/hby018a/device/SetContactPhone",
					method: 'POST',
					data:json
				});
			},
			dropPerson(item, index) {
				showPop({
					iconUrl: '/static/images/common/dell.png',
					borderColor: "#e034344d",
					buttonBgColor: "#E03434",
					bgColor: '#383934cc',
					buttonTextColor: '#FFFFFFde',
					message: "确定删除紧急联系人" + (index + 1),
					buttonText: '确定',
					showSlot: false,
					showCancel: true,
					buttonCancelText: '取消',
					okCallback: () => {

						let url = '/app/hby018a/device/SetContactPhone';

						if (!url) {
							this.$set(this.list,index,"");
							return;
						}
						let json = {
							deviceId: this.device.id,
							contact1Phone:index == 0 ? "" : this.list[0],
							contact2Phone: index == 0 ? this.list[1] : ""
						};
						showLoading(these,{text:'请稍候...'});
						this.saveData(json).then(res => {
							if (res && res.code == 200) {
								
								this.$set(this.list,index,"");
								this.notifyPrevPage();
								return;
							}
							MsgError(res.msg, '', these);
						}).catch(ex => {
							MsgError(ex.msg, '', these);
						}).finally(() => {
							hideLoading(these)
						});



					}
				}, these, false);

			},
			showEdit(item, index) {
				if (!item && this.calcList.length >= 2) {
					MsgError('紧急联系人数量达到上限', '', these);
					return;
				}
				if (item) {
					this.cEdit.txt = item;
					this.cEdit.index = index;
				} else {
					this.cEdit.index = this.calcList.length;
				}
				MsgPrompt(these, 'editPop', () => {
					if (this.cEdit.txt.replace(/ /g, '') == '') {
						MsgError('请输入联系人号码', '', these);
						return true;
					}
					let reg = /^1\d{10}$/;
					if (!reg.test(this.cEdit.txt)) {
						MsgError('手机号格式不正确', '', these);
						return true;
					}

					if (item) {
						let f = this.list.find((v, i) => {
							if (i == index) {
								return false;
							}
							if (v == this.cEdit.txt) {
								return true;
							}
							return false;
						});
						if (f) {
							MsgError('已设置了相同的手机号', '', these);
							return true;
						}
					}

					let requestCall = () => {

						this.$set(this.list, this.cEdit.index, this.cEdit.txt)					
						this.cEdit.txt = "";
						this.cEdit.index = -1;
					}

					let url = '/app/hby018a/device/SetContactPhone';

					if (!url) {
						requestCall();
						return;
					}
					let json = {
						deviceId: this.device.id,
						contact1Phone: this.cEdit.index == 0 ? this.cEdit.txt : this.list[0],
						contact2Phone: this.cEdit.index == 0 ? this.list[1] : this.cEdit.txt
					};
					showLoading(these,{text:'请稍候...'});
					this.saveData(json).then(res => {
						if (res && res.code == 200) {
							requestCall();
							this.notifyPrevPage();
							return;
						}
						MsgError(res.msg, '', these);
					}).catch(ex => {
						MsgError(ex.msg, '', these);
					}).finally(() => {
						hideLoading(these)
					});

				}, false);
			}

		}

	}
</script>

<style>
	.item .main {
		margin-top: 10rpx;
	}

	.line {
		width: 100%;
		height: 0rpx;
		border-bottom: 1px solid rgba(255, 255, 255, 0.06);
		margin: 30rpx 0rpx 20rpx 0rpx;
	}


	.phone {
		border-radius: 8px;
		background: rgba(26, 26, 26, 1);
		width: calc(100% - 160rpx);
		height: 80rpx;
		line-height: 80rpx;
		text-indent: 20rpx;
	}

	.btns .btnEdit {
		color: rgba(255, 255, 255, 0.87);
		margin-right: 20rpx;
	}

	.btns .btnDrop {
		color: rgba(224, 52, 52, 1);
	}

	.btns {
		width: 160rpx;
		height: 80rpx;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-content: center;
		align-items: center;
		justify-content: flex-end;
		font-family: "PingFang SC";
		font-style: Regular;
		font-size: 28rpx;
		font-weight: 400;

		letter-spacing: 0.07px;
		text-align: left;

	}

	.itemTitle {
		color: rgba(255, 255, 255, 0.87);

		font-family: "PingFang SC";
		font-style: Regular;
		font-size: 28rpx;
		font-weight: 400;
		line-height: 40rpx;
		height: 40rpx;
		letter-spacing: 0.07px;
		text-align: left;
	}

	.w60 {
		width: 70%;
		margin-left: 15%;
	}

	.uni-input {
		margin: 30rpx 0rpx 0rpx 0rpx;
		background-color: #121212;
		width: 100%;
		height: 60rpx;
		color: #ffffffde;
		border: 1rpx solid #BBE600de;
		border-radius: 8rpx;
		font-size: 26rpx;
		text-indent: 8rpx;
		font-family: "PingFang SC";
		line-height: 60rpx;
		caret-color: #BBE600;
		font-weight: 200;
		text-align: left;
		text-indent: 10rpx;
	}

	.btnAdd {
		float: right;
		color: rgba(255, 255, 255, 0.87);
		font-family: "PingFang SC";
		font-style: Regular;
		font-size: 28rpx;
		font-weight: 400;
		line-height: 40rpx;
		height: 40rpx;
		letter-spacing: 0.07px;
		text-align: left;
	}

	.content {
		padding: 30rpx;
		width: 100%;
		min-height: 100vh;
		height: auto;
	}


	.navbarRight .img {
		width: 35rpx;
		height: 35rpx;
		margin-right: 20rpx;
	}

	.uni-navbar--fixed {
		top: 0rpx;
	}

	/deep/ .uni-navbar--fixed {
		top: 0px;
	}

	/deep/ .uni-navbar__placeholder {
		display: none !important;
	}
</style>