<template>
	<view class="footer">
		<view class="content">
			<!-- 表情 -->
			<image v-show="!inputFalg" src="../../static/images/biaoqing.png" mode="widthFix"
				style="width: 68rpx;margin: 0 20rpx 0 0;" @click="faceFalg = true">
			</image>
			<!-- 输入框 -->
			<view class="input">
				<u--input style="background-color: #d9d9d9;height: 64rpx;padding-left:20rpx;" type="text" border="none"
					shape="circle" placeholder="说点什么吧..." v-model="value" @focus="inputFocus" @blur=""
					confirm-type="send" @confirm="send" @keyup.enter="send">
				</u--input>
			</view>
			<!-- <u-button style="margin: 0 0 0 20rpx;width: 20%;height: 70%;" text="发送" type="success" v-show="!inputFalg" touchend.prevent="send">
			</u-button> -->
			<!-- 发送 -->
			<button class="btn_send" text="发送" v-show="!inputFalg" @touchend.prevent="send" >
				发送</button>
			<!-- icon按钮 -->
			<view class="icon" v-show="inputFalg">
				<image v-for="(item,index) in imageList" :key="index+''" :src="item.url" style="width:68rpx"
					mode="widthFix" @click="iconbtn(item.title)"></image>
			</view>
			<!-- 右侧icon按钮 -->
			<view class="icon-right" v-show="inputFalg">
				<image class="iconright" v-for="(item,index) in imageListRight" :key="index+''" :src="item.url"
					style="width:68rpx" mode="widthFix" @click="iconbtn(item.title)"></image>
			</view>
			<!-- icontab -->
			<component class="absolute" :is="currentTabComponent" @onClose="onClose" :show="show"
				@specialShow="specialShow"></component>
		</view>
		<!-- 表情框 -->
		<view v-show="faceFalg" style="border: 1px solid red; height: 250rpx;"></view>
	</view>

</template>

<script>
	import more from "./more/more.vue";
	import sign from "./sign/sign.vue";
	import gift from "./gift/gift.vue";
	import service from "./service/service.vue";
	import reward from "./reward/reward.vue";
	import shoplist from "./shopList/shoplist.vue"
	import msg from "@/components/chat/chat.vue"



	export default {
		name: "foot",
		components: {
			more,
			sign,
			gift,
			service,
			reward,
			shoplist
		},
		created() {

		},
		data() {
			return {
				faceFalg:false,
				inputFalg: true,
				currentTabComponent: '',
				show: false,
				value: '',
				imageList: [{
						title: "商城",
						url: "../../static/images/shopCart.png"
					},
					{
						title: "礼物",
						url: "../../static/images/礼物@2x.png"
					},
					{
						title: "打赏",
						url: "../../static/images/打赏@2x.png"
					},
					{
						title: "更多",
						url: "../../static/images/更多@2x.png"
					},
				],
				imageListRight: [{
						title: "客服",
						url: "../../static/images/客服@2x.png"
					},
					{
						title: "举手",
						url: "../../static/images/举手@2x.png"
					},
					// {
					// 	title: "红包",
					// 	url: "../../static/images/红包@2x.png"
					// },
					// {
					// 	title: "推荐商品",
					// 	url: "../../static/images/推荐商品@2x.png"
					// },
					{
						title: "签到",
						url: "../../static/images/签到@2x.png"
					},
				]
			};
		},
		methods: {
			// 选择表情
			changeFace(){
				this.faceFalg = true;
			},
			//提交输入
			send() {
				var obj = {
					type: 1,
					sendText: this.value
				}
				this.$emit("sendmsg", obj)
				this.value = ""
			},
			// 输入框聚焦事件
			inputFocus() {
				this.inputFalg = false
				uni.onKeyboardHeightChange(res => {
					console.log(res.height)
				})
			},
			inputblur() {
				this.inputFalg = true
			},
			// 图标按钮点击事件
			iconbtn(title) {
				this.show = true;
				switch (title) {
					case "商城":
						this.currentTabComponent = shoplist;
						break;
					case "礼物":
						this.currentTabComponent = gift;
						break;
					case "打赏":
						this.currentTabComponent = reward;
						break;
					case "更多":
						this.currentTabComponent = more;
						break;
					case "签到":
						this.currentTabComponent = sign;
						break;
					case "举手":

						break;
					case "客服":
						this.currentTabComponent = service;
						break;
				}
			},
			// 更多
			onClose(str) {
				this.show = false;
				this.currentTabComponent = ''
			},
			// 点击发送特效
			specialShow(url) {
				this.$emit("specialShow", url)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.absolute {
		position: absolute;
	}
	
	.footer {
		padding: 10rpx 0;
	}
	.content {
		box-sizing: border-box;
		width: 100%;
		display: flex;
		align-items: center;
		padding: 0 40rpx;
		.input {
			flex: 1;
		}

		.btn_send {
			margin: 0 0 0 20rpx;
			width: 20%;
			height: 70%;
			background-color: #19be6b;
			font-size: 24rpx;
			text-align: center;
			color: #fff;
			outline: none;
		}

		.icon {
			flex: 1;
			text-align: right;
			display: flex;
			justify-content: space-between;
			margin-left: 20rpx;
		}

		.icon-right {
			position: fixed;
			bottom: 100rpx;
			right: 40rpx;
			display: flex;
			flex-direction: column;

			.iconright {
				margin: 12rpx 0;
			}
		}
	}
</style>
