<template>
	<view>
		<z-paging ref="paging" v-model="infoList" @query="getQuery" emptyViewImg="/static/nodata.png">
			<view :slot="top">
				<uni-segmented-control class="whitebg" :current="current" :values="navs" @clickItem="onClickItem"
					styleType="text" activeColor="#AD181F"></uni-segmented-control>
				<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="vipData">
					<view>共计 <text>{{ forms?.total }}</text></view>
					<view>有效会员 <text>{{ forms?.effective }}</text></view>
					<view>过期会员 <text>{{ forms?.expired }}</text></view>
					<view>即将过期会员 <text>{{ forms?.soon }}</text></view>
				</view>
			</view>
			<view class="indexboxre">
				<view class="userlist mt30">
					<view class="item" v-for="n in infoList" :key="n.memId">
						<view @click="godetail(n)">
							<view class="name">{{n.name}}
								<!-- <text v-if="n.memCode"> ({{n.memCode}}) </text> -->
							</view>
							<view class="date">到期时间：{{n.validityDate?.slice(0,10)||'--'}}</view>
						</view>
						<view class="status" style="top: 10rpx;" @click="handleInfo(n)">
							<text class="text-success" v-if="n.valiStr=='正常'">{{n.valiStr}}</text>
							<text class="text-warning" v-if="n.valiStr=='已过期'">{{n.valiStr}}</text>
							<text class="text-primary" v-if="n.valiStr=='即将过期'">{{n.valiStr}}</text>
						</view>
						<view class="status" style="bottom: 20rpx;" @click="handleInfo(n)">
							<text class="text-success">{{n.validityMemberCount}}</text>/{{n.allMemberCount}}
						</view>
					</view>
				</view>
				<view class="nodata" v-if="infoList.length==0">
					<image mode="aspectFit" src="/static/nodata.png"></image>
					<text>暂无数据</text>
				</view>
			</view>
		</z-paging>
	</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: 8,
		fromList: 1,
		dType: 4,
		status: 2
	})
	const navs = ref(['道馆', '二级协会', '一级协会'])
	// const navs = ref(['道馆', '三级协会', '二级协会', '一级协会'])
	const list = ref([])
	const paging = ref(null)
	const forms = ref({})
	const infoList = ref([])
	const total = ref(0)
	const current = ref(0)
	const currentTabName = ref('道馆')
	const userType = ref('')
	const deptType = ref('')
	onLoad(() => {
		userType.value = app.globalData.userType
		deptType.value = app.globalData.deptType
		// 部门类型 1:中跆协 2:省 3:直属 4:市 5:区 6: 团体
		if (deptType.value == 2 || deptType.value == 3) {
			// navs.value = ['道馆', '三级协会', '二级协会']
			navs.value = ['道馆', '二级协会']
		} else if (deptType.value == 4) {
			// navs.value = ['道馆', '三级协会']
			navs.value = ['道馆']
		}
		getList()
		getGroupInfo()
	})

	function getList() {
		uni.showLoading({
			title: '加载中'
		})
		console.log(current.value, currentTabName.value, query.value.dType)
		query.value.pageNum = 1
		infoList.value = []
		if (paging.value) {
			paging.value.clear()
		}
		api.getGroupVipList(query.value).then(res => {
			// infoList.value = res.rows
			paging.value.complete(res.rows);
			total.value = res.total
			uni.hideLoading()
		})
	}

	function getQuery(pageNum, pageSize) {
		query.value.pageNum = pageNum
		query.value.pageSize = pageSize
		api.getGroupVipList(query.value).then(res => {
			// infoList.value = res.rows
			paging.value.complete(res.rows);
			total.value = res.total
			uni.hideLoading()
		})
	}

	function getGroupInfo() {
		uni.showLoading({
			title: '加载中'
		})
		api.getMemberCountInfo({
			dType: query.value.dType,
			fromList: 1
		}).then(res => {
			forms.value = res
			uni.hideLoading()
		})
	}

	function onClickItem(e) {
		uni.showLoading({
			title: '加载中'
		})
		current.value = e.currentIndex
		currentTabName.value = navs.value[e.currentIndex]
		if (currentTabName.value == '道馆') {
			query.value.dType = 4
		} else if (currentTabName.value == '三级协会') {
			query.value.dType = 3
		} else if (currentTabName.value == '二级协会') {
			query.value.dType = 2
		} else if (currentTabName.value == '一级协会') {
			query.value.dType = 1
		}
		getList()
		getGroupInfo()
	}

	function godetail(n) {
		uni.navigateTo({
			url: `/group/groupInfo?memId=${n.memId}&isR=true`
		})
	}

	function handleInfo(n) {
		if (n.allMemberCount == 0) {
			return
		}
		uni.navigateTo({
			url: `/group/detail?deptId=${n.deptId}`
		})
	}
</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>