<template>
	<view>
		<view v-if="!situationAdd">
			<view v-if="viewer_list.length == 0" class="no_content">
				<image class="img" src="/static/images/ui/none.png" />
				<view class="warn">您目前还没有添加任何观演人</view>
			</view>
			<block v-else>
				<view class="_container" v-if="0 !== viewer_list.length" v-for="(item, index) in viewer_list"
					:key="index">
					<view class="_left">
						<view class="_l">姓名</view>
						<view>身份证</view>
					</view>

					<view class="_middle">
						<view class="_l">{{ item.name }}</view>
						<view>{{ item.id_card }}</view>
					</view>

					<image class="_right" src="/static/images/ui/delete.png" :data-viewer_id="item.viewer_id"
						@tap="_delete" />
				</view>
			</block>
		</view>

		<view class="input_area" v-else-if="situationAdd">
			<view class="input" style="margin-bottom: 20rpx">
				<view class="label">姓名</view>
				<input :value="name" type="text" placeholder="请输入观演人姓名" @input="handleInput1" />
			</view>
			<view class="input">
				<view class="label">身份证</view>
				<input :value="id_card" type="number" placeholder="请输入观演人身份证" @input="handleInput2" />
			</view>
		</view>

		<button class="_button" v-if="!situationAdd" @tap="swith">添加观演人</button>
		<button class="_button" v-else-if="situationAdd" @tap="save">保存观演人</button>
	</view>
</template>

