<template>
	<view class="body">
		<view class="state-bar"></view>
		<view class="head">
			<view class="left"></view>
			<view class="center title">线索</view>
			<view class="right"></view>
		</view>
		<view class="search-body">
			<view class="balance">
				<view v-if="userInfo.token" class="balance-cont">
					<view class="icon iconfont icon-GoogleLogo"></view>
					<view class="point-cont">500</view>
					<view class="add iconfont icon-Plus"></view>
				</view>
			</view>
			<view class="center-cont">
				<view class="bg-ball-1"></view>
				<view class="bg-ball-2"></view>
				<view class="logo-text">
					<image mode="aspectFit" class="logo" src="/static/tab-icon/home-active.png"></image>
					<view class="title">星光客户线索搜寻</view>
				</view>
				<view class="search-box-cont">
					<view class="search-box">
						<view class="type-item">
							谷歌搜索
						</view>
						<textarea @focus="openConfig(false)" placeholder="请输入搜索关键词" class="input" v-model="keyword"></textarea>
						<view class="search-line">
							<view class="history">历史搜索结果</view>
							<view v-if="userInfo.token" class="search-button">开始搜索</view>
							<navigator url="/pages/user/login" v-else class="search-button">登录/注册</navigator>
						</view>
					</view>
				</view>
				<view class="search-type">
					<view class="type-item active">
						<text class="iconfont icon-GoogleLogo"></text>
						<text class="name">谷歌搜索</text>
					</view>
					<view class="type-item">
						<text class="iconfont icon-MapPin"></text>
						<text class="name">地图搜索</text>
					</view>
					<view class="type-item">
						<text class="iconfont icon-AppWindow"></text>
						<text class="name">域名搜索</text>
					</view>
					<view class="type-item">
						<text class="iconfont icon-IdentificationCard"></text>
						<text class="name">名片搜索</text>
					</view>
				</view>
			</view>
			<view></view>
			<view class="search-config">
				<view @tap="openConfig(!isOpenConfig)" :class="['drag',isOpenConfig?'open':'']"><view class="grag-line"></view></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyword: '',
				isOpenConfig: false
			};
		},
		methods:{
			/**
			 * 设定设置栏打开状态
			 * @param {Boolean} state 设置栏是否展开
			 */
			openConfig(state){
				this.isOpenConfig = state
			}
		},
		computed: {
			userInfo() {
				return this.$store.getters.userInfo
			}
		}
	}
</script>

