<template>
	<view>
		<view class="contactCardCss usuallyCard">
			<view class="text-lg margin-top">
				联系方式 <text class="text-gray">(必填)</text>
			</view>
			<u--form labelPosition="left" :model="model" :rules="rules" ref="uForm" errorType="toast">
				<view class="flex justify-between margin-top">
					<view class="w30">
						<u-form-item prop="fLxr" borderBottom ref="item1">
							<u-input v-model="model.fLxr" border="none" @input="setInput" placeholder="请输入姓名"></u-input>
						</u-form-item>
					</view>
					<view class="60">
						<u-form-item prop="fLxrdh" borderBottom ref="item1">
							<u-input type="number" maxlength="11" v-model="model.fLxrdh" border="none" @input="setInput"
								placeholder="请输入联系方式"></u-input>
						</u-form-item>
					</view>
				</view>
				<view class="margin-top w100">
					<!-- <pickRegions class="w100" @getRegion="handleGetRegion"> -->
					<u-form-item prop="area" borderBottom ref="item1" @click="openMap">
						<u-input @input="setInput" :placeholderClass="model.area == '  '?'showHolderCss':'hideHolderCss'"
							v-model="model.area" disabled disabledColor="#ffffff" placeholder="请选择省市区"
							border="none"></u-input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
					<!-- </pickRegions> -->
				</view>

				<view class="margin-top w100">
					<u-form-item prop="fLxrjd" borderBottom ref="item1">
						<u-input v-model="model.fLxrjd" @input="setInput" disabledColor="#ffffff"
							placeholder="请输入街道（例如**街**号）" border="none"></u-input>
						<!-- <u-icon slot="right" name="map"></u-icon> -->
						<!-- <u-tooltip text="" direction="bottom"></u-tooltip> -->
					</u-form-item>
				</view>
				<view class="margin-top" v-if="mode === 'add'">
					<view class="">
						<u-form-item :prop="mode === 'add'?'fLxrxxdz':''" borderBottom ref="item1">
							<u-input v-model="model.fLxrxxdz" @input="setInput" disabledColor="#ffffff"
								placeholder="请输入详情地址" border="none"></u-input>
							<!-- <u-icon slot="right" name="map"></u-icon> -->
						</u-form-item>
					</view>
					<view class="flex justify-between margin-top" v-if="showMrDz">
						<view class="flex">
							<view class="">
								<u-checkbox-group activeColor="#EA5504" v-model="checkValue" @change="groupChange">
									<u-checkbox name="agree" shape="circle"></u-checkbox>
								</u-checkbox-group>
							</view>
							<view class="text-gray">
								设置为默认地址
							</view>
						</view>
						<view class="text-gray" @click="handleEmpty">
							清空
						</view>
					</view>
				</view>
			</u--form>
		</view>
	</view>
</template>

