<template>
	<view class="footer">
		<view class="content">
			<!-- 表情 -->
			<image v-show="!inputFalg  && !faceFalg" src="../../static/images/biaoqing.png" mode="widthFix"
				style="width: 68rpx;margin: 0 20rpx 0 0;" @touchend.prevent="jp_click(0)">

			</image>
			<image v-show="!inputFalg && faceFalg" src="../../static/images/jianpan.png" mode="widthFix"
				style="width: 68rpx;margin: 0 20rpx 0 0;" @touchend.prevent="jp_click(1)">
			</image>
			<!-- 输入框 -->
			<view class="input">
				<!-- <input style="background-color: #d9d9d9;height: 64rpx;padding-left:20rpx;border-radius: 40rpx;max-height: 192rpx;word-wrap: break-word;
				width: 69%;"
					type="text" placeholder="说点什么吧..." v-model="value" @focus="inputFocus"
					@blur="" confirm-type="send" @confirm="send" @keyup.enter="send" id="inputdata" :focus="false">
				</input> -->
				<u--textarea autoHeight
					style="background-color: #d9d9d9;padding-left:20rpx;border-radius: 40rpx;width: 90%;max-height: 150rpx;overflow-y: scroll;"
					type="text" placeholder="说点什么吧..." v-model="value" @focus="inputFocus" @blur="inputblur"
					confirm-type="send" @confirm="send" @keyup.enter="send" id="inputdata" :focus="false">
				</u--textarea>
			</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" class="face_view" :style="exc_style" @touchend.prevent>
			<view v-for="(item, index) in 29">
				<img :src="facelist['smiley_' + (index + 1)]"
					style="width: 24px;height: 24px; float: left;margin-left: 20px;margin-top: 20px;"
					@touchend.prevent="sendFace(index + 1)" />
			</view>
		</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"
	import face from "@/until/face.js"


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

		},
		data() {
			return {
				faceFalg: false,
				inputFalg: true,
				currentTabComponent: '',
				show: false,
				foucsinput: false,
				value: '',
				facelist: face.face,
				exc_style: {},
				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"
					},
				],
				bqheight: 0,
			};
		},
		methods: {

			jp_click(e) {
				if (e == 0) {
					this.faceFalg = true
					uni.hideKeyboard()
				} else {
					this.faceFalg = false
					this.foucsinput = true
				}
			},
			//提交输入
			send() {
				var obj = {
					type: 1,
					sendText: this.value
				}
				this.$emit("sendmsg", obj)
				this.value = ""
			},
			// 输入框聚焦事件
			inputFocus() {
				this.inputFalg = false
				uni.onKeyboardHeightChange(res => {
					this.exc_style = {
						"height": res.height*2 + "rpx"
					}
					console.log(res.height)
				})
			},
			inputblur() {
				this.inputFalg = true
				this.faceFalg = false
			},
			// 图标按钮点击事件
			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)
			},
			sendFace(e) {
				var sendText = this.value + "[s" + e + "]"
				this.value = sendText
			},
		}
	}
</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;
			}
		}
	}

	.face_view {
		height: 400rpx;
		overflow-y: scroll;
	}
</style>
