<template>
	<view class="tmp-box">
		<view class='filterBox'>
			<view class='filter-input'>
				<text style="color: #b8b8b8;" class="iconfont icon-sousuo filterImg" />
				<input class="text" type='text' v-model="inputVal" confirm-type="搜索" @confirm='handleFllter'
					placeholder='搜索'></input>
			</view>
			<u-icon name="plus" color="#606064" size="28" @click="show = true"></u-icon>
		</view>
		<u-popup :show="show" @close="close" @open="open" mode="bottom" closeable round="10">
			<view class="add-contacts">
				<view class="add-contacts-title">
					新建分组
				</view>
				<view class="add-contacts-body">
					<u--input placeholder="请输入分组名称" border="surround" v-model="value"></u--input>
				</view>
				<view class="add-contacts-footer">
					<u-button style="width: 30%;" type="primary" text="确定" @click="sure"></u-button>
					<u-button style="width: 30%;" text="取消" @click="show=false"></u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				inputVal: "",
				show: false,
				value:""
			};
		},
		methods: {
			sure(){
				if(this.value==""){
					uni.showToast({
						title:"输入不能为空",
						icon:"none",
						duration:2000
					})
					return;
				}
				this.show = false;
				this.$emit("add",this.value)
			},
			handleFllter(e) {
				// console.log(e.detail.value)
				this.$emit("confirm", e.detail.value)
			},
			clears() {
				console.log(this.inputVal)
				this.inputVal = ""
				console.log('清除了内容')
			},
			open() {
				// console.log('open');
			},
			close() {
				this.show = false
				// console.log('close');
			}
		},
	}
</script>

<style lang="scss" scoped>
	.filterBox {
		padding: 15rpx 0px;
		display: flex;
		justify-content: space-around;
		background-color: #fff;

		.filter-input {
			width: 80%;
			height: 80rpx;
			background-color: #eeeff0;
			border-radius: 40rpx;
			display: flex;
			align-items: center;

			padding-left: 40rpx;

			.filterImg {
				width: 32rpx;
				height: 32rpx;
				margin-right: 20rpx;
				margin-bottom: 5rpx;
			}

			.filterImgs {
				width: 32rpx;
				height: 32rpx;

			}

			.text {
				width: 84%;
				background-color: #eeeff0;
				font-size: 32rpx;
				color: #000;
			}
		}
	}

	// /deep/.u-popup__content {
	// 	width: 80% !important;

		.add-contacts {
			width: 100%;
			height: 400rpx;
			display: flex;
			flex-direction: column;
			align-items: center;

			.add-contacts-title {
				height: 80rpx;
				line-height: 80rpx;
			}

			.add-contacts-body {
				margin-top: 10%;
				width: 80%;
			}

			.add-contacts-footer {
				width: 80%;
				margin-top: 10%;
				display: flex;
			}
		}
	// }

	@import url("../css/icon.css");
</style>
