<template>
	<div class="p-root-person-addressForm g_w_all g_h_all g_bg_f_5 g_kuaishou">
		<g-panel-form-slot
			v-if="!currentId || showPage"
			:list="[
				{
					icon: '',
					label: '姓名',
					value: submitInfo.contacts,
					placeholder: '请输入姓名',
					path: '',
					tip: 'slot-name',
					type: 'slot',
					pColumn: 10,
				},
				{
					icon: '',
					label: '手机号',
					value: submitInfo.contactsTel,
					placeholder: '请输入手机号',
					path: '',
					pColumn: 10,
					tip: 'slot-mobile',
					type: 'slot',
				},
				{
					icon: '',
					label: '详细地址',
					value: submitInfo.addressStr,
					path: '',
					tip: 'slot-choose-address',
					type: 'slot',
					suffix: 'icon-dizhi1',
					placeholder: '请选择详细地址',
					fontSize: '16px',
					pColumn: 17,
					require: false,
				},
			]"
			@changeAddress="getAddress"
			@chooseAddress="getAddressInfo"
			@changeName="(e) => (submitInfo.contacts = e)"
			@changeMobile="(e) => (submitInfo.contactsTel = e)"
		>
		</g-panel-form-slot>
		<div class="g_flex_row_between flex_center g_pt_16 g_pb_16 g_pl_10 g_pr_10 g_bg_f g_ml_10 g_mr_10 g_radius_6 g_mt_16">
			<div class="g_fs_16">标签</div>
			<div class="g_flex_row_start">
				<div @click="addressClassify = 0" :class="addressClassify === 0 ? 'active' : ''" class="g_flex_row_center flex_center g_w_56 g_h_28 g_border_d g_radius_25 g_c_3 g_fs_14">家</div>
				<div @click="addressClassify = 1" :class="addressClassify === 1 ? 'active' : ''" class="g_flex_row_center flex_center g_w_56 g_h_28 g_border_d g_radius_25 g_c_3 g_fs_14 g_ml_8">公司</div>
				<div @click="addressClassify = 2" :class="addressClassify === 2 ? 'active' : ''" class="g_flex_row_center flex_center g_w_56 g_h_28 g_border_d g_radius_25 g_c_3 g_fs_14 g_ml_8">其它</div>
			</div>
		</div>

		<view class="g_fs_12 c045 g_flex_row_center" style="align-items: center; margin-top: 16px">
			<radio-group class="dib">
				<radio :checked="switchChecked" @click="switchChange" value="0" class="dib" :color="globalData.themeColor" style="transform: scale(0.7)" />
			</radio-group>
			我已阅读并同意
			<navigator url="/root/person/agreeUser" class="aLink" style="color: #576b95;">《用户服务协议》</navigator>
			及
			<navigator url="/root/person/agreePrive" class="aLink" style="color: #576b95;">《隐私政策》</navigator>
		</view>

		<div class="g_pt_70">
			<rh-button  btnText="保存" type="primary" @clickBtn="submitForm"></rh-button>
		</div>
		<div class="g_text_c g_f_14 g_mt_12" style="color: #576b95" @click="delAddress" v-if="currentId">删除该地址</div>
	</div>
</template>

