<template>
	<ul class="callRecord">
		<li v-for="item in datas.list" :key="item.id">
			<view>
				<view>
					{{item.callNum}}
				</view>
				<view>
					（{{item.note}}）
					
					
					244 900 
					397 1250
					
				</view>
			</view>
			<view :class="[item.state==3?'rightTopstyle':'rightTop']">
				{{filterEvent(item.state)}}
			</view>
			<view>
				<view>
					<view>
						时间
					</view>
					<view>
						{{item.callTime}}
					</view>
				</view>
				<view>
					<view>
						手机号
					</view>
					<view>
						{{item.phone}}
					</view>
				</view>
			</view>
		</li>
	</ul>
</template>

<script setup>
	import {
		onMounted,
		reactive
	} from 'vue';
	import {
		callTablecallRecord,
	} from '@/http/yskApi/requestAll.js';
	let datas = reactive({
		list: ""
	})
	onMounted(() => {
		getList()
	})

	function filterEvent(i) {
		// -1已取消 0排队中 1叫号中 2已入座 3 已过号 
		if (i == -1) {
			return '已取消'
		} else if (i == 0) {
			return '排队中'
		} else if (i == 1) {
			return '叫号中'
		} else if (i == 2) {
			return '已入座'
		} else if (i == 3) {
			return '已过号 '
		}
	}

	function getList() {
		callTablecallRecord({
			shopId: uni.getStorageSync('shopId'),
			page: 1,
			size: 9999
		}).then((res) => {
			datas.list = res.records
		})
	}
</script>

<style scoped lang="less">
	// * {
	// 	padding: 0;
	// 	margin: 0;
	// 	text-decoration: none;
	// 	outline: none;
	// }
	page {
		background: #f9f9f9;
	}

	ul,
	li {
		list-style: none;
		padding: 12rpx;
	}



	.callRecord {

		>li {
			width: 694rpx;
			height: 166rpx;
			margin: 32rpx 0;
			background: #FFFFFF;
			border-radius: 18rpx 18rpx 18rpx 18rpx;
			display: flex;
			align-items: center;
			position: relative;

			>view:first-child {
				padding: 0 58rpx;
				box-sizing: border-box;

				>view:first-child {
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: 500;
					font-size: 56rpx;
					color: #333333;
					text-align: center;
				}

				>view:last-child {
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: 500;
					font-size: 24rpx;
					color: #999999;
					text-align: center;
				}
			}

			>view:last-child {
				height: 120rpx;
				border-left: 2rpx solid #E5E5E5;
				padding-left: 32rpx;

				>view {
					display: flex;
					align-items: center;
					margin-top: 24rpx;

					>view:first-child {
						font-family: Source Han Sans CN, Source Han Sans CN;
						font-weight: 500;
						font-size: 28rpx;
						color: #333333;
						width: 90rpx;
					}

					>view:last-child {
						font-family: Source Han Sans CN, Source Han Sans CN;
						font-weight: 400;
						font-size: 28rpx;
						color: #666666;
					}
				}
			}

			.rightTop {
				position: absolute;
				right: 0rpx;
				top: 0;

				width: 94rpx;
				height: 36rpx;
				line-height: 36rpx;
				text-align: center;
				background: #4394FD;
				border-radius: 0rpx 8rpx 0rpx 8rpx;

				font-family: Source Han Sans CN, Source Han Sans CN;
				font-weight: 400;
				font-size: 22rpx;
				color: #FFFFFF;
			}

			.rightTopstyle {
				position: absolute;
				right: 0rpx;
				top: 0;

				width: 94rpx;
				height: 36rpx;
				line-height: 36rpx;
				text-align: center;
				background: #9a9a9a;
				border-radius: 0rpx 8rpx 0rpx 8rpx;

				font-family: Source Han Sans CN, Source Han Sans CN;
				font-weight: 400;
				font-size: 22rpx;
				color: #FFFFFF;
			}

		}


	}
</style>