<template>
	<view class="container">
		<uni-section :title="task !== null ? task.name : '当前无关爱行动'" type="line">
			<uni-list :border="true" v-if="list.length > 0">
				<view :id="item && item.residentId" class="delBox" v-for="(item, index) in list" :key="index" >
					<uni-list-chat :class="{ left: isId == item.residentId }" class="item" :avatar="item.avatar || '/static/user1.png'" :title="item.name" :note="item.phone" badge-positon="left">
						<view class="chat-custom-right">
							<text class="chat-custom-text">{{ item && item.status == 0 ? '未报平安' : '已报平安' }}</text>
							<button type="primary" size="mini" :disabled="item && item.status == 1" @click="filing(item)">报平安</button>
						</view>
					</uni-list-chat>
				</view>
			</uni-list>
			<text v-if="list.length <= 0 && task !== null" class="chat-custom-text msgText">请完善成员信息 / 家庭成员审核中</text>
		</uni-section>
	</view>
</template>

<script>
	import requestFamily from '../../api/family.js';
	export default {
		data() {
			return {
				isId: '',
				startX: 0,
				extraIcon: {
					color: '#ff8319',
					size: '20',
					type: 'plusempty'
				},
				list: [],
				natTaskId: '',
				task: null
			}
		},
		async mounted() {
			const task = await requestFamily.runningTask();
			if (task.code == 200 && task.data.length > 0) {
				this.task = task.data[0];
				this.natTaskId = task.data[0].natTaskId;
				this.query();
			}
		},
		onShow() {
			this.isId = '';
		},
		methods: {
			async query() {
				const residentIds = [];
				const familyInfo = await requestFamily.getUserAll();
				console.log(familyInfo)
				familyInfo.data.forEach(e => residentIds.push(e.residentId))
				if (familyInfo.code == 200) {
					const membersStatus = await requestFamily.membersStatus({ residentIds, natTaskId: this.natTaskId });
					familyInfo.data = familyInfo.data.map(e => {
						const resident = membersStatus.data.find(j => j.residentId == e.residentId);
						return { ...e, status: resident?.status || 0 };
					})
					console.log(familyInfo.data)
					this.list = familyInfo.data;
				}
			},
			// 报备
			async filing(e) {
				const res = await requestFamily.filing({ residentId: e.residentId, natTaskId: this.natTaskId });
				if (res.code == 200) {
					this.query();
					uni.showToast({
						title: '已报平安',
						duration: 2000,
					});
				}
			}
		}
	}
</script>

<style>
	.container {
		width: 100%;
	}
	.addUser {
		display: block;
		/* width: 90%; */
		margin: 5px auto;
	}
	.chat-custom-text {
		font-size: 12px;
		color: #999;
		width: 100%;
		text-align: center;
		display: block;
	}
	.addUser .uni-list-item__container {
		flex: none;
		margin: 0 auto;
	}
	.addUser .uni-list-item__content-title {
		color: #ff8319;
	}
	.delBox {
		display: flex;
		width: 100%;
		overflow: hidden;
	}
	.item {
		width: 100%;
	}
	.del {
		display: block;
		width: 50px;
		background: red;
	}
	.right {
		margin-right: -100px;
	}
	.uni-icons {
		display: block;
		width: 100%;
		text-align: center;
		line-height: 2.3em;
	}
	.left {
		margin-left: -100px;
	}
	.compose {
		background: #1aad19;
	}
	.msgText {
		padding-bottom: 20px;
	}
</style>
