<template>
	<!-- 原理认知 -->
	<view class="myComRoot ylrz-box df fdr">
		<!-- 左边导航栏 -->
		<view class="leftBox">
			<view class="df fdc leftMenu" v-for="(menu1,i) in btnList" :key="i">
				<view class="leftMenu-btn1 df fdr aic jcsb" @click="onLeftBtn1Click(i)">
					<view class=" df fdr aic ">
						<view class="leftMenu-btn1-icon df">
							<img :src="menu1.icon_btn1_unchecked"></img>
						</view>
						<view class="leftMenu-btn1-text" :style="{color:color_unchecked_01}">{{menu1.text}}</view>
					</view>
					<view class="leftMenu-btn1-arrow df">
						<img :src="arrowSrc"></img>
					</view>
				</view>
				<view class="leftMenu-btn2-box2 df fdr aic" v-for="(menu2,m) in menu1.list" :key="m" @click="onLeftBtn2Click(i,m)">
					<view class="leftMenu-btn2-icon df">
						<img :src="(checkedIndex1==i&& checkedIndex2==m)?icon_btn2_checked:icon_btn2_unchecked"></img>
					</view>
					<view class="leftMenu-btn2-text" :style="{color:(checkedIndex1==i&& checkedIndex2==m)?color_checked:color_unchecked_02}">{{menu2}}</view>
				</view>
			</view>
		</view>
		<!-- 右边详情页 -->
		<view class="rightBox">
			<!-- 学习知识点 -->
			<view class="right-content df fdc" v-show="checkedIndex1==0">
				<view v-for="(content,n) in myData_YLRZ_ZSD[checkedIndex2].content" :key="n">
					<view class="right-title df aic" v-show="content.type=='title'">
						<view class="right-title-line"></view>
						<view class="right-title-text">{{content.details}}</view>
					</view>
					<view class="right-text" v-show="content.type=='text'">{{content.details}}</view>
					<view class="right-pic df" v-show="content.type=='pic'">
						<img :src="content.src"></img>
					</view>
					<view class="right-space" v-show="content.type=='space'"></view>
				</view>
				<view class="df jcc">
					<view class="right-btn-next df aic jcc" @click="onClick_next">下一步</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isShow: false,
				checkedIndex1: 0,
				checkedIndex2: 0,

				// ------以下为静态
				arrowSrc: require('../../../../assets/learning/icon_ylrz_arrow.png'),
				btnList: [{
						"text": '学习知识点',
						"icon_btn1_checked": require('../../../../assets/learning/icon_ylrz_menu_02.png'),
						"icon_btn1_unchecked": require('../../../../assets/learning/icon_ylrz_menu_01.png'),
						"list": ['课程地图及知识点位置', '知识点：虚拟纸片流程：', '知识点：虚拟引擎', '知识点：影视现场实时特效']
					},
					{
						"text": '测验（完成获得10分）',
						"icon_btn1_checked": require('../../../../assets/learning/icon_ylrz_menu_02.png'),
						"icon_btn1_unchecked": require('../../../../assets/learning/icon_ylrz_menu_01.png'),
						"list": ['测验']
					},
					{
						"text": '结论',
						"icon_btn1_checked": require('../../../../assets/learning/icon_ylrz_menu_02.png'),
						"icon_btn1_unchecked": require('../../../../assets/learning/icon_ylrz_menu_01.png'),
						"list": ['结论']
					}
				],
				icon_btn2_checked: require('../../../../assets/learning/icon_ylrz_menu_02.png'),
				icon_btn2_unchecked: require('../../../../assets/learning/icon_ylrz_menu_01.png'),
				color_checked: '#EA252C',
				color_unchecked_01: '#070707', //1级菜单
				color_unchecked_02: '#555555', //2级菜单
				myData_YLRZ_ZSD: [
					YLRZ_ZSD_01,
					YLRZ_ZSD_02,
					YLRZ_ZSD_03,
					YLRZ_ZSD_04
				]
			}
		},
		methods: {
			initData() {
				// this.checkedIndex1 = 0;
				// this.checkedIndex2 = 0;
			},
			onLeftBtn1Click(index) {
				if (index != this.checkedIndex1) {
					this.checkedIndex2 = 0;
					this.checkedIndex1 = index;
				}
			},
			onLeftBtn2Click(index1, index2) {
				this.checkedIndex1 = index1;
				this.checkedIndex2 = index2;
			},
			onClick_next() {
				if (this.checkedIndex2 < this.btnList[this.checkedIndex1].list.length - 1) {
					this.checkedIndex2 += 1;
				} else {
					if (this.checkedIndex1 + 1 < this.btnList.length) {
						this.checkedIndex1 += 1;
						this.checkedIndex2 = 0;
					} else {
						// 先空着
					}
				}
			}
		}
	}
</script>

<style lang="scss">
	.ylrz-box {
		background: #F4F4F4;
	}

	.leftBox {
		background-color: #FFFFFF;
		width: px2vw(374);
		height: 100%;
		box-shadow: px2vw(3) 0px px2vw(6) 0px rgba(0, 0, 0, 0.1);
		margin-top: px2vw(11);
	}

	.rightBox {
		flex: 1;
		height: 100%;
		background: #FFFFFF;
		box-shadow: px2vw(3) 0px px2vw(6) 0px rgba(0, 0, 0, 0.1);
		margin-top: px2vw(11);
		margin-left: px2vw(11);
	}

	.leftMenu-btn1 {
		width: 100%;
		height: px2vw(70);
		background: #F2F2F2;
	}

	.leftMenu-btn1-icon {
		margin-left: px2vw(38);
	}

	.leftMenu-btn1-icon img {
		width: px2vw(18);
	}

	.leftMenu-btn1-text {
		margin-left: px2vw(14);
		font-size: px2vw(20);
	}

	.leftMenu-btn2-box1 {
		margin-top: px2vw(30);
		margin-bottom: px2vw(30);
	}

	.leftMenu-btn2-box2 {
		margin-left: px2vw(48);
		margin-top: px2vw(25);
	}

	.leftMenu-btn2-text {
		margin-left: px2vw(14);
		font-size: px2vw(20);
	}

	.leftMenu-btn2-icon img {
		width: px2vw(16);
	}

	.leftMenu-btn1-arrow {
		margin-right: px2vw(38);
	}

	.leftMenu-btn1-arrow img {
		width: px2vw(15);
	}

	.leftMenu {
		margin-bottom: px2vw(25);
	}

	.right-content {
		margin-top: px2vw(40);
		margin-left: px2vw(50);
		margin-bottom: px2vw(40);
		margin-right: px2vw(50);
	}

	.right-title {}

	.right-title-line {
		width: px2vw(8);
		height: px2vw(24);
		background: #EA252C;
	}

	.right-title-text {
		font-size: px2vw(24);
		margin-left: px2vw(23);
		color: #070707;
	}

	.right-text {
		font-size: px2vw(22);
		color: #020202;
		line-height: px2vw(46);
		margin-top: px2vw(40);
	}

	.right-space {
		margin-top: px2vw(50);
	}

	.right-pic {
		margin-top: px2vw(40);
	}

	.right-pic img {
		max-width: px2vw(1397);
	}

	.right-btn-next {
		width: px2vw(200);
		height: px2vw(58);
		background: #EA252C;
		border-radius: px2vw(8);
		margin-top: px2vw(60);
		font-size: px2vw(24);
		color: #FFFFFF;
	}
</style>
