<template>
	<view class="center plr-25">
		<view class="br-12" style="background: linear-gradient( 180deg, #1FCA7C 0%, #DDF1E8 100%);;margin-top: 30rpx;">
			<view class="flex-column mar-25">
				<text class="fs-32 fw-700 mb-30" style="text-align: left;">当前住址</text>
				<view class="flex-column br-12 pad-25" style="background: #F3FEF9;">
					<view class="flex v-center">
						<image class="h-42 w-42" src="/static/icon_my_fw.png"></image>
						<text class="fs-28">{{userInfo.communityName}}</text>
					</view>
					<text class="fs-24 h-54 lh-54 mt-30"
						style="background: linear-gradient( 90deg, #CAF6E2 0%, #FFFFFF 100%);">
						{{userInfo.room}}
					</text>
				</view>
			</view>
		</view>
		<view class="flex-row-around">
			<view class="flex-column fs-32 w-150 vh-center mtb-30" @click="onClickTab(1)">
				<text style="text-align: center;">家庭成员</text>
				<view v-if="type==1" style="width: 60rpx;height: 5rpx;background-color: #1FCA7C;"></view>
			</view>
			<view class="flex-column fs-32 w-150 vh-center mtb-30" @click="onClickTab(2)">
				<text style="text-align: center;">租户成员</text>
				<view v-if="type==2" style="width: 60rpx;height: 5rpx;background-color: #1FCA7C;"></view>
			</view>
		</view>
		<view class="overflow-y">
			<scroll-view scroll-y style="height: 100%;">
				<view @click="onClickSelecte(index)" v-for="(item, index) in list" :key="index">
					<view class="flex-column br-12 fs-28 pad-30 mb-20" style="background: #FFFFFF;">
						<view class="flex-between-center">
							<text class="fs-30">{{item.name}}</text>
							<text class="fs-28">{{item.phone}}</text>
						</view>
					</view>
				</view>

			</scroll-view>
		</view>
		<view class="h-140 pt-20">
			<view class="fullscreen-btn" @click="onClick(0)">
				新增人员
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: '',
				list: [],
				type: 1,
			};
		},
		onLoad(options) {

		},
		onShow() {
			this.getUserInfo()
		},
		methods: {
			onClickTab(type) {
				this.type = type;
				this.getList();
			},
			getList() {
				const params = {
					url: '/api/familyMember/listAllByUserId',
					method: 'GET',
					data: {
						type: this.type
					}
				}
				this.$request(params).then(res => {
					console.log(res.data)
					this.list = res.data
				})
			},
			getUserInfo() {
				const params = {
					url: '/api/login/userInfo',
					method: 'GET',
					data: {}
				}
				this.$request(params).then(res => {
					this.userInfo = res.data
					this.getList()
				})
			},
			open() {

			},
			close() {

			},
			onClick(index) {
				if (index == 0) {
					this.$wskj.to("/pagesMine/pages/jtcy?type=0&cy_type=" + this.type)
					return
				}
			},
			onClickSelecte(index) {
				this.selecteIndex = index
				this.$wskj.to("/pagesMine/pages/jtcy?type=1&data=" + encodeURIComponent(JSON.stringify(this.list[index])) +
					"&cy_type=" + this.type)
			}
		}
	};
</script>

<style>
	.center {
		height: 100vh;
		display: flex;
		flex-direction: column;
		background: #F2F2F2;
	}

	.item {
		width: 100%;
		height: 200rpx;
		margin-top: 20rpx;
	}

	.item2 {
		width: 100%;
		height: 150rpx;
		margin-top: 20rpx;
	}
</style>