<template>
	<view class="add">
		<view class="edit_ads">
			<view class="nav">
				<textarea v-model="message" type="text" :placeholder="placeholder" class="discern"
					placeholder-class="discern-placeholder" />
				<view class="flex">
					<view class="nav-clearbutton flexC" @click="message = ''">清空</view>
					<view class="nav-button flexC" @click="text">识别</view>
				</view>
			</view>
			<view class="box">
				<view class="box-top flexS">
					<view class="title">
						<text>客户昵称</text>
						<text class="star">*</text>
					</view>
					<input v-model="params.nickname" type="text" class="box-input" placeholder-class="input_placeholder"
						placeholder="请填写真实姓名" />
				</view>
				<view class="box-top">
					<navigator url="../phone-area/phone-area" class="phone-area flexB">
						<view class="flexS">
							<view class="title">
								<text class="text" style="color:#333">国家/地区</text>
								<text class="star">*</text>
							</view>
							<text class="area">{{areaName}}（{{params.code}}）</text>
						</view>
						<text class="store_icon iconjiantou3"></text>
					</navigator>
				</view>
				<view class="box-top">
					<view class="title">
						<text>手机号</text>
						<text class="star">*</text>
					</view>
					<input v-model="params.phone" type="number" class="box-input" placeholder-class="input_placeholder"
						placeholder="请填写手机号码" maxlength="11" />
				</view>
				<view class="box-top">
					<view class="title">
						<text>省市区</text>
						<text class="star">*</text>
					</view>
					<view class="picker flexB" @tap="choosePicker">
						<view :style="{ color: params.local ? '#333' : '#808080' }" style="font-size:30rpx;">
							{{ params.local ? params.local : '请选择所在地区' }}
						</view>
						<text class="iconfont iconzhcc_xiangxiajiantou"></text>
					</view>
				</view>
				<w-picker ref="Selector" mode="region" themeColor="#F76454" @confirm="onConfirm" />
				<view class="box-bottom">
					<view class="title">
						<text style="font-size:34rpx;font-weight:bold;">详细地址</text>
						<text class="star">*</text>
					</view>
					<view class="textbox">
						<textarea v-model="params.address" type="text" placeholder="请填写详细地址" class="box-input"
							placeholder-class="input_placeholder" />
					</view>
				</view>
				<view class="box-changyong flexB">
					<view class="title">设置为常用地址</view>
					<view class="flexS default_btn">
						<view @click="editDefault(0)" class="set-control"
							:class="params.is_default == 0 ? 'active' : 'set-used'">否</view>
						<view @click="editDefault(1)" class="set-control"
							:class="params.is_default == 1 ? 'active' : 'set-used'" style="margin-left:20rpx;">是</view>
					</view>
				</view>
				<view class="box-vip">
					<view class="label">
						<text>该客户是VIP吗？</text>
						<text class="star">*</text>
					</view>
					<view class="flexA change_box">
						<view @click="changeVip(1)" :class="params.is_vip == 1 ? 'active' : ''">是</view>
						<view @click="changeVip(0)" :class="params.is_vip == 0 ? 'active' : ''">不是</view>
					</view>
				</view>
			</view>
			<view class="remind">若定位或自动识别的信息不准确，请手动修改</view>
			<view class="fixed_btn_box flexC">
				<view @click="addUser" class="flexC">确认添加</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		addUser,
		discernAdress
	} from '@/apis/shop.js';
	import WPicker from '../../components/w-picker/w-picker.vue';
	import cityPicker from '../../components/citypicker/city-picker.vue';
	import AddressParse from 'address-parse';
	import areaList from '@/common/util/phone-area.js'
	export default {
		data() {
			return {
				message: '', //输入的要识别的地址
				placeholder: '请粘贴或输入整段地址，点击“识别”自动拆分姓名、电话和地址。例如：张三，15100001111，河南省郑州市金水区某路和某路交叉口某小区某号楼',
				pickerDefaultVal: ['河南省', '郑州市', '金水区'],
				params: {
					nickname: '', //客户昵称
					phone: '', //手机号
					local: '', //省市区
					province: '', //省
					city: '', //市
					area: '', //区
					address: '', // 详细地址
					is_default: 0, //是否默认
					code: '+86', // 手机号地区代码
					is_vip: 0, //是否是vip
				},
				isChecked: false,
				notVip: true,
				areaName: '中国大陆', // 手机号地区名称
				isMatch: /^[1][3-9]\d{9}$/, //手机号验证
				// userPhone: '', //新添加的用户手机号
				// userName: '', // 新添加的用户昵称（选填）
				// isChecked: false,
				// notVip: true,
				// is_vip: 0,
				// areaName: '中国大陆', // 手机号地区名称
				// areaCode: '+86', // 手机号地区代码
			};
		},
		created() {
			uni.$on('CHOOSEPHONECODE', (name, code, reg, phoneReg) => {
				// 监听 chooseArea 事件更新
				this.areaName = name; // 修改选择的手机号地区名称
				this.params.code = code // 修改选择的手机号地区代码
				this.isMatch = phoneReg
			});
		},
		onLoad() {
			// uni.getClipboardData({
			// 	success: res => {
			// 		uni.hideToast()
			// 		let phone = res.data;
			// 		let reg = /^[0-9]*$/g; //纯数字
			// 		let reg1 = /^[\d\s]+$/g; //数字加空格
			// 		if (reg.test(phone) || reg1.test(phone)) {
			// 			this.userPhone = phone.replace(/\s*/g, ''); //去掉空格
			// 		} else {
			// 			this.userPhone = ''
			// 		}
			// 	}
			// })
		},
		components: {
			WPicker,
			cityPicker
		},
		methods: {
			// 识别地址手机号验证
			checkCode(type, arr) {
				let t = '886'
				let a = '853'
				let x = '852'
				let msg = this.message.replace(/\s*/g, "")
				let index = ''
				let mobile = ''
				let code = ''
				if (msg.indexOf(t) != -1) {
					index = msg.indexOf(t)
					mobile = msg.substring(index + 3, index + 13)
					code = `+${t}`
					this.areaName = '中国台湾'
					this.isMatch = /^[0]{1}[9]{1}\d{8}$/
				} else if (msg.indexOf(a) != -1) {
					index = msg.indexOf(a)
					mobile = msg.substring(index + 3, index + 11)
					code = `+${a}`
					this.areaName = '中国澳门'
					this.isMatch = /^[6]\d{7}$/
				} else if (msg.indexOf(x) != -1) {
					index = msg.indexOf(x)
					mobile = msg.substring(index + 3, index + 11)
					code = `+${x}`
					this.areaName = '中国香港'
					this.isMatch = /^([6|9|5])\d{7}$/
				} else {
					code = '+86'
					this.areaName = '中国大陆'
					mobile = arr.mobile
					this.isMatch = /^[1][3-9]\d{9}$/
				}
				this.params = {
					nickname: arr.name.replace(/[0-9]/g, ''),
					code,
					phone: mobile,
					local: type === 0 ? `${arr.province}-${arr.city}-${arr.area}` : `${arr.province}-${arr.city}`,
					province: arr.province,
					city: arr.city,
					area: arr.area,
					address: arr.details,
					is_default: 0,
					remark: '',
					is_vip: 0, //是否是vip
				};
			},
			//识别地址
			text() {
				if (this.message.length < 1) {
					uni.toast('请输入需要识别的内容');
					return;
				}
				this.result = AddressParse.parse(this.message);
				let arr = AddressParse.parse(this.message)[0];
				if (arr.mobile === '') {
					this.checkCode(0, arr)
				} else if (arr.area === '') {
					const params = {
						city: arr.city,
						details: arr.details
					};
					this.checkCode(1, arr)
					discernAdress(params).then(res => {
						if (res.code === 200) {
							if (!res.data.area) {
								uni.showToast({
									title: '有部分信息未能识别或错误，请核实或手动填写',
									icon: 'none'
								})
								return
							}
							this.params.area = res.data.area
							this.params.local = `${arr.province}-${arr.city}-${res.data.area}`
							// this.params = {
							// 	nickname: arr.name,
							// 	phone: arr.mobile,
							// 	local: `${arr.province}-${arr.city}-${res.data.area}`,
							// 	province: arr.province,
							// 	city: arr.city,
							// 	area: res.data.area,
							// 	address: arr.details,
							// 	is_default: 0,
							// 	is_vip: 0, //是否是vip
							// };
						} else {
							uni.showToast({
								title: '识别失败，请手动填写',
								icon: 'none'
							})
						}
					});
				} else {
					this.params = {
						nickname: arr.name,
						phone: arr.mobile,
						local: `${arr.province}-${arr.city}-${arr.area}`,
						province: arr.province,
						city: arr.city,
						area: arr.area,
						address: arr.details,
						is_default: 0,
						code: '+86',
						is_vip: 0, //是否是vip
					};
				}
			},
			//编辑或添加时设置默认地址
			editDefault(type) {
				this.params.is_default = type;
			},
			choosePicker() {
				// 显示地址选择器
				this.$refs.Selector.show();
			},
			onConfirm(e) {
				// 选择地址选择器
				this.params.local = `${e.checkArr[0]}-${e.checkArr[1]}-${e.checkArr[2]}`;
				this.pickerDefaultVal = [e.checkArr[0], e.checkArr[1], e.checkArr[2]];
				this.params.province = e.checkArr[0];
				this.params.city = e.checkArr[1];
				this.params.area = e.checkArr[2];
			},
			changeVip(type) {
				this.params.is_vip = type;
			},
			//添加新用户
			addUser() {
				if (!this.params.nickname) {
					uni.showModal({
						content: '请先输入客户昵称',
						showCancel: false
					});
					return false;
				}
				if (!this.params.phone) {
					uni.showModal({
						content: '请先输入手机号',
						showCancel: false
					});
					return false;
				}
				if (this.isMatch && !this.params.phone.match(this.isMatch)) {
					uni.showToast({
						title: '手机号所属与区号不一致',
						icon: 'none',
						mask: true
					});
					return
				}
				if (!this.params.local.trim().length) {
					// 校验是否选择地区
					uni.showToast({
						title: '请选择所在地区',
						icon: 'none',
						mask: true
					});
					return;
				}
				if (!this.params.area) {
					uni.showToast({
						title: '区域不能为空',
						icon: 'none',
						mask: true
					});
					return;
				}
				if (!this.params.address) {
					// 校验是否填写详细地址
					uni.showToast({
						title: '详细地址不能为空',
						icon: 'none',
						mask: true
					});
					return;
				}
				uni.showLoading({
					title: '提交中...'
				})
				addUser(this.params).then(res => {
					if (res.code == 200) {
						let id = res.data.id;
						uni.showModal({
							content: '添加客户成功',
							showCancel: false,
							success: res => {
								if (res.confirm) {
									uni.reLaunch({
										url: '../../../pages/replace-manage/replace-manage?user_id=' +
											id
									});
								}
							}
						});
					} else {
						uni.showModal({
							content: res.data || '添加失败',
							showCancel: false
						});
					}
					uni.hideLoading()
				}).catch(() => {
					uni.hideLoading()
				})
			}
		}
	};
