<template>
	<view @tap="showChannelMenu(false)" class="body">
		<view class="state-bar"></view>
		<view class="head">
			<view class="left">
				<view class="avatar-cont">
					<view :class="['change-channel',isShowChannelMenu?'show':'']">
						<view @tap="setChannel()" class="channel-item">
							<image mode="aspectFit" class="avatar" src="/static/icons/whatsapp.png" ></image>
							<text class="name">WhatsApp商业账号</text>
						</view>
						<view @tap="setChannel()" class="channel-item">
							<image mode="aspectFit" class="avatar" src="/static/icons/whatsapp.png" ></image>
							<text class="name">WhatsApp个人账号</text>
						</view>
						<view @tap="setChannel()" class="channel-item">
							<image mode="aspectFit" class="avatar" src="/static/icons/facebook.png" ></image>
							<text class="name">Fackbook Messager</text>
						</view>
						<view @tap="setChannel()" class="channel-item">
							<image mode="aspectFit" class="avatar" src="/static/icons/ins.png" ></image>
							<text class="name">Instagram</text>
						</view>
						<view @tap="setChannel()" class="channel-item">
							<image mode="aspectFit" class="avatar" src="/static/icons/line.png" ></image>
							<text class="name">Line</text>
						</view>
						<view @tap="setChannel()" class="channel-item">
							<image mode="aspectFit" class="avatar" src="/static/icons/wechat-m.png" ></image>
							<text class="name">微信公众号</text>
						</view>
						<view @tap="setChannel()" class="channel-item">
							<image mode="aspectFit" class="avatar" src="/static/icons/wechat-b.png" ></image>
							<text class="name">企业微信</text>
						</view>
						<view @tap="setChannel()" class="channel-item">
							<image mode="aspectFit" class="avatar" src="/static/icons/webchat.png" ></image>
							<text class="name">网页AI客服</text>
						</view>
					</view>
					<image @tap.stop="showChannelMenu(true)" class="avatar" src="/static/icons/ins.png" ></image>
					<text @tap.stop="showChannelMenu(true)" class="name">Instagram</text>
				</view>
			</view>
			<view class="center title">聊天(72)</view>
			<view class="right"></view>
		</view>
		<view v-if="userInfo.token" class="scroll-cont">
			<scroll-view :scroll-y="true" class="scroll-view">
				<view class="chat-item">
					<view class="avatar-cont">
						<image class="avatar"></image>
						<view class="bedage">12</view>
					</view>
					<view class="text-info">
						<view class="top">
							<view class="name">用户111</view>
							<view class="time">下午 2:40</view>
						</view>
						<view class="bottom">
							<view class="info">是测试用的消息内容哈哈哈哈</view>
						</view>
					</view>
				</view>
				<view class="chat-item">
					<view class="avatar-cont">
						<image class="avatar"></image>
						<view class="bedage">12</view>
					</view>
					<view class="text-info">
						<view class="top">
							<view class="name">用户111</view>
							<view class="time">下午 2:40</view>
						</view>
						<view class="bottom">
							<view class="info">是测试用的消息内容哈哈哈哈</view>
						</view>
					</view>
				</view>
				<view class="chat-item">
					<view class="avatar-cont">
						<image class="avatar"></image>
						<view class="bedage">12</view>
					</view>
					<view class="text-info">
						<view class="top">
							<view class="name">用户111</view>
							<view class="time">下午 2:40</view>
						</view>
						<view class="bottom">
							<view class="info">是测试用的消息内容哈哈哈哈</view>
						</view>
					</view>
				</view>
				<view class="chat-item">
					<view class="avatar-cont">
						<image class="avatar"></image>
						<view class="bedage">12</view>
					</view>
					<view class="text-info">
						<view class="top">
							<view class="name">用户111</view>
							<view class="time">下午 2:40</view>
						</view>
						<view class="bottom">
							<view class="info">是测试用的消息内容哈哈哈哈</view>
						</view>
					</view>
				</view>
				<view class="chat-item">
					<view class="avatar-cont">
						<image class="avatar"></image>
						<view class="bedage">12</view>
					</view>
					<view class="text-info">
						<view class="top">
							<view class="name">用户111</view>
							<view class="time">下午 2:40</view>
						</view>
						<view class="bottom">
							<view class="info">是测试用的消息内容哈哈哈哈</view>
						</view>
					</view>
				</view>
				<view class="chat-item">
					<view class="avatar-cont">
						<image class="avatar"></image>
						<view class="bedage">12</view>
					</view>
					<view class="text-info">
						<view class="top">
							<view class="name">用户111</view>
							<view class="time">下午 2:40</view>
						</view>
						<view class="bottom">
							<view class="info">是测试用的消息内容哈哈哈哈</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<navigator url="/pages/user/login" v-else class="no-login">
			<view url="/pages/user/login" class="login-lock" v-if="!userInfo.token">
				 <view class="title">登录/注册</view>
				 <view class="sub-title">解锁您的AI营销黑科技</view>
			</view>
		</navigator>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				chatType:'facebook',
				isShowChannelMenu: false
			};
		},
		methods: {
			/**
			 * 设定通道菜单打开状态
			 * @param {Boolean} 设定通道菜单打开状态
			 */
			showChannelMenu(state){
				this.isShowChannelMenu = state
			},
			/**
			 * 切换聊天通道
			 */
			setChannel(){
				this.isShowChannelMenu = false
			}
		},
		computed: {
			userInfo() {
				return this.$store.getters.userInfo
			},
		}
	}
