<template>
	<view class="wrap">
		<view class="stabar"></view>
		<!-- <view class="secbar" :style="{top:getWXStatusHeight()}"> 
			<label class="back" @click="back()"></label>
			<view class="title">场景演练</view>
		</view> -->
		<navigation title="场景演练"></navigation>
		<view class="mainwrap3">
			<!-- 轮播图 -->
			<swiper :indicator-dots="false" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
				<swiper-item v-for="(item, i) in swiperList" :key="i">
					<!-- <view class="swiper-item">
					<image :src="item.image_src"></image>
				</view> -->
					<navigator class="swiper-item">
						<image :src="item.uploadPath"></image>
					</navigator>
				</swiper-item>
			</swiper>
			<!-- 搜索 -->
			<!-- <my-search></my-search> -->
			<view class="search">
				<view class="search-title">请选择演练场景</view>
				<view class="my-search-container">
					<uni-search-bar class="my-search-box" @confirm="search" @input="input"
						cancel-button="none"></uni-search-bar>
				</view>
			</view>
			<view class="popup-layer-back" v-if="showVerify ==true">
				<view class="verify">
					<label @click="close()" class="close-button"></label>
					<uni-easyinput type="text" v-model="validateCode" placeholder="请输入场景码" />
					<button class="uni-button" size="mini" type="" @click="verifyMethod()">确定</button>
				</view>
			</view>
			<!-- 场景区域 -->
			<view class="nav-list">
				<view class="nav-item" v-for="(item, i) in sceneList" :key="i" @click="navClickHandler(item)">
					<view class="nav-marsk">
						<view class="scename">{{item.name}}</view>
						<view class="scecount">演练角色：{{item.roleTotal}}</view>
						<view class="scecount">演练人次：{{item.useTotal}}</view>
					</view>
					<image :src="item.uploadPath" class="nav-img"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import navigation from "@/components/navigation/navigation.vue";
	export default {
		components: {
			navigation
		},
		data() {
			return {
				queryObj: {
					name: "",
					isOpen: 0,
					pageNum: 1,
					pageSize: 10
				},
				time: 1,
				total: 0,
				showVerify: false,
				validateCode: null,
				search: false,
				isloading: false,
				item: null,
				//轮播图数据列表
				swiperList: [],
				//场景数据列表
				sceneList: [],
			};
		},
		onLoad(options) {
			this.queryObj.isOpen = options.isOpen
			this.getSwiperList();
			this.getSceneList();
		},
		onShow() {
			if (this.time == 1) {
				this.time = 2;
				return;
			}
			this.getSwiperList();
			this.getSceneListReload();
		},
		onPullDownRefresh() {
			this.getSwiperList();
			this.getSceneListReload();
		},
		methods: {
			async getSwiperList() {
				const {
					data: res
				} = await uni.$http.post('/small/customImage/listAll', {
					page: 'site'
				})
				if (!res.success) return uni.$showMsg()

				res.data.forEach(item => {
					item.uploadPath = uni.$http.baseUrl + item.uploadPath
				})
				this.swiperList = res.data
				// uni.$showMsg('数据请求成功！')
			},
			async getSceneList() {
				this.isloading = true
				const {
					data: res
				} = await uni.$http.post('/small/scene/manage/listApp', this.queryObj)
				this.isloading = false

				res.rows.forEach(item => {
					item.uploadPath = uni.$http.baseUrl + item.uploadPath
				})
				if (this.search) {
					this.sceneList = res.rows
					this.search = false
				} else {
					this.sceneList = [...this.sceneList, ...res.rows]
				}
				this.total = res.total
				// uni.$showMsg('数据请求成功！')
			},
			async getSceneListReload() {
				const {
					data: res
				} = await uni.$http.post('/small/scene/manage/listApp', this.queryObj)

				res.rows.forEach(item => {
					item.uploadPath = uni.$http.baseUrl + item.uploadPath
				})
				this.sceneList = res.rows
				this.total = res.total
				// uni.$showMsg('数据请求成功！')
			},
			navClickHandler(item) {
				if (item !== "") {
					if (this.queryObj.isOpen == 1) {
						this.showVerify = true
						this.item = item
					} else {
						// this.getRoleList(item.guid,item.name);
						uni.navigateTo({
							url: '/subpkg/role/role?guid=' + item.guid + '&name=' + item.name
						})
					}
				}
			},
			async getRoleList(guid,name) {
			    
				const {
					data: res
				} = await uni.$http.post('/small/project/role/listAll',{sceneId: guid,name:""})
				if (!res.success) return uni.$showMsg()
			   console.log(res.data )
			   if (res.data.length  === 1) {
				  uni.navigateTo({
				    // url: '/subpkg/practice/practice?roleId='+res.data[0].roleId+'&sceneId='+guid
				    url: '/subpkg/practice/practice?roleId='+res.data[0].guid+'&sceneId='+guid
				  })
			   } else {
				  uni.navigateTo({
				  	 url: '/subpkg/role/role?guid=' + guid + '&name=' + name
				  }) 
			   } 
			},
			close() {
				this.showVerify = false
				this.validateCode = ""
			},
			verifyMethod() {
				if (this.validateCode == null) {
					return uni.showToast({
						title: '场景码不能为空',
						icon: 'none'
					})
				} else if (parseInt(this.validateCode) !== this.item.code) {
					return uni.showToast({
						title: '场景码错误',
						icon: 'none'
					})
				}
				// this.getRoleList(this.item.guid,this.item.name);
				uni.navigateTo({
					url: '/subpkg/role/role?guid=' + this.item.guid + '&name=' + this.item.name
				})
			},
			input(e) {
				clearTimeout(this.timer)

				this.timer = setTimeout(() => {
					this.queryObj.name = e
					this.search = true
					this.getSceneList()
				}, 500)
			},
			back() {
				uni.navigateBack({
					delta: 1, //返回层数，2则上上页
				})
			},
			onReachBottom() {
				if (this.queryObj.pageNum * this.queryObj.pageSize >= this.total) return uni.$showMsg('已展示所有场景')
				if (this.isloading) return
				this.queryObj.pageNum++
				this.getSceneList()
				uni.pageScrollTo({
					scrollTop: 120
				})
			}
		}
	}
