<template>
	<view class="myQuestion">
		<view class="myQuestion-1">
			<view @click="switchItem(MYQUESTIONTYPE.ANSWERED)" :class="{'myQuestion-i': true, 'myQuestion-is': type === MYQUESTIONTYPE.ANSWERED}">已解答</view>
			<view @click="switchItem(MYQUESTIONTYPE.UNANSWERED)" :class="{'myQuestion-i': true, 'myQuestion-is': type === MYQUESTIONTYPE.UNANSWERED}">未解答</view>
		</view>
		<view class="myQuestion-2">
			<view class="myQuestion-2-i" @click="toAnswerDetails">
				<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>
	</view>
</template>

<script>
	import { MYQUESTIONTYPE } from "@/emit/index.js"
	export default {
		components: {
		},
		data() {
			return {
				MYQUESTIONTYPE,
				type: MYQUESTIONTYPE.ANSWERED,
			}
		},
		methods: {
			toAnswerDetails() {
				uni.navigateTo({
					url: '/pagesStu/answerDetails/answerDetails'
				})
			},
			switchItem(type) {
				this.type = type
			},
			seeImg(index) {
				uni.previewImage({
				    current: index, // 当前显示图片的链接，不填则默认为 urls 的第一张图片
				    urls: [] // 需要预览的图片链接列表
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.myQuestion{
	.myQuestion-1{
		position: absolute;
		top: 0;
		border-top:1rpx solid #f3f4f6;
		display: flex;
		background: #fff;
		justify-content: space-around;
		width: 100%;
		.myQuestion-i{
			font-size: 28rpx;
			color: #323232;
			height: 88rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.myQuestion-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;
			}
		}
	}
	.myQuestion-2{
		padding: 20rpx 25rpx;
		width: 100%;
		padding-top: calc(88rpx + 20rpx);
		.myQuestion-2-i{
			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>