<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">会员列表<text class="text-danger">(列表只显示不在缴费中的个人会员)</text></view>
			<view class="userlist">
				<view class="item" v-for="(n,index) in list" :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="photobox">
						<image class="photo" v-if="n.photo" :src="n.photo" mode='aspectFill'></image>
						<view class="colorful" v-else>{{n.name.slice(0,1)}}</view>
					</view>
					<view @click="handleInfo(n)">
						<view class="name">{{n.name}}</view>
						<view class="date" v-if="n.validityDate">到期时间：{{n.validityDate?.slice(0,10)}}</view>
						<view class="date" v-else>注册时间：{{n.createTime?.slice(0,10)}}</view>
					</view>
					<view class="status"> 
						<text v-if="n.certStage==0" class="text-warning">
							新会员
						</text>
						<text v-if="n.certStage==1" class="text-warning">
							待提交
						</text>
						<text v-if="n.certStage==2" class="text-danger">
							缴费中
						</text>
						<text v-if="n.certStage==3" class="text-success">
							正常
						</text>
						<text v-if="n.certStage==4" class="text-gray">
							过期
						</text>
					</view>
				</view>
				<view class="nodata" v-if="list.length==0">
				  <image mode="aspectFit" :src="config.baseUrl_api + '/fs/static/nodata.png'"></image>
				  <text>暂无数据</text>
				</view>
			</view>
		</view>

		<view class="fixedBottom" v-if="list.length>0">
			<button class="btn-red" @click="handleImport">导入</button>
		</view>
	</view>
</template>

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

	async function getList() {
		const res = await api.selectPageList(queryParams.value)
		list.value = res.rows
		// 处理图片路径
		for(var l of list.value){
			if(l.photo&&l.photo.indexOf('http')==-1){
				l.photo = config.baseUrl_api + l.photo
			}
			// 初始化选中状态
			l.checked = false
		}
		total.value = res.total
	}

	function handleInfo(n) {
		uni.navigateTo({
			url: `/personalVip/detail?perId=${n.perId}`
		})
	}

	function goAddRenew() {
		uni.navigateBack()
	}
	
	function checkThis(n){
		n.checked = !n.checked
	}
	
	async function handleImport(){
		const arr = []
		const idcCodeList = []
		for(var n of list.value){
			if(n.checked){
				arr.push(n.perId)
				idcCodeList.push(n.idcCode)
			}
		}
		
		if(arr.length==0){
			uni.showToast({
				title:"请选择会员",
				icon:"none"
			})
			return
		}
		
		try {
		 	const res = 	await api.memberInsertPersons({
				rangeId: queryParams.value.paymentRangeId,
				year: 1,
				idcCode: idcCodeList
			})
			uni.navigateBack()
			
			uni.showToast({
				title: '导入成功',
				icon: 'success'
			})
		} catch (e) {
			uni.showToast({
				title: '导入失败',
				icon: 'none'
			})
			console.error('批量添加失败：', e)
		}
	}
</script>

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

		.tt {
			font-size: 30rpx;
			margin: 0 0 30rpx;
			color: #4C5359;
			text{font-size: 26rpx;margin-left: 10px;}
		}

		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;
		}
	}
	
	.userlist {
		.item {
			display: flex;
			align-items: center;
			padding: 20rpx 0;
			border-bottom: 1px solid #f5f5f5;
			
			.icon {
				width: 40rpx;
				height: 40rpx;
				margin:0 20rpx;
			}
			
			.photobox {
				margin-right: 20rpx;
				
				.photo {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
				}
				
				.colorful {
					width: 80rpx;
					height: 80rpx;
					line-height: 80rpx;
					text-align: center;
					color: #fff;
					border-radius: 50%;
					font-size: 36rpx;
				}
			}
			
			.name {
				font-size: 32rpx;
				font-weight: 500;
			}
			
			.date {
				font-size: 24rpx;
				color: #999;
				margin-top: 8rpx;
			}
			
			.status {
				margin-left: auto;
				font-size: 28rpx;
			}
		}
	}
	
	.nodata {
		text-align: center;
		padding: 100rpx 0;
		
		image {
			width: 200rpx;
			height: 200rpx;
			margin-bottom: 20rpx;
		}
		
		text {
			font-size: 28rpx;
			color: #999;
		}
	}
	
	.fixedBottom {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 20rpx;
		background: #fff;
		border-top: 1px solid #eee;
		
		.btn-red {
			width: 100%;
			height: 80rpx;
			line-height: 80rpx;
			background: #E60012;
			color: #fff;
			border-radius: 40rpx;
			font-size: 32rpx;
			border: none;
		}
	}
</style>