</script>

<style lang="scss" scoped>
	.add {
		width: 100%;
		height: 100%;
		background: #f5f5f5;
		padding: 30rpx 0 150rpx;
	}

	.edit_ads {
		width: 690rpx;
		margin: 0 auto;
		box-sizing: border-box;

		.nav {
			padding: 26rpx 20rpx 30rpx 30rpx;
			background-color: #fff;
			border-radius: 24rpx;
			display: flex;
			flex-direction: column;
			align-items: flex-end;

			.discern {
				width: 100%;
				height: 180rpx;
				font-size: 28rpx;

				&-placeholder {
					color: #c8c8c8;
					font-size: 28rpx;
					line-height: 44rpx;
				}
			}

			.flex {
				display: flex;

				view {
					width: 128rpx;
					height: 64rpx;
					font-size: 28rpx;
					border-radius: 32rpx;
				}
			}

			&-button {
				color: #ffffff;
				background: linear-gradient(90deg, #ff232c 0%, #ff571b 100%);
			}

			&-clearbutton {
				background: #fff4f3;
				border: 2rpx solid $base-color;
				color: $base-color;
				margin-right: 15rpx;
			}
		}

		.box {
			margin: 30rpx 0;
			background-color: #fff;
			border-radius: 24rpx;

			.phone-area {
				width: 100%;

				.text {
					font-size: 34rpx;
				}

				.area {
					color: #42b983;
					margin-left: 16rpx;
				}

				.store_icon {
					font-size: 35rpx;
					color: #999;
				}

			}

			&-input {
				font-size: 30rpx;
				min-height: 126rpx;
				width: 75%;
				margin-left: 20rpx;
			}

			&-top {
				min-height: 128rpx;
				padding: 0 30rpx;
				box-sizing: border-box;
				border-bottom: 2rpx solid #eeeeee;
				display: flex;
				justify-content: flex-start;
				align-items: center;

				.title {
					flex-shrink: 0;

					text {
						font-size: 34rpx;
						font-weight: bold;
					}


					.star {
						color: $base-color;
						margin-left: 10rpx;
						font-size: 40rpx;
					}
				}

				.picker {
					width: 75%;
					min-height: 128rpx;
					margin-left: 20rpx;
					font-size: 30rpx;

					.iconfont {
						color: #cbcbcb;
					}
				}

				.input_placeholder {
					font-size: 30rpx;
					color: #cbcbcb;
				}
			}

			&-bottom {
				height: 166rpx;
				padding: 20rpx 30rpx;
				box-sizing: border-box;
				border-bottom: 2rpx solid #eeeeee;
				display: flex;
				justify-content: flex-start;
				align-items: flex-start;

				.title {
					font-size: 34rpx;
					font-weight: bold;

					.star {
						color: $base-color;
						margin-left: 10rpx;
						font-size: 40rpx;
					}
				}

				.input_placeholder {
					font-size: 30rpx;
					color: #cbcbcb;
				}

				.textbox {
					height: 166rpx;

					.box-input {
						width: 440rpx;
						height: 120rpx;
						font-size: 30rpx;
					}
				}
			}

			&-changyong {
				height: 110rpx;
				padding: 26rpx 20rpx 30rpx 30rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 2rpx solid #eeeeee;

				.title {
					font-size: 28rpx;
					font-weight: 400;
					line-height: 29rpx;
					color: #585858;
				}

				.input_placeholder {
					font-size: 28rpx;
					font-weight: 400;
					line-height: 29rpx;
				}

				.set-used {
					margin-right: auto;
					color: $base-color;
					font-size: 30rpx;
				}

				.set-control {
					width: 110rpx;
					height: 55rpx;
					line-height: 55rpx;
					border-radius: 50rpx;
					text-align: center;
					background: #f8f8f8;
					color: #333333;
					font-size: 30rpx;

					&:nth-last-of-type(1) {
						margin-left: 20rpx;
					}

					&.active {
						background: linear-gradient(to right, #F30000, #FE4815) !important;
						color: #ffffff !important;
					}
				}
			}

			&-vip {
				padding: 0rpx 20rpx 40rpx 30rpx;

				.label {

					padding: 30rpx 0;

					text {
						font-size: 32rpx;
						font-weight: bold;
					}

					.star {
						font-size: 36rpx;
						color: $base-color;
						margin-left: 10rpx;
					}

					.hint {
						color: #999;
					}
				}


				.change_box {
					flex: 1;
					margin-top: 20rpx;

					view {
						width: 292rpx;
						height: 88rpx;
						font-size: 32rpx;
						border: 2rpx solid #707070;
						border-radius: 42rpx;
						line-height: 88rpx;
						text-align: center;
					}

					.active {
						background: $base-line-bg;
						border: none;
						color: #fff;
					}
				}

			}
		}

		.remind {
			text-align: center;
			color: #fb231f;
			font-size: 28rpx;
		}

		.fixed_btn_box {
			position: fixed;
			bottom: 0;
			left: 0;
			height: 100rpx;
			width: 100%;
			background: #fff;

			view {
				width: 690rpx;
				height: 88rpx;
				border-radius: 44px;
				color: #fff;
				font-size: 32rpx;
				font-weight: bold;
				letter-spacing: 6rpx;
				background-color: $base-color;
			}
		}
	}

	// .add {
	// 	width: 100%;
	// 	min-height: 100%;
	// 	background: #fff;
	// 	position: relative;

	// 	.add_user {
	// 		width: 690rpx;
	// 		margin: 0 auto;
	// 		padding-top: 30rpx;

	// 		.inp_box {
	// 			.label {
	// 				font-size: 32rpx;
	// 				font-weight: bold;
	// 				padding: 30rpx 0;

	// 				.star {
	// 					font-size: 36rpx;
	// 					color: $base-color;
	// 					margin-left: 10rpx;
	// 				}

	// 				.hint {
	// 					color: #999;
	// 				}
	// 			}

	// 			input {
	// 				width: 100%;
	// 				background: #f9f9fb;
	// 				height: 88rpx;
	// 				line-height: 88rpx;
	// 				padding-left: 15rpx;
	// 				border-radius: 8rpx;
	// 			}

	// 			.change_box {
	// 				flex: 1;
	// 				margin-top: 20rpx;

	// 				view {
	// 					width: 330rpx;
	// 					height: 72rpx;
	// 					font-size: 32rpx;
	// 					border: 2rpx solid #707070;
	// 					border-radius: 42rpx;
	// 					line-height: 72rpx;
	// 					text-align: center;
	// 				}

	// 				.active {
	// 					background: $base-line-bg;
	// 					border: none;
	// 					color: #fff;
	// 				}
	// 			}

	// 		}



	// 		.sub_btn_box {
	// 			width: 100%;
	// 			height: 100rpx;
	// 			background: #fff;
	// 			position: fixed;
	// 			bottom: 0;
	// 			left: 0;
	// 			border-top: 2rpx solid #eeeeee;

	// 			.sub_btn {
	// 				width: 690rpx;
	// 				height: 88rpx;
	// 			}
	// 		}
	// 	}
	// }
</style>
