<!-- @/pages_tool/news/chat  -copyBy -->
<template>
	<div>
		<template>
			<u-navbar title="客户xxx"  :autoBack="true" leftIconSize="0" placeholder>
				<!-- <div slot="right" class="right">
					<image :src="$util.img(`/upload/weapp/pageSalesman/customer/sx.png`)" @click="$refs.screening.start()"></image>
					<image :src="$util.img(`/upload/weapp/pageSalesman/customer/add.png`)" @click="btnone"></image>
				</div>  -->
			</u-navbar>
		</template>
		<div class="view" :style="{paddingBottom: menuStatus ? '136rpx':'404rpx'}">
			<div class="a_info" v-for="(item,index) in data" :key=index>
				<div class="time" v-if="index==0">
					{{item.time}}
				</div>
				<div class="left" v-if="item.left==1">
					<div class="avatar">
						<image :src="item.avatar" style="width: 80rpx; height: 80rpx;"  mode=""></image>
					</div>
					<div class="msgBox" v-if="item.type=='msg'">
						<div class="triangle"></div>
						<div class="msg">{{item.text}}</div>
					</div>
					<div class="link" v-else-if="item.type=='link'">
						<div class="left">
							<image :src="item.image" mode=""></image>
						</div>
						<div class="right">
							<div class="top">{{item.title}}</div>
							<div class="middle">产地:{{item.origin}} 规格:{{item.unit}}</div>
							<div class="bottom">
								价格￥<span class="price">{{item.price}}</span>
							</div>
						</div>
						
					</div>
					
				</div>
				<div class="right" v-else>
					<div class="avatar">
						<image :src="item.avatar" style="width: 80rpx; height: 80rpx;"  mode=""></image>
					</div>
					<div class="msgBox" v-if="item.type=='msg'">
						<div class="msg">{{item.text}}</div>
						<div class="triangle"></div>
					</div>
					
					<div class="link" v-else-if="item.type=='link'">
						<div class="left">
							<image :src="item.image" mode=""></image>
						</div>
						<div class="right">
							<div class="top">{{item.title}}</div>
							<div class="middle">产地:{{item.origin}} 规格:{{item.unit}}</div>
							<div class="bottom">
								价格￥<span class="price">{{item.price}}</span>
							</div>
						</div>
						
					</div>
				</div>
			</div>
		</div>
		<div class="footer_active" v-if="menuStatus==false">
			<div class="card">
				<div class="input_row">
					<u-input v-model="text" placeholder="请输入消息"></u-input>
					<div class="img">
						<image :src="$util.img('/upload/weapp/user/smile.png')" mode=""></image>
						<image :src="$util.img('/upload/weapp/user/jia2.png')" mode="" @click="changeMenu"></image>
					</div>
				</div>
				
				<u-line style="margin-bottom: 32rpx;"></u-line>
				
				<div class="btn_row">
					<div class="box">
						<image :src="$util.img('/upload/weapp/user/pic.png')" mode=""></image>
						<div class="text">图片/视频</div>
					</div>
					<div class="box">
						<image :src="$util.img('/upload/weapp/user/camera.png')" mode=""></image>
						<div class="text">拍摄</div>
					</div>
					<div class="box">
						<image :src="$util.img('/upload/weapp/user/place.png')" mode=""></image>
						<div class="text">位置</div>
					</div>
				</div>
			</div>
		</div>
		<div class="footer_inactive" v-else>
			<div class="input_row">
				<u-input v-model="text" placeholder="请输入消息"></u-input>
				<div class="img">
					<image :src="$util.img('/upload/weapp/user/smile.png')" mode=""></image>
					<image :src="$util.img('/upload/weapp/user/jia2.png')" mode="" @click="changeMenu"></image>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				menuStatus: false,
				text: '',
				data: [{
					left: 1,
					type: 'msg',
					avatar: this.$util.img('/upload/weapp/user/wx.png'),
					text: '你好，请输入您的问题21312312312312312312312312312312',
					time: 'Fri Feb 10 2023 16:56:55 GMT+0800 (中国标准时间)'
				},{
					left: 0,
					type: 'msg',
					avatar:this.$util.img('/upload/weapp/user/wx.png'),
					text: '想问一下一袋能吃多久',
					time: 'Fri Feb 10 2023 16:56:59 GMT+0800 (中国标准时间)'
				},{
					left: 1,
					type: 'msg',
					avatar: this.$util.img('/upload/weapp/user/wx.png'),
					text: '你好，请输入您的问题21312312312312312312312312312312',
					time: 'Fri Feb 10 2023 16:56:55 GMT+0800 (中国标准时间)'
				},{
					left: 0,
					type: 'msg',
					avatar: this.$util.img('/upload/weapp/user/wx.png'),
					text: '想问一下一袋能吃多久',
					time: 'Fri Feb 10 2023 16:56:59 GMT+0800 (中国标准时间)'
				},{
					left: 1,
					type: 'msg',
					avatar: this.$util.img('/upload/weapp/user/wx.png'),
					text: '你好，请输入您的问题',
					time: 'Fri Feb 10 2023 16:56:55 GMT+0800 (中国标准时间)'
				},{
					left: 0,
					type: 'link',
					avatar: this.$util.img('/upload/weapp/user/wx.png'),
					title: '枸杞子 0.25kg/袋（280标题标题标题标题标题标题标题标题标题',
					origin: '山东',
					unit: '0.5kg/袋',
					price: 23.88,
					image: this.$util.img('/upload/weapp/user/cover.png'),
					time: 'Fri Feb 10 2023 16:57:59 GMT+0800 (中国标准时间)'
				},{
					left: 1,
					type: 'link',
					avatar: this.$util.img('/upload/weapp/user/wx.png'),
					title: '枸杞子 0.25kg/袋（280标题标题标题标题标题标题标题标题标题',
					origin: '山东',
					unit: '0.5kg/袋',
					price: 23.88,
					image: this.$util.img('/upload/weapp/user/cover.png'),
					time: 'Fri Feb 10 2023 16:57:59 GMT+0800 (中国标准时间)'
				},{
					left: 1,
					type: 'msg',
					avatar: this.$util.img('/upload/weapp/user/wx.png'),
					text: '你好，请输入您的问题21312312312312312312312312312312',
					time: 'Fri Feb 10 2023 16:56:55 GMT+0800 (中国标准时间)'
				},{
					left: 0,
					type: 'msg',
					avatar: this.$util.img('/upload/weapp/user/wx.png'),
					text: '想问一下一袋能吃多久',
					time: 'Fri Feb 10 2023 16:56:59 GMT+0800 (中国标准时间)'
				},{
					left: 1,
					type: 'msg',
					avatar: this.$util.img('/upload/weapp/user/wx.png'),
					text: '你好，请输入您的问题21312312312312312312312312312312',
					time: 'Fri Feb 10 2023 16:56:55 GMT+0800 (中国标准时间)'
				},{
					left: 0,
					type: 'msg',
					avatar: this.$util.img('/upload/weapp/user/wx.png'),
					text: '想问一下一袋能吃多久',
					time: 'Fri Feb 10 2023 16:56:59 GMT+0800 (中国标准时间)'
				},{
					left: 1,
					type: 'msg',
					avatar: this.$util.img('/upload/weapp/user/wx.png'),
					text: '你好，请输入您的问题',
					time: 'Fri Feb 10 2023 16:56:55 GMT+0800 (中国标准时间)'
				},{
					left: 0,
					type: 'link',
					avatar: this.$util.img('/upload/weapp/user/wx.png'),
					title: '枸杞子 0.25kg/袋（280标题标题标题标题标题标题标题标题标题',
					origin: '山东',
					unit: '0.5kg/袋',
					price: 23.88,
					image: this.$util.img('/upload/weapp/user/cover.png'),
					time: 'Fri Feb 10 2023 16:57:59 GMT+0800 (中国标准时间)'
				},{
					left: 1,
					type: 'link',
					avatar: this.$util.img('/upload/weapp/user/wx.png'),
					title: '枸杞子 0.25kg/袋（280标题标题标题标题标题标题标题标题标题',
					origin: '山东',
					unit: '0.5kg/袋',
					price: 23.88,
					image: this.$util.img('/upload/weapp/user/cover.png'),
					time: 'Fri Feb 10 2023 16:57:59 GMT+0800 (中国标准时间)'
				}]
			}
		},
		methods: {
			changeMenu () {
				this.menuStatus = !this.menuStatus
			}
		}
	}