<script>
// var QQMapWX = require("../../utils/qqmap-wx-jssdk.min.js");
const app = getApp();
// pages/messageDetail/index.js
export default {
	onShareAppMessage() {
		return this.G.shareFun();
	},
	components: {
	},
	data() {
		return {
			globalData: getApp().globalData,
			submitInfo: {},
			addressClassify: null,
			showPage: true,
			currentId: null,
			addressStr: "",
			switchChecked: false,
		};
	},
	/**
	 * 生命周期函数--监听页面加载
	 */
	onLoad(options) {
		console.log(options);
		if (options.id) {
			this.currentId = options.id;
			this.getDetail();
		}
	},

	methods: {
		switchChange() {
			console.log(this.switchChecked);
			this.switchChecked = !this.switchChecked;
		},
		getAddress(e) {
			console.log(e);
		},
		getAddressInfo(e) {
			console.log(e);
			let that = this;
			// that.addressStr = e.address;
			that.submitInfo.addressStr = e.address;
			that.submitInfo.address = e.address;
			// this.qqmapsdk.reverseGeocoder({
			// 	location: `${e.lat},${e.lng}`,
			// 	success: function (res) {
			// 		console.log(res.result);
			// 		let address = res.result.address_component;
			// 		that.submitInfo.addressStr = `${address.province} ${address.city} ${address.district} ` + that.addressStr;
			// 		that.submitInfo.provinceName = res.result.address_component.province;
			// 		that.submitInfo.cityName = res.result.address_component.city;
			// 		that.submitInfo.districtName = res.result.address_component.district;
			// 		that.$forceUpdate();
			// 		console.log("that.submitInfo", that.submitInfo);
			// 	},
			// 	fail: function (res) {
			// 		console.log(res);
			// 		uni.showToast({
			// 			title: res.message,
			// 			icon: "none",
			// 		});
			// 	},
			// });
		},
		getDetail() {
			var that = this;
			that.G.Post(that.api.user_getAddressDetail + `?id=${that.currentId}`, {}, (res) => {
				console.log(res);
				that.submitInfo.addressStr = res.address;
				that.submitInfo.address = res.address;
				that.submitInfo.contacts = res.contacts;
				that.submitInfo.contactsTel = res.contactsTel;
				that.addressClassify = res.classify;
				that.showPage = true;
				console.log(that.submitInfo);
			});
		},
		selectAddressClassify(e) {
			var that = this;

			var classify = e.currentTarget.dataset.classify;
			console.log(classify);
			this.addressClassify = classify;
		},
		delAddress: function (e) {
			var that = this;
			// var record = e.currentTarget.dataset.record;
			// console.log(record);

			uni.showModal({
				title: "提示",
				content: `确定要删除该地址吗？`,
				cancelColor: "#666666",
				confirmColor: "#ff4400",
				success(res) {
					if (res.confirm) {
						that.G.Post(
							that.api.user_delAddress,
							{
								id: that.currentId,
							},
							(res) => {
								console.log(res);
								uni.showToast({
									title: "删除成功",
									icon: "success",
									duration: 2000,
								});
								setTimeout(() => {
									uni.navigateBack({
										delta: 1,
									});
								}, 2000);
							}
						);
					} else if (res.cancel) {
						console.log("用户点击取消");
					}
				},
			});
		},
		submitForm() {
			var that = this;
			console.log(this.submitInfo);
			// this.submitInfo.provinceName = "河南省";
			// this.submitInfo.cityName = "郑州市";
			// this.submitInfo.districtName = "金水区";
			if (!this.submitInfo.contacts) {
				uni.showToast({
					icon: "none",
					title: "请输入姓名",
				});
				return;
			}
			var myreg = /^[1][3456789][0-9]{9}$/;
			if (!myreg.test(this.submitInfo.contactsTel) || this.submitInfo.contactsTel == "") {
				wx.showToast({
					icon: "none",
					title: "请输入正确手机号",
				});

				return;
			}
			if (that.addressClassify == null) {
				wx.showToast({
					icon: "none",
					title: "请选择标签",
				});

				return;
			} else {
				this.submitInfo.classify = this.addressClassify;
			}
			if (this.currentId) {
				this.submitInfo.id = this.currentId;
			}
			this.G.Post(this.api.user_addAddress, this.submitInfo, (res) => {
				console.log(res);
				wx.navigateBack({
					delta: 1,
				});
			});
		},
	},
};
</script>

<style lang="scss">
.p-root-person-addressForm {
	padding: 10px 0;
}

.active {
	background: v-bind("globalData.themeColor");
	color: #fff;
	border: 1rpx solid v-bind("globalData.themeColor");
}
</style>
