<template>
	<ciy-header title="我的收货地址"></ciy-header>
	<view v-if="init.code != 1" class="px4 py4">
		<view class="ciy-skeleton" style="height:2em;width:60%;"></view>
		<view class="ciy-skeleton" style="height:1em;width:40%;margin-left:1em;"></view>
		<view class="ciy-skeleton" style="height:1em;width:50%;"></view>
		<view class="ciy-skeleton" style="height:6em;width:100%;"></view>
	</view>
	<view v-else>
		<view class="ciy-list" :class="{selected:opn.sel&&item.id==opn.id,del:item._del}" v-for="(item,index) in init.list" :key="item.id" @tap="select(item.id)">
			<view class="l2">收件人 {{item.name}}</view>
			<view class="l2">联系电话 {{item.phone}}</view>
			<view class="l2">{{mcode(g.ciy_arearpc,item.areacode,'name').join(' . ')}}</view>
			<view class="l2">{{item.addr}}</view>
			<view class="dot" @tap.stop="showmenu(index)"></view>
		</view>
		<view style="height:5em;"></view>
		<view class="ciy-add" style="z-index:41;" @tap="editshow()"></view>
		<view v-if="opn.sel">
			<view class="bg1 txt-center py4 ciy-bottom">
				<button class="btn lg" @tap="selectok">选定</button>
			</view>
		</view>
		<ciy-anipop v-model="popedit" :zindex="998" maskbg="#00000077" :title="edit.id>0?'更新地址':'新建地址'">
			<view class="bg1 pop">
				<form @submit="edit_submit" class="char5">
					<view class="ciy-form">
						<label class="imp">收件人</label>
						<view>
							<ciy-input name="name" v-model="edit.name" bb ciystyle="width:9em;margin-right: 0.5em;"></ciy-input>
						</view>
						<!-- #ifdef MP-WEIXIN -->
						<view style="flex:none;">
							<button class="btn sm" @tap="chooseaddr">从微信同步</button>
						</view>
						<!-- #endif -->
					</view>
					<view class="ciy-form">
						<label class="imp">联系电话</label>
						<view>
							<ciy-input name="phone" v-model="edit.phone" bb ciystyle="width:7em;"></ciy-input>
						</view>
					</view>
					<view class="ciy-form">
						<label class="imp">省市区</label>
						<view>
							<ciy-selcas left name="areacode" align="left" v-model="edit.areacode" :range="g.ciy_arearpc" rootupid="0"></ciy-selcas>
						</view>
					</view>
					<view class="ciy-form">
						<label class="imp">详细地址</label>
						<view>
							<ciy-input name="addr" v-model="edit.addr" bb ciystyle="margin-right:0.5em;"></ciy-input>
						</view>
						<view style="flex:none;display: block;line-height: 1em;font-size: 0.7em;text-align: center;margin-right: 1em;" @tap="getloc">
							<i class="iconloc"></i><br />
							定位
						</view>
					</view>
					<view class="px4 py4 txt-center">
						<button class="btn lg" form-type="submit">提交</button>
					</view>
				</form>
			</view>
		</ciy-anipop>
	</view>
</template>

<style>
	.ciy-list {
		border: 2px solid var(--bg1);
		transition: all 0.5s;
	}

	.selected {
		border: 2px solid var(--man6);
	}

	.iconloc {
		width: 2em;
		height: 2em;
		display: inline-block;
		background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTAyNCAxMDI0IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTUxNS4yMTMgNjRjLTE4My42NTYgMC0zMzkuMjIgMTU2LjQzNi0zMzkuMjIgMzQxLjczNCAwIDE5NC4wNDcgMTgwLjI4MyAzOTIuNDg1IDMwMS41NTIgNTMxLjk1MyAwLjQ2NSAwLjU2IDIwLjA1OCAyMi4zMTIgNDQuMjE2IDIyLjMxMmgyLjEzM2MyNC4xNDUgMCA0My42MTQtMjEuNzUyIDQ0LjEwNy0yMi4zMTIgMTEzLjgwNi0xMzAuODI4IDI4MC4wMDQtMzQ2LjU0NiAyODAuMDA0LTUzMS45NTNDODQ4LjAwNiAyMjAuNDM2IDcyNi42OCA2NCA1MTUuMjEzIDY0eiBtMTEuMjUyIDgzNi4xMjljLTEgMC45ODQtMi40MDUgMi4wOTItMy42NzggMi45ODItMS4yNy0wLjg5LTIuNjkyLTEuOTk4LTMuNzA1LTIuOTgybC0xNC42Ny0xNi44NDRjLTExNC45Ny0xMzEuODk0LTI3Mi40MTctMzEyLjUxNi0yNzIuNDE3LTQ3Ny41NSAwLTE1NC44OTIgMTI5LjY5NC0yODUuNzQ4IDI4My4yMTctMjg1Ljc0OCAxOTEuMjA2IDAgMjc2Ljc5MiAxNDMuNTAzIDI3Ni43OTIgMjg1Ljc0NyAwIDEyNS4yOS04OS4zMzIgMjkxLjYzOS0yNjUuNTM5IDQ5NC4zOTV6IiBmaWxsPSIjOTNEM0MzIj48L3BhdGg+PHBhdGggZD0iTTUxMi45OTggMjMzLjU2MmMtOTIuNzc4IDAtMTY4LjAwMiA3NS4yMjMtMTY4LjAwMiAxNjguMDAzIDAgOTIuNzc4IDc1LjIyNCAxNjguMDAyIDE2OC4wMDIgMTY4LjAwMlM2ODEgNDk0LjM0MiA2ODEgNDAxLjU2NWMwLjAwMS05Mi43OC03NS4yMjQtMTY4LjAwMy0xNjguMDAyLTE2OC4wMDN6IG0wIDI4MC4wMDRjLTYxLjc1NyAwLTExMy4yODgtNTEuNDYyLTExMy4yODgtMTEzLjIzMiAwLTYxLjc1OCA1MC4yNDYtMTEyLjAwMiAxMTIuMDAyLTExMi4wMDIgNjEuNzcgMCAxMTIuMDAxIDUwLjI0NSAxMTIuMDAxIDExMi4wMDIgMC4wMDEgNjEuNzctNDguOTQ1IDExMy4yMzItMTEwLjcxNSAxMTMuMjMyeiIgZmlsbD0iIzkzRDNDMyI+PC9wYXRoPjwvc3ZnPg==");
	}
