<template>
	<view>
		<u-loading-page :loading="getLoading" loading-text="题库更新中..."></u-loading-page>
		<view class="flex fld-c p15" v-if="!getLoading">
			<u-sticky>
				<view class="flex ai-c">
					<view v-for="(item, index) in vipAllList" :key="index" class="km-item" :class="{ actived: index == current }"
						@click="current = index">
						{{ getKmTitle(item.subjects) }}
					</view>
				</view>
			</u-sticky>
			<view class="mt15">
				<swiper class="swiper" :current="current" style="height: 120px;" :autoplay="false"
					:display-multiple-items="1.45" :disable-programmatic-animation="true" @change="onChange">
					<swiper-item v-for="(item, index) in vipAllList" :key="index">
						<view class="relative"
							style="background-image: url(https://oss-bq.ahduima.com/%E5%B0%8F%E7%A8%8B%E5%BA%8F/%E5%9B%BE%E7%89%87/vip%E8%83%8C%E6%99%AF_20230831010348.png);width: 95%;height: 204rpx;background-size: 100% 100%;">
							<!-- <image src="" mode="widthFix" style="width:95%;"></image> -->
							<view class="vip-info">
								<u-avatar class="br-p50 overflow-h" style="border: 3px solid #873E1D;" :size="35" mp-avatar></u-avatar>
								<view class="ml10">
									<view class="fs16 fwb" style="color: #7E4012;line-height: 16px;">
										{{ item.memberName }}
									</view>
									<view class="mt5 fs12" style="color: #7E4012;line-height: 12px;">
										{{ getExpireText(item) }}
									</view>
								</view>
							</view>
							<view v-if="vipHasOpened(item)" class="corner">
								VIP已开通
							</view>
							<view v-if="vipHasOpened(item)" @tap="chargeVip(item)" class="renew">
								{{ item.price }}元立即续费
							</view>
							<view v-else class="buy" @tap="chargeVip(item)">
								立即充值
							</view>
						</view>
					</swiper-item>
					<swiper-item>
					</swiper-item>
				</swiper>
			</view>
			<view class="mt20">
				<swiper class="swiper" :current="current" style="height: 300px;" :autoplay="false"
					:disable-programmatic-animation="true" @change="onChange">
					<swiper-item v-for="(item, index) in vipAllList" :key="index">
						<view v-if="index == 0 || index == 3" class="p15 br8 cor-fff bc-fff">
							<view class="fs18 cor-000 fwb">
								3步轻松学{{ getKmTitle(item.subjects) }}
							</view>
							<view class="mt25 flex ai-c jc-sb">
								<view class="flex ai-c">
									<image src="../../static/image/mine/1.png" mode="widthFix" style="width:25px;"></image>
									<view class="ml7">
										<view class="fs16 cor-000 fwb" style="line-height: 16px;">
											精简500题
										</view>
										<view class="mt7 fs12 cor-666" style="line-height: 12px;">
											题目全部做对，视为完成
										</view>
									</view>
								</view>
								<view class="study" @tap="to500(item)">
									去学习
								</view>
							</view>
							<view class="mt45 flex ai-c jc-sb">
								<view class="flex ai-c">
									<image src="../../static/image/mine/2.png" mode="widthFix" style="width:25px;"></image>
									<view class="ml7">
										<view class="fs16 cor-000 fwb" style="line-height: 16px;">
											真实考场模拟
										</view>
										<view class="mt7 fs12 cor-666" style="line-height: 12px;">
											10次95分以上，视为完成
										</view>
									</view>
								</view>
								<view class="study" @tap="toRealExam(item)">
									去学习
								</view>
							</view>
							<view class="mt45 flex ai-c jc-sb">
								<view class="flex ai-c">
									<image src="../../static/image/mine/3.png" mode="widthFix" style="width:25px;"></image>
									<view class="ml7">
										<view class="fs16 cor-000 fwb" style="line-height: 16px;">
											考前密卷
										</view>
										<view class="mt7 fs12 cor-666" style="line-height: 12px;">
											2套试卷95分以上，视为完成
										</view>
									</view>
								</view>
								<view class="study" @tap="toSpecExam(item)">
									去学习
								</view>
							</view>
						</view>
						<view v-else style="margin-top: 30rpx;">
							<view class="video-box">
								<view class="flex jc-sb ai-c wp100">
									<text style="color: #873E1D;font-size: 36rpx;">考场实况</text>
									<text class="cor-666 fs12">全部 ></text>
								</view>
								<view class="flex ai-c mt20">
									<view class="contain-box relative">
										<image class="contain-box" src="../../../static/image/index/jpsp.png"></image>
										<image class="play_btn_2" src="../../static/image/index/play.png" />
									</view>
									<view class="ml15 text-center">
										<u-button :customStyle="{width:'200rpx',height:'66rpx',borderRadius: '33rpx'}" iconColor="#fff"
											text="去看视频" color="linear-gradient(90deg, #E66501 0%, #F8A42C 100%)" icon="play-circle"
											@click="toPlaceLive(item)">
										</u-button>
										<view class="cor-333 fs15 fw600 mt10">真实考场模拟</view>
									</view>
								</view>
							</view>
						</view>
					</swiper-item>
				</swiper>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'pinia' //引入映射函数
	import useQuestionStore from '@/jtools/store/question' //引入store
	import useUserStore from '@/jtools/store/user'
	import {
		queryQuestionId,
		getTestQuestionId
	} from '@/jtools/api/question';
	import storage from '@/jtools/storage';
	export default {
		computed: {
			...mapState(useQuestionStore, ["loading_subject4", "loading_subject1", "version"]), //映射函数，取出tagslist
			getLoading() {
				return this.loading_subject4 && this.loading_subject1
			},
			vipAllList() {
				return useUserStore().vipAllList.filter(it => [1, 2, 3, 4].includes(Number(it.subjects)))
			},
			vipOnList() {
				return useUserStore().vipOnList
			},

		},
		data() {
			return {
				current: 0
			}
		},
		methods: {
			...mapActions(useQuestionStore, ['getOrderQuestion_sub1', 'getOrderQuestion_sub4', 'getAllQuestion']),
			chargeVip(item) {
				uni.navigateTo({
					url: "/pages/index/videoVip?subject=" + item.subjects
				})
			},
			onChange(e) {
				this.current = e.detail.current
			},
			getKmTitle(km) {
				return {
					'1': '科一',
					'2': '科二',
					'3': '科三',
					'4': '科四',
				} [km]
			},
			getExpireText(item) {
				const vipOn = this.vipOnList.find(it => it.memberId == item.memberId)
				if (vipOn) {
					return `${vipOn.endDate.split(' ')[0]}到期`
				} else {
					return '开通vip助您快速拿证'
				}
			},
			vipHasOpened(item) {
				;
				return !!this.vipOnList.some(it => it.subjects.includes(item.subjects))
			},
			// 去精选500题 item=> 当前科目vip信息
			to500(item) {
				// 当前vip是否已开通
				if (this.vipHasOpened(item)) {
					// 跳转
					queryQuestionId({
						versionId: this.version,
						carTypeId: storage.get('carType') || '1001',
						subject: item.subjects,
						isVip: '1'
					}).then(async (resp) => {
						if (resp.code === '0000') {
							const arr = resp.data
							if (arr && arr.length) {
								const listJson = JSON.stringify(arr)
								uni.navigateTo({
									url: "/pages/questionBank/questionBank?navTitle=精简500题&subject=" + item.subjects +
										"&questionIdList=" + listJson
								})
							} else {
								uni.showToast({
									title: '暂无题目',
									icon: 'none'
								})
							}
						} else if (resp.code === '4001') {
							uni.showToast({
								title: '当前题库非最新版，请更新~',
								icon: 'none'
							})
							this.getAllQuestion()
						}
					})
				} else {
					uni.showToast({
						title: `请先充值${this.getKmTitle(item.subjects)}vip`,
						icon: 'none'
					})
				}
			},
			// 去真实考场 item=> 当前科目vip信息
			toRealExam(item) {
				// 当前vip是否已开通
				if (this.vipHasOpened(item)) {
					// 跳转
					uni.navigateTo({
						url: "/pages/index/trueTest?subject=" + item.subjects
					})
				} else {
					uni.showToast({
						title: `请先充值${this.getKmTitle(item.subjects)}vip`,
						icon: 'none'
					})
				}
			},
			// 去秘卷 item=> 当前科目vip信息
			toSpecExam(item) {
				// 当前vip是否已开通
				if (this.vipHasOpened(item)) {
					// 跳转
					uni.navigateTo({
						url:  "/pages/index/secretPapers?subject=" + item.subjects
					})
				} else {
					uni.showToast({
						title: `请先充值${this.getKmTitle(item.subjects)}vip`,
						icon: 'none'
					})
				}
			},
			// 去考场实况 item=> 当前科目vip信息
			toPlaceLive(item) {
				// 当前vip是否已开通
				if (this.vipHasOpened(item)) {
					// 跳转
					uni.showToast({
						title: '敬请期待',
						icon: 'none'
					})
				} else {
					uni.showToast({
						title: `请先充值${this.getKmTitle(item.subjects)}vip`,
						icon: 'none'
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.km-item {
		margin-right: 8px;
		width: 72px;
		height: 30px;
		line-height: 30px;
		font-size: 12px;
		color: #333;
		text-align: center;
		border-radius: 15px;
		border: 1px solid #CCCCCC;
	}

	.actived {
		background: linear-gradient(90deg, #E66501 0%, #F8A42C 100%);
		color: #fff;
	}

	.km-item:last-of-type {
		margin-right: 0;
	}

	.vip-info {
		position: absolute;
		top: 15px;
		left: 10px;
		display: flex;
		align-items: center;
		z-index: 1;
	}

	.corner {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 77px;
		height: 23px;
		background: linear-gradient(0deg, #E66501 0%, #F8A42C 100%);
		opacity: 0.86;
		border-radius: 0px 8px 0px 8px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 12px;
		color: #fff;
		z-index: 1;
	}

	.renew {
		position: absolute;
		right: 10%;
		bottom: 15px;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 185rpx;
		height: 52rpx;
		background: #873E1D;
		border-radius: 26rpx;
		font-size: 12px;
		color: #F6E99F;
		z-index: 1;
	}

	.buy {
		position: absolute;
		left: 45%;
		transform: translateX(-50%);
		bottom: 15px;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 200rpx;
		height: 60rpx;
		background: #873E1D;
		border-radius: 30rpx;
		font-size: 14px;
		color: #F6E99F;
		z-index: 1;
	}

	.study {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 161rpx;
		height: 67rpx;
		background: #F6E99F;
		border-radius: 34rpx;
		font-size: 12px;
		color: #873E1D;
	}

	.video-box {
		padding: 20rpx;
		width: 694rpx;
		height: 369rpx;
		background: #F9F3E7;
		border: 2rpx solid #CF8B6D;
		border-radius: 16rpx;
	}

	.contain-box {
		width: 406rpx;
		height: 228rpx;
		background: #00B74F;
		border-radius: 16rpx;
	}

	.play_btn_2 {
		width: 65rpx;
		height: 65rpx;
		position: absolute;
		left: 165.5rpx;
		top: 78rpx
	}
</style>