<template>
	<view class="page">
		<u-navbar title="叫号控制" :border-bottom="false" :background="bgc" back-icon-color="#fff" title-color='#fff'
			title-size='36' height='36' id="navbar">
		</u-navbar>
		
		<view class="content">
			<!-- 头部区域 -->
			<view class="header">
				<view class="date-section" @click="show = true">
					<view class="date">{{ currentDate }}</view>
					<view class="calendar-icon"><image src="https://api.ccttiot.com/smartmeter/img/static/uIKD9zzjb0jlIWmHrtpz" mode=""></image> </view>
				</view>
				<view class="search-section">
					<input 
						class="search-input" 
						placeholder="输入关键字查询" 
						v-model="searchKeyword"
						placeholder-class="search-placeholder"
					/>
					<view class="search-icon"><image src="https://api.ccttiot.com/smartmeter/img/static/urVMNY8rV4QlGT923KEo" mode=""></image> </view>
				</view>
			</view>
			
			<!-- 统计信息 -->
			<view class="statistics">
				<view class="stat-text">排队{{ tjobj.pending == undefined ? '--' : tjobj.pending}} 叫号{{ tjobj.calling == undefined ? '--' : tjobj.calling }} 过号{{ tjobj.passed == undefined ? '--' : tjobj.passed }} 核销{{ tjobj.writtenOff == undefined ? '--' : tjobj.writtenOff }} 全部{{ tjobj. totalCount == undefined ? '--' : tjobj. totalCount }}</view>
			</view>
			
			<!-- 导航标签 -->
			<view class="nav-tabs">
				<view 
					v-for="(tab, index) in tabs" 
					:key="index"
					class="tab-item"
					:class="{ active: activeTab === tab.key }"
					@click="switchTab(tab.key)"
				>
					<view class="tab-text">{{ tab.name }}</view>
				</view>
			</view>
			
			<!-- 队列列表 -->
			<view class="queue-list">
				<view v-if="loading" style="color:#808080;font-size:28rpx;padding:20rpx;">加载中...</view>
				<view v-else-if="!queueList.length" style="color:#808080;font-size:28rpx;padding:20rpx;">
					{{ errorMessage || '暂无数据' }}
				</view>
				<view 
					v-for="(item, index) in queueList" 
					:key="index"
					class="queue-item"
				>
					<view class="item-main">
						<view class="item-left">
							<view class="item-id">{{ item.number }}</view>
							<view class="item-time">取号时间: {{ item.createTime }}</view>
						</view>
						<view class="item-right">
							<view class="user-name">{{ item.nickName }}</view>
						<view class="status-badge" :class="'status-' + normalizeStatus(item.status)">
								<view class="status-text">{{ getStatusText(item.status) }}</view>
							</view>
						</view>
					</view>
					
					<!-- 分隔线 -->
					<view class="separator-line"></view>
					
					<view class="item-actions">
						<view class="action-buttons">
							<view 
								v-for="(action, actionIndex) in getAvailableActions(item.status)" 
								:key="actionIndex"
								class="action-btn"
								:class="action.type"
								@click="handleAction(action,item)"
							>
								{{ action.text }}
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<u-picker mode="time" v-model="show" :params="params" @confirm="btntime"></u-picker>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				params: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				show: false,
				bgc: {
					backgroundColor: "#000",
				},
				currentDate: '',
				searchKeyword: '',
					activeTab: 'all',
				tabs: [
					{ key: '1', name: '待叫号' },
					{ key: '2', name: '叫号中' },
					{ key: '4', name: '已过号' },
					{ key: '3', name: '已核销' },
					{ key: 'all', name: '全部' }
				],
					status:'',
					queueList: [],
					allList: [],
					stats: { inQueue: 0, calling: 0, missed: 0, verified: 0, total: 0 },
					loading: false,
					errorMessage: '',
					tjobj:{}
			}
		},

		onLoad(option) {
            
		},
		onShow() {
			const now = new Date();
			// 自动补零的格式化函数
			function formatDate(date, separator = '-', needPadZero = true) {
			  const year = date.getFullYear();
			  const month = needPadZero 
			    ? String(date.getMonth() + 1).padStart(2, '0') 
			    : date.getMonth() + 1;
			  const day = needPadZero 
			    ? String(date.getDate()).padStart(2, '0') 
			    : date.getDate();
			  return `${year}${separator}${month}${separator}${day}`;
			}
			// 使用示例
			const dateStr1 = formatDate(now);
			this.currentDate = dateStr1
			this.getlist()
			this.gettongji()
		},
		methods: {
			btntime(e){
				console.log(e);
				this.currentDate = e.year + '-' + e.month + '-' + e.day
				this.searchKeyword = ''
				this.getlist()
				this.gettongji()
			},
			// 获取所有统计
			gettongji(){
				this.$u.get(`/bst/queueUser/selectCount?storeId=${this.$store.state.storeId}&timeRange=${this.currentDate + ',' + this.currentDate}`).then(res =>{
					if(res.code == 200){
						this.tjobj = res.data
					}
				})
			},
			// 规范状态为统一的 key
			normalizeStatus(status) {
				if (status === 1 || status === '1') return 'inQueue'
				if (status === 2 || status === '2') return 'calling'
				if (status === 3 || status === '3') return 'verified'
				if (status === 4 || status === '4') return 'missed'
				if (status === 5 || status === '5') return 'cancelled'
				return status
			},
			// 计算统计
			updateStats(list) {
				const counters = { inQueue: 0, calling: 0, missed: 0, verified: 0, total: 0 }
				(list || []).forEach(item => {
					const key = this.normalizeStatus(item.status)
					if (Object.prototype.hasOwnProperty.call(counters, key)) counters[key]++
					counters.total++
				})
				this.stats = counters
			},
			// 本地过滤（按标签与关键字）
			getFilteredList(list) {
				const keyword = (this.searchKeyword || '').trim()
				return (list || []).filter(item => {
					const matchTab = this.activeTab === 'all' || this.normalizeStatus(item.status) === this.normalizeStatus(this.activeTab)
					const text = `${item.number || ''} ${item.nickName || ''}`
					const matchKeyword = !keyword || text.indexOf(keyword) !== -1
					return matchTab && matchKeyword
				})
			},
			// 获取排队信息
			getlist(){
				this.loading = true
				this.errorMessage = ''
				const storeId = this.$store && this.$store.state ? this.$store.state.storeId : ''
				if(!storeId){
					uni.showToast({ title:'缺少门店信息', icon:'none' })
					this.allList = []
					this.queueList = []
					this.updateStats([])
					this.loading = false
					return
				}
				const query = [`storeId=${storeId}`]
				if (this.status) query.push(`status=${this.status}`)
				this.$u.get(`/bst/queueUser/list?storeId=${storeId}&status=${this.status}&pageNum=1&pageSize=999&orderByColumn=createTime&isAsc=desc&timeRange=${this.currentDate + ',' + this.currentDate}`).then(res =>{
					if(res.code == 200){
						this.queueList =  res.rows
						this.allList = res.rows
					}else{
						this.allList = []
						this.queueList = []
						this.errorMessage = (res && res.msg) ? res.msg : '加载失败'
					}
				}).catch((e)=>{
					this.allList = []
					this.queueList = []
					this.errorMessage = '网络错误'
				}).finally(()=>{ this.loading = false })
			},
			refreshList(){ this.getlist() },
			// 通用队列操作：尝试多个可能的后端端点
			switchTab(tabKey) {
				this.activeTab = tabKey
				this.status = tabKey === 'all' ? '' : tabKey
				// 切换标签时重新拉取数据，避免后端过滤和本地过滤不一致
				this.searchKeyword = ''
				this.getlist()
			},
			showDatePicker() {
				// 兜底处理：先不弹日期选择，避免环境不支持时报错
				uni.showToast({ title: '日期筛选暂未开通', icon: 'none' })
			},
		loadDataByDate(date) {
			// 根据选择的日期加载数据
			console.log('加载日期数据:', date);
			// 这里可以调用API获取指定日期的数据
			// 例如：this.fetchQueueData(date);
		},
			getStatusText(status) {
				const statusTexts = {
					'inQueue': '待叫号',
					'calling': '叫号中',
					'missed': '已过号',
					'verified': '已核销',
					'cancelled': '已取消'
				};
				const key = this.normalizeStatus(status)
				return statusTexts[key] || '';
			},
			getAvailableActions(status) {
			const actionMap = {
				'inQueue': [
					{ text: '叫号', action: 'call', type: 'primary' },
					{ text: '过号', action: 'miss', type: 'primary' },
					{ text: '取消', action: 'cancel', type: 'secondary' },
					{ text: '核销', action: 'verify', type: 'primary' }
				],
				'calling': [
					{ text: '过号', action: 'miss', type: 'primary' },
					{ text: '取消', action: 'cancel', type: 'secondary' },
					{ text: '核销', action: 'verify', type: 'primary' }
				],
				'missed': [
					{ text: '恢复叫号', action: 'restore', type: 'primary' },
					{ text: '取消', action: 'cancel', type: 'secondary' }
				],
				'verified': [
					// { text: '恢复排队', action: 'restore', type: 'primary' },
					// { text: '取消', action: 'cancel', type: 'secondary' }
				]
			};
				const key = this.normalizeStatus(status)
				return actionMap[key] || [];
		},
		// 点击操作
		handleAction(action,item) {
			console.log(action,item);
			let that = this
			uni.showModal({
				title: '提示',
				content: `您确定要执行${action.text}操作吗？`,
				success: (res) => {
					if (res.confirm) {
						if(action.text == '叫号' || action.text == '恢复叫号'){
							let data = {
								queueUserId:item.id
							}
							that.$u.post(`/bst/queueUser/calling`,data).then(res =>{
								if(res.code == 200){
									uni.showToast({ title:'叫号成功', icon:'success',duration:3000})
									that.getlist()
								}else{
									uni.showToast({ title:res.msg, icon:'none',duration:3000})
								}
							})
						}else if(action.text == '过号'){
							let data = [item.id]
							that.$u.post(`/bst/queueUser/pass`,data).then(res =>{
								if(res.code == 200){
									uni.showToast({ title:'过号成功', icon:'success',duration:3000})
									that.getlist()
								}else{
									uni.showToast({ title:res.msg, icon:'none',duration:3000})
								}
							})
						}else if(action.text == '取消'){
							let data = [item.id]
							that.$u.post(`/bst/queueUser/cancelQueue`,data).then(res =>{
								if(res.code == 200){
									uni.showToast({ title:'取消成功', icon:'success',duration:3000})
									that.getlist()
								}else{
									uni.showToast({ title:res.msg, icon:'none',duration:3000})
								}
							})
						}else if(action.text == '核销'){
							that.$u.post(`/app/queueUser/generateCode/${item.id}`).then(res => {
								if (res.code == 200) {
									 let data = {
									 	id:item.id,
									 	verificationCode:res.data.verificationCode
									 }
									 that.$u.post(`/bst/queueUser/verification`,data).then(res =>{
									 	if(res.code == 200){
									 		uni.showToast({ title:'核销成功', icon:'success',duration:3000})
									 		that.getlist()
									 	}else{
									 		uni.showToast({ title:res.msg, icon:'none',duration:3000})
									 	}
									 })
								}else{
									uni.showToast({ title:res.msg, icon:'success',duration:3000})
								}
							})
						}
					}
				}
			})
		},
		},
		watch:{
				searchKeyword(){
					this.queueList = this.getFilteredList(this.allList)
				}
			}
	}
