<template>
	<view class="hasfixedbottom">
		<view class="searchbar">
			<uni-easyinput placeholderStyle="font-size:30rpx" :input-border="false" prefixIcon="search"
				v-model="queryParams.name" placeholder="团体会员名称" @blur="getList()" @clear="getList()">
			</uni-easyinput>
		</view>
		<view class="indexboxre">
			<view class="tt">会员列表</view>
			<view class="userlist">
				<view class="item" v-for="(n,index) in list" :key="index">
					<view @click="checkThis(n)" v-if="n.canCommit">
						<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>
						<view class="name">
							{{n.name}}
						</view>
						<view class="name">
							<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 class="date">到期时间：{{n.validityDate?.slice(0,10)}}</view>
					</view>
				</view>
			</view>

		</view>

		<view class="fixedBottom">

			<button class="btn-red" @click="handleImport">导 入</button>
		</view>

	</view>
</template>

<script setup>
	import * as api from '@/common/api.js'
	import config from '@/config.js'
	import {
		ref,
		getCurrentInstance
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	const {
		proxy
	} = getCurrentInstance()
	const app = getApp();
	const queryParams = ref({
		showMyPersonFlag: 1,
		checkPaymentCommit: 1,
		queryParams: 1
	})
	const list = ref([])
	const total = ref(0)
	const userType = ref('')
	onLoad((option) => {
		userType.value = app.globalData.userType
		queryParams.value.paymentRangeId = option.rangeId
		getList()
	})

	function getList() {
		uni.showLoading({
			title:'加载中'
		})
		api.getMySonList(queryParams.value).then(res => {
			list.value = res.data.rows
			total.value = res.data.total
			uni.hideLoading()
		})
	}

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

	function handleImport() {
		var arr = []
		for (var n of list.value) {
			if (n.checked) {
				arr.push(n.memId)
			}
		}
		if (arr.length == 0) {
			uni.showToast({
				title: "请选择团体",
				icon: "none"
			})
			return
		}
		api.addGroupPaymentGroup({
			rangeId: queryParams.value.paymentRangeId,
			memIds: arr.join(',')
		}).then(res => {
			let path = `/group/addGroupMemberPay?rangeId=${res.data}`
			uni.redirectTo({
				url: path
			});
		})
	}
</script>

<style scoped lang="scss">
	.indexboxre {
		padding: 0 30rpx;

		.tt {
			font-size: 30rpx;
			margin: 0 0 30rpx;
			color: #4C5359;
		}

		position: relative;
		height: calc(100vh - 280rpx);
		overflow: auto;
	}

	.searchbar {
		display: flex;
		align-items: center;
		padding: 25rpx;
		box-sizing: border-box;

		:deep(.uni-easyinput .uni-easyinput__content) {
			border-radius: 35rpx;
			border: none;
			height: 70rpx;
		}

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