</script>

<style lang="scss">
	@import url("@/static/base_css.css");

	.wrap {
		height: 101%;
	}

	swiper {
		position: relative;
		top: 3vh;
		margin: 0 3%;
		width: 94%;
		height: 18vh;

		.swiper-item,
		image {
			width: 99.8%;
			margin-left: 0.1%;
			height: 100%;
			align-items: center;
			border-radius: 20rpx;
		}
	}

	.nav-list {
		position: relative;
		top: 50rpx;
		justify-content: space-around;
		margin: 4% 3%;
		padding: 0 0 8%;
		width: 94%;
		height: 52vh;
		overflow-y: auto;

		.nav-item {
			position: relative;
			margin-bottom: 20rpx;
			width: 100%;
			height: 280rpx;
			border-radius: 20rpx;
			overflow: hidden;
		}

		.nav-marsk {
			position: absolute;
			z-index: 10;
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, .45);
			color: #fff;
			line-height: 1.5;

			.scename {
				margin: 10% 0 2% 5%;
				font-size: 42rpx;
			}

			.scecount {
				margin: 1% 0 0 5%;
				font-size: 28rpx;
			}
		}

		.nav-img {
			width: 100%;
			height: 100%;
		}
	}

	.search {
		position: relative;
		top: 70rpx;
	}

	.search-title {
		color: #67676a;
		margin: 3% 0 0 3%;
	}

	.uni-searchbar__box {
		border: 1px solid #ddd;
	}

	.popup-layer-back {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 999;
	}

	.verify {
		position: absolute;
		top: 45%;
		left: 50%;
		z-index: 9999;
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		padding: 30rpx;
		width: 400rpx;
		height: 300rpx;
		background-color: #c0b9e1;
		border-radius: 10px;
		opacity: 0.9;
	}

	.uni-button {
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		bottom: 15%;
		left: 10%;
		width: 80%;
		font-size: 32rpx;
		background: #1367fe;
		border-radius: 50rpx;
		color: #fff;
		height: 70rpx;
		line-height: 70rpx;
	}

	.close-button {
		position: absolute;
		top: -60rpx;
		right: -30rpx;
		width: 50rpx;
		height: 50rpx;
		background-color: rgba(255, 255, 255, .5);
		border: 1rpx solid rgba(255, 255, 255, .7);
		border-radius: 50%;
		transform: rotate(45deg);
	}

	.close-button:before,
	.close-button:after {
		content: '';
		position: absolute;
		top: 50%;
		left: 50%;
		background: #333;
		border-radius: 50%;
		transform: translate(-50%, -50%);
		height: 24rpx;
		width: 4rpx;
	}

	.close-button:after {
		height: 4rpx;
		width: 24rpx;
	}

	/deep/ .uni-easyinput {
		top: 15%;
	}
</style>