<template>
	<view class="content">
		
		<!-- 顶部通用设置模块 -->
		<view class="headLine">General Settings</view>
		<tn-list-view :card="cardMode" class="settingList" unlined="all">
			<tn-list-cell class="listItem">
				<view class="list-icon-text">
					<!-- 左边图标文本显示部分 -->
				    <view class="list-left">
					  <view class="list-left-icon tn-icon-discover tn-color-gray"></view>
					  <view class="list-left-text">
						 <view class="list-left-text-one">Beep</view>
						 <view class="list-left-text-two">Beep when the scan is successfull.</view> 
					  </view>
				    </view>
					<!-- 右边操作按钮部分 -->
					<view class="list-right">
						<tn-switch v-model="beepChecked" :inactiveValue="0" :activeValue="1"
						:inactiveColor="inactiveColor" :activeColor="activeColor"></tn-switch> 
					</view>
				</view>
			</tn-list-cell>
			
			<tn-list-cell class="listItem">
				<view class="list-icon-text">
					<!-- 左边图标文本显示部分 -->
				    <view class="list-left">
					  <view class="list-left-icon tn-icon-discover tn-color-gray"></view>
					  <view class="list-left-text">
						 <view class="list-left-text-one">Auto-copied to clipboard</view>
					  </view>
				    </view>
					<!-- 右边操作按钮部分 -->
					<view class="list-right">
						<tn-switch v-model="ClipboardCheked" :inactiveValue="0" :activeValue="1"
						:inactiveColor="inactiveColor" :activeColor="activeColor"></tn-switch> 
					</view>
				</view>
			</tn-list-cell>
			
			<tn-list-cell class="listItem">
				<view class="list-icon-text">
					<!-- 左边图标文本显示部分 -->
				    <view class="list-left">
					  <view class="list-left-icon tn-icon-discover tn-color-gray"></view>
					  <view class="list-left-text">
						 <view class="list-left-text-one">Search Engine</view>
					  </view>
				    </view>
					<!-- 右边操作按钮部分 -->
					<view class="list-right">
						<!-- <tn-switch v-model="checked" :inactiveValue="0" :activeValue="1"></tn-switch> -->
					</view>
				</view>
			</tn-list-cell>
			
			<tn-list-cell class="listItem">
				<view class="list-icon-text">
					<!-- 左边图标文本显示部分 -->
				    <view class="list-left">
					  <view class="list-left-icon tn-icon-discover tn-color-gray"></view>
					  <view class="list-left-text">
						 <view class="list-left-text-one">Dark Mode</view>
					  </view>
				    </view>
					<!-- 右边操作按钮部分 -->
					<view class="list-right">
						<tn-switch v-model="DarkModeChecked" :inactiveValue="0" :activeValue="1"
						:inactiveColor="inactiveColor" :activeColor="activeColor"></tn-switch> 
					</view>
				</view>
			</tn-list-cell>
			
			<tn-list-cell class="listItem">
				<view class="list-icon-text">
					<!-- 左边图标文本显示部分 -->
				    <view class="list-left">
					  <view class="list-left-icon tn-icon-discover tn-color-gray"></view>
					  <view class="list-left-text">
						 <view class="list-left-text-one">Language options</view>
					  </view>
				    </view>
					<!-- 右边操作按钮部分 -->
					<view class="list-right">
						<!-- <tn-switch v-model="checked" :inactiveValue="0" :activeValue="1"></tn-switch> -->
					</view>
				</view>
			</tn-list-cell>
		</tn-list-view>
		
		
		<!-- 底部Help帮助模块 -->
		
		
		<view class="headLine">Help</view>
		<tn-list-view :card="cardMode" class="settingList">
			<tn-list-cell class="listItem">
				<view class="list-icon-text">
					<!-- 左边图标文本显示部分 -->
				    <view class="list-left">
					  <view class="list-left-icon tn-icon-discover tn-color-gray"></view>
					  <view class="list-left-text">
						 <view class="list-left-text-one">FAQ</view>
					  </view>
				    </view>
				</view>
			</tn-list-cell>
			
			<tn-list-cell class="listItem">
				<view class="list-icon-text">
					<!-- 左边图标文本显示部分 -->
				    <view class="list-left">
					  <view class="list-left-icon tn-icon-discover tn-color-gray"></view>
					  <view class="list-left-text">
						 <view class="list-left-text-one">Feedback</view>
						 <view class="list-left-text-two">Report bugs and tell us what to improve</view> 
					  </view>
				    </view>
				</view>
			</tn-list-cell>
			
			<tn-list-cell class="listItem">
				<view class="list-icon-text">
					<!-- 左边图标文本显示部分 -->
				    <view class="list-left">
					  <view class="list-left-icon tn-icon-discover tn-color-gray"></view>
					  <view class="list-left-text">
						 <view class="list-left-text-one">Provacy policy</view>
					  </view>
				    </view>
				</view>
			</tn-list-cell>
		</tn-list-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cardMode: true,
				beepChecked: true,
				ClipboardCheked: true,
				DarkModeChecked: true,
				unlined: false,
				inactiveColor: 'grey',
				activeColor: 'darkblue'
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style lang="scss">
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color: #000000;
		height:100%;
		
		
		
		.headLine{
			color: royalblue;
			font-size: 18px;
			padding-top:30px;
		}
		
		.settingList{
			//border: 2px solid red;
			width: 330px;
			//height:300px;
			height: auto;
			margin-top: 50px;
			//background-color: #141b29;
			
			.listItem{
				//border: 2px solid yellow;
				height: 50px;
				//margin-top: 30px;	
				background-color: #141b29;
				color: #fff;
				text-align: start;
				
				.list-icon-text {
					display: flex;
					align-items: center;
					justify-content: space-between;
					
				
					.list-left{
						//border: 2px solid green;
						display: flex;
						align-items: center;
						justify-content: flex-start;
						
						.list-left-text{
							width: 210px;
							.list-left-text-one{
								font-size: 15px;
								//border: 2px solid blue;
							}
							
							.list-left-text-two{
								color: grey;
								font-size:13px;
								//border: 2px solid lightsalmon;
							}
						}
						
						
						.list-left-icon{
							//border: 2px solid blueviolet;
							margin-right: 10px;
							font-size: 25px;
						}
						
						
						
					}
					
					.list-right{
						//border: 2px solid pink;
					}
				  
				  // .list {
				  //   &__left {
				  //     display: flex;
				  //     align-items: center;
				  //     justify-content: flex-start;
				      
				  //     &__icon, &__image {
				  //       margin-right: 18rpx;
						// font-size: 25px;
				  //     }
				  //   }
				    
				  //   &__right {
				  //     display: flex;
				  //     align-items: center;
				  //     justify-content: flex-end;
				  //   }
				  // }
				}
				
			}
			
			// .icon{
			// 	color: dimgrey;
			// 	font-size: 25px;
			// 	display: flex;
			// }
			
		}
	}
	
	// .message {
	//   display: flex;
	//   flex-direction: row;
	//   align-items: center;
	//   justify-content: space-around;
	  
	//   &__left {
	//     width: 10%;
	//   }
	//   &__middle {
	//     width: 80%;
	//     padding-left: 20rpx;
	//     padding-right: 40rpx;
	//   }
	//   &__right {
	//     width: 10%;
	//     display: flex;
	//     flex-direction: column;
	//     align-items: center;
	//     justify-content: center;
	//   }
	  
	//   &__name {
	//     font-size: 32rpx;
	//     margin-bottom: 8rpx;
	//   }
	//   &__content {
	// 	//margin-top: 20px;
	//     font-size: 26rpx;
	//     color: #838383;
	//   }
	//   &__tips {
	//     &__icon {
	//       font-size: 36rpx;
	//       color: #AAAAAA;
	//     }
	//   }
	// }

	
</style>
