<template>
	<view class="hasfixedbottom">
		<view class="searchbar">
			<uni-easyinput placeholderStyle="font-size:30rpx" :input-border="false" prefixIcon="search"
				v-model="queryParams.personName" placeholder="搜索姓名或证件号码" @blur="getList" @clear="getList">
			</uni-easyinput>
			<view class="invertedbtn-red" @click="goVipList">+ 添加会员</view>
		</view>

		<view class="vipData mtb30">
			<view> 人数合计：<text>{{ formData.personCount? formData.personCount:0 }}</text>人 </view>
			<view> 新会员合计：<text>{{ formData.newPersonCount? formData.newPersonCount:0 }}</text>人 </view>
			<view> 续费会员合计：<text>{{ formData.oldPersonCount? formData.oldPersonCount:0 }}</text>人 </view>
		</view>

		<uni-swipe-action>
			<uni-swipe-action-item class="personitem" v-for="n in list">
				<view class="content-box">
					<view class="flexbox">
						<view class="colorful">{{n.personName?.slice(0,1)}}</view>
						<view>{{n.personName}}
							<view class="date">
								证件号：{{n.personIdcCode}}
							</view>
						</view>
					</view>
					<view class="flexbox" @click="changeYear(n)">
						<view class="text-danger">({{yearlist[n.payYear-1].text}})</view>
						<uni-icons type="forward" size="18" color="#999"></uni-icons>
					</view>

				</view>
				<template v-slot:right>
					<view class="slot-button">
						<view @click="handleDelete(n)">
							<uni-icons type="trash-filled" color="#fff" size="20"></uni-icons>
							<text class="slot-button-text">删除</text>
						</view>
					</view>
				</template>
			</uni-swipe-action-item>
		</uni-swipe-action>

		<view class="nodata" v-if="list.length==0">
			<image mode="aspectFit" src="/static/nodata.png"></image>
			<button class="btn-red" @click="goVipList">+ 在线选择</button>
		</view>

		<view class="fixedBottom">
			<button class="btn-red" :disabled="list?.length <= 0" @click="commitFN">保存并提交</button>
		</view>

		<uni-popup ref="pickView" type="bottom">
			<view class="pickViewBox">
				<view v-for="n in yearlist" @click="bindyear(n)">
					{{n.text}}<uni-icons v-show="n.value == (nowYear)" type="checkmarkempty" size="20"
						color="green"></uni-icons>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		onShow,
		onLoad
	} from '@dcloudio/uni-app'
	import * as api from '@/common/api.js'
	import config from '@/config.js'
	const app = getApp()
	const queryParams = ref({
		rangeId: -1
	})
	const formData = ref({})
	const list = ref({})
	const total = ref(0)
	const nowYear = ref(1)
	const nowItem = ref({})
	const pickView = ref(null)
	const visible = ref(true)
	const yearlist = ref([{
		text: '一年',
		value: 1
	}, {
		text: '二年',
		value: 2
	}, {
		text: '三年',
		value: 3
	}, {
		text: '四年',
		value: 4
	}, {
		text: '五年',
		value: 5
	}])
	onLoad((option) => {
		if (option.rangeId) {
			queryParams.value.rangeId = option.rangeId
		}
	})
	onShow(() => {
		if (app.globalData.isLogin) {
			init()
		} else {
			app.firstLoadCallback = () => {
				init()
			};
		}
	})

	function init() {
		getList()
	}

	function getList() {
		api.addSelectPageList(queryParams.value).then(res => {
			list.value = res.pageData.rows
			total.value = res.pageData.total
			formData.value = res
		})
	}

	function goVipList() {
		let path = `/pages/personalVip/vipList?rangeId=${queryParams.value.rangeId}`
		uni.redirectTo({
			url: path
		});
	}

	function changeYear(e) {
		nowItem.value = e
		nowYear.value = e.payYear
		pickView.value.open()

	}

	function bindyear(n) {
		nowYear.value = n.value
		pickView.value.close()
		nowItem.value.payYear = n.value
		api.editYear(nowItem.value.payId, nowItem.value.payYear).then(res => {
			for (var nn of list.value) {
				if (nn.perId == nowItem.value.perId) {
					nn.payYear = nowItem.value.payYear
				}
			}
		})
	}

	function handleDelete(row) {
		uni.showModal({
			title: '提示',
			content: `确定删除${row.personName}吗`,
			success: function(res) {
				if (res.confirm) {
					api.delPayment([row.payId]).then(res => {
						uni.showToast({
							title: '删除成功'
						})
						if (list.value.length == 1) {
							queryParams.value.rangeId = -1
						}
						getList()
					})
				}
			}
		})
	}
	function commitFN(){
		if (queryParams.value.rangeId == -1) return
		api.commitRenew(queryParams.value.rangeId).then(res=>{
			uni.showToast({
				title: '提交成功'
			})
			uni.navigateBack()
		})
	}
</script>

<style scoped lang="scss">
	.pickViewBox {
		background-color: #fff;
		text-align: center;

		view {
			line-height: 3;
		}
	}

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

		.invertedbtn-red {
			margin-left: 15rpx;
			font-size: 30rpx;
			padding: 16rpx 20rpx;
			box-sizing: border-box;
			border-radius: 50rpx;
			background-color: #fff;
		}

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

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

	.slot-button {
		display: flex;
		align-items: center;
		padding: 0 20px;
		text-align: center;
		background-color: #E60012;
	}

	.slot-button-text {
		color: #ffffff;
		display: block;
		font-size: 14px;
	}

	.personitem {
		background: #fff;
		box-sizing: border-box;
		margin-bottom: 30rpx;

		.content-box {
			display: flex;
			align-items: center;
			padding: 16rpx;
			border-radius: 15rpx;
			justify-content: space-between;

			.noborder {
				border: none;

				:deep(.uni-select) {
					border: none;
					text-align: right;
				}
			}
		}

		.flexbox {
			align-items: center;
		}

		&:nth-child(3n) .colorful {
			background: #014A9F;
		}

		&:nth-child(3n+1) .colorful {
			background: #AD181F;
		}

		&:nth-child(3n+2) .colorful {
			background: #D3B267;
		}
	}

	.colorful {
		width: 100rpx;
		margin-right: 14rpx;
		height: 100rpx;
		line-height: 100rpx;
		font-size: 44rpx;
		color: #fff;
		text-align: center;
		border-radius: 50%;
	}
</style>