<script setup>
	/**
	 * 聊天框内容
	 */
	// 聊天
	import TencentCloudChat from '@tencentcloud/chat';

	import {
		nextTick,
		watch,
		computed,
		defineEmits,
	} from 'vue'
	// 工具库
	import util from '@/common/js/util';

	import NewsAudio from '@/static/audio.png'
	import JyCommodityInformation from '@/components/public/jy-commodity-information'
	const props = defineProps({
		item: {
			type: Object,
			default: () => {
				return {}
			}
		},
		msg: {
			type: Object,
		}
	})
	import {
		useStore
	} from 'vuex'
	const store = useStore()
	const emit = defineEmits(['openRedBag', 'viewVideo'])
	// 格式化
	const formatData = computed(() => {
		let result = props.item.payload.data || ''
		if (result) result = JSON.parse(result)
		return result
	})
	//音频
	const innerAudioContext = uni.createInnerAudioContext();
	// 播放语音
	const payAudio = (item) => {
		innerAudioContext.src = item.payload.url
		nextTick(() => {
			innerAudioContext.play();
		})
	}
	// 用户信息
	const userinfo = computed(() => store.state.userinfo)

	// 拨打电话
	function handleCall() {
		uni.$TUICallKit.call({
			userID: props.msg.id,
			callMediaType: formatData.value.data.call_type,
		}, res => {
			console.log('[TUICallKit] call params: ', JSON.stringify(res));
		});
	}

	// 开红包
	function handleOpenRedBag() {
		emit('openRedBag', {
			item: props.item,
			formatData: formatData.value,
		})
	}

	// 看视频
	function handleViewVideo(item) {
		emit('viewVideo', item)
	}

	/**
	 * 看图片
	 * @param {Object} urls 图片路径数组
	 */
	function handleViewImage(urls) {
		uni.previewImage({
			urls,
		})
	}

	// 跳转到视频详情
	function toVideoDetail() {
		console.log('videoId', formatData.value)
		uni.navigateTo({
			url: util.setUrl('/pages/index/videoDetail', {
				videoId: formatData.value.videoId,
			})
		})
	}
</script>

