<template>
	<view>
		<z-paging :language="$i18n.locale" ref="paging" v-model="list" @query="queryList" :pageSize="20"
		:style="'background-color: '+theme.bg+';color: '+theme.text">
			<!-- 下拉刷新 -->
			<custom-refresher slot="refresher" slot-scope="{refresherStatus}" :status="refresherStatus">
			</custom-refresher>

			<!-- 头部 -->
			<myNav slot="top" :title="i18n.mine.share.team"></myNav>
			<!-- 身体 -->
			<view>
				<view class="width-100b height-200 padding-w-45 flex align-center justify-between">
					<view class="top1">
						<text class="font-26 color-white" style="opacity: 0.5;">{{i18n.mine.share.num}}</text>
						<text class="font-34 numbold-font color-white">{{team_num}}{{i18n.mine.share.ren}}</text>
					</view>
					<view class="top2">
						<text class="font-26 color-white" style="opacity: 0.5;">{{i18n.mine.share.today}}</text>
						<text class="font-34 numbold-font color-white">{{team_today}}{{i18n.mine.share.ren}}</text>
					</view>
				</view>

				<view class="width-100b height-70 flex direction-column align-center justify-center">
					<text class="font-26 bold-font">{{i18n.mine.share.my}}</text>
					<view class="width-48 height-4 margin-t-13" style="background-color: #3ECEB2;"></view>
				</view>

				<view class="listBox" :style="'background-color: '+theme.fu_bg+';color: '+theme.fu_text"
					v-for="(item,index) in list" :key="index">
					<text class="font-28 bold-font">{{item.nickname}}</text>
					<text class="font-24 nummedium-font">{{item.jointime}}</text>
				</view>
			</view>

		</z-paging>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				team_num: 0,
				team_today: 0,

				list: [],
				theme: '',
			}
		},
		computed: {
			i18n() {
				return this.$t('message');
			},
		},
		onShow() {
			if (uni.getStorageSync("theme") == "dark") {
				this.theme = this.$store.state.darkTheme
			} else {
				this.theme = this.$store.state.lightTheme
			}
		},
		methods: {
			team_head() {
				this.post('/my/team_head').then(res => {
					if (res.code == 1) {
						this.team_num = res.data.team_num
						this.team_today = res.data.team_today
					}
				})
			},
			queryList(pageNo, pageSize) {
				setTimeout(() => {
					this.post('/my/team_push', {
						page: pageNo,
						page_num: pageSize
					}).then(res => {
						if (res.code == 1) {
							console.log(res)
							this.$refs.paging.complete(res.data.data);
						}
					})
					this.team_head()
				}, 500)
			},
		}
	}
</script>

<style>
	.top1 {
		background-image: url(../../../static/imgs/my/top1@2x.png);
		background-repeat: repeat;
		background-size: 100% 100%;
		width: 312rpx;
		height: 154rpx;
		padding: 28rpx 45rpx;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: space-between;
	}

	.top2 {
		background-image: url(../../../static/imgs/my/top2@2x.png);
		background-repeat: repeat;
		background-size: 100% 100%;
		width: 312rpx;
		height: 154rpx;
		padding: 28rpx 45rpx;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: space-between;
	}

	.listBox {
		width: 100%;
		height: 160rpx;
		/* background: #FFFFFF; */
		padding: 34rpx 45rpx;
		margin: 0 auto 12rpx;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: space-between;
	}
</style>
