<template>
	<view>
		<SearchTop @confirm="confirm" ref="searchTopRef" @init="init">
			<template>
				<view class="answer-1">
					<view @click="switchItem(PAGETYPE.ONLINE)" :class="{'answer-i': true, 'answer-is': type === PAGETYPE.ONLINE}">在线答疑</view>
					<view @click="switchItem(PAGETYPE.CLASSROOM)" :class="{'answer-i': true, 'answer-is': type === PAGETYPE.CLASSROOM}">答疑课堂</view>
				</view>
				<view class="answer-2">
					<view class="answer-2-l">
						<picker @change="bindpickerChange" :value="index" :range="subjectList" range-key="title">
							<view class="answer-2-l-i">
								任课科目 <u-icon size="12" name="arrow-down-fill" color="#646464"></u-icon>
							</view>
						</picker>
						<picker @change="bindpickerChange2" :value="index" :range="basedOnList" range-key="title">
							<view class="answer-2-l-i">
								用户评价 <u-icon size="12" name="arrow-down-fill" color="#646464"></u-icon>
							</view>
						</picker>
					</view>
					<view class="answer-2-r" @click="toMyQuestion">
						<image class="answer-2-r-i" src="@/static/imagesV2/icon39.png" mode="widthFix"></image>
						<text>我的提问</text>
					</view>
				</view>
				<view class="answer-3">
					<view class="answer-3-c">
						<u-icon name="error-circle" color="#FF4102"></u-icon>
						<text class="answer-3-c-t">温馨提示：每人每月限制提问五次</text>
					</view>
				</view>
			</template>
		</SearchTop>
		<PaddingTopB ref="paddingTopBRef" otherUnit="px">
			<template>
				<view class="answer">
					<view v-if="type === PAGETYPE.ONLINE">
						<view class="answer-item" v-for="item in 20" :key="item">
							<view class="answer-item-tw" @click="toAnswerForm">
								<image class="answer-item-tw-i" src="@/static/imagesV2/icon41.png"></image>
								<text>提问</text>
							</view>
							<view class="answer-item-l">
								<image class="answer-item-l-img" src="@/static/images/tx.png" mode="widthFix"></image>
							</view>
							<view class="answer-item-r">
								<view class="answer-item-r-1">程菲</view>
								<view class="answer-item-r-2">笔试系统精讲班</view>
								<view class="answer-item-r-3">
									<image class="answer-item-r-3-i" src="@/static/imagesV2/icon40.png" mode="widthFix"></image>
									<text class="answer-item-r-3-la">用户评分</text>
									<text class="answer-item-r-3-f">3.6</text>
								</view>
							</view>
						</view>
					</view>
					<view v-if="type === PAGETYPE.CLASSROOM">
						<view class="answer-item2">
							<view class="myQuestion-2-i-1">
								<view class="myQuestion-2-i-1-l">
									<image class="myQuestion-2-i-1-l-i" src="@/static/images/tx.png" mode="widthFix"></image>
								</view>
								<view class="myQuestion-2-i-1-r">
									<view class="myQuestion-2-i-1-r-1">李晋心</view>
									<view class="myQuestion-2-i-1-r-2">2023-12-10发布</view>
								</view>
							</view>
							<view class="myQuestion-2-i-2">
								老师你好请问工商管理专业的应届生可以报考工商管理
								内的二级专业吗？比如说会计学，旅游管理？
							</view>
							<view class="myQuestion-2-i-4">
								<u--image
									v-for="(item, index) in []"
									:key="index"
									radius="15rpx"
									height="145rpx"
									width="145rpx"
									@click.native="seeImg(index)"
									:src="item"></u--image>
							</view>
							<view class="myQuestion-2-i-3">
								<view class="myQuestion-2-i-3-l">
									<view class="myQuestion-2-i-3-l-1" v-if="false">已解答</view>
									<view class="myQuestion-2-i-3-l-1 myQuestion-2-i-3-l-1s" v-else>已解答</view>
									<view class="myQuestion-2-i-3-l-t">程菲</view>
								</view>
								<view class="myQuestion-2-i-3-r">
									2023-12-11
								</view>
							</view>
						</view>
					</view>
					<u-empty
						mode="data"
						text="暂无数据"
						icon="/static/imagesV2/icon24.png"
					>
					</u-empty>
				</view>
			</template>
		</PaddingTopB>
	</view>
</template>

<script>
	import SearchTop from "./components/SearchTop/index.vue"
	import PaddingTopB from "@/components/PaddingTopB/index.vue"
	import { PAGETYPE } from "@/emit/index.js"
	export default {
		components: {
			SearchTop,
			PaddingTopB
		},
		data() {
			return {
				PAGETYPE,
				type: PAGETYPE.CLASSROOM,
				subjectList: [
					{
						title: '科目',
						id: 1
					}
				],
				basedOnList: [
					{
						title: '用户评价',
						id: 1
					}
				]
			}
		},
		mounted() {
			
		},
		onReachBottom() {
			debugger
		},
		methods: {
			toAnswerForm() {
				uni.navigateTo({
					url: '/pagesStu/answerForm/answerForm'
				})
			},
			toMyQuestion() {
				uni.navigateTo({
					url: '/pagesStu/myQuestion/myQuestion'
				})
			},
			init() {
				let result = this.$refs.searchTopRef.getOtherHeight()
				this.$refs.paddingTopBRef.setOtherHeight(result, 'px')
			},
			bindpickerChange(e) {
				
			},
			bindpickerChange2(e) {
				
			},
			switchItem(type) {
				this.type = type
			},
			confirm(e) {
				console.log(e)
			}
		}
	}