<template>
	<view class="content pr">
		<!-- 图片 -->
		<template v-if="item.type === TencentCloudChat.TYPES.MSG_IMAGE">
			<image class="viewImage br10" :src="item.payload.imageInfoArray[0].imageUrl" mode="widthFix"
				@click="util.view_imgs([item.payload.imageInfoArray[0].imageUrl],0)" />
		</template>
		<!-- 文字 -->
		<template v-else-if="item.type === TencentCloudChat.TYPES.MSG_TEXT">
			<view class="p25">
				{{ item.payload.text }}
			</view>
		</template>
		<!-- 自定义消息 -->
		<template v-else-if="item.type === TencentCloudChat.TYPES.MSG_CUSTOM">
			<!-- 判断业务字段 -->
			<template v-if="formatData.businessType">
				<!-- 音视频通话 -->
				<template v-if="formatData.businessType == 1">
					<!-- 拨打电话 -->
					<view class="p25" @click="handleCall">
						<template v-if="formatData.actionType == TencentCloudChat.TSignaling.ACTION_TYPE_INVITE">
							<text>[ </text>
							<uni-icons type="videocam" color="#333" size="32rpx"
								v-if="formatData.data.call_type == 1" />
							<uni-icons type="phone" color="#333" size="32rpx"
								v-else-if="formatData.data.call_type == 2" />
							<text>发起</text>
							<text v-if="formatData.data.call_type == 1">语音</text>
							<text v-else-if="formatData.data.call_type == 2">视频</text>
							<text>通话</text>
							<text> ]</text>
						</template>
						<template v-if="formatData.actionType == TencentCloudChat.TSignaling.ACTION_TYPE_CANCEL_INVITE">
							<text>[</text>
							<uni-icons type="videocam" color="#333" size="32rpx"
								v-if="formatData.data.call_type == 1" />
							<uni-icons type="phone" color="#333" size="32rpx"
								v-else-if="formatData.data.call_type == 2" />
							<text>已取消通话 ]</text>
						</template>
						<template v-if="formatData.actionType == TencentCloudChat.TSignaling.ACTION_TYPE_ACCEPT_INVITE">
							<text>[ </text>
							<uni-icons type="videocam" color="#333" size="32rpx"
								v-if="formatData.data.call_type == 1" />
							<uni-icons type="phone" color="#333" size="32rpx"
								v-else-if="formatData.data.call_type == 2" />
							<text>已接通 ]</text>
							<!-- <text>[ 通话时长 {{formatData.data.call_end}} ]</text> -->
						</template>
						<template v-if="formatData.actionType == TencentCloudChat.TSignaling.ACTION_TYPE_REJECT_INVITE">
							<text>[ </text>
							<uni-icons type="videocam" color="#333" size="32rpx"
								v-if="formatData.data.call_type == 1" />
							<uni-icons type="phone" color="#333" size="32rpx"
								v-else-if="formatData.data.call_type == 2" />
							<text>已拒绝通话 ]</text>
						</template>
						<template
							v-if="formatData.actionType == TencentCloudChat.TSignaling.ACTION_TYPE_INVITE_TIMEOUT">
							<text>[ </text>
							<uni-icons type="videocam" color="#333" size="32rpx"
								v-if="formatData.data.call_type == 1" />
							<uni-icons type="phone" color="#333" size="32rpx"
								v-else-if="formatData.data.call_type == 2" />
							<text>超时未接听 ]</text>
						</template>
					</view>
				</template>
				<!-- 红包消息 -->
				<template v-else-if="formatData.businessType == 'redPacket'">
					<!-- 红包 -->
					<view class="redPacket br10" :class="{'disabled': 0}" @click="handleOpenRedBag">
						<view class="df aic">
							<image class="img fs0 mr10" src="/static/image/red-envelope.png" />
							<view class="red-packet-text cfff">{{ formatData.blessing }}</view>
						</view>
						<!-- 分割线 -->
						<view class="line"></view>
						<view class="f20" style="color:#FBD3A4">{{ formatData.redPacketType == 1 ? '余额红包' : '积分红包' }}
						</view>
					</view>
				</template>
				<!-- 视频分享消息 -->
				<template v-else-if="formatData.businessType == 'videoShare'">
					<view class="videoShare pr" @click="toVideoDetail">
						<!-- 视频封面 -->
						<image class="poster" :src="formatData.videoImages" mode="aspectFill" />
						<!-- 暂停的图标 -->
						<image class="pause pmid" src="/static/pause.png" mode="aspectFit" />

						<!-- 作者信息 -->
						<view class="auth rows pa l0 r0 b0 ptb10 plr10">
							<image class="avatar" :src="formatData.from_url" />
							<view class="name thd f1 ml10 cfff f22">{{formatData.from_name}}</view>
						</view>
					</view>
				</template>
			</template>
		</template>

		<!-- 音频文件 -->
		<template v-if="item.type == TencentCloudChat.TYPES.MSG_AUDIO">
			<div class="df aic p25" style="width: 100rpx" @click="payAudio(item)">
				<image class="mr20" style="width: 30rpx;height: 30rpx;z-index: 1;" :src="NewsAudio" />
				<text>{{ item.payload.downloadFlag }}''</text>
			</div>
		</template>

		<!-- 视频消息 -->
		<template v-if="item.type == TencentCloudChat.TYPES.MSG_VIDEO">
			<image :src="item.payload.snapshotUrl" mode="widthFix" />
			<view class="window pfull" @click="handleViewVideo(item)">
				<image class="pause pmid wh40" src="/static/pause.png" mode="aspectFit" />
			</view>
		</template>

		<!-- 咨询订单 -->
		<template v-if="item.type === 'order'">
			<JyCommodityInformation :showType="4" :right="false"></JyCommodityInformation>
		</template>
		<!-- 咨询商品-->
		<template v-if="item.type === 'shop'">
			<JyCommodityInformation :showType="3"></JyCommodityInformation>
		</template>
	</view>
</template>

<style scoped lang="scss">
	// 消息内容
	.content {
		box-sizing: border-box;
		min-height: 80rpx;
		max-width: 60vw;

		// 图片消息
		.viewImage {
			width: 200rpx;
		}
	}

	// 视频分享消息
	.videoShare {
		over-flow: hidden;

		// 封面
		.poster {
			width: 216rpx;
			height: 384rpx;
			border-radius: 10rpx;
		}

		// 
		.pause {
			width: 40rpx;
			height: 40rpx;
		}

		// 作者信息
		.auth {
			background-image: linear-gradient(to top, rgba(0, 0, 0, .2) 0, rgba(0, 0, 0, .3) 20%, rgba(0, 0, 0, .3) 60%, rgba(0, 0, 0, .00) 100%);
			border-radius: 0 0 10rpx 10rpx;

			.avatar {
				width: 40rpx;
				height: 40rpx;
				border-radius: 50%;
			}
		}
	}

	// 红包消息
	.redPacket {
		width: 360rpx;
		padding: 24rpx;
		background-color: rgb(248, 162, 60);
		color: #FCFEFD;

		&.disabled {
			opacity: .6;
		}

		.img {
			width: 50rpx;
			height: 60rpx;
		}

		.line {
			display: inline-block;
			width: 100%;
			height: 1px;
			background: #EF9B45;
			margin: 10rpx 0;
		}
	}

	// 遮罩
	.window {
		background-color: rgba(0, 0, 0, 0.2);
	}
</style>