<template>
	<view class="bg-container">
		<image class="bg-image" src="/static/images/bg_mine.png"></image>
		<view class="content-container">
			<view id="func-box" style="padding: 0rpx 30rpx;">
				<view class="custom-navbar"
					:style="{'height':totalHeight+'px','padding-top':statusBarHeight+'px','justify-content':'center','color':'#532A00'}">
					<view class="navbar-title">AI喵著</view>
				</view>
				<view class="container-box">
					<view class="box-up">
						<view class="balance" @click="doRefresh">
							<view>{{accountInfo.accountMoney/100}}</view>
							<view class="icon-refresh" :animation="animationData"></view>
						</view>
						<view class="balance-box">
							<view class="balance-desc">账户余额</view>
							<view class="balance-btn" @click="doPay">充值</view>
						</view>
					</view>
					<view class="box-down">
						<view>套餐包余额</view>
						<view class="package-bag">
							<view class="package-bag-item" @click="openCreate" data-type="ALL">
								<text class="title">全托管</text>
								<text class="num">{{allCount}}</text>
							</view>
							<view class="package-bag-item" @click="openCreate" data-type="MATERIAL">
								<text class="title">写材料</text>
								<text class="num">{{materialCount}}</text>
							</view>
							<view class="package-bag-item" style="align-items:center;" @click="doCoupons">
								<view class="icon icon-coupon-ind"></view>
								<view class="title" style="margin-left: 3px;">优惠卷</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="menu-box" :style="{'height':contentHeight+'px'}">
				<scroll-view scroll-y :style="{'height':contentHeight+'px'}">
					<view class="menu-container">
						<block v-for="(item,index) in menuList" :key="index">
							<view class="menu-item" @click="itemClick" hover-class="menu-item-active"
								:data-path="item.path">
								<view :class="item.icon"></view>
								<view class="menu-title">{{item.title}}</view>
							</view>
							<view class="divider-padding"></view>
						</block>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
	<uni-popup ref="alertDialog" type="dialog">
		<uni-popup-dialog type="info" :show-close="false" confirmText="关闭" title="提示"
			:content="alertMsg"></uni-popup-dialog>
	</uni-popup>
	<uni-popup ref="msg" type="message">
		<uni-popup-message :type="msgType" :message="msgTxt" :duration="2000"></uni-popup-message>
	</uni-popup>
</template>

