<template>
	<view class="container">
		<Navbar title="地址管理" canBack></Navbar>
		<u-checkbox-group activeColor="#EA5504" v-model="checkValue" @change="groupChange">
			<view class="cardCss" :class="delOpen?'showRadioCss':'hideRadioCss'" v-for="(item,index) in adsList"
				:key="index">
				<view class="checkCss" v-if="delOpen">
					<!-- <u-icon name="checkmark-circle-fill" :color="index?'#999DB0':'#F04332'" size="20"></u-icon> -->
					<u-checkbox :name="item.id" shape="circle"></u-checkbox>
				</view>
				<view class="flex flex-direction w100">
					<view class="flex align-center margin-bottom-sm">
						<view class="text-xl">
							{{item.fLxr || ""}}
						</view>
						<view class="text-lg margin-left-xs text-gray">
							{{item.fLxrdh || ""}}
						</view>
					</view>
					<view class="text-gray">
						{{item.fLxrsf || ""}}{{item.fLxrs || ""}}{{item.fLxrq || ""}}{{item.fLxrjd || ""}}{{item.fLxrxxdz || ""}}
					</view>
					<view class="margin-top">
						<u-line></u-line>
					</view>
					<view class="flex" :class="delOpen?'justify-end align-center':'justify-between'"
						style="height: 40px;">
						<view class="flex margin-tb-sm" v-if="!delOpen">
							<u-icon @click="openDefault(item)" name="checkmark-circle-fill"
								:color="item.fSfmrdz === 'y'?'#F04332':'#999DB0'" size="20"></u-icon>
							<view class="margin-left-xs text-gray">
								默认地址
							</view>
						</view>
						<view class="flex text-gray">
							<view class="flex align-center" @click="editAds(item)">
								<view class="">
									<u-icon name="edit-pen" color="#999DB0"></u-icon>
								</view>
								<view class="margin-left-xs">
									编辑
								</view>
							</view>
							<view class="flex margin-left-sm align-center" @click="delAds(item)">
								<view class="">
									<u-icon name="trash" color="#999DB0"></u-icon>
								</view>
								<view class="margin-left-xs">
									删除
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</u-checkbox-group>

		<u-empty mode="list" text="地址为空" icon="http://cdn.uviewui.com/uview/empty/list.png"
			v-if="!adsList.length"></u-empty>
		<u-loadmore :status="status" marginTop="20" height="10" marginBottom="10" v-else />

		<view class="bomBtncss flex justify-around align-center">
			<view class="w30" @click="batchDel">
				<u-button shape="circle">{{bomLeftText}}</u-button>
			</view>
			<view class="w60">
				<u-button @click="handleGoOrDel" shape="circle" :disabled="delOpen && !checkValue.length"
					color="#ED221B">{{bomRightText}}</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				delOpen: false,
				checkValue: [],
				bomLeftText: '管理',
				bomRightText: "新增地址",
				formData: {
					current: 1,
					size: 10
				},
				status: "loadmore",
				total: null,
				adsList: [],
				sigeData: {},
				updateId: "",
				qpid:"",
			};
		},
		onPullDownRefresh() {
			this.adsList = []
			//调用获取数据方法
			this.getAdsList()
			setTimeout(() => {
				//结束下拉刷新
				uni.stopPullDownRefresh();
			}, 500);
		},
		onReachBottom() {
			let allTotal = this.formData.current * this.formData.size
			if (allTotal < this.total) {
				//当前条数小于总条数 则增加请求页数
				this.formData.current++;
				this.status = 'loading';
				setTimeout(() => {
					this.getAdsList()
				}, 500)
			} else {
				this.status = 'nomore'
				// console.log('已加载全部数据')
			}
		},
		onLoad(data) {
			if(data.qpid){
				this.qpid = data.qpid
			}
			// this.getAdsList()
		},
		// 利用onshow每次进入刷新进行查询操作，查询到相关数据后只更新某条数据
		async onShow() {
			this.getAdsList()
			// console.log("更新id", this.updateId);
			// if (this.updateId) {
			// 	this.sigeUpdate();
			// }
		},
		methods: {
			async sigeUpdate() {
				await this.getAdsxx();
				const index = this.adsList.findIndex(item => item.id === this.updateId);
				if (index !== -1) {
					this.adsList.splice(index, 1, this.sigeData)
				}
			},
			// 获取单个信息
			async getAdsxx() {
				let query = {
					id: this.updateId
				}
				const result = await this.$api.memberApi.getwHydzDetail(query);
				let {
					code,
					value
				} = result;
				if (code === 200) {
					this.sigeData = value;
				}
				console.log('查询单个地址信息', this.sigeData);
			},
			// 设置为默认地址
			async openDefault(item) {
				let data = {
					...item
				};
				this.updateId = data.id;
				console.log("当前item", data);
				data.fSfmrdz = 'y';
				const result = await this.$api.memberApi.savewHydz(data);
				console.log("设置默认地址", result);
				let {
					code,
					value,
					message
				} = result;
				if (code === 200) {
					uni.$u.toast('已设置为默认地址');
					setTimeout(() => {
						this.getAdsList();
						this.$store.dispatch('GetDefaultAds');
					}, 500)
				}
			},
			// 获取地址列表
			async getAdsList() {
				const result = await this.$api.memberApi.getwHydzList(this.formData);
				let {
					code,
					value
				} = result;
				if (code === 200) {
					let allTotal = this.formData.current * this.formData.size
					this.total = value.total
					const newlist = value.records;
					if (this.formData.current === 1) {
						this.adsList = newlist;
					} else {
						this.adsList.push(...newlist)
					}
					if (this.adsList.length < allTotal) {
						this.status = 'nomore'
					}
				}
				console.log('地址列表', JSON.parse(JSON.stringify(this.adsList)));
			},
			batchDel() {
				this.delOpen = !this.delOpen;
				if (this.delOpen) {
					this.bomLeftText = '完成';
					this.bomRightText = '删除'
				} else {
					this.bomLeftText = '管理';
					this.bomRightText = '新增地址'
				}
			},
			async handleGoOrDel() {
				let that = this;
				if (this.delOpen) {
					console.log("删除操作");
					this.$modal.confirm('确认删除这些地址吗？', '提示').then(() => {
						console.log("确认", this.checkValue);
						let data = {
							ids:this.checkValue.join(",")
						}
						this.$api.memberApi.getHydzbatchDelete(data).then((res) => {
							console.log('打印res', res);
							if(res.code === 200){
								uni.$u.toast('批量删除成功');
								setTimeout(() => {
									that.getAdsList()
								}, 500)
							}
						}).catch(e =>{
							console.log("失败原因",e);
							uni.$u.toast('批量删除失败');
						});
					}).catch(() => {
						console.log("取消");
					});
				} else {
					console.log("跳转操作");
					uni.navigateTo({
						url: '/pages/mine/appList/addressManagement/addAddress?qpid='+this.qpid
					})
				}
			},
			editAds(item) {
				// console.log("编辑地址",item);
				this.updateId = item.id
				uni.navigateTo({
					url: '/pages/mine/appList/addressManagement/addAddress?id=' + this.updateId
				})
			},
			async delAds(item) {
				console.log("删除item", item);
				// let ifDefaultAds = item.fSfmrdz === 'y';
				// return;
				this.$modal.confirm('确认删除这些地址吗？', '提示').then(async () => {
					const result = await this.$api.memberApi.delwHydz(item.id);
					let {
						code,
						value,
					} = result;
					if (code === 200) {
						uni.$u.toast('删除成功');
						setTimeout(() => {
							this.getAdsList()
						}, 500)
					}
				}).catch(() => {
					console.log("取消");
				});
			},
			groupChange(e) {
				console.log(e);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding-bottom: 50px;
	}

	.showRadioCss {
		margin-left: 50px !important;
	}

	.hideRadioCss {
		margin-left: 10px !important;
	}

	.cardCss {
		position: relative;
		display: flex;
		align-items: center;
		background: #fff;
		border-radius: 15px;
		// height: 100px;
		padding: 20px 15px 10px 15px;
		margin: 10px;
	}

	.checkCss {
		position: absolute;
		left: -30px;
	}

	.bomBtncss {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		width: 100%;
		height: 50px;
		background: #fff;
	}

	/deep/ .u-checkbox-group {
		flex-direction: column;
	}
</style>