<template>
	<view class="bg-[var(--page-bg-color)] min-h-screen overflow-hidden">
		<view class="fixed left-0 top-0 right-0 z-10" v-if="houseTypeLoading">
			<scroll-view scroll-x="true" class="scroll-Y box-border px-[24rpx] bg-white">
				<view class="flex whitespace-nowrap justify-around">
					<view :class="['text-sm leading-[90rpx]', { 'class-select': houseType === item.value.toString() }]"
						@click="houseTypeFn(item.value)" v-for="(item, index) in houseTypeList"> {{item.name}}</view>
				</view>
			</scroll-view>
		</view>
		
		<mescroll-body ref="mescrollRef" top="110rpx" @init="mescrollInit" @down="downCallback" @up="getBuildListFn">
			<view class="list-wrap sidebar-margin">
				<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.build_name }}</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.create_time }}</view>
				        </view>
				        <view class="flex justify-between pt-[var(--top-m)] text-[30rpx]">
				            <view class="flex items-center leading-[30rpx]" @click="setDefault(index)">
				                <text class="iconfont mr-[10rpx] text-[#333]" :class="{ 'iconduigou text-primary': item.is_default, 'iconcheckbox_nol': !item.is_default }"></text>
				                设为默认
				            </view>
				            <view class="flex">
				                <view @click.stop="toResident(item.id)" class="flex leading-[30rpx]" v-if="item.identity == 'owner'">
									<u-icon size="25" color="#333" name="account" label="成员管理"></u-icon>
								</view>
				                <view @click="unBind(index)" class="ml-[40rpx] flex leading-[30rpx]">
									<u-icon size="25" color="#333" name="lock-open" label="解绑"></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="toBind">绑定房产</button>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue';
	import { redirect } from '@/utils/common';
	import { getBuildList,setDefaultBuild,unBindBuild } from '@/addon/xypm/api/member';
	import { getHouseType } from '@/addon/xypm/api/build';
	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';

	const { mescrollInit, downCallback, getMescroll } = useMescroll(onPageScroll, onReachBottom);
	let list = ref<Array<Object>>([]);
	let loading = ref<boolean>(false);
	let houseTypeLoading = ref<boolean>(false);
	let houseType = ref('')
	let houseTypeList = ref([]);

	onLoad(() => {
		getHouseTypeFn();
	});

	const getBuildListFn = (mescroll) => {
		loading.value = false;
		let data: object = {
			page: mescroll.num,
			limit: mescroll.size,
			house_type: houseType.value
		};
		getBuildList(data).then((res) => {
			let newArr = (res.data.data as Array<Object>);
			//设置列表数据
			if (mescroll.num == 1) {
				list.value = []; //如果是第一页需手动制空列表
			}
			list.value = list.value.concat(newArr);
			loading.value = true;
			mescroll.endSuccess(newArr.length);
			
		}).catch(() => {
			loading.value = true;
			mescroll.endErr(); // 请求失败, 结束加载
		})
	}

	// 获取房产类型
	const getHouseTypeFn = () => {
		houseTypeLoading.value = false;
		houseTypeList.value = [];
		let obj = { value:'', name:'全部'};
		houseTypeList.value.push(obj);

		getHouseType().then((res) => {
			Object.keys(res.data).forEach((item, index) => {
				houseTypeList.value.push({value:item,name:res.data[item]});
			});
			houseTypeLoading.value = true;
		}).catch(() => {
			houseTypeLoading.value = true;
		})
	}

	// 切换房产类型
	const houseTypeFn = (house_type) => {
		houseType.value = house_type.toString();
		list.value = [];
		getMescroll().resetUpScroll();
	};

	
	// 设为默认
	const setDefault = (index: any) => {
	    const data: any = list.value[index]
	    if (data.is_default) return
	
	    data.is_default = 1;
	    setDefaultBuild(data.id).then(() => {
	        list.value.forEach((item, itemIndex) => {
	            item.is_default && (item.is_default = 0)
	            itemIndex == index && (item.is_default = 1)
	        })
	    }).catch()
	}
	
	// 解绑房产
	const unBind = (index: any) => {
	    const data: any = list.value[index]
	
		uni.showModal({
			title: '提示',
			content: '您确定要解绑吗？',
			success: res => {
				if (res.confirm) {
					unBindBuild(data.id).then(() => {
					    list.value.forEach((item, itemIndex) => {
					        itemIndex == index && list.value.splice(index,1);
					    })
					}).catch()
				}
			}
		})
	    
	}
	
	// 绑定房产
	const toBind = ()=> {
	    redirect({ url: '/addon/xypm/pages/member/build/bind' })
	}
	
	// 成员管理
	const toResident = (id: number)=> {
	    const url = `/addon/xypm/pages/member/build/resident`
	    redirect({ url, param: { member_build_id:id } })
	}
	
	
</script>
<style>
	@import '@/addon/xypm/styles/common.scss';
</style>
