<template>
	<view class="hasfixedbottom">

		<view class="searchbar">
			<uni-easyinput placeholderStyle="font-size:30rpx" :input-border="false" prefixIcon="search"
				v-model="query.name" placeholder="搜索团体会员名称" @blur="getSonList" @clear="getSonList">
			</uni-easyinput>
			<view class="invertedbtn-red" @click="getSonList">搜索</view>
		</view>
		<view class="userlist">
			<view class="item" v-for=" (n,index) in studentList" :key="index">
				<view @click="checkThis(n)">
					<image class="icon" v-if="n.checked" :src="config.baseUrl_api+'/fs/static/member/dx_dwn.png'" />
					<image class="icon" v-else :src="config.baseUrl_api+'/fs/static/member/dx.png'" />
				</view>
				<view class="w100">
					<view class="name">{{n.name}} <text v-if="n.memCode">({{n.memCode}})</text></view>
					<view class="flexbox" style="padding: 0">
						<view class="date">到期时间
							<text v-if="n.validityDate">{{n.validityDate?.slice(0,10)}}</text>
							<text v-else>--</text>
						</view>
						<view class="date w50">团体类型
							<text v-if="n.deptType == 2">一级协会</text>
							<text v-if="n.deptType == 3">直属协会</text>
							<text v-if="n.deptType == 4">二级协会</text>
							<text v-if="n.deptType == 5">三级协会</text>
							<text v-if="n.deptType == 6">职业性团体会员</text>
						</view>
					</view>
				</view>
			</view>
			<view class="nodata" v-if="studentList.length==0">
				<image mode="aspectFit" src="/static/nodata.png"></image>
				<text>无可变更会员</text>
			</view>
		</view>
		<uni-load-more @clickLoadMore="clickLoadMore" :contentText="contentText" :status="status"></uni-load-more>

		<view class="fixedBottom" v-if="studentList.length!=0">
			<button class="btn-red" @click="handleImport">批量添加</button>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	import * as api from '@/common/api.js'
	import _ from 'underscore'
	import config from '/config.js'
	const query = ref({
		pageNum: 1,
		pageSize: 10,
		paymentRangeId: -1,
	})
	const total = ref(0)
	const list = ref([])
	const studentList = ref([])
	const type = ref('')
	const form = ref({})
	const status = ref('no-more')
	const contentText = ref({
		contentdown: "点击加载更多",
		contentrefresh: "正在加载...",
		contentnomore: "没有更多数据了"
	})

	onLoad((option) => {
		if (option.rangeId) {
			query.value.paymentRangeId = option.rangeId
		}
		getList()
	})
	onShow(() => {})

	function clickLoadMore() {
		getList()
	}

	function getList() {
		if (total.value > 0 && total.value > studentList.value.length) {
			uni.showLoading({
				title: '加载中',
				mask: true
			})
			status.value = 'loading'
			query.value.pageNum += 1
			api.getMySonList(query.value).then(res => {
				studentList.value = _.concat(studentList.value, res.data.rows)
				total.value = res.data.total
				if (total.value > studentList.value.length) {
					status.value = 'more'
				} else {
					status.value = 'no-more'
				}
				uni.hideLoading()
			})
		} else if (total.value == 0) {
			getSonList()
		}
	}

	function getSonList() {
		query.value.pageNum = 1
		api.getMySonList(query.value).then(res => {
			studentList.value = res.data.rows
			total.value = res.data.total
			if (total.value > studentList.value.length) {
				status.value = 'more'
			} else {
				status.value = 'no-more'
			}
		})
	}

	function checkThis(n) {
		if (n.checked) {
			n.checked = false
		} else {
			n.checked = true
		}
	}

	function handleImport() {
		var arr = []
		for (var n of studentList.value) {
			if (n.checked) {
				arr.push(n.memId)
			}
		}
		api.addGroupInfoModeToRange({
			memId: arr,
			rangeIdStr: query.value.paymentRangeId
		}).then(res => {
			var pages = getCurrentPages()
			var prevPage = pages[pages.length - 2]
			prevPage.onShow(res.data)
			uni.navigateBack()
		})
	}
</script>
<style scoped lang="scss">
	.searchbar {
		display: flex;
		align-items: center;
		padding: 25rpx;
		box-sizing: border-box;

		:deep(.uni-easyinput .uni-easyinput__content) {
			border-radius: 35rpx;
			height: 66rpx;
			border: 1px solid #AD181F !important;
		}

		:deep(.uni-easyinput__content-input) {
			font-size: 26rpx;
		}

		.invertedbtn-red {
			border-radius: 50px;
			margin-left: 20rpx;
			background-color: #fff;

			font-size: 30rpx;
			padding: 10rpx 20rpx;
		}
	}

	.userlist {
		padding: 0 25rpx;
	}

	.flexbox {
		padding: 30rpx 30rpx 0
	}

	.danger-button {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.collapseBody {
		padding: 0 30rpx;
		box-sizing: border-box;
		font-size: 28rpx;

		view {
			margin: 0 0 20rpx;

			label {
				width: 7em;
				color: #999;
				display: inline-block;
				text-align: right;
			}
		}
	}

	.popBody {
		background: #fff;
		padding: 30rpx;
	}

	.text-center .btn-red-kx {
		border-radius: 50px;
		font-size: 28rpx;
	}

	:deep(.file-picker__progress) {
		opacity: 0;
	}
</style>