<script>
	import {
		copyrightUrl
	} from '../../../static/utils/net/http.js'
	import UserApi from '../../../static/utils/net/UserApi.js'
	import ProApi from '../../../static/utils/net/projectApi.js'
	export default {
		data() {
			return {
				contentHeight: 100,
				totalHeight: 50,
				statusBarHeight: 24,
				allCount: 0,
				materialCount: 0,
				accountInfo: {},
				animationData: {},
				animation: null,
				alertMsg: '', //alertDialog提示内容
				menuList: [{
					"icon": "ic-user",
					"title": "个人信息",
					"path": "/pages/mine/mineAccount/mineInfo/mineInfo"
				}, {
					"icon": "ic-order",
					"title": "我的订单",
					"path": "/pages/mine/mineAccount/mineOrder/mineOrder"
				}, {
					"icon": "ic-invoice",
					"title": "发票管理",
					"path": ""
				}, {
					"icon": "ic-contact",
					"title": "产权联系人",
					"path": "/pages/mine/mineAccount/mineContact/mineContact"
				}],
				msgType: 'info',
				msgTxt: '',
				allPrice: 0, //全托管价格
				materialPrice: 0, //写材料价格
				urgent: 0, //加急价格
			}
		},
		onLoad() {
			// 创建一个动画实例
			const animation = uni.createAnimation({
				duration: 1000,
				timingFunction: 'ease'
			});
			this.animation = animation
			this.doGetPrice()
		},
		onReady() {
			this.calculateRemainingHeight()
		},
		onShow() {
			this.getMineAccount()
			this.getMinePackageCount()
		},
		methods: {
			//计算高度
			calculateRemainingHeight() {
				// 获取窗口高度
				const systemInfo = uni.getSystemInfoSync();
				const windowHeight = systemInfo.windowHeight;
				console.log(windowHeight);
				// bg-title  container-title
				// 获取已占用元素的高度
				const query = uni.createSelectorQuery().in(this);
				query.select('#func-box').boundingClientRect(data => {
					if (data) {
						const occupiedHeight = data.height;
						console.log(occupiedHeight);
						// 计算剩余高度
						this.contentHeight = windowHeight - occupiedHeight - 40;
					}
				}).exec();
			},
			//刷新账户
			doRefresh() {
				const _self = this
				_self.playAnimation()
				_self.getMineAccount() //获取账户信息
				_self.getMinePackageCount() //获取套餐包信息
				_self.doGetPrice() //获取单价
			},
			//跳转支付
			doPay() {
				uni.navigateTo({
					url: '/pages/pay/payment/payment'
				})
			},
			//跳转创建
			openCreate(e) {
				const type = e.currentTarget.dataset.type
			},
			//跳转优惠卷
			doCoupons() {
				uni.navigateTo({
					url: '/pages/mine/mineAccount/mineCoupons/mineCoupons'
				})
			},
			//跳转页面
			itemClick(e) {
				const path = e.currentTarget.dataset.path
				const _self = this
				if (path == '') {
					_self.alertMsg = `鉴于功能特性，需在电脑端完成操作。请打开浏览器，登录网址${copyrightUrl}，进行后续操作。`
					_self.$refs.alertDialog.open()
				} else {
					uni.navigateTo({
						url: path
					})
				}
			},
			//获取单价
			doGetPrice() {
				uni.showLoading({
					title: '加载中...',
				})
				const _self = this
				ProApi.doGetPrice()
					.then(res => {
						uni.hideLoading()
						console.log(res)
						res.projTypes.forEach(el => {
							if (el.type == 'ALL') {
								_self.allPrice = el.price //全托管价格
							} else if (el.type == 'MATERIAL') {
								_self.materialPrice = el.price //写材料价格
							}
						});
						_self.urgent = res.additional.urgent //加急价格
					})
					.catch(err => {
						uni.hideLoading()
						uni.showToast({
							title: '数据有误,请刷新页面',
							icon: 'error'
						})
					})
			},
			//播放刷新动画
			playAnimation() {
				const _self = this
				// 重置动画
				_self.animation.scale(1, 1).rotate(0).step({
					duration: 0
				});
				_self.animationData = _self.animation.export()
				_self.animation.scale(0.8, 0.8).rotate(180).step()
				// 定义新的动画
				_self.animation.scale(1, 1).rotate(360).step()
				_self.animationData = _self.animation.export()
				setTimeout(() => {
					_self.animationData = {}
				}, 1100);
			},
			//获取账户余额
			getMineAccount() {
				const _self = this
				UserApi.doGetMineAccount()
					.then(res => {
						_self.accountInfo = res
					})
					.catch(err => {
						_self.msgType = 'error'
						_self.msgTxt = err.msg ? err.msg : '网络信号开小差啦，请您稍后再试，给您添麻烦～'
						_self.$refs.msg.open()
					})
			},
			//获取账户余额
			getMinePackageCount() {
				const _self = this
				UserApi.doGetMinePackageCount()
					.then(res => {
						_self.allCount = res.ALL
						_self.materialCount = res.MATERIAL
					})
					.catch(err => {
						console.log(err)
						_self.allCount = 0
						_self.materialCount = 0
						_self.msgType = 'error'
						_self.msgTxt = err.msg ? err.msg : '网络信号开小差啦，请您稍后再试，给您添麻烦～'
						_self.$refs.msg.open()
					})
			},
		}
	}
</script>

