<template>
	<view class="address">
		<view class="address-input">
			<view class="name">
				<u--input :placeholder="address[0].placeholder" border="bottom" clearable prefixIcon="*"
					prefixIconStyle="font-size: 32rpx;color: red" v-model="address[0].value"></u--input>
				<u--input :placeholder="address[1].placeholder" border="bottom" clearable prefixIcon="*"
					prefixIconStyle="font-size: 32rpx;color: red" v-model="address[1].value"></u--input>
			</view>
			<view>
				<u--input :placeholder="address[2].placeholder" border="bottom" clearable prefixIcon="*"
					prefixIconStyle="font-size: 32rpx;color: red" v-model="address[2].value">
				</u--input>
			</view>
			<view>
				<u--input :placeholder="address[3].placeholder" border="bottom" clearable prefixIcon="*"
					prefixIconStyle="font-size: 32rpx;color: red" v-model="address[3].value"></u--input>
			</view>
			<view>
				<u--input :placeholder="address[4].placeholder" border="bottom" clearable prefixIcon="*"
					prefixIconStyle="font-size: 32rpx;color: red" v-model="address[4].value"></u--input>
			</view>
			<view>
				<u--input :placeholder="address[5].placeholder" border="bottom" clearable prefixIcon="*"
					prefixIconStyle="font-size: 32rpx;color: red" v-model="address[5].value"></u--input>
			</view>
			<view>
				<u--input :placeholder="address[6].placeholder" border="bottom" clearable prefixIcon="*"
					prefixIconStyle="font-size: 32rpx;color: red" v-model="address[6].value"></u--input>
			</view>
		</view>
		<view class="contact-info">
			<view class="phone-number">
				<view class="left">
					<u--input :placeholder="address[7].placeholder" border="bottom" prefixIcon="+"
						prefixIconStyle="font-size: 32rpx;color: #333" value="1" v-model="address[7].value"></u--input>
				</view>
				<view class="right">
					<u--input :placeholder="address[8].placeholder" border="bottom" clearable prefixIcon="*"
						prefixIconStyle="font-size: 32rpx;color: red" v-model="address[8].value"></u--input>
				</view>
			</view>
			<view>
				<u--input :placeholder="address[9].placeholder" border="bottom" clearable prefixIcon="*"
					prefixIconStyle="font-size: 32rpx;color: red" v-model="address[9].value"></u--input>
			</view>
			<view>
				<u-radio-group>
					<u-radio :labelDisabled="true" iconColor="#1f3edd"></u-radio>
					<text>Set to the default address</text>
				</u-radio-group>
			</view>
			<u-button type="primary" text="Submit" color="#1f3edd" @click="submit()"></u-button>
		</view>
	</view>
</template>

<script>
	import addressData from "./shopping-address.js"
	export default {
		data() {
			return {
				address: addressData
			}
		},
		components: {},
		mounted() {
			// console.log(this.address)
			const address_ = uni.getStorageSync('ShoppingAddress')
			if (address_) {
				this.address = address_
			}
		},
		methods: {
			submit() {
				this.address.forEach((item) => {
					if (item.value == '') {
						uni.showToast({
							icon: 'error',
							title: item.placeholder + ' Cannot be empty!'
						})
						throw new Error(item.title + ' Cannot be empty!')
					}
				})
				console.log(this.address)
				uni.setStorage({
					key: 'ShoppingAddress',
					data: this.address,
					success: () => {
						uni.navigateBack({
							success: () => {
								uni.showToast({
									icon: 'success',
									title: 'Added successfully!'
								})
							}
						})
					}
				})
			}
		},
		watch: {}
	}
</script>

<style lang="scss" scoped>
	$padding: 40rpx;
	.address {
		font-size: $uni-font-size-base;
	}

	.address-input {
		padding: $padding;

		>view:last-child {
			margin-bottom: 0;
		}

		>view {
			margin-bottom: 40rpx;

			/deep/input {
				padding: 10rpx;
				height: 50rpx;
			}
		}

		.name {
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;

			/deep/.u-input:first-child {
				margin-right: 40rpx;
				flex: 1;
			}
		}
	}

	.contact-info {
		border-top: 20rpx solid $uni-bg-color-grey;
		padding: $padding;

		>view:last-child {
			margin-bottom: 0;
		}

		>view {
			margin-bottom: 40rpx;

			/deep/input {
				padding: 10rpx;
				height: 60rpx;
			}
		}

		.phone-number {
			display: flex;
			justify-content: center;
			align-items: center;

			.left {
				width: 200rpx;
			}

			.right {
				flex: 1;
			}

			/deep/.u-input:first-child {
				margin-right: 40rpx;
			}
		}
	}
</style>
