<template>
<view class="role-container">
	<view class="wrap">
	    <view class="secbar"> <span class="back" @click="back()"></span></view>
	    <view class="mainwrap3"> 
	      <img src="/static/images/bg_role.jpg" alt=""/>
	      <view class="role_wrap">
	        <view class="contit">请选择您在“<font style="color:#fd6d1f;">{{sceneName}}</font>”演练中的角色：</view>
	        <view class="role_box"> 
			   <block class="role-item" v-for="(item,i) in roleList" :key="i">
				<span  :class="item.choose === 'true' ? 'change_color':''"  @click="chooseRole(item)" v-if="i<3">{{item.name}}</span>
			   <!-- <span class="spanitem"  @click="chooseRole(item)">{{item.name}}</span> -->
			   </block>
			</view>
	        <view class="more_role" @click="showMoreRole()" v-if="showButton"><a>更多角色</a></view>
	      </view>
	      <!-- <view class="startbtn"><image src="/static/images/btn_start.png" @click="startPractice()"></image><a>开始演练</a></view> -->
		   <view :class="practice"><image src="/static/images/btn_start.png" @click="startPractice()"></image><a>开始演练</a></view>
	    </view>
	  
	    <view class="cnote">题目来源：深圳市******有限公司</view>  
	</view>
	
	<view class="maskbox"></view>
	<view class="popbox" v-if="showMore==1">
	   <view class="poptit">选择角色<a class="closea"></a></view>
	   <view class="subsearch">
		    <!-- <uni-search-bar class="msearchbox" @confirm="search" @input="input" cancel-button="none"></uni-search-bar> -->
	        <input class="msearchbox" placeholder="搜索角色" v-model="roleName" id="" onclick="" @input="input()">
	   </view>
	   <view class="role_cont">
	      <!-- <h5>角色分类一</h5> -->
	       <view class="role_item">
			 <block  v-for="(item,i) in roleList" :key="i">
				<span  :class="item.choose === 'true' ? 'change_color':''"  @click="chooseRole(item)">{{item.name}}</span>
			 </block>
	       </view>
	   </view>
	   <view class="onebtn" @click="close()">确定</view>
	</view>  
</view>
</template>

<script>
	export default {

		data() {
			return {
			   showButton: false,
			   showMore: 0,
			   sceneId:"",
			   sceneName:"",
			   roleName:"",
			   roleId:"",
			   roleList:[],
			   practice:"startbtn"
			};
		},
		onLoad(options) {
		  this.sceneId = options.guid
		  this.sceneName = options.name
		  this.getRoleList();
		},
		methods: {
			async getRoleList() {
			    
				const {
					data: res
				} = await uni.$http.post('/small/project/role/listAll',{sceneId: this.sceneId,name:this.roleName})
				if (!res.success) return uni.$showMsg()
			
			   if (res.data.length > 3) {
				   this.showButton = true
			   }
			   res.data.forEach(item=>{
				 this.$set(item, 'choose', 'false')
			   })
				this.roleList = res.data
				//uni.$showMsg('数据请求成功！')
			},
			chooseRole(item){
				if (item.choose === "true") {
					this.$set(item, 'choose', 'false')
					this.roleId = ''
					this.practice = 'startbtn'
				} else if(item.choose === "false"){
					this.roleList.forEach(item=>{this.$set(item, 'choose', 'false')})
					this.$set(item, 'choose', 'true')
					this.roleId = item.guid
					this.practice = 'startbtn.active'
				}
			},
			startPractice(item) {
			  if (this.roleId === "") {
				  return uni.$showMsg('请先选择一个角色')
			  }
			  uni.navigateTo({
			    url: '/subpkg/practice/practice?roleId='+this.roleId+'&sceneId='+this.sceneId
				// url: '/subpkg/respractice/respractice?questionFreId=' + 'b40c04f73cec48389efa8ac81e6a5194' +'&sceneId=' + this.sceneId +"&roleId=" + this.roleId
			  })
			},
			back(){
				uni.navigateBack({
					delta:1,//返回层数，2则上上页
				})
			},
			showMoreRole(){
				this.showMore = 1
				this.getRoleList()
			},
			close() {
				this.showMore = 0
				this.roleName = ""
			},
			input(){
				clearTimeout(this.timer)
				
				this.timer = setTimeout(() => {
				  this.getRoleList()
				}, 500)
			},
		}
	}
