<template>
	<view class="container safe-area-inset-bottom">
		<MessageNotification />
		<view class="card" v-if="editShow==false">
			<view class="title">
				<u-field v-model="name" label="收货人" placeholder="请填写收货人名字" :field-style="{ background: '#F6F6F6',fontSize: '28rpx',paddingLeft:'30rpx',
height:' 68rpx',borderRadio:'8rpx'}" placeholder-style="#999999" :border-bottom="false">
				</u-field>
			</view>

			<view class="title">
				<u-field v-model="mobile" label="手机号码" placeholder="请填写收货人手机号" placeholder-style="#999999"
					:border-bottom="false" :field-style="{ background: '#F6F6F6',fontSize: '28rpx',paddingLeft:'30rpx',
height:' 68rpx',borderRadio:'8rpx'}">
				</u-field>
			</view>

			<view class="title">
				<u-field @click="showAction" v-model="region" :disabled="true" label="地区" placeholder="点击选择"
					placeholder-style="#999999" :border-bottom="false" :field-style="{ background: '#F6F6F6',fontSize: '28rpx',paddingLeft:'30rpx',
height:' 68rpx',borderRadio:'8rpx'}">
				</u-field>
				<u-picker mode="region" v-model="show" :safe-area-inset-bottom="true" @confirm="confirm"></u-picker>
			</view>

			<view class="title">
				<u-field v-model="location" label="地址" placeholder="如街道、门牌号、小区" :border-bottom="false"
					placeholder-style="#999999" icon="map-fill" icon-color="#1777FF" :field-style="{ background: '#F6F6F6',fontSize: '28rpx',paddingLeft:'30rpx',
