<template>
	<view class="page-app theme-light main-green font-1">
		<view v-if="currentIndex === 0" :style="{display: currentIndex === 0 ? '' : 'none'}">
			<home ref="home"></home>
		</view>
		<view v-if="currentIndex === 1" :style="{display: currentIndex === 1 ? '' : 'none'}">
			<trend></trend>
		</view>  
		<view v-if="currentIndex === 2" :style="{display: currentIndex === 2 ? '' : 'none'}">
			<message></message>
		</view>
		<view v-if="currentIndex === 3" :style="{display: currentIndex === 3 ? '' : 'none'}">
			<mine></mine>
		</view>
		<tui-tabbar zIndex="997" :current="currentIndex"  backdropFilter backgroundColor="#fff" :tabBar="tabbarList" color="#333" selectedColor="#aaaaaa" @click="tabbarSwitch"></tui-tabbar>
	
	
		<view class="svga-box" :class="giftFlag ? 'svga-show': 'svga-hide'">
			<c-svga ref="cSvgaRef" :canvasId='canvasId' :src="src" :loops='1' :auto-play="false" @frame='onFrame' @finished='onFinished' @percentage='onPercentage' @loaded='onLoaded'></c-svga>
			<view class="close-btn" @click="closeSvga">
				<view class="bottom-box">
					<view class="title">
						<text class="username">{{gift.username}}</text>
						<text class="unit">赠送</text>
						<text class="nickname">{{gift.nickname}}</text>
						<text class="name">{{gift.name}}</text>
						<text class="count">x{{gift.count}}</text>
					</view>
					<view class="btn-box">
						<view class="btn" @click="cannel">关闭</view>
					</view>
				</view>
			</view>
		</view>
		
		<s-auth-modal />
		<qrcode-modal />
		<search-modal @query="query" />
	</view>
</template>
 
