<template>
	<view class="memberManage">
		<view class="text-right basis-df member-btn margin">
			<span class="bg-white" @click.stop="add">添加成员+</span>
		</view>
		<view class="member">
			<view class="member-item  margin-top" v-for="(item,index) in memberList" :key="index" hover-class="cell-hover"
			 :hover-stay-time="50">
				<view>
					<view class="left-content text-left">
						<view class="text-df" @click.stop="viewDetail(item)">
							{{item.name}}
						</view>
						<view class="member-btn text-sm">
							<span @click.stop="signUp(item)" v-if="item.auditStatus != '-3'">
								筛查报名
							</span>

							<span @click.stop="appointment(item.id)" v-if="item.auditStatus == '-3'">
								预约胃镜
							</span>

							<span @click.stop="archives(item.id)">
								筛查档案
							</span>

							<span @click.stop="communicate(item)">
								筛查沟通
							</span>

							<span @click.stop="progress(item)">
								筛查进展
							</span>
						</view>
						<view class="text-xs  right-content">
							<view class='cu-tag bg-blue round margin-right-xs' style="margin-top: -4upx;">{{ item.relation }}</view>
							&ensp;{{item.reportTime}}
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="" v-if="memberList.length == 0">
			<view class="noneInfo">
				<view class="noneInfoImg">
				</view>
				<view class="margin-top-sm text-center">
					暂无相关信息
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import mixPulldownRefresh from '@/components/mix-pulldown-refresh/mix-pulldown-refresh';
	import mixLoadMore from '@/components/mix-load-more/mix-load-more';
	let windowWidth = 0,
		scrollTimer = false,
		tabBar;
	export default {
		components: {
			mixPulldownRefresh,
			mixLoadMore,
		},
		data() {
			return {
				relation: '',
				enableScroll: false,
				loadMoreStatus: 0,
				memberList: [],
				pageNum: 1,
				pageSize: 1000

			}
		},
		mounted() {
			// 获取屏幕宽度
			windowWidth = uni.getSystemInfoSync().windowWidth;
			this.getMember()
		},
		methods: {
			viewDetail(item) {
				if (item.relation) {
					uni.navigateTo({
						url: "/person/memberManage/add?id=" + item.id
					})
				} else {
					uni.navigateTo({
						url: `/person/memberManage/add?id=${item.id}&type=self`
					})
				}
			},

			signUp(item) {
				uni.navigateTo({
					url: "/personModule/signUp/index?type=self&id=" + item.id
				})
			},

			appointment(id) {
				// uni.showToast({
				// 	icon: 'none',
				// 	title: "此功能尚未开发,敬请期待！"
				// })
				uni.navigateTo({
					url: "/educationViews/details/index?id=5f55f1a9e4b0397dc58ab18f"
				})
			},

			archives(id) {
				uni.navigateTo({
					url: "/personModule/screen/index?id=" + id
				})
			},

			communicate(obj) {
				let item = {
					hospitalId: obj.hospitalId,
					id: obj.id,
					name: obj.name
				}
				uni.navigateTo({
					url: `/personModule/communicate/index?obj=` + encodeURIComponent(JSON.stringify(item))
				})
			},

			progress(item) {
				uni.navigateTo({
					url: `/person/progress/index?id=${item.id}&sampleId=${item.sampleId}`
				})
			},

			add() {
				if (this.$store.getters.userInfo.name) {
					uni.navigateTo({
						url: "add"
					})
				} else {
					uni.showToast({
						icon: 'none',
						title: "请先完善个人信息！"
					})
					// #ifdef MP-WEIXIN
					setTimeout(function() {
						uni.navigateTo({
							url: '/person/personInfo/index?url=' + encodeURIComponent(JSON.stringify('/person/memberManage/add')),
						});
					}, 1500);
					// #endif
				}
			},

			// 获取成员列表
			getMember() {
				const data = {
					params: {
						pageNum: this.pageNum,
						pageSize: this.pageSize
					}
				}
				this.$http.get(`/gastric-cancer-data/wechat/report/member/page`, data).then(res => {
					const d = res.data
					if (d.code == 1) {
						this.memberList = d.object.list
						let relationPicker = this.$store.getters.familyRelation
						
						console.log(this.$store.getters.familyRelation)
							for (let i = 0; i < this.memberList.length; i++) {
						if (this.memberList[i].relation) {
							console.log(this.memberList[i].relation)
								for (let j = 0; j < relationPicker.length; j++) {
									if (this.memberList[i].relation == relationPicker[j].value) {
										this.memberList[i].relation = relationPicker[j].label
									}
								}
							}else {
							this.memberList[i].relation = "非亲属"
						}
						} 
					}
				}).catch(err => {
					console.log(err)
				})
			},

		}
	}
</script>

<style lang="scss" scoped>
	.memberManage {
		height: 100%;

		span {
			border: 1px solid rgba(153, 153, 153, 0.4);
			padding: 8upx 20upx;
			border-radius: 20upx;
		}

		.member {
			padding: 0 30upx;
			padding-bottom: 30upx;

			.left-content {
				color: #000;
			}

			.right-content {
				vertical-align: bottom;
				padding-top: 14upx;
				color: rgba(0, 0, 0, 0.5);
			}

			.member-item {
				background-color: #FFFFFF;
				// border:2upx solid rgba(153, 153, 153, 0.4);
				padding: 20upx;
				border-radius: 10upx;

				.member-btn {
					line-height: 80upx;

					span {
						margin-left: 15upx;
						border: 1px solid rgba(153, 153, 153, 0.4);
						padding: 8upx 20upx;
						border-radius: 20upx;

						&:first-child {
							margin-left: 0;
						}
					}
				}

				&.cell-hover {
					background: #fafafa;
				}
			}
		}

		.cu-tag {
			padding: 0px 12upx;
			height: 42upx;
			line-height: 42upx;
			font-size: 20upx;
		}
	}

	.panel-scroll-box {
		height: 100%;
	}

	.noneInfo {
		margin-top: 150upx;

		.noneInfoImg {
			background-image: url('../../static/noneInfo.png');
			height: 128upx;
			background-position: center;
			background-repeat: no-repeat;
		}
	}
</style>
