 <template>
	<view class="m-item" :id="'message_'+message.id">
		<view class="m-answer">
			<view class="m-left">
				<image class="head_icon" src="/static/ai/myicon.jpg" v-if="message.user === 'ai'"></image>
			</view>
			<view class="m-content">
				<view class="m-content-head" :class="{'m-content-head-right': message.user === 'customer'}">
					
					<view v-if="message.type === 'image'" class="">
						<view class="drawimage-view">
							<view v-if="!imgloaded" class="imgloading">
								<span>图片加载中</span> 									
								<image src="/static/ai/loading.gif" style="margin-left: 8rpx;height: 10rpx; width: 50rpx;" alt="" srcset="">
							</view>
							<image class="drawimg" :src="message.content" mode="widthFix" alt="" srcset="" :show-menu-by-longpress="!isShare" @load="imageLoaded">
						</view>
					</view>
					<view v-else :class="'m-content-head-'+ message.user" :user-select="true" @click="handleCopy2">
						<template v-if="message.user === 'customer'">
								{{ message.content }} 
						</template>
						<template v-else>
							<view v-if="message.status === 'PROMPTING'" style="padding: 20rpx;">
								<view class="">
									<span>{{ message.content }} </span> 
									<image src="/static/ai/loading.gif" style="margin-left: 8rpx;height: 10rpx; width: 50rpx;" alt="" srcset="">
								</view>
								<view v-if="msgType === 'draw' && message.content2">
									{{ message.content2 }}
								</view>
							</view>
							<view v-else-if="message.status === 'WAITING'" style="padding: 20rpx;">
								<view class="">
									<span>{{ message.content }} </span> 
									<image src="/static/ai/loading.gif" style="margin-left: 8rpx;height: 10rpx; width: 50rpx;" alt="" srcset="">
								</view>
							</view>
							<!-- #ifndef MP-WEIXIN -->
							<view v-else style="padding: 20rpx;">
								<span>{{ message.content }} </span> 
							</view>
							<!-- #endif -->
							<!-- #ifdef MP-WEIXIN -->
								<towxml v-else class="mytowxml" :class="message.user=='ai' ? 'aitowxml': 'customtowxml'" :nodes="mdContent"></towxml>
							<!-- #endif -->
						</template>
					</view>
						<!-- <uni-icons class="loading" type="refreshempty"  v-if="message.status === 'WAITING'" size="22" ></uni-icons> -->
				</view>
			</view>
			<view class="m-right">
				<!-- <image class="head_icon" src="/static/ai/myself.jpg" v-if="message.user==='customer'"></image> -->
				<template v-if="message.user==='customer'">
					<image v-if="isShare" src="/static/ai/myself.jpg" class="usericon" mode=""></image>
					<view v-else>
						<image v-if="userAvatar" :src="userAvatar" class="head_icon" mode=""></image>
						<image v-else class="head_icon" src="/static/ai/myself.jpg"></image>
						<!-- <button v-else class="avatar-btn" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
						</button> -->
					</view>
				</template>
			</view>
		</view>
		<template v-if="message.user=='ai' && message.status === 'OVER'">
			<view class="share-view" >
				<view class="vipview" @click="handleGotoVip(1)">
					加入AI降临派获得海量算力，与AI畅聊
				</view>
				<view class="downview">
					<button class=" sharebtn" open-type="share" size="mini">
						<p>邀请好友</p>
						<p>获得{{settings.realShare.addTimes}}点算力/人</p>
					</button>
					<button class=" sharebtn" @click="handleAd" size="mini">
						<p>观看视频</p>
						<p>获得{{settings.ad.addTimes}}点算力/次</p>
					</button>
				</view>
			</view>
		</template>
		<template v-else>
			<template v-if="msgType === 'talk'">
				<!-- message.references && message.references.length -->
				<view class="m-operation" v-if="false">
					<uni-collapse ref="collapse" class="message-collapse" style="width: 100%;" v-model="collapsevalue" @change="changeCollapse">
						<uni-collapse-item title="参考资料">
							<view class="content">
								<view class="text" v-for="item in message.references">
									<span class="sitename">{{ item.url ? `[${item.url}]` : ''}}</span>
									{{ item.ref.length > 40 ? item.ref.substring(0, 40): item.ref}}
								</view>
							</view>
						</uni-collapse-item>
					</uni-collapse>
				</view>
				<view class="m-operation" v-if="message.user=='ai' && message.status === 'FINISHED'">
					<view class="view-icons">
						<uni-icons type="hand-up" :color="like === 1 ? '#62bd6b': '#d0d0d0'" size="22" @click="handleLike"></uni-icons>
						<uni-icons type="hand-down" :color="like === 0 ? '#62bd6b': '#d0d0d0'" size="22" @click="handleDislike"></uni-icons>
					</view>
					<view class="right">
						<span class="sub-btn" @click="handleFullScreen">全屏</span>
						<span class="sub-btn" @click="handleCopy">复制</span>
						<!-- <span class="sub-btn" @click="handleShareContent">分享</span> -->
						<!-- <span class="sub-btn" @click="handleResearch" v-if="chatType === CHAT_TYPE.ONLINE">重新检索</span> -->
					</view>
				</view>
				<!-- <view class="m-operation custom-view" v-if="message.user=='customer'">
					<view class="">
						<span class="sub-btn" @click="handleReAsk">重新提问</span>
						<span class="sub-btn" @click="handleCopy">复制</span>
					</view>
				</view> -->
				<!-- <view class="m-operation share-view" v-if="message.user=='ai' && message.status === 'WAITING'">
					<uni-icons class="loading" type="refreshempty"  v-if="message.status === 'WAITING'" size="22" ></uni-icons> 
				</view> -->
				
			</template>
			<template v-else>
				<view class="m-operation" v-if="message.user=='ai' && message.status === 'FINISHED'">
					<view class="view-icons">
						<uni-icons type="hand-up" :color="like === 1 ? '#62bd6b': '#d0d0d0'" size="22" @click="handleLike"></uni-icons>
						<uni-icons type="hand-down" :color="like === 0 ? '#62bd6b': '#d0d0d0'" size="22" @click="handleDislike"></uni-icons>
					</view>
					<view class="right" v-if="!isShare">
						<span class="sub-btn" @click="handleShareImage">生成海报</span>
						<span class="sub-btn" @click="handleSaveImg" >保存</span>
						<span class="sub-btn" @click="handleRedo">重新生成</span>
					</view>
				</view>
			</template>
		
		</template>
	</view>