<script>
import home from "@/pages/tabbar/home.vue"
import trend from "@/pages/tabbar/trend.vue"
import message from "@/pages/tabbar/message.vue"
import mine from "@/pages/tabbar/mine.vue"
import RewardApi from '@/sheep/api/worker/reward';
import TradeConfigApi from '@/sheep/api/trade/config';
import qrcodeModal from '@/components/qrcode-modal/qrcode-modal.vue';
import searchModal from '@/components/search-modal/search-modal.vue';
import sheep from '@/sheep';
import $share from '@/sheep/platform/share';
import _ from 'lodash-es';
import AreaApi from '@/sheep/api/system/area';
import tuiTabbar from "@/components/thorui/tui-tabbar/tui-tabbar.vue"
export default {  
	components: { 
		home,
		trend,
		message,
		mine,
		searchModal,
		qrcodeModal,
		tuiTabbar
	},  
	data() {
		return {
			tabberPageLoadFlag: [],  
			currentIndex: 0,
			tabbarList: [
				{
					pagePath: '/pages/chat/chat',
					text: '首页',
					iconPath: 'https://rbtnet.oss-cn-hangzhou.aliyuncs.com/5c3dd70b602fa866a431e42cf23a584f12da91dd9675468090f69d1f74fac11f.png', 
					selectedIconPath: 'https://rbtnet.oss-cn-hangzhou.aliyuncs.com/d3803064e60b0e2a0610b62bb48f0ff5c75c8c08bcd090d09bc9f67cb51e7ed9.png'
				},
				{
					pagePath: '/pages/chat/chat',
					text: '动态',
					iconPath: 'https://rbtnet.oss-cn-hangzhou.aliyuncs.com/e7f56870666bea98fef3e9323773b37e5dccfe48db51dcd63e306b1c8f400605.png',
					selectedIconPath: 'https://rbtnet.oss-cn-hangzhou.aliyuncs.com/3ef2198fcbb01321b59b822292345e75a58c32e6d2504238fd4675b4a529be51.png'
				},
				{
					pagePath: '',
					text: '滴滴', 
					iconPath: 'https://rbtnet.oss-cn-hangzhou.aliyuncs.com/810802ecdce16ff51b71d1d3de894350062ca9c1ee148053dd0c80db301c23e8.png',
					selectedIconPath: 'https://rbtnet.oss-cn-hangzhou.aliyuncs.com/52e3b3bb2a3cc4dd003b4024f21b2d28a5844cd5c3ffb636a6858d9c6c09e610.png'
				},
				/* {
					pagePath: '', 
					text: '消息',
					num: 2,
					isDot: true,
					iconPath: '/static/tabbar/find.png',
					selectedIconPath: '/static/tabbar/find_cur.png'
				}, */
				{
					pagePath: '/pages/tabbar/my/my',
					text: '我的',
					iconPath: 'https://rbtnet.oss-cn-hangzhou.aliyuncs.com/6c4098dbe1982ad7d6ee23f46e28bc21d4abc22fcdb42f75a9fe58da0a53c8cd.png',
					selectedIconPath: 'https://rbtnet.oss-cn-hangzhou.aliyuncs.com/a1c7d19aa554fed74be5ecaba6545633c7e3f4f6c36d68b3b61213ba28233621.png',
					verify: false
				}
			],
			
			
			giftFlag: false,
			src: '',
			canvasId: 'myCanvas',
		};
	},
	// 分享小程序
	onShareAppMessage(res) {
		return {
			title: this.shareInfo.title,
			path: this.shareInfo.path,
			imageUrl: this.shareInfo.image,
		};
	},
	onShareTimeline() {
		return {
			title: this.shareInfo.title,
			path: this.shareInfo.path,
			imageUrl: this.shareInfo.image,
		}
	},
	onLoad(options) {
		this.initData(options);
		
		this.getGiftList();
		
		this.getTradeConfig();
		
		this.getAreaData();
		
		const index = Number(options.index || this.currentIndex);
		this.currentIndex = index;
		// 根据底部tabbar菜单列表设置对应页面的加载情况
		this.tabberPageLoadFlag = this.tabbarList.map((item, tabbar_index) => {
			return index === tabbar_index
		})
	},
	computed: {
		gift() {
			return sheep.$store('sys').gift;
		},
		shareInfo() {
			return sheep.$platform.share.getShareInfo();
		},
		isLogin: {
			get() {
			  return sheep.$store('user').isLogin;
			},
		},
		userInfo: {
		    get() {
		      return sheep.$store('user').userInfo;
		    },
		},
		friendEnabled() {
			return sheep.$store('user').tradeConfig.friendEnabled
		},
		clerk() {
			return sheep.$store('sys').currentClerk;
		},
	},
	methods: {
		initData(options) {
			// #ifdef MP
			// 小程序识别二维码
			if (options.scene) {
				const sceneParams = decodeURIComponent(options.scene).split('=');
				console.log("sceneParams=>",sceneParams);
				options[sceneParams[0]] = sceneParams[1];
			}
			// 小程序场景值
			const config = uni.getLaunchOptionsSync();
			if(config.scene){
				sheep.$store('sys').setScene(config.scene);
			}
			// #endif
	
			// 预览模板
			if (options.templateId) {
				sheep.$store('app').init(options.templateId);
			}
	
			// 解析分享信息
			if (options.spm) {
				$share.decryptSpm(options.spm);
			}
	
			// 进入指定页面(完整页面路径)
			if (options.page) {
				sheep.$router.go(decodeURIComponent(options.page));
			}
		},
		tabbarSwitch(e) {
			//获取登录状态，此处默认未登录
			//跳转切换逻辑需自行实现
			let isLogin = false;
			if (e.verify && !isLogin) {
				this.$u.toast('您还未登录，请先登录');
			} else {
				this.tabberPageLoadFlag[e.index] = true
				this.currentIndex = e.index;
				this.getGiftList();
				this.getTradeConfig();
			}
		},
		onFinished() {
			this.giftFlag = false;
			console.log('动画停止播放时回调');
		},
		onFrame(frame) {//动画播放至某帧后回调
			// console.log(frame);
		},
		onPercentage(percentage) { //动画播放至某进度后回调
			// console.log(percentage);
		},
		onLoaded() {
			this.$refs.cSvgaRef.call('setContentMode', 'AspectFill');
			console.log('加载完成');
			this.$refs.cSvgaRef.call('startAnimation');
		},
		closeSvga() {
			this.src = "";
			this.$refs.cSvgaRef.call('stopAnimation');
			this.giftFlag = false;
		},
		fen2yuan(price) {
		  var f = 0;
		  var p = (price / 100.0).toFixed(0);
		  var p1 = (price / 100.0).toFixed(1);
		  var p2 = (price / 100.0).toFixed(2);
		  if(p*100 == price){
			f = 0;  
		  }else if(p1*100 == price){
			  f = 1;
		  }else if(p2*100 == price){
			  f = 2;
		  }
		  return (price / 100.0).toFixed(f)
		},
		cannel() {
			this.closeSvga();
		},
		ok() {
			this.closeSvga();
		},
		sendGift(e) {
			if(e.giftType != 1){
				// 普通礼物不播放
				return;
			}
			sheep.$store('sys').setGift(e);
			
			this.src = e.pic;
			this.giftFlag = true;
		},
		getGiftList() {
			RewardApi.getTopList().then(res => {
				var gift = res.data[0];
				if(gift){
					if(this.gift.id != gift.id){
						// 播放特效
						this.sendGift(gift);
					}
					sheep.$store('sys').setGiftList(res.data);
				}
			});
		},
		getTradeConfig() {
			TradeConfigApi.getTradeConfig(this.userInfo.id).then(res => {
				sheep.$store('user').setTradeConfig(res.data);
			});
		},
		// 获得地区数据
		getAreaData() {
			if (_.isEmpty(uni.getStorageSync('areaData'))) {
			  AreaApi.getAreaTree().then((res) => {
				if (res.code === 0) {
				  uni.setStorageSync('areaData', res.data);
				}
			  });
			}
		},
		query(e) {
			this.$refs.home.queryUser(e);
		},
		 
	}
};
</script>