</style>

<script>
	export default {
		props: {
			id: {},
			sel: {}
		},
		data() {
			return {
				popedit: false,
				edit: {
					id: -1
				},
			}
		},
		onLoad() {
			this.load_ciydict(this.file_stor('/dict/ciy_arearpc.js')).then(json => {
				if (json.code != 1)
					return this.alert(json.errmsg);
				this.g.ciy_arearpc = json.arr;
			});
			this.getlist();
		},
		watch: {},
		computed: {},
		methods: {
			async getlist() {
				if (this._loading)
					return;
				this._loading = true;
				var retjson = await this.callfunc({
					func: 'me.user_shipaddr_list'
				});
				this._loading = false;
				if (retjson.code != 1)
					return this.alert(retjson.errmsg);
				this.init = retjson;
				if (!this._add && retjson.list.length == 0) {
					setTimeout(() => {
						this.editshow(null);
					}, 400);
				}
				this._add = true;
			},
			showmenu(idx) {
				var dat = this.init.list[idx];
				dat._idx = idx;
				var items = [];
				items.push({
					func: 'editshow',
					name: '更新',
					data: dat
				});
				items.push({
					func: 'del',
					name: '删除',
					style: 'color:var(--dag5)',
					data: dat
				});
				this.popmenu({
					items
				});
			},
			editshow(item) {
				item = item || {
					data: {
						id: 0,
						_idx: -1
					}
				};
				this.edit = {
					...item.data
				};
				this.popedit = true;
			},
			async edit_submit(e) {
				if (e.detail.value.areacode.length == 0)
					return this.alert('请选择省市区');
				if (e.detail.value.addr == '')
					return this.alert('请输入详细地址');
				if (e.detail.value.name == '')
					return this.alert('请输入收件人');
				if (e.detail.value.phone == '')
					return this.alert('请输入联系电话');
				e.detail.value.id = this.edit.id;
				if (this._loading)
					return;
				this._loading = true;
				var retjson = await this.callfunc({
					func: 'me.user_shipaddr_edit',
					data: e.detail.value
				});
				this._loading = false;
				if (retjson.code != 1)
					return this.alert(retjson.errmsg);
				if (this.edit._idx == -1)
					this.init.list.unshift(retjson.data);
				else
					this.init.list[this.edit._idx] = this.objdeepmerge(this.init.list[this.edit._idx], retjson.data);
				this.popedit = false;
				this.toast('更新成功');
			},
			async del(item) {
				if (await this.askmsg('是否删除？') != 'ok')
					return;
				var retjson = await this.callfunc({
					func: 'me.user_shipaddr_del',
					data: {
						id: item.data.id
					}
				});
				if (retjson.code != 1)
					return this.alert(retjson.errmsg);
				this.init.list[item.data._idx]._del = true;
				setTimeout(() => {
					this.init.list.splice(item.data._idx, 1);
				}, 500);
			},
			select(id) {
				if (this.opn.id == id)
					return this.selectok();
				this.opn.id = id;
			},
			selectok() {
				var addr = this.ccode(this.init.list, this.opn.id, '_obj');
				if (addr == null)
					return this.toast('请选择一个收货地址');
				const eventChannel = this.getOpenerEventChannel();
				eventChannel.emit('writedata', addr);
				this.setstorage('shipaddr', addr);
				uni.navigateBack();
			},
			async getloc() {
				try {
					var res = await uni.chooseLocation();
				} catch (res) {
					if (res.errMsg.indexOf('cancel') > -1)
						return;
					this.alert(res.errMsg);
					return;
				}
				this.edit.addr = res.address;
				const regex = /市.*?区/g;
				const match = regex.exec(res.address);
				if (match == null)
					return;

				var dist = match[0].substr(1);
				for (var i in this.g.ciy_arearpc) {
					if (this.g.ciy_arearpc[i].name == dist) {
						this.edit.areacode = this.g.ciy_arearpc[i].id;
						this.edit.addr = res.address.substr(match.index + match[0].length);
						break;
					}
				}
			},
			async chooseaddr() {
				var addr = await wx.chooseAddress();
				console.log(addr);
				this.edit.areacode = addr.nationalCode;
				this.edit.addr = addr.detailInfo;
				this.edit.name = addr.userName;
				this.edit.phone = addr.telNumber;
			}
		}
	}
</script>