<style scoped>
.body{
	display: grid;
	grid-template-rows: auto auto 1fr; 
	.search-body{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		gap: 60rpx;
		.search-config{
			position: fixed;
			transition-duration: 300ms;
			left: 0;
			bottom: -530rpx;
			border-radius: 24rpx 24rpx 0 0;
			box-shadow: 0 0 16rpx 0 #00000011;
			width: 100%;
			height: 600rpx;
			box-sizing: border-box;
			background-color: #F7F7F7;
			&:has(.open){
				bottom: 0;
			}
			.drag{
				width: 100%;
				height: 70rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				.grag-line{
					height: 6rpx;
					width: 6rpx;
					position: relative;
					&::after{
						transition-duration: 300ms;
						content: '';
						display: block;
						position: absolute;
						border-radius: 6rpx;
						width: 40rpx;
						height: 6rpx;
						background-color: gray;
						right: 0;
						top: 0;
						transform-origin: 100% 50%;
						rotate: -16deg;
					}
					&::before{
						transition-duration: 300ms;
						content: '';
						display: block;
						position: absolute;
						border-radius: 6rpx;
						width: 40rpx;
						height: 6rpx;
						background-color: gray;
						left: 0;
						top: 0;
						transform-origin: 0% 50%;
						rotate: 16deg;
					}
				}
				&.open{
					bottom: 0;
					.grag-line{
						&::after{
							rotate: 16deg;
						}
						&::before{
							rotate: -16deg;
						}
					}
				}
			}
		}
		.center-cont{
			position: relative;
			margin-top: -300rpx;
			display: flex;
			flex-direction: column;
			gap: 30rpx;
			@media (max-height: 1000rpx) {
				margin-top: -100rpx;
			}
			.bg-ball-1{
				position: absolute;
				right: -40rpx;
				top: 0;
				width: 240rpx;
				height: 240rpx;
				border-radius: 50%;
				background-color: #C9539A;
				filter: blur(120rpx);
			}
			.bg-ball-2{
				position: absolute;
				left: -40rpx;
				bottom: -100rpx;
				width: 240rpx;
				height: 240rpx;
				border-radius: 50%;
				background-color: #F09649;
				filter: blur(120rpx);
			}
			.search-type{
				position: relative;
				display: flex;
				gap: 12rpx;
				.type-item{
					display: flex;
					align-items: center;
					gap: 4rpx;
					padding: 6rpx 12rpx;
					padding-right: 16rpx;
					border: 1rpx solid lightgray;
					border-radius: 60rpx;
					background-color: #EDEDED88;
					.name{
						font-size: 24rpx;
					}
					.iconfont{
						font-size: 26rpx;
					}
					&.active{
						border: 1rpx solid #C9539A;
						color: #C9539A;
						background-color: #efd3e788;
					}
				}
			}
			.search-box-cont{
				position: relative;
				box-sizing: border-box;
				width: 700rpx;
				height: 230rpx;
				padding: 2rpx;
				border-radius: 16rpx;
				background-image: linear-gradient(45deg, #F09649, #C9539A);
				box-shadow: 0 0 16rpx 0 #C9539A44;
				.search-box{
					box-sizing: border-box;
					padding: 8rpx 16rpx;
					display: grid;
					grid-template-columns: auto 1fr;
					grid-template-rows: 1fr auto;
					background-color: white;
					width: 100%;
					height: 100%;
					border-radius: 13rpx;
					.search-line{
						grid-column: span 2;
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-bottom: 8rpx;
						.search-button{
							color: white;
							font-size: 26rpx;
							font-weight: 600;
							padding: 12rpx 24rpx;
							border-radius: 60rpx;
							background-image: linear-gradient(45deg, #F09649, #C9539A);
						}
						.history{
							font-size: 25rpx;
							margin-left: 8rpx;
							color: #333333;
						}
					}
					.type-item{
						height: fit-content;
						font-weight: 600;
						color: #C9539A;
					}
					.input{
						box-sizing: border-box;
						font-size: 27rpx;
						padding-left: 16rpx;
						padding-top: 5rpx;
						width: 100%;
						height: 100%;
					}
				}
			}
			.logo-text{
				position: relative;
				display: flex;
				flex-direction: column;
				align-items: center;
				gap: 20rpx;
				.logo{
					width: 110rpx;
					height: 110rpx;
				}
				.title{
					font-size: 36rpx;
					font-weight: 600;
					text-align: center;
					color: transparent;
					background-image: linear-gradient(45deg, #F09649, #C9539A);
					-webkit-background-clip: text;
					background-clip: text;
					display: inline-block;
				}
			}
		}
		.balance{
			position: relative;
			z-index: 1 ;
			width: 700rpx;
			display: flex;
			justify-content: flex-end;
			.balance-cont{
				box-shadow: 0 0 16rpx 0 #F0964944;
				background-color: #FFFFFF;
				font-weight: 600;
				display: flex;
				font-size: 26rpx;
				align-items: center;
				padding: 4rpx;
				padding-right: 5rpx;
				padding-left: 8rpx;
				border-radius: 60rpx;
				gap: 8rpx;
				border: 3rpx solid #F09649;
				.point-cont{
					color: #F09649;
				}
				.add{
					font-size: 28rpx;
					width: 38rpx;
					height: 38rpx;
					border-radius: 50%;
					color: white;
					line-height: 38rpx;
					text-align: center;
					background-color: #F09649;
					margin-left: 6rpx;
				}
				.icon{
					font-size: 36rpx;
					color: #F09649;
				}
			}
		}
	}
}
</style>