</script>

<style lang="scss" scoped>
	.view {
		padding: 0 32rpx;
		
		.a_info {
			.time{
				padding-top: 32rpx;
				text-align: center;
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;
			}
			.left {
				margin-top: 36rpx;
				display: flex;
				.triangle {
					align-self: baseline;
					border-style: solid;
					border-width: 8rpx 8rpx 8rpx 8rpx;
					border-color: transparent white transparent transparent ;
					width: 0px;
					height: 0px;
					position: relative;
					top: 36rpx;
					        
				}
				.msgBox {
					max-width: calc(100% - 160rpx - 48rpx);
					margin-left: 16rpx;
					border-radius: 16rpx;
					display: flex;
					align-items: center;
					.msg {
						padding: 16rpx 24rpx 16rpx 32rpx;
						background-color: #FFFFFF;
						border-radius: 16rpx;
						word-wrap: break-word;
						word-break: break-all; 
					}
				}
				.link {
					background: #FFFFFF;
					border-radius: 16rpx;
					box-sizing: border-box;
					margin-left: 24rpx;
					padding: 0 24rpx 24rpx 24rpx;
					width: calc(100% - 160rpx - 48rpx);
					display: flex;
					.left {
						image {
							width: 160rpx;
							height: 160rpx;
						}
					}
					.right {
						width: 100%;
						flex-grow: 1;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						padding-left: 24rpx ;
						.top {
							width: calc(100% - 188rpx);
							overflow:hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
							-o-text-overflow:ellipsis;
						}
						.middle{
							font-size: 24rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #999999;
						}
						.bottom {
							font-size: 24rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #EF6154;
							.price {
								font-size: 24rpx;
								font-family: DINAlternate-Bold, DINAlternate;
								font-weight: bold;
								color: #EF6154;
							}
						}
					}
					
				}
			}
			.right {
				margin-top: 36rpx;
				display: flex;
				flex-direction: row-reverse;
				.msgBox {
					max-width: calc(100% - 160rpx - 48rpx);
					margin-right: 16rpx;
					display: flex;
					align-items: center;
					.triangle {
						align-self: baseline;
						position: relative;
						top: 36rpx;
						border-style: solid;
						border-width: 8rpx 8rpx 8rpx 8rpx;
						border-color: transparent transparent transparent #21BBF3 ;
						width: 0px;
						height: 0px;
						        
					}
					.msg {
						border-radius: 16rpx;
						background-color: #21BBF3;
						padding: 16rpx 24rpx 16rpx 32rpx;
						word-wrap: break-word;
						word-break: break-all; 
					}
				}
			}
			.link {
				background: #FFFFFF;
				border-radius: 16rpx;
				box-sizing: border-box;
				margin-right: 24rpx;
				padding: 0 24rpx 24rpx 24rpx;
				width: calc(100% - 160rpx - 48rpx);
				display: flex;
				.left {
					image {
						width: 160rpx;
						height: 160rpx;
					}
				}
				.right {
					width: 100%;
					flex-grow: 1;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					padding-left: 24rpx ;
					.top {
						width: calc(100% - 188rpx);
						overflow:hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						-o-text-overflow:ellipsis;
					}
					.middle{
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #999999;
					}
					.bottom {
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #EF6154;
						.price {
							font-size: 24rpx;
							font-family: DINAlternate-Bold, DINAlternate;
							font-weight: bold;
							color: #EF6154;
						}
					}
				}
				
			}
		}
	}
	.footer_active {
		background-color: white;
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 392rpx;
		.input_row {
			padding: 24rpx 32rpx  ;
			display: flex;
			.img {
				position: relative;
				top: 12rpx;
				image {
					margin-left: 32rpx;
					width: 44rpx; 
					height: 44rpx;
				}
			}
			::v-deep {
				.u-input--radius {
					background: #F6F6F6;
					border-radius: 16rpx;
					border: 0;
					padding: 12rpx 24rpx !important;
				}
			}
		}
		.btn_row {
			margin-left: 54rpx;
			padding-top: 32rpx;
			width: 55%;
			display: flex;
			justify-content: space-between;
			.box {
				image {
					width: 96rpx;
					height: 96rpx;
				}
				.text {
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #585858;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}
		}
	}
	.footer_inactive {
		background-color: white;
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 112rpx;
		.input_row {
			padding: 24rpx 32rpx  ;
			display: flex;
			.img {
				position: relative;
				top: 12rpx;
				image {
					margin-left: 32rpx;
					width: 44rpx; 
					height: 44rpx;
				}
			}
			::v-deep {
				.u-input--radius {
					background: #F6F6F6;
					border-radius: 16rpx;
					border: 0;
					padding: 12rpx 24rpx !important;
				}
			}
		}
	}
</style>