<template>
	<view>
		<view class="searchbar">
			<uni-easyinput placeholderStyle="font-size:30rpx" :input-border="false" prefixIcon="search"
				v-model="query.name" placeholder="搜索姓名或证件号码" @blur="getList()" @clear="getList()">
			</uni-easyinput>
		</view>
		<view class="indexboxre">
			<view class="tt">会员列表</view>
			<!-- <uni-indexed-list :options="list" :showSelect="true" @click="bindClick"></uni-indexed-list> -->
			<view class="userlist">
				<view class="item" v-for="n in list">
					<view @click="checkThis(n)">
						<image class="icon" v-if="n.checked" src="@/static/member/dx_dwn.png" />
						<image class="icon" v-else src="@/static/member/dx.png" />
					</view>
					<view class="photobox">
						<image class="photo" v-if="n.photo" :src="config.baseUrl_api+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}}</view>
						<view class="date" v-else>注册时间：{{n.createTime}}</view>
					</view>
					<view class="status"> 
						<text v-if="n.certStage==0" class="text-green">
							新会员
						</text>
						<text v-if="n.certStage==1" class="text-warning">
							待提交
						</text>
						<text v-if="n.certStage==2" class="text-red">
							缴费中
						</text>
						<text v-if="n.certStage==3">
							正常
						</text>
						<text v-if="n.certStage==4" class="text-gray">
							过期
						</text>
					</view>
				</view>
			</view>

		</view>

		<view class="fixedBottom">

			<button class="btn-red" @click="goAddRenew">添 加</button>
		</view>

	</view>
</template>

<script setup>
	import * as api from '@/common/api.js'
	import {
		ref,
		getCurrentInstance
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	const {
		proxy
	} = getCurrentInstance()
	const app = getApp();
	const query = ref({
		pageNum: 1,
		pageSize: 20,
		showMyPersonFlag: null,
		multiDeptFlag: 1,
		perType: 1,
		checkPaymentCommit: 1
	})
	const list = ref([])
	const total = ref(0)
	const userType = ref('')
	onLoad(() => {
		userType.value = app.globalData.userType
		getList()
	})

	function getList() {
		if (userType.value == '4') {
			// 道馆
			query.value.multiDeptFlag = null
			query.value.showMyPersonFlag = 1
		}
		api.selectPageList(query.value).then(res => {
			for (var p of res.rows) {
				if (p.photo) {
					p.photo = config.fileUrl_api + p.photo
					console.log(p.photo)
				}
			}
			list.value = res.rows
			total.value = res.total
		})
	}

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

	function goAddRenew() {
		uni.navigateBack()
	}
	function checkThis(n){
		if(n.checked){
			n.checked = false
		}else{
		n.checked = true	
		}
	}
	function checkboxChange(e) {
		let values = e.detail.value;
		for (var n of list.value) {
			if (values.includes(n)) {
				proxy.$set(n, 'checked', true)
			} else {
				proxy.$set(n, 'checked', false)
			}
		}
	}
</script>

<style scoped lang="scss">


	.indexboxre {
		padding: 0 30rpx;

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

		position: relative;
		height: calc(100vh - 300rpx);
	}

	.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>