<template>
	<view class="chat_action_bar">
		<view class="fun-box u-border-top show-fun-box" v-if="isEmoji">
			<scroll-view scroll-y="true">
				<view class="emoji-list">
					<view @tap.stop="emojiClick(emojiList[i])" v-for="(emojiItem,i) in emojiList" :key="i">
						{{emojiItem}}
					</view>
				</view>
			</scroll-view>
			<view class="delete-btn">
				<view @click="delSendStr()" @longpress="clearSendStr()">
					<u-icon name="backspace" size="32" color="#ffffff"></u-icon>
				</view>
			</view>
		</view>
		<u-row class="action_row" v-else>
			<u-col v-for="item in actionList" :key="item.idx" @click="actionClick(item)" span="3">
				<view class="action_item">
					<image class="img" :src="item.icon" alt="" srcset="" />
					<text class="action_item_title">{{ item.title }}</text>
				</view>
			</u-col>
		</u-row>
	</view>
</template>

<script>
	import {ChatingFooterActionTypes,} from "@/constant";
	import emojis from "@/common/emojis.js"
	import chating_action_image from "@/static/images/chating_action_image.png";
	import chating_action_camera from "@/static/images/chating_action_camera.png";
	import chating_action_call from "@/static/images/chating_action_call.png";
	import chating_action_location from "@/static/images/chating_action_location.png";

	export default {
		props:{
			isEmoji:{
				type:Boolean,
				default:false
			}
		},
		watch:{
			isEmoji(v){
				this.emojiMode = v;
			}
		},
		data() {
			return {
				emojiList:emojis,
				actionList: [
					{
						idx: 0,
						type: ChatingFooterActionTypes.Album,
						title: "照片",
						icon: chating_action_image,
					},
					{
						idx: 1,
						type: ChatingFooterActionTypes.Camera,
						title: "拍摄",
						icon: chating_action_camera,
					},
					{
						idx: 2,
						type: ChatingFooterActionTypes.Video,
						title: "视频通话",
						icon: chating_action_call,
					},
					{
						idx: 3,
						type: ChatingFooterActionTypes.Location,
						title: "位置",
						icon: chating_action_location,
					},
					// {
					// 	idx: 0,
					// 	type: ChatingFooterActionTypes.Album,
					// 	title: "红包",
					// 	icon: chating_action_image,
					// },
					// {
					// 	idx: 0,
					// 	type: ChatingFooterActionTypes.Album,
					// 	title: "转账",
					// 	icon: chating_action_image,
					// }
				],
			};
		},
		methods: {
			//删除表情和文字
			delSendStr: function() {
				this.$emit("onUserEvent",{type:"delSendStr"});
			},
			//清除文本
			clearSendStr: function() {
				this.$emit("onUserEvent",{type:"clearSendStr"});
			},
			async emojiClick(emoji){
				this.$emit("prepareMediaMessage", 'emoji',emoji);
			},
			async actionClick(action) {
				switch (action.type) {
					case ChatingFooterActionTypes.Video:
						this.$emit("prepareMediaMessage", action.type);
						break;
					case ChatingFooterActionTypes.Album:
						this.$emit("prepareMediaMessage", action.type);
						break;
					case ChatingFooterActionTypes.Camera:
						this.$emit("prepareMediaMessage", action.type);
						break;
					case ChatingFooterActionTypes.Location:
						this.$emit("prepareMediaMessage", action.type);
						break;
					default:
						break;
				}
			},
		},
	};
</script>

<style lang="scss" scoped>
	.chat_action_bar {
		position: relative;
		background: #ececec;
		padding: 24rpx 36rpx;
		
		.action_row {
			flex-wrap: wrap;
			margin-bottom: 24rpx;
		}

		.action_item {
			@include centerBox();
			flex-direction: column;
			margin-top: 24rpx;

			.img {
				width: 96rpx;
				height: 96rpx;
			}

			&_title {
				font-size: 24rpx;
				color: #999;
				margin-top: 6rpx;
			}
		}

		.emoji-list {
			height: 400rpx;
			display: flex;
			align-content: flex-start;
			flex-wrap: wrap;

			view {
				width: 90rpx;
				height: 90rpx;
				font-size: 48rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
		.delete-btn{
			position: absolute;
			bottom: 90rpx;
			right: 10rpx;
			z-index: 1000;
			display: flex;
			justify-content: flex-end;
			align-items: flex-end;
			>view{
				border: 1px solid #f1f1f1;
				border-radius: 10rpx; 
				background-color: rgba(0, 0, 0, 0.6);
				text-align: center;
				padding:20rpx 50rpx;
				margin-right: 8rpx;
				.u-icon{justify-content: center;}
				::v-deep .uicon-backspace{
					font-size: 64rpx !important;
				}
			}
		}
	}
</style>