<template>
	<view class="uni-page ai-chat">
		<u-navbar :left-icon="null" placeholder :autoBack="true" bgColor="#fff0e7" title="寄信助手"></u-navbar>
		<view class="ai-chat-hint">
			<view class="message-item-chat message-item">
				<view class="message-item-avatar">
					<image src="/static/03头像@2x.png" alt="" style="width: 100%;height: 100%;">>
				</view>
				<view class="message-item-content">
					<view class="message-hint-temp-title">
						Hi,我是你的寄信助手小艾
					</view>
					<view class="message-hint-temp-explain">
						有什么问题可以直接问我...
					</view>
				</view>
			</view>
		</view>
		<scroll-view class="chat-messageList" :scroll-into-view="scrollView" :scroll-y="true">
			<template v-for="(mess,index) in messageList">
				<view v-if="mess.type==='user'" :id="'message-'+(index+1)" :key="index"
					class="message-item-user message-item">
					<view class="message-item-content" style="margin:0 10rpx 0 100rpx;">
						{{mess.message}}
					</view>
					<view class="message-item-avatar">
						<image :src="userInfo.avatar" alt="" style="width: 100%;height: 100%;">>
					</view>
				</view>
				<view v-if="mess.type==='rebot'" :id="'message-'+(index+1)" :key="index"
					class="message-item-chat message-item">
					<view class="message-item-avatar">
						<image src="/static/03头像@2x.png" alt="" style="width: 100%;height: 100%;">>
					</view>
					<view class="message-item-content" style="margin:0  100rpx 0 10rpx ;">
						{{mess.message}}
					</view>
				</view>
				<view v-if="mess.type==='rebootremplate'" :id="'message-'+(index+1)" :key="index"
					class="message-item-chat-template message-item">
					<view class="message-item-avatar">
						<image src="/static/03头像@2x.png" alt="" style="width: 100%;height: 100%;">
					</view>
					<view class="message-item-content" style="margin:0  100rpx 0 10rpx ;">
						<view class="template-title">
							{{mess.title}}
						</view>
						<view class="template-item" v-for="(item,index) in baseRobotMessage.data" :key="index"
							@click="sendQuestion(item)">
							{{item.title}}？
						</view>
					</view>
				</view>
			</template>
		</scroll-view>

		<!-- <view class="chat-floor">
			<view class="floor-toolbar">
				<view class="floor-toolbar-item">
					发送照片
				</view>
				<view class="floor-toolbar-item">
					发送订单
				</view>
			</view>
			<u-input class="u-input" placeholder="输入您的问题..." v-model="mesText">
				<view slot="suffix">
					<u-button color="null" class="self-button" :customStyle="{height:'66rpx',border:'unset'}"
						@tap="sendMessage(mesText)" type="success" size="mini">
						<img style="width: 110rpx;height: 65rpx;" src="/static/25发送@2x.png" alt="发送">
					</u-button>
				</view>
			</u-input>
		</view> -->
	</view>
</template>

<script>
	import {
		getQuestionApi
	} from '@/request/wm.js'
	export default {
		data() {
			return {
				baseRobotMessage: {
					type: 'rebootremplate',
					title: '您是否要咨询以下问题？',
					data: ['我要如何寄信？', '不知道地址怎么寄信？？', '我要如何寄信？？', '我要如何寄信？', '不知道地址怎么寄信？', '我要如何寄信？']
				},
				messageList: [],
				hintMessage: ['我要给狱中的朋友寄一封信...', '帮我给好朋友写封信...', '帮我写封信...', '我想给狱中的朋友写封信，有什么注意事项...'],
				mesText: '',
				userInfo: {},
				scrollView: null
			}
		},
		async onLoad() {
			this.userInfo = this.$store.userInfo
			let {
				data
			} = await getQuestionApi()
			this.baseRobotMessage = data
			console.log(data.data);
			this.messageList.push({
				data: this.baseRobotMessage,
				type: 'rebootremplate',
				title: '您是否要咨询以下问题？',
			})
			console.log(this.userInfo);
		},
		methods: {
			sendQuestion(item) {
				this.messageList.push({
					type: 'user',
					message: item.title
				})
				this.messageList.push({
					type: 'rebot',
					message: item.answer
				})
				this.$nextTick(() => {
					setTimeout(()=>{
						this.scrollView = 'message-' + this.messageList.length
					})
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.uni-page {
		display: flex;
		flex-direction: column;
		background: radial-gradient(circle, #ffe3d6, #ffe8dd, #fff3ee);

		.chat-messageList {
			width: 100%;
			min-height: 300rpx;
			display: flex;
			flex-direction: column;
			flex: 1;
		}
	}

	.ai-chat-hint {
		.message-item {
			.message-item-content {
				padding: 12rpx;
				background-color: transparent;
			}
		}

	}

	.ai-chat {
		.message-item {
			padding: 20rpx 0;
			display: flex;
			width: 100%;
			overflow: hidden;

			.message-item-content {
				flex: 1;
				font-size: 30rpx;
				color: #222222;
			}

		}

		.message-item-avatar {
			width: 96rpx;
			height: 96rpx;
			border-radius: 50%;
			overflow: hidden;

			img {
				width: 100%;
				height: 100%;
				// border-radius: 50%;
			}
		}

		.hint-message-box {
			display: flex;
			flex-wrap: wrap;

			.hint-message-item {
				color: #333333;
				width: fit-content;
				border-radius: 40rpx;
				margin-right: 30rpx;
				margin-top: 20rpx;
				background-color: rgba(255, 255, 255, 0.5);
				padding: 22rpx 35rpx;
				font-size: 32rpx;
			}
		}

		.message-item-content {
			padding: 35rpx;
			background-color: rgba(255, 255, 255, 0.5);
			;
			border-radius: 40rpx;

			.message-hint-temp-title {
				font-size: 32rpx;
				// width: 387rpx;
				// height: 42rpx;
				color: #333333;
			}

			.message-hint-temp-explain {
				// width: 340rpx;
				// height: 40rpx;
				color: #E08745;
				font-size: 30rpx;
			}
		}

		.message-item-chat-template {

			.message-item-content {
				background-color: #FFFFFF;
			}
		}

		.chat-floor {
			padding-bottom: 20rpx;

			.floor-toolbar {
				display: flex;
				font-size: 26rpx;
				flex-wrap: wrap;
				margin-bottom: 20rpx;
			}

			.floor-toolbar-item {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 123rpx;
				height: 52rpx;
				background: #FFE7D9;
				color: #FE9161;
				margin-right: 30rpx;
			}

			::v-deep .u-input {
				height: 102rpx;
				border-radius: 20rpx !important;
				padding: 0 0rpx 0 20rpx !important;
				border: 3rpx solid #FE9161 !important;
			}

		}
	}

	.template-title {
		font-size: 30rpx;
		margin-bottom: 23rpx;
	}

	.template-item {
		font-size: 26rpx;
		padding: 23rpx 0;
		font-weight: 700;
		border-bottom: 1rpx solid #E2E2E2;
	}

	.self-button {
		background-color: unset;
		border: unset;
		width: 120rpx;
		height: 76rpx;

		img {
			width: 100%;
			height: 100%;
		}
	}
</style>