</template>

<script>
	// #ifdef MP-WEIXIN
	import towxml from '@/static/towxml/towxml.js'
	// #endif
	// import mdparse from '@/static/wemark/parser.js'
	import { mapState } from 'vuex'
	import { like, dislike, updateAvatar} from '@/api/index.js'
	import { drawLike, drawDislike } from '@/api/draw.js'
	import { CHAT_TYPE } from '@/common/enum.js'
	// import { marked } from 'marked'
	// import hljs from "highlight.js";
	// import "highlight.js/scss/atom-one-dark.scss";
	// import mpHtml from "mp-html/dist/uni-app/components/mp-html/mp-html";
	
	var app = getApp();
	export default {
		data() {
			return {
				CHAT_TYPE,
				like: null,
				imgloaded: false,
				collapsevalue: ['1']
			}
		},
		props: {
			message: {
				type: Object,
				default: () => {}
			},
			isShare: {
				type: Boolean,
				default: false
			},
			msgType: {
				type: String,
				default: 'talk'
			},
			chatType: {
				type: String,
				default: ''
			}
		},
		components: {
			// mpHtml
			// wemark,
			// #ifdef MP-WEIXIN
				towxml
			// #endif
		},
		computed: { 
			...mapState(['userAvatar', 'settings']),
			mdContent() {
				// #ifdef MP-WEIXIN
				let result = this.$towxml(this.message.content,
					'markdown', {
						// base: 'https://xxx.com', // 相对资源的base路径
						theme: 'dark', // 主题，默认`light`
						events: { // 为元素绑定的事件方法
							tap: (e) => {
								console.log('tap', e);
							}
						}
					}); 
				return result
				// #endif
				// #ifndef MP-WEIXIN
				return this.message.content
				// #endif
			},
			// 是否展示全屏的按钮
			isShowFull() {
				const msg = this.message.content
				return msg.length > 400 || msg.indexOf('```') > 0
			}
		},
		created() {
			console.log()
		},
		methods: {
			changeCollapse() {},
			handleShare() {},
			handleResearch() {
				this.$emit('handleResearch', this.message)
			},
			handleShareImage() {
				this.$emit('handleShareImage', this.message)
			},
			handleGotoVip(type) {
				uni.navigateTo({
					url: '/pages/about/vip/vip?type=' + type
				})
			},
			imageLoaded() {
				this.imgloaded = true
			},
			handleSaveImg() {
				let that = this;
				//文件名设置为时间戳
				let fileName = new Date().valueOf();
				wx.showLoading() 
				wx.downloadFile({ //下载图片到本地
					url: that.message.content,
					filePath: wx.env.USER_DATA_PATH + '/' + fileName + '.png',
					success(res) {
						wx.hideLoading()
						console.log(res)
						if (res.statusCode === 200) {
							let img = res.filePath
							that.$store.commit('setImageSrc', {name: `img_${that.message.id}`, src: img })
							wx.saveImageToPhotosAlbum({ //只支持本地图片所以要先把图片下载下来
								filePath: img,
								success(result) {
									console.log(result)
									wx.showToast({
										title: '已保存至相册',
										icon: "none",
									})
								},
								fail(res) {
									console.log(res)
									wx.showToast({
										title: '保存失败',
										icon: "none",
									})
								}
							})
						}
					},
					fail() {
						wx.hideLoading()
					}
				})
			},
			handleRedo() {
				this.$emit('redraw', this.message.id)
			},
			handleFullScreen() {
				this.$emit('fullscreen', this.message.content)
			},
			handleReAsk() {
				this.$emit('reAsk', this.message.content)
			},
			handleCopy2() {
				const pt = app.globalData.systemInfo.platform.toLowerCase()
				if (pt === 'windows' || pt === 'mac') {
					return
				}
				const that = this
				wx.setClipboardData({
					data: that.message.content, //这个是要复制的数据
					success (res) {
						wx.showToast({
							title: '复制成功',
							icon: 'success',
							duration: 2000
						})
					}
				})
			},
			handleCopy() {
				const that = this
				wx.setClipboardData({
					data: that.message.content, //这个是要复制的数据
					success (res) {
						wx.showToast({
							title: '复制成功',
							icon: 'success',
							duration: 2000
						})
					}
				})
			},
			handleShareContent() {
				// 分享图文功能
			},
			handleReply() {
				wx.showToast({
					title: '功能开发中',
					icon: 'success',
					duration: 2000
				})
			},
			handleLike() {
				if (this.msgType === 'talk') {
					like(this.message.id).then(res => {
						this.like = 1
					})
				} else {
					drawLike(this.message.id).then(res => {
						this.like = 1
					})
				}
			}, 
			handleDislike() {
				if (this.msgType === 'talk') {
					dislike(this.message.id).then(res => {
						this.like = 0
					})
				} else {
					drawDislike(this.message.id).then(res => {
						this.like = 0
					})
				}
			},
			onChooseAvatar(e) {
			    const { avatarUrl } = e.detail 
				const that = this
				updateAvatar(avatarUrl).then(res => {
					if (res.code === 0) {
						that.$store.commit('setAvatar', avatarUrl)
					}
				})
			},
			handleAd() {
				this.$emit('handleAd')
			}
		}
	}