</script>

<style lang="scss" scoped>
.answer-1{
	border-top:1rpx solid #f3f4f6;
	display: flex;
	background: #fff;
	justify-content: space-around;
	.answer-i{
		font-size: 28rpx;
		color: #323232;
		height: 88rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.answer-is{
		color: #2D81FF;
		position: relative;
		&:before{
			content: '';
			position: absolute;
			bottom: 0;
			left: 50%;
			background-image: url(@/static/imagesV2/icon23.png);
			background-size: 100% 100%;
			transform: translateX(-50%);
			height: 24rpx;
			width: 24rpx;
		}
	}
}
.answer-2{
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 86rpx;
	padding: 0 25rpx;
	background: #f8f8f8;
	.answer-2-l{
		color: #646464;
		font-size: 26rpx;
		display: flex;
		.answer-2-l-i{
			padding-right: 25rpx;
			display: flex;
			align-items: center;
		}
	}
	.answer-2-r{
		font-size: 28rpx;
		color: #323232;
		color: #323232;
		display: flex;
		align-items: center;
		line-height: 1.4;
		.answer-2-r-i{
			height: 26rpx;
			width: 26rpx;
			margin-right: 8rpx;
		}
	}
}
.answer-3{
	padding: 0 25rpx;
	background: #f8f8f8;
	.answer-3-c{
		font-size: 24rpx;
		color: #EF5D22;
		border-radius: 200rpx;
		background-color: #F2E9E6;
		display: flex;
		padding: 0 30rpx;
		align-items: center;
		height: 60rpx;
		align-items: center;
		.answer-3-c-t{
			margin-left: 20rpx;
		}
	}
}
.answer-item{
	display: flex;
	background-color: #FFFFFF;
	border-radius: 20rpx;
	padding: 30rpx;
	position: relative;
	margin-bottom: 20rpx;
	.answer-item-tw{
		position: absolute;
		top: 32rpx;
		right: 30rpx;
		height: 56rpx;
		border-radius: 200rpx;
		color: #2D81FF;
		display: flex;
		align-items: center;
		background-color: rgba(#2D81FF, .1);
		padding: 0 34rpx;
		line-height: 1.4;
		font-size: 26rpx;
		.answer-item-tw-i{
			height: 24rpx !important;
			width: 24rpx !important;
			margin-right: 9rpx;
		}
	}
	.answer-item-l{
		.answer-item-l-img{
			height: 110rpx;
			width: 110rpx;
			border-radius: 200rpx;
		}
	}
	.answer-item-r{
		flex-grow: 1;
		margin-left: 30rpx;
		.answer-item-r-1{
			font-size: 30rpx;
			color: #323232;
			font-weight: bold;
		}
		.answer-item-r-2{
			font-size: 26rpx;
			color: #646464;
			margin: 20rpx 0;
		}
		.answer-item-r-3{
			display: flex;
			align-items: center;
			.answer-item-r-3-i{
				height: 30rpx;
				width: 30rpx;
			}
			.answer-item-r-3-la{
				font-size: 22rpx;
				color: #979797;
				margin: 0 8rpx;
			}
			.answer-item-r-3-f{
				font-size: 26rpx;
				color: #FE6432;
			}
		}
	}
}
.answer{
	width: 100%;
	margin-top: 11rpx;
	padding: 0 27rpx;
	padding-bottom: calc(80rpx + env(safe-area-inset-bottom));
	.answer-item2{
		padding: 30rpx;
		background-color: #FFFFFF;
		box-sizing: border-box;
		border-radius: 20rpx;
		.myQuestion-2-i-1{
			display: flex;
			align-items: center;
			.myQuestion-2-i-1-l{
				.myQuestion-2-i-1-l-i{
					height: 60rpx;
					width: 60rpx;
					border-radius: 100%;
				}
			}
			.myQuestion-2-i-1-r{
				margin-left: 30rpx;
				.myQuestion-2-i-1-r-1{
					font-size: 26rpx;
					color: #323232;
					font-weight: bold;
				}
				.myQuestion-2-i-1-r-2{
					font-size: 24rpx;
					color: #979797;
					margin-top: 5rpx;
				}
			}
		}
		.myQuestion-2-i-2{
			line-height: 39rpx;
			color: #323232;
			font-size: 26rpx;
			margin: 30rpx 0;
		}
		.myQuestion-2-i-3{
			padding-top: 20rpx;
			border-top: 1rpx solid #F3F3F7;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.myQuestion-2-i-3-l{
				display: flex;
				.myQuestion-2-i-3-l-1{
					border-radius: 20rpx 20rpx 0px 20rpx;
					height: 40rpx;
					line-height: 40rpx;
					color: #FFFFFF;
					background: linear-gradient(0deg, #0AC49C 0%, #34D5AA 100%);
					font-size: 22rpx;
					padding: 0 11rpx;
				}
				.myQuestion-2-i-3-l-1s{
					background: linear-gradient(0deg, #BEBEBE 0%, #AAAAAA 100%);
				}
				.myQuestion-2-i-3-l-t{
					font-size: 26rpx;
					color: #323232;
					margin-left: 15rpx;
					font-weight: bold;
				}
			}
			.myQuestion-2-i-3-r{
				font-size: 24rpx;
				color: #979797;
			}
		}
		.myQuestion-2-i-4{
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			grid-row-gap: 20rpx;
			grid-column-gap: 20rpx;
			margin-top: 30rpx;
		}
	}
}
</style>