<template>
	<view class="hasfixedbottom">
		<view class="searchbar" style="justify-content: center;">
			<view class="invertedbtn-red" @click="gochose">+ 在线选择</view>
		</view>
		<uni-swipe-action>
			<uni-swipe-action-item class="personitem" v-for="(n,index) in list" :key="index">
				<view class="content-box">
					<view style="width: 70%;">
						<view>{{n.memberName}}
							<view class="date">
								团体类型：
								<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">原有效期：<text>{{n.validityTime?.slice(0,10)}}</text></view>
						</view>
						<view class="flexbox">
							<view>
								单价 <view>¥{{n.unitPrice}}</view>
							</view>
							<view>
								总价 <view>
									<text class="text-danger">¥{{n.allPrice}}</text>
								</view>
							</view>
						</view>

					</view>
					<view class="flex" @click="changeYear(n)">
						<view class="text-danger">({{yearlist[n.renewYear-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>
			<text>请选择团队</text>
			<!-- <button class="btn-red" @click="gochose">+ 在线选择</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,index) in yearlist" :key="index" @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: 0
	})
	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.getPayList(queryParams.value).then(res => {
			list.value = []
			for(var item of res.rows){
				if (item.rangeId == queryParams.value.rangeId) {
					list.value = item.certList
					formData.value = item
					return
				}
			}
		})
	}

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

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

	}

	function bindyear(n) {
		nowYear.value = n.value
		pickView.value.close()
		nowItem.value.renewYear = n.value
		
		api.editGroupYear({certId:nowItem.value.certId, renewYear:nowItem.value.renewYear}).then(res => {
			for (var nn of list.value) {
				if (nn.perId == nowItem.value.perId) {
					nn.renewYear = nowItem.value.renewYear
				}
			}
			getList()
		})
	}

	function handleDelete(row) {
		uni.showModal({
			title: '提示',
			content: `确定删除${row.memberName}吗`,
			success: function(res) {
				if (res.confirm) {
					api.delcertified([row.certId]).then(res => {
						uni.showToast({
							title: '删除成功'
						})
						if (list.value.length == 1) {
							queryParams.value.rangeId = 0
						}
						getList()
					})
				}
			}
		})
	}

	function commitFN() {
		if (queryParams.value.rangeId == 0) return
		api.commitGroupPay(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;
			width: 100%;
			padding: 16rpx 20rpx;
			text-align: center;
			box-sizing: border-box;

			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 {background: #fff;
			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;
			font-size: 28rpx;
			color: #91929E;

			view {
				font-size: 26rpx;
				width: 40%;
				display: inline-block;
				margin-top: 10rpx;

				view {
					color: #0A1629;
					font-size: 28rpx;
				}
			}
		}

		&: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>