<template>
	<view class="bg-[var(--page-bg-color)] min-h-screen overflow-hidden">
		<block v-if="showPage">
			<mescroll-body ref="mescrollRef" top="20rpx" @init="mescrollInit" @down="downCallback" @up="getBuildResidentListFn">
				<view class="list-wrap sidebar-margin">
					
					<view class="flex flex-col card-template mb-[20rpx] pt-[20rpx] pb-[20rpx]">
						{{memberBuildInfo.house_type_text}}【{{memberBuildInfo.build_name}}】- 成员管理
					</view>
					<view class="mb-[var(--top-m)] rounded-[var(--rounded-big)] overflow-hidden" v-for="(item, index) in list">
					    <view class="flex flex-col card-template">
					        <view class="flex-1 line-feed">
					            <view class="flex items-center">
					                <view class="text-[#333] text-[30rpx] leading-[34rpx] font-500">{{ item.realname }} {{ item.mobile }}</view>
					                <text class="text-[var(--text-color-light9)] text-[30rpx] ml-auto">{{ item.identity_text }}</text>
					            </view>
					            <view class="mt-[16rpx] text-[26rpx] line-feed text-[var(--text-color-light9)] leading-[1.4]">收费日期：{{ item.bill_date }}</view>
					        </view>
					        <view class="flex justify-between pt-[var(--top-m)]">
					            <view class="flex items-center leading-none text-[var(--text-color-light9)]">
									{{item.member_id > 0 ? '已绑定会员' : '未绑定会员'}}
					            </view>
					            <view class="flex">
					                <view @click="delEvent(index)" class="ml-[40rpx] flex">
										<u-icon size="22" name="trash"></u-icon>
										删除
									</view>
					            </view>
					        </view>
					    </view>
					</view>
				</view>
				<mescroll-empty :option="{tip : '暂未添加'}" v-if="!list.length && loading"></mescroll-empty>
				
			</mescroll-body>
			
			<view class="common-tab-bar-placeholder"></view>
			<view class="common-tab-bar fixed left-[var(--sidebar-m)] right-[var(--sidebar-m)] bottom-[0]">
				<button class="primary-btn-bg text-[#fff] h-[80rpx] leading-[80rpx] rounded-[100rpx] text-[26rpx] font-500" @click="addResidentRef.open()">添加成员</button>
			</view>
			
			<!-- 添加成员弹窗 -->
			<add-resident ref="addResidentRef" @confirm="confirmAddResident" />
		</block>
		<u-loading-page bg-color="rgb(248,248,248)" :loading="!showPage" fontSize="16" color="#333"></u-loading-page>
	</view>
	
</template>

<script setup lang="ts">
	import { ref } from 'vue';
	import { redirect } from '@/utils/common';
	import { getBuildResidentList,buildAddResident,getBuildInfo,delResident } from '@/addon/xypm/api/member';
	import MescrollBody from '@/components/mescroll/mescroll-body/mescroll-body.vue';
	import MescrollEmpty from '@/components/mescroll/mescroll-empty/mescroll-empty.vue';
	import useMescroll from '@/components/mescroll/hooks/useMescroll.js';
	import { onLoad, onPageScroll, onReachBottom } from '@dcloudio/uni-app';
	import addResident from './components/add-resident-popup.vue'

	const { mescrollInit, downCallback, getMescroll } = useMescroll(onPageScroll, onReachBottom);
	let list = ref<Array<Object>>([]);
	let loading = ref<boolean>(false);
	let showPage = ref<boolean>(false);
	let member_build_id = ref<number | string>('');
	let memberBuildInfo = ref({});
	const addResidentRef = ref()
	
	onLoad((option: any) => {
		member_build_id.value = option.member_build_id || ''
		getBuildInfo(member_build_id.value).then(res => {
			if (JSON.stringify(res.data) === '[]' || res.data.identity != 'owner') {
				uni.showToast({ title: '您没有权限查看', icon: 'none' })
				setTimeout(() => {
					redirect({ url: '/addon/xypm/pages/member/build/list', mode: 'reLaunch' })
				}, 2000)
			}else{
				memberBuildInfo.value = res.data;
				showPage.value = true;
			}
		})
	});

	const getBuildResidentListFn = (mescroll) => {
		loading.value = false;
		let data: object = {
			page: mescroll.num,
			limit: mescroll.size,
			member_build_id: member_build_id.value
		};

		getBuildResidentList(data).then((res) => {
			let newArr = (res.data.data as Array<Object>);
			//设置列表数据
			if (mescroll.num == 1) {
				list.value = []; //如果是第一页需手动制空列表
			}
			list.value = list.value.concat(newArr);
			mescroll.endSuccess(newArr.length);
			loading.value = true;
		}).catch(() => {
			loading.value = true;
			mescroll.endErr(); // 请求失败, 结束加载
		})
	}
	
	// 确认添加成员
	const confirmAddResident = (data : any) => {
		data['member_build_id'] = member_build_id.value;
		buildAddResident(data).then(() => {
		   addResidentRef.value.close();
		   list.value = [];
		   getMescroll().resetUpScroll();
		}).catch(() => {
		    loading.value = false
		})
	}
	
	// 删除房产
	const delEvent = (index: any) => {
	    const data: any = list.value[index]
		const tips = data.member_id > 0 ? '该成员已绑定会员，删除成员将会删除绑定会员的房产数据，确定要删除吗？' : '您确定要删除该成员吗'
		uni.showModal({
			title: '提示',
			content: tips,
			success: res => {
				if (res.confirm) {
					delResident(data.id).then(() => {
					    list.value.forEach((item, itemIndex) => {
					        itemIndex == index && list.value.splice(index,1);
					    })
					}).catch()
				}
			}
		})
	}
	
</script>
<style>
	@import '@/addon/xypm/styles/common.scss';
</style>