<script>
	// pages/user/identity_list/identity_list.js
	import {
		http,
		login_check
	} from '../../../utils/util';
	export default {
		data() {
			return {
				situationAdd: false,
				name: null,
				id_card: null,
				name_waring_text: null,
				id_waring_text: null,
				navBack: 0,

				viewer_list: {
					length: 0
				}
			};
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			uni.$on('initData',() => {
					this.onLoadClone3389(options);
				})
			this.onLoadClone3389(options);
		},
		/**
		 * 生命周期函数--监听页面初次渲染完成
		 */
		onReady: function() {},
		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {},
		/**
		 * 生命周期函数--监听页面隐藏
		 */
		onHide: function() {},
		/**
		 * 生命周期函数--监听页面卸载
		 */
		onUnload: function() {},
		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh: function() {},
		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function() {},
		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage: function() {},
		methods: {
			/**
			 * 生命周期函数--监听页面加载
			 */
			onLoadClone3389: function(options) {
				/*     跳转来自下单页面 */
				if (options.situationAdd == 1) {
					this.setData({
						situationAdd: true,
						navBack: 1
					});
				} else {
					if (login_check(1)) {
						http('/api/v1/viewer-list', 'get').then((res) => {
							this.setData({
								viewer_list: res.viewer_list
							});
						});
					}
				}
			},

			swith() {
				this.setData({
					situationAdd: !this.situationAdd
				});
			},

			_delete(e) {
				var that = this;
				uni.showModal({
					content: '是否删除这条信息',

					success(res) {
						if (res.confirm) {
							http('/api/v1/delete-viewer', 'post', {
								viewer_id: e.currentTarget.dataset.viewer_id
							}).then((res) => {
								uni.showToast({
									title: '删除成功！',
									icon: 'none',
									duration: 2000,

									success(res) {
										that.onLoadClone3389({
											situationAdd: 0
										}, {});
									}
								});
							});
						}
					}
				});
			},

			handleInput1(event) {
				this.setData({
					name: event.detail.value
				});
			},

			handleInput2(event) {
				const value = event.detail.value;
				this.setData({
					id_card: value
				});
			},

			save() {
				var that = this;
				let name = this.name;
				let id_card = this.id_card;

				if (name && id_card) {
					Promise.all([this.check_name(name), this.check_id_code(id_card)]).then((res) => {
						let allow_name = res[0].allow_name;
						let name_waring_text = res[0].name_waring_text;
						let allow_id = res[1].allow_id;
						let id_waring_text = res[1].id_waring_text;

						if (allow_name && allow_id) {
							http('/api/v1/add-viewer', 'post', {
								name,
								id_card
							}).then((res1) => {
								uni.showToast({
									title: '添加成功！',
									icon: 'none',
									duration: 2000,

									success(res) {
										if (that.navBack == 1) {
											uni.navigateBack();
											var pages = getCurrentPages(); //获取页面栈
											
											if (pages.length > 1) {
												//上一个页面实例对象
												var prePage = pages[pages.length -2]
												// #ifdef MP-BAIDU
												prePage.data.more_viewer_info = res1.viewer_info
												// #endif
												prePage.onLoad({
													tid: prePage.data.tid
												});
											}
										} else {
											that.onLoadClone3389({
												situationAdd: 0
											}, {});
											that.setData({
												situationAdd: !that.situationAdd,
												name: null,
												id_card: null
											});
										}
									}
								});
							});
						} else {
							if (name_waring_text != null) {
								uni.showToast({
									title: name_waring_text,
									icon: 'none',
									duration: 500
								});
								return;
							}

							if (id_waring_text != null) {
								uni.showToast({
									title: id_waring_text,
									icon: 'none',
									duration: 500
								});
								return;
							}
						}

						this.setData({
							name_waring_text,
							id_waring_text
						});
					});
				} else {
					uni.showToast({
						title: '请完善信息！',
						icon: 'none',
						duration: 500
					});
				}
			},

			check_name: function(name) {
				return new Promise((resolve, reject) => {
					var ts = this;
					var reg = /^[\u4E00-\u9FA5\uf900-\ufa2d·s]{2,6}$/;

					if (name.match(reg)) {
						resolve({
							allow_name: true,
							name_waring_text: null
						});
					} else {
						resolve({
							allow_name: false,
							name_waring_text: '请填写真实姓名'
						});
					}
				});
			},

			check_id_code: function(code) {
				return new Promise((resolve, reject) => {
					var ts = this; //身份证号合法性验证
					//支持15位和18位身份证号
					//支持地址编码、出生日期、校验位验证

					var city = {
						11: '北京',
						12: '天津',
						13: '河北',
						14: '山西',
						15: '内蒙古',
						21: '辽宁',
						22: '吉林',
						23: '黑龙江 ',
						31: '上海',
						32: '江苏',
						33: '浙江',
						34: '安徽',
						35: '福建',
						36: '江西',
						37: '山东',
						41: '河南',
						42: '湖北 ',
						43: '湖南',
						44: '广东',
						45: '广西',
						46: '海南',
						50: '重庆',
						51: '四川',
						52: '贵州',
						53: '云南',
						54: '西藏 ',
						61: '陕西',
						62: '甘肃',
						63: '青海',
						64: '宁夏',
						65: '新疆',
						71: '台湾',
						81: '香港',
						82: '澳门',
						91: '国外 '
					};
					var tip = '';
					var pass = true;
					var reg = /^\d{6}(18|19|20)?\d{2}(0[1-9]|1[012])(0[1-9]|[12]\d|3[01])\d{3}(\d|X)$/;

					if (!code || !code.match(reg)) {
						tip = '身份证号格式错误';
						pass = false;
					} else {
						if (!city[code.substr(0, 2)]) {
							tip = '地址编码错误';
							pass = false;
						} else {
							//18位身份证需要验证最后一位校验位
							if (code.length == 18) {
								code = code.split(''); //∑(ai×Wi)(mod 11)
								//加权因子

								var factor = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2]; //校验位

								var parity = [1, 0, 'X', 9, 8, 7, 6, 5, 4, 3, 2];
								var sum = 0;
								var ai = 0;
								var wi = 0;

								for (var i = 0; i < 17; i++) {
									ai = code[i];
									wi = factor[i];
									sum += ai * wi;
								}

								var last = parity[sum % 11];

								if (parity[sum % 11] != code[17]) {
									tip = '校验位错误';
									pass = false;
								}
							}
						}
					}

					if (pass) {
						resolve({
							allow_id: true,
							id_waring_text: null
						});
					}

					if (!pass) {
						resolve({
							allow_id: false,
							id_waring_text: tip
						});
					}
				});
			}
		},
	};
</script>
<style>
	._container {
		margin: 20rpx 30rpx;
		padding: 40rpx;
		background-color: #fff;
		display: flex;
		align-items: center;
		flex-direction: row;
		font-size: 28rpx;
	}

	._l {
		margin-bottom: 30rpx;
	}

	._left {
		width: 20%;
	}

	._middle {
		flex: 1;
	}

	._container ._right {
		width: 32rpx;
		height: 32rpx;
	}

	.input_area {
		background-color: #fff;
		margin: 20rpx 30rpx;
		padding: 40rpx;
		font-size: 28rpx;
	}

	.input_area .input {
		display: flex;
		align-items: center;
		width: 100%;
	}

	.input_area .input .label {
		width: 140rpx;
	}

	._button {
		position: fixed;
		bottom: 100rpx;
		width: 312rpx;
		background: linear-gradient(90deg, #ff4284 0%, #ff1d42 100%);
		border-radius: 44rpx;
		color: #fff;
		font-size: 28rpx;
		left: 50%;
		transform: translate(-50%, 0);
	}
</style>
