<template>
	<view class="float" v-if="showDialog" @click="toPage">
		<view class="icon"><text class="iconfont icon-zhibo"></text></view>
		<view class="tit">直播间</view>
	</view>
</template>

<script>
	import { ref, reactive, toRefs, onMounted, onActivated } from 'vue'
	import { get, post } from '@/Api/request.js'
	import { showToast } from '../common.js'
	export default {
		props: {
			
		},
		setup(props, context) {
			const data = reactive({
				Color: uni.getStorageSync('theme_color'),
				showDialog: false,
				liveId: 0
			})
	
			function toPage() {
				uni.navigateTo({
					url: `/pages/live/index?live_id=${data.liveId}`
				})
			}
			
			function isShowLive() {
				data.liveId = uni.getStorageSync('liveId')
				if(data.liveId) {
					data.showDialog = true
				} else {
					data.showDialog = false
				}
			}
			
			onMounted(() => {
				isShowLive()
			})
			
			onActivated(() => {
				isShowLive()
			})
	
			return {
				...toRefs(data),
				toPage,
				isShowLive
			}
		}
	}
</script>

<style lang="scss" scoped>
	.float{
		position: fixed;
		right: 24rpx;
		bottom: 200rpx;
		padding: 16rpx;
		border-radius: 10rpx;
		font-size: 24rpx;
		background: #fff;
		text-align: center;
		box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.2);
		.icon{
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
			margin-bottom: 6rpx;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			text{
				color:  v-bind('Color');
				font-size: 36px;
			}
		}
	}
</style>