</script>

<style lang="scss">
@import url("@/static/base_css.css");	
.role-container {
	width: 100%;
	height: 100%;	
}
.secbar {
    top: 0;
    z-index: 1;
}
.secbar ._span.back {
    top: 50px;
}
.mainwrap3 {
	top: 0;
	height: 95vh;
	overflow: hidden;
}

.mainwrap3 > img {
	width: 100%;
	height: 100%;
	border-radius: 0;
}

.role_wrap {
	position: absolute;
	top: 47.5%;
	margin: 0 3%;
	width: 94%;
}

.contit {
	margin-left: 2%;
}

.role_box {
	margin: 4% 0 2% 2%;
	width: 96%;
}

.role_box span {
	display: inline-block;
	margin: 1% 0 0 3%;
	padding: 1.5% 4.5%;
	border: 1px solid #1367fe;
	border-radius: 8px;
	color: #1367fe;
}

.role_box span.seled {
	background: #1367fe;
	color: #fff;
}

.more_role {
    margin: 2% 3%;
    width: 94%;
    height: 3rem;
    border-bottom: 1px dotted #96b9fb;
    text-align: center;
}

.more_role a {
	display: inline-block;
	margin: 0 auto;
	padding: 2% 8% 2% 3%;
	// background: #a6c5fd url(/static/images/arrow-b.png) no-repeat right 10% center;
	background-size: auto 40%;
	border-radius: 8px;
	color: #2e6ddd;
}

.startbtn {
	position: relative;
	z-index: 1;
	bottom: 33vh;
	width: 100%;
	height: 30%;
	background:no-repeat 47.5% center;
	background-size: 60% auto;
	text-align: center;
	opacity: .5;
}

.startbtn.active {
	opacity: 1;
}

.startbtn a {
	display: inline-block;
	position: relative;
	top: 15%;
	width: 30%;
	height: 40%;
	line-height: 30rem;
	overflow: hidden;
}

.cnote {
	position: absolute;
	bottom: 3vh;
	width: 100%;
	color: rgba(255, 255, 255, .5);
	font-size: 0.75rem;
	text-align: center;
}

.maskbox {
	display: none;
	position: absolute;
	z-index: 10000;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, .5);
}

.popbox {
	// display: none;
	position: absolute;
	z-index: 10001;
	bottom: 0;
	width: 100%;
	max-height: 80%;
	min-height: 50%;
	background: #fff;
	border-radius: 20px 20px 0 0;
}

.poptit {
	position: relative;
	width: 100%;
	height: 3rem;
	line-height: 2.5;
	text-align: center;
	font-size: 1.1rem;
	font-weight: 600;
	border-bottom: 1px solid #f3f4f5;
}

.poptit a.closea {
	position: absolute;
	top: 20%;
	right: 1rem;
	width: 1.75rem;
	height: 1.75rem;
	// background: url(/static/images/icon_60add.png) no-repeat;
	background-size: 100%;
	transform: rotateZ(45deg);
}

.role_cont h5 {
	margin: 0 3% 2%;
	font-size: 1.0rem;
}

.role_item {
	margin: 1% 0 5% 0;
}

.role_item span {
	display: inline-block;
	margin: 1% 0 2% 3%;
	padding: 1.5% 3.5%;
	background: #f2f3f4;
	border: 0;
	border-radius: 8px;
	color: #4c4c4c;
}

.role_item span.selrole {
	background: #e9f2fb;
	color: #1367fe;
}

.popbox .onebtn {
	position: relative;
	bottom: 1vw;
	background: #1367fe;
	width: 94%;
	border-radius: 30px;
	color: #fff;
	text-align: center;
	margin: 3% 3%;
	line-height: 3.0;
	letter-spacing: 2px;
}
.change_color {
     background: #1367fe;
	 color: #fff !important;
 }
 

</style>