<template>
	<view class="content">
		<view class="input">
			<u--input style="background-color: #d9d9d9;height: 64rpx;padding-left:20rpx;" type="text" border="none" shape="circle" placeholder="说点什么吧..." v-model="value" @change="change"></u--input>
		</view>

		<view class="icon">
			<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">
			<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>
		<!-- 更多 -->
		<more class="absolute" @moreClose="moreClose" :show="moreFalg"></more>
	</view>
</template>

<script>
	import more from "./more/more.vue"
	export default {
		name: "foot",
		components:{more},
		data() {
			return {
				value: '',
				moreFalg:false,
				imageList: [{
						title: "商城",
						url: "../../static/images/商城@2x.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: {
			// 输入框点击事件
			change(){
				
			},
			// 图标按钮点击事件
			iconbtn(title) {
				switch (title) {
					case "商城":
						break;
					case "礼物":
						break;
					case "打赏":
						break;
					case "更多":
						this.moreFalg = !this.moreFalg;
						break;
				}
			},
			// 更多
			moreClose(){ this.moreFalg = false },
		}
	}
</script>

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

		.input {
			width: 294rpx;
		}

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