<template>
	<v-page>
		<v-header :title="$t('common.service')"></v-header>
		<view class="onsczone">
			<web-view v-if="isLoad" :src="csurl" style="margin-top: 3rem;"></web-view>
			<view style="display: flex;justify-content: center;align-items: center;" v-else>
				<div class="loader"></div>
				<div style="font-size: 20px;margin-left: 10px;">{{$t('common.loading')}}<span>...</span></div>
			</view>
		</view>
	</v-page>
</template>

<script>
	import Member from "@/api/member";
	import Home from "@/api/home";
	export default {
		data() {
			return {
				csurl: "",
				isLoad: false
			}
		},
		onLoad() {
			this.mkcslinks()
		},
		methods: {
			// build
			mkcslinks() {
				let user = uni.getStorageSync('user')
				if (user) {
					let ustr = JSON.parse(user)
					console.log(ustr)
					Member.getUnameByUid({user_id: ustr.pid}).then(rfres => {
						let rfu = rfres.data;
						// query referr uname
						let chaturl = "https://cs.bitglobys.com/chat/?toid=" + rfu.username + "&room_id=" + ustr.account + "&usid=" + ustr.user_id;
						//this.csurl += rfres.username+"&room_id="+ustr.account+"&usid="+ustr.user_id;
						// console.log("dd",chaturl);
						this.csurl = chaturl;
						this.isLoad = true;
						if(this.isLoad===true){
							this.chatRead()
						}
					})
					console.log("user", this.csurl)
				}
			},
			chatRead(){
				Home.chatRead().then(res => {
					console.log('已读');
				})
			}
		}
	}
</script>
<style>

</style>
<style scoped>
	.onsczone {
		margin-top: 12rem;
	}

	.loader {
		width: 50px;
		aspect-ratio: 1;
		display: grid;
		border: 4px solid #0000;
		border-radius: 50%;
		border-right-color: #25b09b;
		animation: l15 1s infinite linear;
	}

	.loader::before,
	.loader::after {
		content: "";
		grid-area: 1/1;
		margin: 2px;
		border: inherit;
		border-radius: 50%;
		animation: l15 2s infinite;
	}

	.loader::after {
		margin: 8px;
		animation-duration: 3s;
	}

	@keyframes l15 {
		100% {
			transform: rotate(1turn)
		}
	}

	span {
		display: inline-block;
		height: 1em;
		line-height: 1;
		text-align: left;
		vertical-align: -.25em;
		overflow: hidden;
	}

	span::before {
		display: block;
		content: '...\A..\A.';
		white-space: pre-wrap;
		animation: dot 3s infinite step-start both;
	}

	@keyframes dot {
		33% {
			transform: translateY(-2em);
		}

		66% {
			transform: translateY(-1em);
		}
	}
</style>