<template>
	<view class="tab-bar-user">
		<view class="nav-tops">
			<view class="infos">
				<view class="img">
					<image v-if="token != '' && token != null" :src="avatarUrl ? avatarUrl : '/static/avatar.png'"
						mode="aspectFill" @click="handleToAvatar"></image>
					<image v-else src="/static/avatar.png" mode="aspectFill" @click="handleToAvatar"></image>
				</view>
				<view class="title-wrap">
					<!-- #ifdef H5-->
					<view class="name-wrap">
						<span v-if="token != '' && token != null" class="nickName"
							@click="gotoAccount()">{{profile.nickName ? profile.nickName : $tt('user.visitor')}}</span>
						<span v-else @click="handleGotoLogin">{{$tt('user.login')}}</span>
						<span style="margin-left: 16rpx;" v-if="wxStatus">
							<u-icon name="/static/wechat_bind.png" size="22" color="#fff"
								@click="handleUnbindWeChart"></u-icon>
						</span>
					</view>
					<!-- #endif -->

					<!-- #ifdef APP-PLUS || MP-WEIXIN-->
					<view class="name-wrap">
						<span v-if="token != '' && token != null" class="nickName"
							@click="gotoAccount()">{{profile.nickName ? profile.nickName : $tt('user.visitor')}}</span>
						<span v-else @click="handleGotoLogin">{{$tt('user.login')}}</span>
						<span style="margin-left: 10px;" v-if="token != '' && token != null">
							<u-icon v-if="wxStatus" name="/static/wechat_bind.png" size="22" color="#fff"
								@click="handleUnbindWeChart"></u-icon>
							<u-icon name="/static/wechat_unbind.png" size="22" color="#fff" @click="handleBindWeChart"
								v-else></u-icon>
						</span>
					</view>
					<!-- #endif -->
					<view class="desc">
						{{$tt('user.openIOT')}}
					</view>
				</view>
			</view>
		</view>
		<view class="main">
			<view class="users">
				<view class="u-item" @click="gotoScada()">
					<u-icon name="/static/user/scada_black_blue.png" size="25" color="#fff" labelPos="bottom"
						labelSize="11" space="10rpx" customStyle=" border-radius:6rpx; padding:20rpx;"></u-icon>
					<view class="u-tit">{{$tt('user.configuration')}}</view>
				</view>
				<view class="u-item" @click="gotoScene()">
					<u-icon name="/static/user/scene_black_blue.png" size="25" color="#fff" labelPos="bottom"
						labelSize="11" space="10rpx" customStyle=" border-radius:6rpx; padding:20rpx;"></u-icon>
					<view class="u-tit">{{$tt('user.addScene')}}</view>
				</view>
				<view class="u-item" @click="gotoGroup()">
					<u-icon name="/static/user/group_black_blue.png" size="25" color="#fff" labelPos="bottom"
						labelSize="11" space="10rpx" customStyle=" border-radius:6rpx; padding:20rpx;"></u-icon>
					<view class="u-tit">{{$tt('user.groupManagement')}}</view>
				</view>
				<view class="u-item" @click="gotoEmulator()">
					<u-icon name="/static/user/message_black_blue.png" size="25" color="#fff" labelPos="bottom"
						labelSize="11" space="10rpx" customStyle=" border-radius:6rpx; padding:20rpx;"></u-icon>
					<view class="u-tit">{{$tt('user.platformMsg')}}</view>
				</view>
			</view>
			<view class="list">
				<view class="group">
					<!-- 多语言 -->
					<view class="item" @click="gotoLanguage()">
						<view class="left">
							<u-icon class="iconfont" name="/static/user/language_blue.png" size="16"></u-icon>
							<text class="text">{{$tt('user.language')}}</text>
						</view>
						<view class="right">
							<u-icon class="iconfont" name="arrow-right" size="12" color="#D8D8D8"></u-icon>
						</view>
					</view>
					<!-- 密码修改 -->
					<view class="item" @click="gotoResetPsd()" v-if="token != '' && token != null">
						<view class="left">
							<u-icon class="iconfont" name="/static/user/password_blue.png" size="16"></u-icon>
							<text class="text">{{$tt('user.updatePassword')}}</text>
						</view>
						<view class="right"><u-icon class="iconfont" name="arrow-right" size="12"
								color="#D8D8D8"></u-icon>
						</view>
					</view>
					<!-- 华普 -->
					<view class="item" @click="handleGotoHp">
						<view class="left">
							<u-icon class="iconfont" name="/static/user/hp_logo.png" size="18"></u-icon>
							<text class="text">{{$tt('login.HuapuIoT')}}</text>
						</view>
						<view class="right"><u-icon class="iconfont" name="arrow-right" size="12"
								color="#D8D8D8"></u-icon>
						</view>
					</view>
				</view>
				<view class="group">
					<!-- app下载 -->
					<!-- #ifdef H5 || MP-WEIXIN -->
					<view class="item" @click="handleGotoAppDownload">
						<view class="left">
							<u-icon class="iconfont" name="/static/user/download_blue.png" size="16"></u-icon>
							<text class="text">{{$tt('user.appDownload')}}</text>
						</view>
						<view class="right">
							<u-icon class="iconfont" name="arrow-right" size="12" color="#D8D8D8"></u-icon>
						</view>
					</view>
					<!-- #endif -->
					<!-- app检查更新 -->
					<!-- #ifdef APP-PLUS -->
					<view class="item" @click="handleGotoAppUpdate">
						<view class="left">
							<u-icon class="iconfont" name="/static/user/download_blue.png" size="16"></u-icon>
							<text class="text">{{$tt('user.appUpdate')}}</text>
						</view>
						<view class="right">
							<u-icon class="iconfont" name="arrow-right" size="12" color="#D8D8D8"></u-icon>
						</view>
					</view>
					<!-- #endif -->
					<!-- 关于我们 -->
					<view class="item" @click="handleGotoAbout">
						<view class="left">
							<u-icon class="iconfont" name="/static/user/about_blue.png" size="16"></u-icon>
							<text class="text">{{$tt('user.about')}}</text>
						</view>
						<view class="right"><u-icon class="iconfont" name="arrow-right" size="12"
								color="#D8D8D8"></u-icon>
						</view>
					</view>
				</view>
				<view class="group" v-if="token != '' && token != null">
					<view class="logout" @click="handleExit">
						<view class="left">
							<text class="text">{{$tt('user.exitAccount')}}</text>
						</view>
					</view>
					<view class="logout" @click="handleUnsubscribe()">
						<view class="left">
							<text style="color: #C2C2C2;" class="text">{{$tt('user.signOut')}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="other-wrap">
			<!-- 退出系统提示框 -->
			<u-modal :show="show" :title="$tt('user.confirmExit')" :showCancelButton="true" @cancel="cancelExit"
				@confirm="confirmExit"></u-modal>
			<!-- 注销账号提示 -->
			<u-modal :show="isUnsubscribe" :title="$tt('user.confirmSignOut')" :content="$tt('user.signOutAlert')"
				:cancelText="$tt('user.notWriteOff')" :confirmText="$tt('user.confirmWriteOff')"
				:showCancelButton="true" confirmColor="#606266" cancelColor="#2979ff" @cancel="isUnsubscribe = false"
				@confirm="confirmUnsubscribe"></u-modal>
			<!-- 解除微信绑定提示框 -->
			<u-modal :show="isBindWeChart" :title="$tt('user.confirmWxBind')" :content="$tt('user.wxBindAlertTitle')"
				:cancelText="$tt('user.notBind')" :confirmText="$tt('user.confirmBind')" :showCancelButton="true"
				@cancel="isBindWeChart = false" @confirm="confirmBindWeChart"></u-modal>
			<!-- 提示登录 -->
			<u-modal :show="showModel" :content="$tt('user.notice')" @confirm="confirmGotoLogin"
				@cancel="() => showModel = false" showCancelButton></u-modal>
		</view>
	</view>
</template>

<script>
	import { mapState, mapMutations } from 'vuex';
	import projectConfig from '@/env.config.js';
	import { logout, secureBind, wechatBind } from '@/apis/modules/common';
	import { deviceRelateUser } from '@/apis/modules/device';
	import { versionCompare } from '@/utils/common.js'

	export default {
		components: {},
		computed: {
			...mapState(['isLoggedIn']) // 获取登录状态
		},
		data() {
			return {
				avatarUrl: '', // 头像
				showModel: false,
				wxStatus: false,
				scanJson: {}, // 扫码获取的Json
				show: false, // 退出模态窗
				isTopShow: false, // 顶部弹出层
				isUnsubscribe: false, // 是否注销账号
				isBindWeChart: false, // 是否绑定微信
				isVipModel: false, // 是否会员升级
				token: '',
			};
		},
		onShow() {
			//小程序tabBar导航国际化特殊性
			// #ifdef MP-WEIXIN ||APP-PLUS
			uni.setTabBarItem({
				index: 0,
				text: this.$tt('navBar.home'),
			})
			uni.setTabBarItem({
				index: 1,
				text: this.$tt('navBar.scene'),
			})
			uni.setTabBarItem({
				index: 2,
				text: this.$tt('navBar.alert'),
			})
			uni.setTabBarItem({
				index: 3,
				text: this.$tt('navBar.news'),
			})
			uni.setTabBarItem({
				index: 4,
				text: this.$tt('navBar.user'),
			})
			//#endif
			uni.$on('refreshData', () => {
				this.getProfile();
			})
			this.wxStatus = uni.getStorageSync('wxStatus'); // 获取存储的参数
		},
		onLoad() {
			this.getToken();
			if (this.token != '' && this.token != null) {
				this.getProfile();
			} else {}

		},
		methods: {
			getToken() {
				// 本地缓存获取token
				this.token = uni.getStorageSync('token');
				// vuex存储token
				uni.$u.vuex('vuex_token', this.token);
			},
			...mapMutations(['setLoggedIn']),
			// 退出系统
			handleExit() {
				this.show = true;
			},
			// 取消退出系统
			cancelExit() {
				this.show = false;
			},
			// 确认退出系统
			confirmExit() {
				logout().then(() => {
					this.clearToken();
					this.setLoggedIn(false);
					// 跳转
					uni.reLaunch({
						url: '/pagesB/login/waitLogin'
					});
				});
			},
			//移动端微信解绑
			handleAppSecureBind() {
				uni.navigateTo({
					url: '/pagesB/user/secureBind'
				});
			},
			gotoAccount() {
				uni.$u.route('/pagesB/user/account');
			},
			//跳转信息
			gotoMessageList() {
				if (this.token != '' && this.token != null) {
					uni.navigateTo({
						url: '/pagesB/user/message/index'
					});
				} else {
					this.showModel = true;
				}
			},
			gotoLanguage() {
				//this.clearToken()
				uni.navigateTo({
					url: '/pagesB/user/language/index'
				})
			},
			gotoEmulator() {
				if (this.token != '' && this.token != null) {
					uni.navigateTo({
						url: '/pagesB/user/message/index'
					});
				} else {
					this.showModel = true;
				}
			},
			gotoScene() {
				if (this.token != '' && this.token != null) {
					uni.switchTab({
						url: '/pages/tabBar/scene/index'
					});
				} else {
					this.showModel = true;
				}
			},
			//确定去登录
			confirmGotoLogin() {
				// this.clearToken();
				uni.reLaunch({
					url: '/pagesB/login/waitLogin'
				});
				this.showModel = false;
			},
			handleGotoLogin() {
				this.showModel = true;
			},
			// 设备分组
			gotoGroup() {
				if (this.token != '' && this.token != null) {
					uni.navigateTo({
						url: '/pagesB/user/deviceGroup/index'
					});
				} else {
					this.showModel = true;
				}
			},
			// 清除token
			clearToken() {
				uni.setStorageSync('token', '');
			},
			getProfile() {
				// 调用用户信息接口
				this.$api.common.getProfile().then(res => {
					//存储用户信息,TODO 需要调用一次，不然其他页面调用返回空
					uni.$u.vuex('profile', res.data);
					this.avatarUrl = this.profile.avatar && projectConfig.BASE_URL + this.profile.avatar;
					this.wxStatus = res.wxBind;
					uni.setStorageSync('wxStatus', this.wxStatus);
				}).catch(err => {
					this.$u.toast(err.msg);
				});
			},
			// 注销账户
			handleUnsubscribe() {
				this.isUnsubscribe = true;
			},
			//跳转密码修改
			gotoResetPsd() {
				/*uni.navigateTo({
					url:"/pagesB/user/resetPsd"
				})*/
				uni.$u.route('/pagesB/user/resetPsd');
			},
			// 跳转到华普
			handleGotoHp() {
				// #ifdef MP-WEIXIN
				uni.setClipboardData({
					data: 'http://www.hpiot.cn',
					success: () => {
						uni.showToast({
							title: this.$tt('about.copyTip'),
							icon: 'none'
						});
					}
				});
				// #endif
				// #ifdef H5
				window.open('http://www.hpiot.cn', '_blank');
				// #endif
				// #ifdef APP-PLUS
				plus.runtime.openURL('http://www.hpiot.cn');
				// #endif
			},
			// 跳转到app下载
			handleGotoAppDownload() {
				const appUrl = 'https://www.pgyer.com/eWU9hc';
				// #ifdef H5
				const u = navigator.userAgent.toLowerCase();
				// 判断是否是微信、微博、QQ内部浏览器
				const isBlackApp = /micromessenger/i.test(u) || u.indexOf("weibo") > -1 || u.indexOf("qq") > -1;
				if (isBlackApp) {
					uni.showToast({
						title: this.$tt('user.browserOpen'),
						icon: 'none'
					});
					return false;
				} else {
					if (u.match(/(iphone|ipod|ipad);?/i)) {
						const loadDateTime = new Date();
						window.location = "fastbee://" //schema链接或者universal link data进行参数传值
						window.setTimeout(function() { //如果没有安装app,便会执行setTimeout跳转下载页
							const timeOutDateTime = new Date();
							if (timeOutDateTime - loadDateTime < 2200) {
								window.location = appUrl; //app的下载地址
							} else {
								window.close();
							}
						}, 2000);
					} else if (u.match(/android/i)) {
						const loadDateTime = new Date();
						window.location = "fastbee://" //schema链接或者universal link data进行参数传值
						window.setTimeout(function() { //如果没有安装app,便会执行setTimeout跳转下载页
							uni.hideLoading()
							const timeOutDateTime = new Date();
							if (timeOutDateTime - loadDateTime < 2200) {
								uni.showModal({
									title: this.$tt('user.noDownloadApp'),
									content: this.$tt('user.isDownloadApp'),
									success: function(res) {
										if (res.confirm) {
											window.location = appUrl; //app下载地址  
										}
									}
								});
							} else {
								window.close();
							}
						}, 2000);
					}
				}
				// #endif
				// #ifdef MP-WEIXIN
				uni.setClipboardData({
					data: appUrl,
					success: () => {
						uni.showToast({
							title: this.$tt('user.copyTip'),
							icon: 'none'
						});
					}
				});
				// #endif
			},
			// 跳转到APP更新
			handleGotoAppUpdate() {
				const platform = uni.getSystemInfoSync().platform;
				// plus.runtime.version 调试模式下只能获取到Hbuilderx版本号
				plus.runtime.getProperty(plus.runtime.appid, (info) => {
					const currentVersion = info.version;
					if (platform === 'android') {
						uni.request({
							url: "https://www.pgyer.com/apiv2/app/check", // 蒲公英地址或者换成自己服务器地址
							data: {
								_api_key: '1d4ea30632d22aca336ace046d1b7e04', //API 用户自己的Key
								appKey: 'b67c34e7099ef2dbfc872b882f3f16e7' //App应用的唯一Key
							},
							success: (res) => {
								if (res.statusCode == 200) {
									const data = res.data;
									// 获取服务器上的最新版本信息
									const latestVersion = data.data.buildVersion;
									// 比较版本号，如果服务器上有新版本，则提示用户更新
									if (versionCompare(latestVersion, currentVersion) === 1) {
										uni.showModal({
											title: this.$tt('user.discoverNewVer'),
											content: this.$tt('user.isUpdateNewVer'),
											success: (modalRes) => {
												if (modalRes.confirm) {
													// 跳转到蒲公英或者对应应用商城
													plus.runtime.openURL(data.data
														.downloadURL);
												}
											}
										});
									} else {
										uni.showToast({
											title: this.$tt('user.thisLatestVer'),
											icon: 'none'
										});
									}
								} else {
									uni.showToast({
										title: this.$tt('user.verCheckFailed'),
										icon: 'none'
									});
								}
							}
						});
					} else if (platform === 'ios') {
						// 正常情况下需要先判断是否有更新
						let appleId = 'fastebee'; // app store id
						plus.runtime.launchApplication({
							action: `itms-apps://itunes.apple.com/cn/app/id${appleId}`,
						})
					}
				});
			},
			// 跳转到关于我们
			handleGotoAbout() {
				uni.navigateTo({
					url: '/pagesB/user/about'
				})
			},
			confirmUnsubscribe() {
				logout().then(() => {
					this.clearToken();
					// 跳转
					uni.reLaunch({
						url: '/pages/login/index'
					});
				});
			},
			//跳转个人信息
			handleToAvatar() {
				if (this.token != '' && this.token != null) {
					const source = {
						album: this.$tt('user.selectAlbum'),
						camera: this.$tt('user.photograph'),
					};
					const success = ({
						tempFilePaths: a,
						tempFiles: b
					}) => {
						const image = a ? a[0] : b[0].path;
						uni.$u.route('/pagesB/user/avatar', {
							url: image
						});
					};
					const _uploadImage = (type) => {
						const sizeType = ['original', 'compressed'];
						uni.chooseImage({
							count: 1,
							sizeType,
							sourceType: [type],
							success
						});
					}
					const list = Object.entries(source);
					// #ifdef H5
					_uploadImage(list[0][0]);
					return;
					// #endif
					uni.showActionSheet({
						itemList: list.map(v => v[1]),
						success: async ({
							tapIndex: i
						}) => {
							// #ifdef APP-PLUS
							const permissionID = list[i][0] === 'album' ? 'READ_EXTERNAL_STORAGE' : 'CAMERA';
							let result = await this.$store.dispatch("permission/requestPermissions",
								permissionID);
							if (result !== 1) return;
							// #endif
							_uploadImage(list[i][0]);
						}
					});
				} else {
					this.showModel = true;
				}
			},
			// 开通会员
			handleVipUpgrade() {
				this.isVipModel = true;
			},
			//独立组态
			gotoScada() {
				if (this.token != '' && this.token != null) {
					uni.navigateTo({
						url: '/pagesB/user/scada/indeScada'
					});
				} else {
					this.showModel = true;
				}
			},
			// 解绑微信
			handleUnbindWeChart() {
				uni.navigateTo({
					url: '/pagesB/user/secureBind'
				});
			},
			// 绑定微信
			handleBindWeChart() {
				this.isBindWeChart = true;
			},
			confirmBindWeChart() {
				this.isBindWeChart = false;
				let that = this;
				uni.login({
					provider: 'weixin',
					success: function(res) {
						if (res) {
							console.log('用户授权成功');
							// #ifdef APP-PLUS
							const params = {
								sourceClient: 'wechat_open_mobile',
								openId: res.authResult.openid,
								unionId: res.authResult.unionid,
							}
							// #endif
							// #ifdef MP-WEIXIN
							const params = {
								code: res.code,
								sourceClient: 'wechat_open_mini_program',
							}
							// #endif
							wechatBind(params).then(res => {
								if (res.code == 200) {
									uni.showToast({
										icon: 'none',
										title: that.$tt('user.bindSuccess'),
									});
									that.getProfile();
								} else {
									uni.$u.toast(res.msg);
								}
							}).catch(err => {
								console.log(err);
							});
						}
					}
				})
			}
		}
	};
</script>

<style lang="scss">
	page {
		height: 100%;
		background: $uni-bg-color-grey;
	}
</style>
<style lang="scss" scoped>
	.tab-bar-user {
		// #ifdef MP-WEIXIN
		height: 100vh;
		// #endif
		// #ifdef H5
		height: calc(100vh - 100rpx);
		// #endif
		// #ifdef APP-PLUS
		height: 100%;
		// #endif
		display: flex;
		flex-direction: column;
		width: 100vw;
		overflow-x: hidden;

		.nav-tops {
			// #ifdef MP-WEIXIN || APP-PLUS
			padding-top: calc(var(--status-bar-height) - 25rpx);
			// #endif
			position: relative;
			height: 21.92rem;
			background-color: #3378FE;
			background-size: 100% 100%;
			background-image: url("@/static/common/bg.png");
			z-index: 0;

			.infos {
				position: absolute;
				top: 4.586rem;
				left: 0;
				right: 0;
				padding: 0 30px;
				display: flex;
				flex-direction: row;
				z-index: 1;

				.img {
					width: 86px;
					height: 84px;
					background: rgba(255, 255, 255, 0.2);
					padding: 5px;
					border-radius: 50%;
					display: flex;
					align-items: center;
					justify-content: center;
					box-sizing: border-box;

					image {
						width: 76px;
						height: 74px;
						border: 1px solid #FFFFFF;
						border-radius: 50%;
					}
				}

				.title-wrap {
					display: flex;
					flex-direction: column;
					text-align: center;
					justify-content: center;
					margin-left: 18px;


					.name-wrap {
						display: flex;
						font-weight: 400;
						font-size: 18px;
						color: #FFFFFF;
						line-height: 21px;
						text-align: left;
						font-style: normal;

						.nickName {
							max-width: 350rpx;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}
					}

					.desc {
						font-weight: 400;
						font-size: 14px;
						color: #FFFFFF;
						line-height: 21px;
						text-align: left;
						font-style: normal;
						margin-top: 12px;
					}
				}
			}
		}

		.main {
			flex: 1;
			background: #F1F3F9;
			margin-top: -9.653rem;
			z-index: 1;
			border-top-left-radius: 10px;
			border-top-right-radius: 10px;
			padding: 19px;

			.users {
				margin-top: -2.186rem;
				padding: 30rpx;
				box-sizing: border-box;
				height: 95px;
				width: 100%;
				background: #FFFFFF;
				border-radius: 10px 10px 10px 10px;
				display: flex;
				justify-content: space-around;
				align-items: center;
				text-align: center;

				.u-item {
					display: flex;
					flex-direction: column;
					align-items: center;

					.u-tit {
						font-weight: 400;
						font-size: 28rpx;
						color: #333333;
						line-height: 21px;
						text-align: left;
					}
				}
			}

			.list {
				margin-top: 13px;

				.group {
					border-radius: 20rpx;
					background-color: #fff;
					padding: 15rpx 40rpx;
					margin-bottom: 22rpx;

					.item {
						display: flex;
						justify-content: space-between;
						align-items: center;
						padding: 26rpx 0;
						font-size: 28rpx;
						color: #333333;
						line-height: 21px;
						border-bottom: 1rpx solid #f8f8f8;

						.left {
							display: flex;
							align-items: center;

							.iconfont {
								font-size: 38rpx;
							}

							.text {
								font-size: 28rpx;
								margin-left: 16px;
							}

						}

						.right {
							.iconfont {
								font-size: 26rpx;
							}
						}
					}

					.logout {
						justify-content: space-between;
						align-items: center;
						padding: 20rpx 0;
						border-bottom: 1rpx solid #f8f8f8;
						font-weight: 400;
						font-size: 28rpx;
						color: #333333;
						line-height: 21px;
						font-style: normal;
					}

					.logout:last-child {
						border: none;

					}

					.item:last-child {
						border: none;

					}
				}

				.group:last-child {
					border: none;

				}
			}
		}
	}

	.setIcon {
		position: absolute;
		top: 50rpx;
		right: 50rpx;
	}

	.logout {
		text-align: center;
	}

	.t-item .tit {
		font-size: 32rpx;
		color: #333;
		margin-bottom: 10rpx;
	}

	.t-item .vals {
		font-size: 36rpx;
		color: #333;
		font-weight: 700;
		margin-bottom: 10rpx;
	}

	.u-top {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		margin-bottom: 30rpx;
	}

	.users .u-top image {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		margin-right: 20rpx;
	}

	.u-top .tit {
		font-size: 30rpx;
		font-weight: 700;
		color: #333;
	}

	.borderless-button {
		border: none !important;
		background-color: transparent;
		color: #007bff;
		/* 设置文字颜色 */
	}

	::v-deep .uni-list-item__content-title[data-v-296a3d7e] {
		font-size: 30rpx;
		color: #333;
		overflow: hidden;
		font-weight: 500;
	}

	::v-deep .uni-list-item__container {
		padding: 30rpx;
	}

	.other-wrap {
		.popup-title {
			margin: 20px 20px;
		}

		.btnclass {
			margin: 0px 20px 20px 20px;
			border-radius: 10px;
		}
	}
</style>