<template>
	<view>
		<u-popup v-model="isDashan" mode="center"  border-radius="20" :mask-close-able="false">
			<view class="dashan">
				<view class="titles">选择搭讪语<image src="@/static/cha.png"></image></view>
				<view class="content">
					<view class="a">
						<view class="txt">选择搭讪语：</view>
						<view class="box">
							<input type="text" placeholder="请输入" />
						</view>
					</view>
					<view class="b">
						<view class="txt">系统推荐：</view>
						<view class="list">
							<view class="item" v-for="i in 5" :class="tabIndex == i?'item-on':''" >
								<view class="text">哈喽！很高兴认识你，一起嗨皮吧~</view>
								<view class="anniu anniu-on" v-if="tabIndex == i">默认</view>
								<view class="anniu" v-else @click="tabItem(i)">设为默认</view>
							</view>
						</view>
					</view>
				</view>
				<view class="fd">
					<view class="btn" @click="send">发送</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		name:"dashan",
		props: {
			isDashan: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				tabIndex: 1
			}
		},
		methods: {
			tabItem(index) {
				this.tabIndex = index;
			},
			send() {
				this.isDashan = false;
				uni.showModal({
					title: "搭讪成功！",
					content: "“你好，在吗？很高兴认识你”"
				})
			}
		}
	}
</script>

<style scoped lang="scss">
.dashan{
	width: 670rpx;
	height: 970rpx;
	background: #FFFFFF;
	border-radius: 20rpx;
	.fd{
		margin-top: 50rpx;
		.btn{
			width: 300rpx;
			text-align: center;
			line-height: 80rpx;
			background: linear-gradient(0deg, #000000, #3D3B38);
			box-shadow: 0px 4rpx 18rpx 0px rgba(42,41,39,0.34);
			border-radius: 80rpx;
			font-weight: 500;
			font-size: 26rpx;
			color: #FFFFFF;
			margin: 0 auto;
		}
	}
	.titles{
		padding: 35rpx 20rpx 25rpx;
		border-bottom: 1px solid #EAEAEA;
		text-align: center;
		image{
			float: right;
			width: 40rpx;
			height: 40rpx;
		}
	}
	.content{
		padding: 0 30rpx;
		overflow: hidden;
		.txt{
			font-weight: 500;
			font-size: 30rpx;
			color: #222222;
			margin-top: 20rpx;
		}
		.box{
			width: 100%;
			margin-top: 20rpx;
			input{
				width: 610rpx;
				height: 80rpx;
				background: #FFFFFF;
				border-radius: 10rpx;
				border: 1px solid #E5E5E5;
				padding: 0 20rpx;
				box-sizing: border-box;
				font-weight: 500;
				font-size: 26rpx;
				color: #212121;
			}
		}
		.list{
			.item{
				margin-top: 20rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.text{
					width: 460rpx;
					height: 80rpx;
					background: #F5F5F5;
					border-radius: 10rpx;
					font-weight: 500;
					font-size: 26rpx;
					border: 1px solid #F5F5F5;
					color: #222222;
					line-height: 80rpx;
					padding: 0 20rpx;
					box-sizing: border-box;
				}
				.anniu{
					font-weight: 500;
					font-size: 26rpx;
					color: #222222;
					&-on{
						width: 130rpx;
						height: 50rpx;
						background: linear-gradient(0deg, #000000, #3D3B38);
						box-shadow: 0px 4rpx 18rpx 0px rgba(42,41,39,0.34);
						border-radius: 50rpx;
						text-align: center;
						line-height: 50rpx;
						font-size: 24rpx;
						color: #FFFFFF;
						display: none;
					}
				}
				&-on{
					.text{
						
						border: 1px solid #000000;
					}
					.anniu{
						&-on{
							display: block;
						}
					}
				}
			}
		}
	}
}
</style>