<template>
	<view class="content">
		<image v-show="!inputFalg" src="../../static/images/IM.png" mode="widthFix"
			style="width: 68rpx;margin: 0 20rpx 0 0;"></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="inputblur"></u--input>
		</view>

		<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>

		<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"></component>
	</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"
	export default {
		name: "foot",
		components: {
			more,
			sign,
			gift,
			service,
			reward,
			shoplist
		},
		data() {
			return {
				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: {
			// 输入框聚焦事件
			inputFocus() {
				this.inputFalg = false
			},
			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 = ''
			},
		}
	}
</script>

<style lang="scss" scoped>
	.absolute {
		position: absolute;
	}

	.content {
		width: 100%;
		display: flex;
		align-items: center;
		padding: 0 40rpx;

		.input {
			// width: 294rpx;
			flex: 1;
		}

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

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

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