<template>
	<view>
		<view class="box-nav">
			<image style="width: 100%;" src="https://oss-bq.ahduima.com/%E5%B0%8F%E7%A8%8B%E5%BA%8F/%E5%9B%BE%E7%89%87/%E9%A6%96%E9%A1%B5_20230830213855.png"></image>
			<view style="width: 100%;position: absolute;top: 80px;left: 0;" class="flex jc-c" @tap="toVipVideo">
				<image style="width: 694rpx" mode="widthFix"
					:src="subject=='2'?'https://oss-bq.ahduima.com/%E5%B0%8F%E7%A8%8B%E5%BA%8F/%E5%9B%BE%E7%89%87/%E7%A7%91%E4%BA%8C%E9%A6%96%E9%A1%B5banner_20230830214212.png':'https://oss-bq.ahduima.com/%E5%B0%8F%E7%A8%8B%E5%BA%8F/%E5%9B%BE%E7%89%87/%E7%A7%91%E4%B8%89%E9%A6%96%E9%A1%B5banner_20230830214245.png'">
				</image>
			</view>
		</view>
		<view class="p14lr" style="margin-top: -20px;">
			<view class="video_box">
				<view class="flex ai-c jc-sb mt5">
					<text class="fs18 cor-000">科{{subject=='2'?'二':'三'}}考试项目讲解</text>
					<!-- <view class="flex ai-c" style="height: 34rpx;line-height: 34rpx;" @tap="changeDiverType">
						<text style="color:#05C341;font-size: 16px;">{{diverTypeList[diverTypeIndex]?.configItemName}}</text>
						<u-icon name="list" color="#05C341" size="18"></u-icon>
					</view> -->
				</view>
				<view class="skill-sequence-panel-content-wrapper">
					<scroll-view class="skill-sequence-panel-content" scroll-x :scroll-into-view="intoindex">
						<view class="skill-sequence-skill-wrapper tab_iem m15tb" :class="videoIndex===index?'checked_tab':''"
							v-for="(item,index) of operateList" :key="index" :id='"text"+index' @tap="checkVideo(index)">
							{{item.description}}
						</view>
					</scroll-view>
				</view>
				<swiper class="swiper" :current="videoIndex" style="height: 362rpx;" :autoplay="false"
					:disable-programmatic-animation="true" @change="onChange">
					<swiper-item v-for="(item,index) of operateList" :key="index" @tap="toVideo">
						<view class="p5lr wp100">
							<view class="wp100 relative hide"
								style="height: 362rpx;border-radius: 16rpx;overflow: hidden;">
								<image style="width: 100%;height: 362rpx;position: absolute;left: 0;top: 0;" mode="widthFix"
									:src="item.videoList[0].videoUrl+'?x-oss-process=video/snapshot,t_0,f_jpg'"></image>
								<image class="play_btn_2" src="../../static/image/index/play.png" />
							</view>
						</view>
					</swiper-item>
				</swiper>
			</view>
			<view class="video_box mt10" v-if="subject=='2'">
				<view class="flex ai-c jc-sb">
					<text class="fs18 cor-000">基础操作讲解</text>
					<view class="flex cor-666" @tap="toDetail">
						<text>全部</text>
						<u-icon color="#666" name="arrow-right" size="18"></u-icon>
					</view>
				</view>
				<view class="flex p14lr p20tb bc-fff" style="border-bottom: 1rpx solid #DDDCDC;"
					v-for="(item,index) of videoList" :key="index" @click="toOperateDetail(item.videoId)">
					<view class="pic relative hide" style="overflow: hidden;">
						<image class="pic" style="position: absolute;left: 0;top: 0;" mode="widthFix" :src="item.videoUrl+'?x-oss-process=video/snapshot,t_0,f_jpg'"></image>
						<image class="play_btn_3" src="../../static/image/index/play.png" />
					</view>
					<view class="ml10">
						<text class="fs16 cor-000 fw600">{{baseList[0]?.description}}</text>
						<view class="fs14 mt5 cor-666">{{item.description}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'pinia' //引入映射函数
	import useUserStore from '@/jtools/store/user'
	import {
		querySysConfigList,
		queryProjectList
	} from '@/jtools/api/question';
	import storage from '@/jtools/storage';
	export default {
		name: "Subject2",
		props: {
			subject: {
				type: [String, Number]
			}
		},
		data() {
			return {
				intoindex: '',
				diverTypeIndex: 0,
				diverTypeList: [],
				videoIndex: 0,
				projectId: undefined,
				operateList: [],
				baseList: [],
				videoList: []
			}
		},
		async mounted() {
			// await this.getDiverType()
		},
		computed: {
			...mapState(useUserStore, ["vipOnList", "token"])
		},
		methods: {
				...mapActions(useUserStore, ['searchUserVip']),
			//vip视频页面
			async toVipVideo(){
				if (this.token) {
					await this.searchUserVip()
					const res = this.vipOnList.some(item => item.subjects.includes(this.subject))
					if (!res) {
						uni.navigateTo({
							url:"/pages/index/videoVip?subject="+this.subject
						})
					}else{
						uni.navigateTo({
							url: "/pages/questionBank/baseOperate?subject=" + this.subject+"&type=3"
						})
					}
				} else {
					uni.redirectTo({
						url: '/pages/login/login'
					});
				}
			},
			onChange(e) {
				this.videoIndex = e.detail.current
				this.$nextTick(() => {
					const index = this.videoIndex - 1 < 0 ? 0 : this.videoIndex - 1
					this.intoindex = "text" + index
				});
			},
			getOperateList() {
				queryProjectList({
					"carTypeId": storage.get('carType') || '1001',
					"subject": String(this.subject),
					"type": "2"
				}).then(resp => {
					if (resp.code === '0000' && resp.data &&resp.data.length) {
						this.baseList = resp.data
						this.videoList = resp.data[0] && resp.data[0].videoList? resp.data[0].videoList.slice(0, 5) : []
					}
				})
			},
			formateTime(time) {
				const h = parseInt(time / 3600)
				const minute = parseInt(time / 60 % 60)
				const second = Math.ceil(time % 60)
				const hours = h < 10 ? '0' + h : h
				const formatSecond = second > 59 ? 59 : second
				return `${hours > 0 ? `${hours}:` : ''}${minute < 10 ? '0' + minute : minute}:${formatSecond < 10 ? '0' + formatSecond : formatSecond}`
			},
			async toVideo() {
				if (this.token) {
					await this.searchUserVip()
					const res = this.vipOnList.some(item => item.subjects.includes(this.subject))
					if (!res) {
						uni.navigateTo({
							url:"/pages/index/videoVip?subject="+this.subject
						})
					}else{
						let arr = JSON.parse(JSON.stringify(this.operateList))
						arr = arr.map(item => {
							return {
								...item,
								videoUrl: item.videoList[0]?.videoUrl,
								videoTime: this.formateTime(item.videoList[0]?.videoTime)
							}
						})
						let jsonString = JSON.stringify(arr)
						console.log('arr',jsonString);
						uni.navigateTo({
							url: "/pages/questionBank/videoDetail?videoList=" + jsonString + "&subject=" + this.subject +
								"&projectId=" + this.projectId + "&type=1&driveType=2"
						})
					}
				} else {
					uni.redirectTo({
						url: '/pages/login/login'
					});
				}
			},
			toOperateDetail(val) {
				let arr = JSON.parse(JSON.stringify(this.baseList[0].videoList))
				arr = arr.map(item => {
					return {
						...item,
						projectId: item.videoId,
						subDesc: this.baseList[0].description,
						videoTime: this.formateTime(item.videoTime)
					}
				})
				let jsonString = JSON.stringify(arr)
				uni.navigateTo({
					url: "/pages/questionBank/videoDetail?videoList=" + jsonString + "&subject=" + this.subject +
						"&projectId=" + val + "&type=2"
				})
			},
			getVideoList() {
				queryProjectList({
					"carTypeId": storage.get('carType') || '1001',
					"driveType": '2',
					"subject": String(this.subject),
					"type": "1"
				}).then(resp => {
					if(resp.code==='0000'){
						this.operateList = resp.data
						this.projectId = this.operateList[0]?.projectId
					}
				})
			},
			getDiverType() {
				const carTypeId = storage.get('carType') || '1001'
				querySysConfigList(carTypeId, 'DriveType').then(resp => {
					if (resp.code === '0000') {
						this.diverTypeList = resp.data
						this.getVideoList()
						this.getOperateList()
					}
				})
			},
			changeDiverType() {
				this.diverTypeIndex = this.diverTypeIndex == 0 ? 1 : 0
				this.videoIndex = 0
				this.getVideoList()
				this.getOperateList()
			},
			checkVideo(val) {
				this.projectId = this.operateList[val]?.projectId
				this.videoIndex = val
			},
			toDetail() {
				uni.navigateTo({
					url: "/pages/questionBank/baseOperate?subject=" + this.subject+"&type=2"
				})
			}
		}
	}
</script>

<style scoped>
	.box-nav {
		width: 100%;
		position: relative;
	}

	.center-box {
		position: absolute;
		width: 100%;
		top: 170rpx;
		padding: 0 28rpx;
	}

	.video_box {
		width: 100%;
		background: #FFFFFF;
		border-radius: 16rpx;
		padding: 14px;
	}

	.tab_iem {
		padding: 0 5px;
		height: 56rpx;
		line-height: 56rpx;
		text-align: center;
		background: #F5F5F5;
		border-radius: 10rpx;
		color: #333
	}

	.checked_tab {
		background: linear-gradient(90deg, #11DF20 0%, #01B74F 100%);
		color: #fff
	}

	.pic {
		width: 300rpx;
		height: 169rpx;
		background: #00B74F;
		border-radius: 10rpx;
	}

	.play_btn_3 {
		width: 65rpx;
		height: 65rpx;
		position: absolute;
		left: 117.5rpx;
		top: 52rpx
	}

	.play_btn_2 {
		width: 65rpx;
		height: 65rpx;
		position: absolute;
		left: calc((100% - 65rpx)/2);
		top: 148.5rpx
	}

	/*scroll-view外层*/
	.skill-sequence-panel-content-wrapper {
		position: relative;
		white-space: nowrap;
	}

	/*scroll-view本身*/
	.skill-sequence-panel-content {
		min-width: 100%;
	}

	/*scroll-view内层*/
	.skill-sequence-skill-wrapper {
		display: inline-block;
		margin-right: 15px;
	}

	.hide {
		backface-visibility: hidden;
		transform: translate3d(0, 0, 0);
		-webkit-backface-visibility: hidden;
		-webkit-transform: translate3d(0, 0, 0);
	}
</style>