</script>

<style lang="less" scoped>
	.commonshare() {
		width: 100%;
		height: 90rpx;
		background-color: #22242d;
		border-radius: 4rpx;
		color: @fontColor;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		&:active {
			background-color: lighten(@lightBg, 5%);
		}
	}
	
	.m-item {
		display: flex;
		flex-direction: column;
		padding: 24rpx 24rpx 0;
		.m-answer{
			display: flex;
			flex-direction: row;
			.m-left {
				display: flex;
				width: 80rpx;
				justify-content: flex-start;
				align-items: flex-start;

			}
			.m-content {
				display: flex;
				flex: 1;
				width: calc(100% - 160rpx);
				flex-direction: column;
				justify-content: center;
				word-break: break-all;
				.m-content-head {
					position: relative;
					user-select: auto;
					
					.drawimage-view {
						width: 100%;
						min-height: 100rpx;
						overflow: hidden;
						border-radius: 8rpx;
						background-color: #22242d;
						.imgloading {
							padding: 40rpx;
							color: @fontColor;
						}
						.drawimg {
							width: 100%;
						}
					}
				}
				.m-content-head-right {
					display: flex;
					justify-content: flex-end;
				}
				.m-content-head-ai {
					user-select: auto;
					text-align: left;
					background: #22242d;
					border: 1px #22242d solid;
					border-radius: 8rpx;
					color: #FFF;

					.loading {
						color: #FFF;
					}
				}
				.m-content-head-ai:before {
					border: 12rpx solid transparent;
					border-right: 12rpx solid #22242d;
					left: -22rpx;
					top: 20rpx;
					width: 0;
					height: 0;
					position: absolute;
					content: ' '
				}
				.m-content-head-customer {
					user-select: auto;
					border: 1px #3f414e solid;
					background: #3f414e;
					color: #FFF;
					border-radius: 8rpx;
					padding: 20rpx;
					// .h2w-dark {
					// 	background-color: #3f414e !important;
					// }
				}
				.m-content-head-customer:after {
					border: 12rpx solid transparent;
					border-left: 12rpx solid #3f414e;
					top: 20rpx;
					right: -22rpx;
					width: 0;
					height: 0;
					position: absolute;
					content: ' '
				}
			}
			.m-right {
				display: flex;
				width: 80rpx;
				justify-content: flex-end;
				align-items: flex-start;
				.avatar-btn {
					background: none;
					padding: 0;
					line-height: 2.3;
					border: none;
					width: 60rpx;
					height: 60rpx;
					text-align: right;
					display: block;
					display: flex;
					margin: inherit;
					&::after {
						content: none;
					}
				}
				.usericon {
					width: 60rpx;
					height: 60rpx;
					border-radius: 8rpx;
					background: #eeeddd;
				}
			}
		}
		
		.m-operation{
			padding: 8rpx 80rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.view-icons {
				uni-icons:not(:last-child) {
					margin-right: 24rpx;
				}
			}
			.sub-btn {
				color: #d0d0d0;
				border: 1px solid;
				// background: #5b5e65;
				padding: 0 12rpx;
				border-radius: 6rpx;
				font-size: 24rpx;
			}
			.left {
				.sub-btn {
					right: 20rpx;
				}
			}
			.right {
				.sub-btn {
					margin-left: 20rpx;
				}
			}
			.sharebtn {
				line-height: 2.4;
				color: #FFF;
				border: none;
				background: darken(@mainColor, 10%);
				flex: 1;
				&:active {
					background-color: lighten(@mainColor, 20%);
				}
				&:not(:last-child) {
					margin-right: 20rpx;
				}
			}
			
			&.custom-view {
				justify-content: flex-end;
			}
			

		}
		.share-view {
			padding: 12rpx 80rpx;
			
			.vipview {
				.commonshare();				
				color: @mainColor;
				font-weight: bold;
			}
			
			.downview {
				padding-top: 12rpx;
				display: flex;
				.sharebtn {
					flex: 1;
					line-height: 1.5;
					font-size: 24rpx;
					.commonshare();
					&:not(:last-child) {
						margin-right: 12rpx;
					}
					
				}
			}
			
		}
		
		.head_icon {
			width: 60rpx;
			height: 60rpx;
			border-radius: 8rpx;
		}
	}
	


	
</style>