</script>

<style>
.body{
	display: grid;
	grid-template-rows: auto auto 1fr;
	.head{
		.left{
			position: relative;
			.avatar-cont{
				z-index: 3;
				display: flex;
				gap: 12rpx;
				align-items: center;
				position: absolute;
				height: 46rpx;
				left: 25rpx;
				top: 50%;
				transform: translateY(-50%);
				.avatar{
					width: 46rpx;
					height: 46rpx;
				}
				.name{
					font-size: 24rpx;
				}
				.change-channel{
					transition-duration: 300ms;
					transform-origin: 0% 0%;
					box-shadow: 0 0 16rpx 0 #00000018;
					z-index: 3;
					border-radius: 24rpx;
					position: absolute;
					left: -24rpx;
					top: -24rpx;
					width: 340rpx;
					padding: 12rpx;
					background-color: white;
					pointer-events: none;
					opacity: 0;
					scale: 0.9;
					.channel-item{
						border-radius: 12rpx;
						padding: 12rpx;
						height: 46rpx;
						display: flex;
						gap: 12rpx;
						align-items: center;
						.avatar{
							width: 46rpx;
							height: 46rpx;
						}
						.name{
							font-size: 24rpx;
						}
						&:active{
							background-color: #f6f6f6;
						}
					}
					&.show{
						pointer-events: auto;
						opacity: 1;
						scale: 1;
					}
				}
			}
		}
	}
	.no-login{
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		.login-lock{
			z-index: 2;
			gap: 4rpx;
			color: gray;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			.title{
				font-size: 38rpx;
				font-weight: 700;
			}
			.sub-title{
				font-size: 26rpx;
			}
		}
	}
	.scroll-cont{
		position: relative;
		width: 100%;
		height: 100%;
		
		.scroll-view{
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			.chat-item{
				background-color: white;
				padding: 22rpx 24rpx;
				display: grid;
				grid-gap: 24rpx;
				grid-template-columns: auto 1fr;
				&:not(:last-child){
					border-bottom: 1rpx solid #f7f7f7;
				}
				&:active{
					background-color: #f6f6f6;
				}
				.avatar-cont{
					width: 88rpx;
					height: 88rpx;
					position: relative;
					.bedage{
						transform: translate(30%, -30%);
						position: absolute;
						right: 0;
						top: 0;
						padding: 2rpx 10rpx;
						border-radius: 60rpx;
						background-color: #ff4848;
						color: white;
						font-size: 23rpx;
					}
					.avatar{
						display: block;
						border-radius: 8rpx;
						background-color: lightgray;
						width: 100%;
						height: 100%;
						position: relative;
					}
				}
				.text-info{
					padding: 2rpx 0;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					.top{
						display: flex;
						justify-content: space-between;
						.time{
							font-size: 23rpx;
							color: gray;
						}
					}
					.bottom{
						font-size: 24rpx;
						color: gray;
					}
				}
			}
		}
	}
}
</style>