height:' 68rpx',borderRadio:'8rpx'}">
				</u-field>
			</view>
		</view>



		<view class="card" v-if="editShow">
			<view class="title">
				<u-field v-model="from[0].name" label="收货人" placeholder="请填写收货人名字" :field-style="{ background: '#F6F6F6',fontSize: '28rpx',paddingLeft:'30rpx',
		height:' 68rpx',borderRadio:'8rpx'}" placeholder-style="#999999" :border-bottom="false">
				</u-field>
			</view>

			<view class="title">
				<u-field v-model="from[0].mobile" label="手机号码" placeholder="请填写收货人手机号" placeholder-style="#999999"
					:border-bottom="false" :field-style="{ background: '#F6F6F6',fontSize: '28rpx',paddingLeft:'30rpx',
		height:' 68rpx',borderRadio:'8rpx'}">
				</u-field>
			</view>

			<view class="title">
				<u-field @click="showAction" v-model="from[0].region" :disabled="true" label="地区" placeholder="点击选择"
					placeholder-style="#999999" :border-bottom="false" :field-style="{ background: '#F6F6F6',fontSize: '28rpx',paddingLeft:'30rpx',
		height:' 68rpx',borderRadio:'8rpx'}">
				</u-field>
				<u-picker mode="region" v-model="show" :safe-area-inset-bottom="true" @confirm="confirms"></u-picker>
			</view>

			<view class="title">
				<u-field v-model="from[0].detail_address" label="地址" placeholder="如街道、门牌号、小区" :border-bottom="false"
					placeholder-style="#999999" icon="map-fill" icon-color="#1777FF" :field-style="{ background: '#F6F6F6',fontSize: '28rpx',paddingLeft:'30rpx',
		height:' 68rpx',borderRadio:'8rpx'}">
				</u-field>
			</view>
		</view>


		<view class="btn">
			<view class="add_btn" v-if="editShow==false" @click="getAdd">
				确定
			</view>

			<view class="eidt_btn" v-if="editShow" @click="getEdit">
				保存
			</view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {
		getaddressAdd,
		getaddressEdit,
		getaddressList
	} from '../../request/api/api'
	export default {
		data() {
			return {
				location: "",
				mobile: "",
				name: "",
				region: "",
				areaList: [{
						text: '北京',
					},
					{
						text: '杭州'
					},
					{
						text: '福建'
					}
				],
				show: false,
				editShow: false,
				id: "",
				infoList: [],
				from: {

				},
				province: "", // 省
				city: "", // 市
				area:"", // 区
			}
		},
		onLoad(e) {
			if (e.id) {
				this.editShow = true
				this.id = e.id
				this.getList()
			} else {
				this.editShow = false
			}
		},
		computed: {

		},
		methods: {
			showAction() {
				this.show = true;
			},
			confirm(e) {
				// console.log(e, 'area');
				// 省市区拼接
				this.region = e.province.label + e.city.label + e.area.label
				this.province = e.province.label
				this.city = e.city.label
				this.area = e.area.label
			},
			confirms(e) {
				this.from[0].region = e.province.label + e.city.label + e.area.label
				this.province = e.province.label
				this.city = e.city.label
				this.area = e.area.label
			},
			// 新增地址
			getAdd() {
				let list = {
					name: this.name,
					mobile: this.mobile,
					region: this.region,
					detail_address: this.location,
					province: this.province,
					city: this.city,
					area:this.area,
					store_id: uni.getStorageSync('store_id') || '11001',
				}
				getaddressAdd({
					method: "post",
					data: list
				}).then((res) => {
					// console.log(res, 'add');
					if (res.data.errcode == 0) {
						uni.showToast({
							title: '添加成功',
							duration: 1500,
							mask: false,
							icon: "success"
						})

						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							});
						}, 700)

					} else if (res.data.errcode != 0) {
						// uni.showToast({
						// 	title: res.data.msg,
						// 	icon: "error",
						// 	duration: 1500,
						// 	mask: false
						// })
						this.$refs.uToast.show({
							title: res.data.msg,
							type: 'default',
							icon: false
						})
					}
				})
			},

			// 地址列表
			getList() {
				getaddressList({
					method: "post",
					data: {
						store_id: uni.getStorageSync('store_id') || '11001',
					}
				}).then((res) => {
					// console.log(res, 'list');
					if (res.data.errcode == 0) {
						this.infoList = (res.data.data).filter((item) => item.id == this.id)

						this.from = {
							...this.infoList
						}
						// console.log(this.from, 'edit');
					}
				})
			},

			// 修改地址
			getEdit() {
				let list = {
					id: this.id,
					name: this.from[0].name,
					mobile: this.from[0].mobile,
					region: this.from[0].region,
					detail_address: this.from[0].detail_address,
					province: this.province,
					city: this.city,
					area:this.area,
					store_id: uni.getStorageSync('store_id') || '11001',
				}
				getaddressEdit({
					method: "post",
					data: list
				}).then((res) => {
					// console.log(res, 'add');
					if (res.data.errcode == 0) {
						uni.showToast({
							title: '修改成功',
							duration: 1500,
							mask: false,
							icon: "success"
						})

						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							});
						}, 700)

					} else if (res.data.errcode != 0) {
						// uni.showToast({
						// 	title: res.data.msg,
						// 	icon: "error",
						// 	duration: 1500,
						// 	mask: false
						// })
						this.$refs.uToast.show({
							title: res.data.msg,
							type: 'default',
							icon: false
						})
					}
				})
			}

		},
		mounted() {

		}
	}
</script>

<style lang="scss" scoped>
	.container {
		width: 100vw;
		min-height: 100vh;
		max-height: 100%;
		background-color: #F8FAFC;
		padding-bottom: env(safe-area-inset-bottom);

		.card {
			width: 750rpx;
			background: #FFFFFF;
			padding: 0 32rpx;
			margin: 10rpx 0 80rpx;

			.title {
				height: 116rpx;
				line-height: 116rpx;
			}
		}

		.btn {
			margin: 80rpx auto;

			.add_btn {
				width: 686rpx;
				height: 86rpx;
				line-height: 86rpx;
				background: #4175EE;
				text-align: center;
				border-radius: 44rpx 44rpx 44rpx 44rpx;
				font-size: 32rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				margin: 0rpx auto;
			}

			.eidt_btn {
				width: 686rpx;
				height: 86rpx;
				line-height: 86rpx;
				background: #4175EE;
				text-align: center;
				border-radius: 44rpx 44rpx 44rpx 44rpx;
				font-size: 32rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				margin: 0rpx auto;
			}
		}
	}
</style>