<script>
	import pickRegions from '@/components/pick-regions/pick-regions.vue'
	export default {
		name: "addAddress",
		components: {
			pickRegions
		},
		props: {
			mode: {
				type: String,
				default: 'repair'
			},
			formData: {
				type: Object,
				default: () => {}
			},
			showMrDz: {
				type: Boolean,
				default: true
			}
		},
		data() {
			return {
				model: {
					id: this.formData.id || "",
					area: `${this.formData.fLxrsf || ""} ${this.formData.fLxrs || ""} ${this.formData.fLxrq || ""}`,
					fLxrsf: this.formData.fLxrsf || "",
					fLxrs: this.formData.fLxrs || "",
					fLxrq: this.formData.fLxrq || "",
					fLxrjd: this.formData.fLxrjd || "",
					fLxrxxdz: this.formData.fLxrxxdz || "",
					fLxr: this.formData.fLxr || "",
					fLxrdh: this.formData.fLxrdh || "",
					fSfmrdz: this.formData.fSfmrdz || 'n',
					fJd: this.formData.fJd || "",
					fWd: this.formData.fWd || "",
				},
				c: false,
				checkValue: [],
				rules: {
					fLxr: [{
						required: true,
						message: '请输入姓名',
						trigger: ['blur', 'change']
					}],
					fLxrdh: [{
							required: true,
							message: '请输入联系方式',
							trigger: ['blur', 'change']
						},
						{
							validator: (rule, value, callback) => {
								return uni.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change
							trigger: ['change', 'blur'],
						}
					],
					area: [{
						required: true,
						message: '请选择省市区',
						trigger: ['blur', 'change']
					}],
					fLxrjd: [{
						required: true,
						message: '请输入街道',
						trigger: ['blur', 'change']
					}],
					fLxrxxdz: [{
						required: true,
						message: '请输入详细地址',
						trigger: ['blur', 'change']
					}],
				},
			};
		},
		mounted() {
			console.log("model", this.mode);
			console.log("formData", this.formData);
			// this.model = {
			// 	...this.formData,
			// 	area: `${this.formData.fLxrsf} ${this.formData.fLxrs} ${this.formData.fLxrq}`
			// };
			if (this.formData) {
				if (this.formData.fSfmrdz === 'y') {
					this.checkValue = ['agree']
				}
			}

		},
		methods: {
			groupChange(e) {
				console.log(e);
				if (this.checkValue.length) {
					this.model.fSfmrdz = 'n';
				} else {
					this.model.fSfmrdz = 'y';
				}
				this.$emit('setInput', this.model)
			},
			setInput() {
				if (this.model.area !== '') {
					this.decomposeAds();
					return
				}
				// console.log("传递新增数据", this.model);
				this.$emit('setInput', this.model)
			},
			// 打开地图选择
			openMap() {
				let that = this;
				uni.chooseLocation({
					success: function(res) {
						console.log('位置名称：' + res.name);
						console.log('详细地址：' + res.address);
						console.log('纬度：' + res.latitude);
						console.log('经度：' + res.longitude);
						that.model.fJd = res.longitude;
						that.model.fWd = res.latitude;
						// 逆地址获取
						that.loadCity(res.longitude, res.latitude, res.address, res.name)
						// that.model.area = `${province}省 ${city}市 ${district}区`;
						// that.model.fLxrjd = street;
						// that.$emit('setInput', that.model)
					}
				});
			},
			loadCity(longitude, latitude, address, name) {
				let that = this;
				uni.request({
					header: {
						'Content-Type': 'application/json',
					},
					//注意:这里的key值需要高德地图的 web服务生成的key  只有web服务才有逆地理编码
					url: `https://restapi.amap.com/v3/geocode/geo?output=JSON&address=${address}&location=${longitude},${latitude}&key=${this.$config.gaodeMapKey}`,
					success(res) {
						console.log(res, "获取位置成功信息")
						let data = res.data;
						if (data.status === '1') {
							let geocodes = data.geocodes[0];
							that.model.area = `${geocodes.province} ${geocodes.city} ${geocodes.district}`;
							that.setInput();
							let street = geocodes.street;
							const regex = /区(.*)$/;
							const extractedText = /区(.*)$/.exec(geocodes.formatted_address || address)[1].trim();
							that.model.fLxrjd = that.$streetOrNot(street) ? street : extractedText || "";
							// that.model.fLxrxxdz = name;
							// that.$emit('setInput', that.model)
						} else {
							uni.$u.toast('地址有误 更换重试')
						}
					},
					fail(err) {
						console.log(err, "获取位置失败信息")
						uni.$u.toast(err);
					}
				})
			},
			// 分解省市区
			decomposeAds() {
				let tempArr = this.model.area.split(' ');
				[this.model.fLxrsf, this.model.fLxrs, this.model.fLxrq] = tempArr;
				// console.log("model",this.model);
				this.$emit('setInput', this.model)
			},
			// handleGetRegion(e) {
			// 	this.model.area = e.map(item => item.name).join(' ');
			// 	this.decomposeAds();
			// },
			handleEmpty() {
				if (this.$refs['uForm']) {
					this.model = {
						id: "",
						area: "",
						fLxrsf: "",
						fLxrs: "",
						fLxrq: "",
						fLxrjd: "",
						fLxrxxdz: "",
						fLxr: "",
						fLxrdh: "",
						fSfmrdz: 'n'
					}
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.contactCardCss {
		margin: 10px;
		padding: 10px 20px;
	}

	// /deep/.u-form-item .u-form-item__body__right__message {
	// 	margin-left: 0 !important;
	// }
	// /deep/.uni-input-placeholder{
	// 	display: flex;
	// }

	.showHolderCss {
		display: block !important;
	}

	.hideHolderCss {
		display: none !important;
	}
</style>