<style lang="scss" scoped>
	.svga-box {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999999999;
		width: 100%;
		height: 100%;
		background-color: black;
		
		.close-btn {
			color: #fff;
			position: absolute;
			z-index: 999999999;
			padding: 5px 10px;
			
			left: 0;
			right: 0;
			bottom: 100rpx;
			
			.bottom-box {
				display: flex;
				justify-content: center;
				flex-direction: column;
				align-items: center;
				
				.title {
					font-size: 28rpx;
					margin-bottom: 5px;
					
					.username {
						color: pink;
					}
					
					.unit {
						margin: 10rpx;
					}
					
					.nickname {
						color: pink;
					}
					
					.name {
						color: yellow;
						margin: 10rpx;
					}
					
					.count {
						font-size: 24px;
					}
					
				}
				
				.price {
					font-size: 24rpx;
				}
				
				.btn-box {
					display: flex;
					align-items: center;
					margin-top: 10px;
					
					.btn {
						border: 1px solid #fff;
						font-size: 28rpx;
						padding: 20rpx 110rpx;
						border-radius: 40px;
						margin: 15px;
						color: #fff;
					}
					
					.active {
						border: 1px solid var(--ui-BG-Main);
						background-color: var(--ui-BG-Main);
					}
				}
			}
		}
	}
	
	.svga-hide {
		/* #ifdef MP */
		transform: translate(-100%, 0);
		/* #endif */
		
		/* #ifndef MP */
		display: none;
		/* #endif */
	}
	
	.svga-show {
		/* #ifdef MP */
		transform: translate(0, 0);
		/* #endif */
		
		/* #ifndef MP */
		display: block;
		/* #endif */
	}
</style>
