<template>
	<view class="content">
		<!-- 表单 -->
		<view class="form-block">
			<view class="item">
				<label>收货人</label>
				<input class="form-input" type="text" v-model="name" placeholder="输入收货人姓名" />
			</view>
			<view class="item">
				<label>手机号码</label>
				<input class="form-input" type="number" v-model="phone" placeholder="输入手机号码"/>
			</view>
			<view class="item">
				<label>所在地区</label>
				<view class="picker-value" @click="show = true">
					<block v-if="value.length > 0">
						<text v-for="(item, index) in value" :key="index">{{item.name}}</text>
					</block>
					<block v-else>
						<view class="picker-value-placeholder">请选择省市区</view>
					</block>
				</view>
			</view>
			<view class="item">
				<label>详细地址</label>
				<input class="form-input" type="text" v-model="street" placeholder="输入详细地址"/>
			</view>
		</view>
		<view class="form-block">
			<view class="item">
				<label>设为默认</label>
				<view class="form-switch">
					<u-switch v-model="def" size="22" activeColor="#34CE98" />
				</view>
			</view>
		</view>
		<view class="form-block" v-if="this.$Route.query.id">
			<view class="item remove" @click="deleteThis">
				<label>删除地址</label>
				<view class="form-switch">
					<uni-icons type="forward" color="#999"></uni-icons>
				</view>
			</view>
		</view>
		<!-- 编辑信息 -->
		<view class="footer">
			<button type="default" @click="submit">{{this.$Route.query.id ? '保存' : '创建'}}</button>
		</view>
		<!-- 地址选择器 -->
		<u-picker
			:show="show"
			ref="uPicker"
			keyName="name"
			:columns="columns"
			confirmColor="#34CE98"
			cancelColor="#666"
			:defaultIndex="defaultIndex"
			@cancel="show = false"
			@confirm="confirm"
			@change="changePicker"
		></u-picker>
	</view>
</template>

<script>
	import { addresses, add, info, edit, del } from '@/apis/interfaces/address'
	export default {
		data() {
			return {
				show		: false,
				value		: [],
				columns		: [
					[{name: '省'}],
					[{name: '市'}],
					[{name: '区/县'}]
				],
				defaultIndex: [],
				name		: "",
				phone		: "",
				street		: "",
				def			: false,
			};
		},
		created() {
			uni.setNavigationBarTitle({
				title: this.$Route.query.id ? '编辑地址': '创建地址'
			})
			if(this.$Route.query.id){
				info(this.$Route.query.id).then(res =>{
					let addressId = [
						res.province.region_id,
						res.city.region_id,
						res.district.region_id,
					]
					this.name 		  = res.name
					this.phone 		  = res.mobile
					this.street		  = res.address
					this.def		  = res.default
					this.value  	  = [
						{ name:res.province.name,  id: res.province.region_id},
						{ name:res.city.name,  	   id: res.city.region_id},
						{ name:res.district.name,  id: res.district.region_id}
					]
					this.getAddresses(addressId)
				})
			}else{
				this.getAddresses()
			}
		},
		methods:{
			confirm(e){
				this.show = false
				this.value = e.value
			},
			changePicker(e){
				const { columnIndex, index, values } = e
				const parentId = values[columnIndex][index].id
				switch(columnIndex){
					case 0:
						this.getCity(parentId)
						break;
					case 1:
						this.getCounty(parentId)
						break;
				}
			},
			async getAddresses(values){
				let parentId 	= "",
					columnsArr	= []
					
				for(let i in this.columns){
					await addresses({parent_id:parentId}).then(res => {
						if(values){
							parentId = values[i]
						}else{
							parentId = res[0].id
						}
						columnsArr.push(res)
						this.$refs.uPicker.setColumnValues(i, res)
						if(i == 2 && values){
							let defIndex = columnsArr.map((val,index) => {
								return val.findIndex(v => v.id === values[index])
							})
							this.defaultIndex = defIndex
						}
					})
				}
			},
			getCity(id) {
				addresses({parent_id:id}).then(res => {
					this.$refs.uPicker.setColumnValues(1, res)
					this.getCounty(res[0].id)
				})
			},
			getCounty(id){
				addresses({parent_id:id}).then(res => {
					this.$refs.uPicker.setColumnValues(2, res)
				})
			},
			submit(){
				let data = {
					name		: this.name,
					mobile		: this.phone,
					province_id	: this.value[0].id,
					city_id		: this.value[1].id,
					district_id	: this.value[2].id,
					address		: this.street,
					is_default	: this.def ? 1 : 0
				}
				
				let submitFun
				
				if(this.$Route.query.id){
					submitFun = edit(this.$Route.query.id, data)
				}else{
					submitFun = add(data)
				}
				
				submitFun.then(res => {
					uni.showToast({
						title: res,
						icon : 'success',
						mask : true
					})
					setTimeout(() => {
						this.$Router.back()
					},2000)
				}).catch(err => {
					uni.showToast({
						title: err.message,
						icon : 'none'
					})
				})
			},
			deleteThis(){
				uni.showModal({
					title		: '提示',
					content		: '确定删除地址？',
					cancelText	: '取消',
					confirmText : '确认',
					showCancel	: true,
					confirmColor: '#34CE98',
					success		: res => {
						if(res.confirm){
							del(this.$Route.query.id).then(res => {
								uni.showToast({
									title: res,
									icon : 'success',
									mask : true
								})
								setTimeout(() => {
									this.$Router.back()
								},2000)
							})
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		background: $window-color;
		min-height: 100vh;
		padding: $padding;
		box-sizing: border-box;
	}
	// 提交按钮
	.footer{
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 999;
		padding: $padding;
		background: white;
		button{
			border-radius: $radius/2;
			height: 90rpx;
			line-height: 90rpx;
			font-size: $title-size;
			background: $main-color;
			padding: 0;
			color: white;
			&::after{
				display: none;
			}
		}
	}
	// 表单
	.form-block{
		background-color: white;
		border-radius: $radius;
		margin-bottom: $margin;
		.item{
			position: relative;
			padding: 0 $padding 0 200rpx;
			border-bottom: solid 1rpx $border-color;
			min-height: 90rpx;
			&.remove{
				color: $text-price;
			}
			&:last-child{
				border-bottom: none;
			}
			label{
				position: absolute;
				left: 0;
				top: 0;
				padding-left: $padding;
				line-height: 90rpx;
				font-size: $title-size-lg;
			}
			.form-switch{
				display: flex;
				justify-content: flex-end;
				align-items: center;
				height: 90rpx;
			}
			.form-input,
			.picker-value{
				min-height: 90rpx;
				line-height: 90rpx;
				font-size: $title-size-lg;
				&-placeholder{
					color: $text-gray-m;
				}
				@extend .nowrap;
				text{
					margin-right: 10rpx;
					&:last-child{
						margin-right: 0;
					}
				}
			}
		}
	}
</style>