<style lang="scss">
	.bg-container {
		position: relative;
	}

	.navbar-title {
		font-size: 40rpx;
		text-align: center;
		font-weight: bold;
	}

	.bg-image {
		position: absolute;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		background-size: cover;
		background-repeat: no-repeat;
	}

	.content-container {
		position: relative;
		z-index: 1;
		color: white;
	}

	.container-content {
		display: flex;
		flex-direction: column;
		padding: 20rpx;
	}

	.container-box {
		display: flex;
		flex-direction: column;
	}

	.box-up {
		display: flex;
		flex-direction: column;
		background: linear-gradient(to right, #FFDBB4, #FFEDD2);
		padding: 20rpx 40rpx;
		color: #532A00;
		border-top-right-radius: 20rpx;
		border-top-left-radius: 20rpx;
	}

	.box-down {
		display: flex;
		flex-direction: column;
		background: linear-gradient(to right, #FFF0DE, #FEEBD0);
		padding: 10rpx 40rpx;
		color: #532A00;
		border-bottom-right-radius: 20rpx;
		border-bottom-left-radius: 20rpx;
	}

	.balance-box {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.balance-btn {
		padding: 10rpx 40rpx;
		background-color: #4EAF79;
		border-radius: 10rpx;
		color: white;
	}

	.balance-desc {
		font-size: 24rpx;
		margin-top: 10rpx;
		font-weight: 400;
	}

	.balance {
		display: flex;
		flex-direction: row;
		align-items: center;
		font-size: 48rpx;
		font-weight: 600;
	}



	.arrow-down {
		width: 0;
		height: 0;
		margin-left: 30rpx;
		border-top: 14rpx solid transparent;
		border-bottom: 14rpx solid transparent;
		border-left: 14rpx solid #532A00;
	}

	.package-bag {
		margin-top: 20rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.package-bag-item {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: baseline;
		padding-bottom: 5px;
	}

	.package-bag-item .icon {
		width: 40rpx;
		height: 40rpx;
	}

	.package-bag .title {
		font-size: 24rpx;
		line-height: 24rpx;
	}

	.package-bag .num {
		margin-left: 10rpx;
		font-size: 40rpx;
		font-weight: bold;
	}

	.menu-box {
		display: flex;
		flex-direction: column;
		margin-top: 30rpx;
		background: white;
		border-radius: 20rpx;
		padding-top: 20rpx;
		margin-left: 30rpx;
		margin-right: 30rpx;
	}

	.menu-item {
		display: flex;
		flex-direction: row;
		padding: 30rpx 40rpx;
		align-items: center;
		margin-left: 20rpx;
		margin-right: 20rpx;
		width: 75vw;
	}

	.menu-container {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: flex-start;
	}

	.divider-padding {
		background-color: #efefef6b;
		height: 1px;
		width: 75vw;
		align-self: center;
	}

	.menu-icon {
		width: 48rpx;
		height: 48rpx;
	}

	.menu-title {
		font-size: 28rpx;
		color: black;
		margin-left: 20rpx;
	}

	.menu-item-active {
		transform: translateY(2px);
	}



	.menu-item-active::after {
		content: '';
		position: absolute;
		top: 50%;
		left: 50%;
		width: 5px;
		height: 5px;
		background: rgba(255, 255, 255, 0.5);
		opacity: 0;
		border-radius: 100%;
		transform: scale(1, 1) translate(-50%, -50%);
		transform-origin: 50% 50%;
	}

	.menu-item-active::after {
		animation: ripple 0.6s ease-out;
	}

	@keyframes ripple {
		0% {
			transform: scale(0, 0);
			opacity: 0.5;
		}

		100% {
			transform: scale(20, 20);
			opacity: 0;
		}
	}


	.ic-user {
		background-image: url('data:image/svg+xml;charset=utf-8;base64,PHN2ZyB0PSIxNzQzNjUwMjM5MzQ1IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjUyNzEiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+PHBhdGggZD0iTTUxMS45OTQyNjQgMEMyMjkuMjMxODE0IDAgMCAyMjkuMjIwMzQxIDAgNTExLjk5NDI2NHMyMjkuMjMxODE0IDUxMS45OTQyNjQgNTExLjk5NDI2NCA1MTEuOTk0MjY0IDUxMi4wMDU3MzYtMjI5LjIyMDM0MSA1MTIuMDA1NzM2LTUxMS45OTQyNjRTNzk0Ljc2ODE4NiAwIDUxMS45OTQyNjQgMHpNMzQ2LjA0NDcwMiAzNTcuOTQxNjc0YzUuNTI5NzQtODMuOTMyNzM0IDcwLjk5MTc2NS0xMzguMzgxMTY5IDE0MS40OTAyMTQtMTQ4LjA5ODM2OCAzLjkwMDY0Ni0wLjUzOTIwNyA3LjY3NTA5Ni0xLjkzODg1MSAxMS40NzI0OS0yLjkzNjk1N2gyNy40NTM2NjdjMjcuNTMzOTc1IDMuNTc5NDE3IDUyLjE3Njg4MiAxMy43NjY5ODcgNzYuNTEwMDMzIDI3LjM2MTg4OCA2NS4wMTQ1OTggMzYuMTg0MjMyIDg4LjI0NjM5IDExNy4yNzE3ODggNjguMzg3NTEgMTgyLjEzNzI0NC0yNC4xNjEwNjMgNzguOTA3NzgzLTExMi4zNjE1NjMgMTI4Ljk1MDc4My0xOTUuMTgxNDY1IDExMS4xMTEwNjEtNzkuNTYxNzE1LTE3LjE1MTM3Mi0xMzUuMTY4ODcyLTkzLjUzNTIwNy0xMzAuMTMyNDQ5LTE2OS41NDA0NXogbTQyNS40MjI4NTggNDEwLjI3OTE3MWMtMzAuMTM4MjMgMTkuMzg4NTA3LTY1LjA2MDQ4OCAyOC40ODYxOTItMTAwLjYxMzczMyAzMy4xODk5MTMtNTMuOTIwNzAxIDcuMTEyOTQ0LTEwOC4zNDYxOTEgMTEuMTE2ODQyLTEzOS4xNzI3NzEgMTQuMTU3MDUyLTk1LjIyMTY2My0yLjM4NjI3OC0xNjYuODY3MzYxLTQuNjQ2MzU4LTIzNS4zMDA3NjEtMjYuMTU3Mjc2LTc1LjU5MjIzNC0yMy43ODI0NzEtNzMuMTgzMDExLTQzLjM3NzQ4My02MS4xNDgzNjktOTYuNjkwMTQyIDE3LjI4OTA0Mi03Ni42MTMyODUgNjUuMDM3NTQzLTEzNC40MTE2ODggMTQyLjEzMjY3My0xNzAuNjk5MTcyYTI3LjAxNzcxMyAyNy4wMTc3MTMgMCAwIDEgNS4xODU1NjUtMS43NjY3NjQgMTk2LjAzMDQyOSAxOTYuMDMwNDI5IDAgMCAwIDgzLjAzNzg4IDQwLjM5NDYzNmM2My4yNDc4MzUgMTMuNjE3ODQ1IDEyOS4wNzY5OC01LjUwNjc5NSAxNzYuMzY2NTgxLTQ1LjQ4ODQyMWExMi4wNTc1ODcgMTIuMDU3NTg3IDAgMCAxIDEuODEyNjU0IDAuNjc2ODc3cTEzOS4zNTYzMzEgNjYuNDQ4NjU5IDE1MS4xODQ0NjcgMjA5LjMzODUxN2MxLjYxNzYyMSAxOS4xMjQ2NC03LjI5NjUwMyAzMi42NTA3MDUtMjMuNDg0MTg2IDQzLjA0NDc4eiIgZmlsbD0iI0U5OUQ0MiIgcC1pZD0iNTI3MiI+PC9wYXRoPjwvc3ZnPg==');
		background-size: cover;
		background-repeat: no-repeat;
		width: 24px;
		height: 24px;
	}

	.ic-order {
		background-repeat: no-repeat;
		background-size: cover;
		width: 24px;
		height: 24px;
		background-image: url('data:image/svg+xml;charset=utf-8;base64,PHN2ZyB0PSIxNzQzNjUwNDc1MzQ1IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjgzMDUiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+PHBhdGggZD0iTTMxOS41MjEwMzIgOTYuNDIxMTYxIDQwMC42ODEyOSA5Ni40MjExNjFDNDA4LjY0MjA2NSA0NC40MjgzODcgNDUzLjMzNDcxIDQuNDkyMzg3IDUwNy41NzM2NzcgNC40OTIzODcgNTYxLjgxMjY0NSA0LjQ5MjM4NyA2MDYuNDM5MjI2IDQ0LjQyODM4NyA2MTQuNDY2MDY1IDk2LjQyMTE2MUw2OTguNDAxMDMyIDk2LjQyMTE2MSA2OTguNDAxMDMyIDIyOC4yNTI5MDMgMzE5LjQ4OCAyMjguMjUyOTAzIDMxOS40ODggOTYuNDIxMTYxIDMxOS41MjEwMzIgOTYuNDIxMTYxWk05MjQuMTc2NTE2IDg5MC4yNTIzODdDOTI0LjE3NjUxNiA5NTcuOTY4NTE2IDg2OS4zMDk5MzUgMTAxMi44NjgxMjkgODAxLjYyNjgzOSAxMDEyLjg2ODEyOUwyMjAuMTkzMDMyIDEwMTIuODY4MTI5QzE1Mi40NDM4NzEgMTAxMi44NjgxMjkgOTcuNjQzMzU1IDk1Ny45Njg1MTYgOTcuNjQzMzU1IDg5MC4yNTIzODdMOTcuNjQzMzU1IDIyMS41ODAzODdDOTcuNjQzMzU1IDE1My44OTcyOSAxNTIuNDQzODcxIDk5LjAzMDcxIDIyMC4xOTMwMzIgOTkuMDMwNzFMMjQ0LjMzOTYxMyA5OS4wMzA3MSAyNDQuMzM5NjEzIDMwOS41MTIyNTggNzc3LjQ0NzIyNiAzMDkuNTEyMjU4IDc3Ny40NDcyMjYgOTkuMDMwNzEgODAxLjU5MzgwNiA5OS4wMzA3MUM4NjkuMjc2OTAzIDk5LjAzMDcxIDkyNC4xNDM0ODQgMTUzLjg5NzI5IDkyNC4xNDM0ODQgMjIxLjU4MDM4N0w5MjQuMTQzNDg0IDg5MC4yNTIzODcgOTI0LjE3NjUxNiA4OTAuMjUyMzg3WiIgZmlsbD0iI0ZDQ0EwMCIgcC1pZD0iODMwNiI+PC9wYXRoPjwvc3ZnPg==');
	}

	.ic-invoice {
		background-repeat: no-repeat;
		background-size: cover;
		width: 24px;
		height: 24px;
		background-image: url('data:image/svg+xml;charset=utf-8;base64,PHN2ZyB0PSIxNzQzNjUwNjQ1Mzg5IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9Ijk0OTIiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+PHBhdGggZD0iTTkyNi40MjEzMzMgMTU3LjEydjM0MS4zMzMzMzNINzk3LjAxMzMzM2wwLjAyMTMzNCA0MDQuMDEwNjY3LTE1Ni4yNjY2NjctNzcuMzc2LTEzMi4xMzg2NjcgNjYuNzczMzMzLTEzMi4xMzg2NjYtNjYuNzczMzMzLTE1NS40NTYgNzYuOC0wLjAyMTMzNC00MDMuNDM0NjY3SDk0LjQyMTMzM3YtMzQxLjMzMzMzM2g4MzJ6IG0tMTkzLjQwOCAyMDIuNjQ1MzMzaC00NDh2NDM5LjEyNTMzNGw5MS43OTczMzQtNDUuMzMzMzM0IDEzMS44MTg2NjYgNjYuNTYgMTMxLjg4MjY2Ny02Ni41NiA5Mi41MDEzMzMgNDUuNzgxMzM0VjM1OS43NjUzMzN6IG0tOTYuMDY0IDI0NC4yMDI2Njd2NjRoLTI1NnYtNjRoMjU2eiBtMC0xNDcuMDUwNjY3djY0aC0yNTZ2LTY0aDI1NnogbTIyNS40NzItMjM1LjgxODY2NmgtNzA0djIxMy4zMzMzMzNoNjIuNTkybDAuMDIxMzM0LTEzOC42NjY2NjdoNTc2bC0wLjAyMTMzNCAxMzguNjY2NjY3aDY1LjQwOHYtMjEzLjMzMzMzM3oiIGZpbGw9IiMxNjc3RkYiIHAtaWQ9Ijk0OTMiPjwvcGF0aD48L3N2Zz4=');
	}

	.ic-contact {
		background-repeat: no-repeat;
		background-size: cover;
		width: 24px;
		height: 24px;
		background-image: url('data:image/svg+xml;charset=utf-8;base64,PHN2ZyB0PSIxNzQzNjUxMDYwODE4IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjM0MzM1IiB3aWR0aD0iMTYiIGhlaWdodD0iMTYiPjxwYXRoIGQ9Ik05MjQuNDYzNTE4IDE3OS43MTMwMzUgOTguNDU5OTY0IDE3OS43MTMwMzVjLTE5LjI5MjM5MiAwLTM0LjkzMjYwNCAxNS42NDAyMTItMzQuOTMyNjA0IDM0LjkzMjYwNGwwIDU5My4yOTc1ODRjMCAxOS4yOTEzNjggMTUuNjQwMjEyIDM0LjkzMDU1NyAzNC45MzI2MDQgMzQuOTMwNTU3bDgyNi4wMDM1NTQgMGMxOS4yOTEzNjggMCAzNC45MzE1OC0xNS42MzkxODkgMzQuOTMxNTgtMzQuOTMwNTU3TDk1OS4zOTUwOTggMjE0LjY0NTYzOEM5NTkuMzk1MDk4IDE5NS4zNTMyNDYgOTQzLjc1NDg4NiAxNzkuNzEzMDM1IDkyNC40NjM1MTggMTc5LjcxMzAzNXpNNTQyLjgwNDA3NSAzNjcuNTUyMTQ0bDMzMS45MzQ5NDggMCAwIDY0LjUyMzU0OUw1NDIuODA0MDc1IDQzMi4wNzU2OTMgNTQyLjgwNDA3NSAzNjcuNTUyMTQ0ek01NDIuODA0MDc1IDQ5My4wMjY4OGwzMzEuOTM0OTQ4IDAgMCA2NC41MjM1NDlMNTQyLjgwNDA3NSA1NTcuNTUwNDI5IDU0Mi44MDQwNzUgNDkzLjAyNjg4ek0zMzQuOTY5NTYzIDI3MS43MjM2MTFjOTEuODk4MDEzIDAgOTIuMDQyMjk5IDcwLjMwNDIwNiA5Mi4wNDIyOTkgMTA5Ljg3MjM4NyAwIDM5LjUzNDQxMi0zNi43OTkxMTQgMTEyLjk4NzMzMS05Mi4wNDIyOTkgMTEzLjA3NTMzNS01NS4xODQ4NTcgMC4wODgwMDQtOTIuMDQyMjk5LTczLjU0MDkyMy05Mi4wNDIyOTktMTEzLjA3NTMzNUMyNDIuOTI4Mjg3IDM0Mi4wNTY0NyAyNDMuMTAxMjI1IDI3MS43MjM2MTEgMzM0Ljk2OTU2MyAyNzEuNzIzNjExek0xNzkuNDM5MyA1NTIuNDQ4MjI0YzIzLjY4NjQ2OS0xOC4zMjYzOTEgOTEuODA4OTg2LTQ4Ljk0MzcxMiA5MS44MDg5ODYtNDguOTQzNzEybDQzLjAwNjQ5IDgxLjgxMTI4NCA3Ljg2NjE1NS0xOS44NDYtMTIuMTUwNzM4LTI0LjQ0MzcxNSAyNC4yNDIxMjQtMjQuNDc0NDE0IDI0LjI0MDA3NyAyNC40NzQ0MTQtMTIuMTE5MDE1IDI0LjQ0MzcxNSA2LjU1NjMyMyAxOS4zNzgzNDkgNDQuMjU3OTkzLTgxLjM0MzYzM2MwIDAgMjEuNzAyMjc4IDkuNzg0ODU0IDQ0LjgwOTU1NSAyMS41NTkwMTVsMC4wMzA2OTkgMCAwIDEwMS42ODM4OUwxNDUuMzc4NTUzIDYyNi43NDc0MTdDMTQ1LjM3ODU1MyA2MjYuNzQ4NDQxIDE1NS44MTQyMyA1NzAuODk5NDU4IDE3OS40MzkzIDU1Mi40NDgyMjR6TTg3Ny41NDM5MDUgNzYwLjEyMDAzMWwtNzMyLjE2NTM1MiAwTDE0NS4zNzg1NTMgNjk1LjU5NTQ1OGw3MzIuMTY1MzUyIDBMODc3LjU0MzkwNSA3NjAuMTIwMDMxeiIgZmlsbD0iI0ZDQ0EwMCIgcC1pZD0iMzQzMzYiPjwvcGF0aD48L3N2Zz4=');
	}

	.icon-refresh {
		background-image: url('data:image/svg+xml;charset=utf-8;base64,PHN2ZyB0PSIxNzQ0MTY2MTkyNTg5IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjU2MDkiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+PHBhdGggZD0iTTkzNi41OTQyODYgNjAzLjQyODU3MXEwIDIuODUyNTcxLTAuNTg1MTQzIDQuMDIyODU3LTM2LjU3MTQyOSAxNTMuMTYxMTQzLTE1My4xNjExNDMgMjQ4LjMydC0yNzMuMTE1NDI5IDk1LjE1ODg1N3EtODMuNDU2IDAtMTYxLjQyNjI4Ni0zMS40NTE0Mjl0LTEzOS4xMTc3MTQtODkuNzQ2Mjg2bC03My43MjggNzMuNzI4cS0xMC44MjUxNDMgMTAuODI1MTQzLTI1Ljc0NjI4NiAxMC44MjUxNDN0LTI1Ljc0NjI4Ni0xMC44MjUxNDMtMTAuODI1MTQzLTI1Ljc0NjI4NmwwLTI1NnEwLTE0Ljg0OCAxMC44MjUxNDMtMjUuNzQ2Mjg2dDI1Ljc0NjI4Ni0xMC44MjUxNDNsMjU2IDBxMTQuODQ4IDAgMjUuNzQ2Mjg2IDEwLjgyNTE0M3QxMC44MjUxNDMgMjUuNzQ2Mjg2LTEwLjgyNTE0MyAyNS43NDYyODZsLTc4LjI2Mjg1NyA3OC4yNjI4NTdxNDAuNTk0Mjg2IDM3Ljc0MTcxNCA5Mi4wMTM3MTQgNTguMjk0ODU3dDEwNi44NjE3MTQgMjAuNTUzMTQzcTc2LjU4MDU3MSAwIDE0Mi44NDgtMzcuMTU2NTcxdDEwNi4yNzY1NzEtMTAyLjI1MzcxNHE2LjI5MDI4Ni05LjcyOCAzMC4yODExNDMtNjYuODUyNTcxIDQuNTM0ODU3LTEzLjE2NTcxNCAxNy4xMTU0MjktMTMuMTY1NzE0bDEwOS43MTQyODYgMHE3LjQ2MDU3MSAwIDEyLjg3MzE0MyA1LjQxMjU3MXQ1LjQxMjU3MSAxMi44NzMxNDN6TTk1MC44NTcxNDMgMTQ2LjI4NTcxNGwwIDI1NnEwIDE0Ljg0OC0xMC44MjUxNDMgMjUuNzQ2Mjg2dC0yNS43NDYyODYgMTAuODI1MTQzbC0yNTYgMHEtMTQuODQ4IDAtMjUuNzQ2Mjg2LTEwLjgyNTE0M3QtMTAuODI1MTQzLTI1Ljc0NjI4NiAxMC44MjUxNDMtMjUuNzQ2Mjg2bDc4Ljg0OC03OC44NDhxLTg0LjU1MzE0My03OC4yNjI4NTctMTk5LjQ2MDU3MS03OC4yNjI4NTctNzYuNTgwNTcxIDAtMTQyLjg0OCAzNy4xNTY1NzF0LTEwNi4yNzY1NzEgMTAyLjI1MzcxNHEtNi4yOTAyODYgOS43MjgtMzAuMjgxMTQzIDY2Ljg1MjU3MS00LjUzNDg1NyAxMy4xNjU3MTQtMTcuMTE1NDI5IDEzLjE2NTcxNGwtMTEzLjczNzE0MyAwcS03LjQ2MDU3MSAwLTEyLjg3MzE0My01LjQxMjU3MXQtNS40MTI1NzEtMTIuODczMTQzbDAtNC4wMjI4NTdxMzcuMTU2NTcxLTE1My4xNjExNDMgMTU0LjI1ODI4Ni0yNDguMzJ0Mjc0LjI4NTcxNC05NS4xNTg4NTdxODMuNDU2IDAgMTYyLjMwNCAzMS43NDR0MTM5Ljk5NTQyOSA4OS40NTM3MTRsNzQuMzEzMTQzLTczLjcyOHExMC44MjUxNDMtMTAuODI1MTQzIDI1Ljc0NjI4Ni0xMC44MjUxNDN0MjUuNzQ2Mjg2IDEwLjgyNTE0MyAxMC44MjUxNDMgMjUuNzQ2Mjg2eiIgZmlsbD0iIzUzMkEwMCIgcC1pZD0iNTYxMCI+PC9wYXRoPjwvc3ZnPg==');
		background-size: cover;
		background-repeat: no-repeat;
		margin-left: 5px;
		width: 18px;
		height: 18px;
	}

	.custom-tips {
		margin-top: 82px;
	}
</style>