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

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

	// 拨打电话
	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', props.item)
	}

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

<template>
	<view class="content pr">
		<!-- 图片 -->
		<template v-if="item.callbackData.MsgType === TencentCloudChat.TYPES.MSG_IMAGE">
			<image class="br10" :src="formatData.MsgContent.ImageInfoArray[0].URL" mode="widthFix" />
		</template>
		<!-- 文字 -->
		<template v-else-if="item.callbackData.MsgType === TencentCloudChat.TYPES.MSG_TEXT">
			<view class="p25">
				{{ formatData.MsgContent.Text }}
			</view>
		</template>
		<!-- 自定义消息 -->
		<template v-else-if="item.callbackData.MsgType === 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 mr10" src="/static/image/red-envelope.png" />
							<view class="red-packet-text cfff">{{ formatData.data.blessing }}</view>
						</view>
						<!-- 分割线 -->
						<view class="line"></view>
						<view class="f20" style="color:#FBD3A4">{{ formatData.data.payType == 1 ? '余额红包' : '积分红包' }}</view>
					</view>
				</template>
			</template>
		</template>

		<!-- 音频文件 -->
		<template v-if="item.callbackData.MsgType == 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.callbackData.MsgType == 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.callbackData.MsgType === 'order'">
			<JyCommodityInformation :showType="4" :right="false"></JyCommodityInformation>
		</template>
		<!-- 咨询商品-->
		<template v-if="item.callbackData.MsgType === 'shop'">
			<JyCommodityInformation :showType="3"></JyCommodityInformation>
		</template>
	</view>
</template>

<style scoped lang="scss">
	.content {
		box-sizing: border-box;
		min-height: 80rpx;
		max-width: 60vw;
		font-size: 28rpx;

		image {
			width: 200rpx;
		}
	}

	// 红包消息
	.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>