</script>

<style lang="scss">
	page {
		background: #0c0c0c;
	}
	
	.page {
		min-height: 100vh;
		background: #0c0c0c;
	}
	
	.content {
		padding: 30rpx;
	}
	
	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 40rpx;
	}
	
	.date-section {
		display: flex;
		align-items: center;
		gap: 8rpx;
		cursor: pointer;
		padding: 10rpx;
		border-radius: 8rpx;
		transition: background-color 0.3s;
		
		&:active {
			background-color: rgba(255, 255, 255, 0.1);
		}
		
		.date {
			color: #fff;
			font-size: 36rpx;
			font-weight: 500;
		}
		
		.calendar-icon {
			image{
				width: 20rpx;
				height: 20rpx;
			}
		}
	}
	
	.search-section {
		position: relative;
		flex: 1;
		margin-left: 40rpx;
		
		.search-input {
			width: 300rpx;
			height: 80rpx;
			background: #1a1a1a;
			border: 1px solid #333;
			border-radius: 10rpx;
			padding: 0 70rpx 0 35rpx;
			color: #fff;
			font-size: 30rpx;
		}
		
		.search-placeholder {
			color: #999;
			font-size: 30rpx;
		}
		
		.search-icon {
			position: absolute;
			right: 64rpx;
			top: 50%;
			transform: translateY(-50%);
			font-size: 28rpx;
			color: #fff;
			image{
				width: 26rpx;
				height: 26rpx;
			}
		}
	}

	.refresh-btn{
		margin-left: 20rpx;
		padding: 12rpx 20rpx;
		border-radius: 10rpx;
		font-size: 24rpx;
		background: #FF8998;
		color: #fff;
		border: 1px solid #FF8998;
	}
	
	.statistics {
		padding: 20rpx 0;
		
		.stat-text {
			color: #808080;
			font-size: 30rpx;
			line-height: 1.5;
		}
	}
	
	.nav-tabs {
		display: flex;
		margin-bottom: 40rpx;
		border-bottom: 1px solid #333;
		
		.tab-item {
			flex: 1;
			text-align: center;
			padding: 25rpx 0;
			position: relative;
			
			.tab-text {
				color: #fff;
				font-size: 30rpx;
			}
			
			&.active {
				.tab-text {
					color: #fff;
				}
				
				&::after {
					content: '';
					position: absolute;
					bottom: -1px;
					left: 50%;
					transform: translateX(-50%);
					width: 80rpx;
					height: 6rpx;
					background: #FF8998;
					border-radius: 3rpx;
				}
			}
		}
	}
	
	.queue-list {
		.queue-item {
			background: #1a1a1a;
			border: 1px solid #333;
			border-radius: 20rpx;
			padding: 30rpx;
			margin-bottom: 20rpx;
			
			.item-main {
				display: flex;
				justify-content: space-between;
				align-items: flex-start;
				margin-bottom: 20rpx;
				
				.item-left {
					display: flex;
					flex-direction: column;
					gap: 12rpx;
					
					.item-id {
						color: #fff;
						font-size: 64rpx;
						font-weight: bold;
						line-height: 1;
					}
					
					.item-time {
						color: #999;
						font-size: 24rpx;
					}
				}
				
				.item-right {
					display: flex;
					flex-direction: column;
					align-items: flex-end;
					gap: 12rpx;
					
					.user-name {
						color: #fff;
						font-size: 28rpx;
					}
					
					.status-badge {
						padding: 6rpx 16rpx;
						border-radius: 10rpx;
						font-size: 22rpx;
						
						&.status-inQueue {
							background: #8883F0;
							color: #fff;
						}
						
						&.status-calling {
							background: #FF8998;
							color: #fff;
						}
						
						&.status-missed {
							background: #fff;
							color: #000;
						}
						
						&.status-verified {
							background: #FF8998;
							color: #fff;
						}
						
						&.status-cancelled {
							background: #666;
							color: #fff;
						}
					}
				}
			}
			
			.separator-line {
				height: 1px;
				background: #333;
				margin: 20rpx 0;
			}
			
			.item-actions {
				display: flex;
				justify-content: space-between;
				align-items: center;
				
				.action-buttons {
					display: flex;
					gap: 15rpx;
					
					.action-btn {
						padding: 12rpx 20rpx;
						border-radius: 10rpx;
						font-size: 24rpx;
						border: none;
						min-width: 100rpx;
						cursor: pointer;
						text-align: center;
						
						&.primary {
							background: #FF8998;
							color: #fff;
						}
						
						&.secondary {
							background: transparent;
							color: #FF8998;
							border: 1px solid #FF8998;
						}
					}
				}
				
				.details-btn {
					padding: 12rpx 20rpx;
					border-radius: 20rpx;
					font-size: 24rpx;
					background: #fff;
					color: #000;
					border: 1px solid #FF8998;
					min-width: 100rpx;
					cursor: pointer;
					text-align: center;
				}
			}
		}
	}
</style>