<template>
	<view class="container">
		<view class="top-tabs">
			<view class="tab" @click="topage('otherPage/rent')">
				<image class="img" src="/static/index/czzq.png" mode="" />
				出租专区
			</view>
			<view class="tab" @click="topage('otherPage/jjrent')">
				<image class="img" src="/static/index/jjcz.png" mode="" />
				居间出租
			</view>
			<view class="tab" @click="topage('my/myapply')">
				<image class="img" src="/static/index/wdsq.png" mode="" />
				我的申请
			</view>
			<view class="tab" @click="topage('my/mytodo')">
				<image class="img" src="/static/index/wddb.png" mode="" />
				我的待办
			</view>
		</view>
		<open-data type="groupName" open-gid="tGspFe44Y83pmo9BfOxzXlFmR1r50"></open-data>
		<view class="gonggao">
			<view class="left">
				<view class="title">公告</view>
				<view class="dot"></view>
			</view>
			<view class="right">
				<u-notice-bar type="none" padding="18rpx 0" font-size="28" color="#303030" mode="vertical" :volume-icon="false" :more-icon="false" :list="list"></u-notice-bar>
			</view>
			<image class="more-icon" src="/static/index/right-arrow.png" mode="" />
		</view>
		<view class="report-tab">
			<u-tabs :list="tabList" bar-width="60" bar-height="6" active-color="#FF6D25" inactive-color="#666666" font-size="30" :is-scroll="false" :current="current" @change="change"></u-tabs>
		</view>
		<view class="tongji">
			<view class="tongji-item" v-for="(item,index) in tongjiList" :key="index">
				<view class="num">{{item.num}}</view>
				<view class="text">{{item.text}}</view>
			</view>
			<view class="lookall" @click="topage('otherPage/companywarReport')">查看全部
				<image class="more-icon" src="/static/index/more.png" mode="" />
			</view>
		</view>
		<view class="report-tab">
			<u-tabs :list="tabList1" bar-width="60" bar-height="6" active-color="#FF6D25" inactive-color="#666666" font-size="30" :is-scroll="false" :current="current1" @change="change1"></u-tabs>
		</view>
		<view class="rank-box">
			<view class="rank-item" v-for="(item,index) in rankList" :key="index">
				<view class="left">
					<image class="top-img" :src="'/static/index/top'+(index+1)+'.png'" mode="" />
					<image class="avatar" src="/static/avatar.png" mode="" />
					<view class="name u-line-1">王柏翘</view>
				</view>
				<view class="right">
					<view class="top"><view class="number">7</view>套</view>
					<view class="desc">累计成交</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				list: ['关于人才招聘及新员工试用期管理实施',
					'平明送客楚山孤平明送客楚山孤',
					'关于人才招聘及新员工试用期管理实施123',
					'一片冰心在玉壶一片冰心在玉壶一片冰心在玉壶'],
				tabList: [{
					name: '今日战报'
				}, {
					name: '本周战报'
				}, {
					name: '本月战报'
				}],
					tabList1: [{
					name: '经纪人排名'
				}, {
					name: '组排名'
				}],
				tongjiList: [
					{
						num: 29,
						text: '新增成交'
					},
					{
						num: 5,
						text: '新增代理合同'
					},
					{
						num: 0,
						text: '新增带看'
					},
					{
						num: 9,
						text: '新增客户'
					}
				],
				rankList: [{},{},{}],
				current: 0,
				current1: 0,
				openGid:''
			};
		},
		onLoad(options) {
			let that = this
			wx.showShareMenu({
				withShareTicket: true
			})
			app.getShareTiket(function (globalData) {
			console.log('clickReload---globalData-->' + JSON.stringify(globalData))
				that.openGid= globalData.openGid
			})
		},
		onShow() {
		
		},
		methods: {
			change(index){
				this.current = index
			},
			change1(index){
				this.current1 = index
			},
			topage(type){
				uni.navigateTo({
					url: '/pages/' + type
				})
			},
		},
	};
</script>

<style lang="scss" scoped>
.container{
	width: 100%;
	height: 100%;
	background: #F8F8F8;
	overflow: auto;
	.top-tabs{
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: #fff;
		padding: 32rpx 45rpx;
		margin-bottom: 20rpx;
		.tab{
			display: flex;
			flex-direction: column;
			justify-content: center;
			font-size: 26rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
			
			.img{
				width: 98rpx;
				height: 98rpx;
				margin-bottom: 4rpx;
			}

		}
	}
	.gonggao{
		width: 750rpx;
		height: 80rpx;
		background: #FFFFFF;
		display: flex;
		align-items: center;
		padding: 0 30rpx;
		margin-bottom: 20rpx;
		.left{
			display: flex;
			align-items: center;
			.title{
				text-align: center;
				width: 96rpx;
				height: 48rpx;
				line-height: 48rpx;
				background: rgba(255, 109, 37, 0.1);
				border-radius: 8rpx;
				font-size: 28rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #FF6D25;
			}
			.dot{
				width: 12rpx;
				height: 12rpx;
				background: #E7483C;
				border-radius: 50%;
				margin: 0 10rpx 0 20rpx;
			}
		}
		.right{
			flex: 1;
			width: 490rpx;
		}
		.more-icon{
			width: 12rpx;
			height: 28rpx;
		}
	}
	.report-tab{
		border-bottom: 1px solid rgba(224,224,224,0.5);
	}
	.tongji{
		display: flex;
		flex-wrap: wrap;
		background: #fff;
		padding: 20rpx 0;
		margin-bottom: 20rpx;
		.tongji-item{
			width: 25%;
			display: flex;
			flex-direction: column;
			align-items: center;
			.num{
				height: 56rpx;
				font-size: 40rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #333333;
				line-height: 56rpx;
				margin-bottom: 6rpx;
			}
			.text{
				height: 36rpx;
				font-size: 26rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #666666;
				line-height: 36rpx;
				margin-bottom: 28rpx;
			}
		}
		.lookall{
			width: 750rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			height: 40rpx;
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #666666;
			line-height: 40rpx;
			border-top: 1px solid #e0e0e0;
			padding-top: 20rpx;
			.more-icon{
				width: 12rpx;
				height: 20rpx;
				margin-left: 8rpx;
			}
		}
	}
	.rank-box{
		padding: 40rpx 30rpx;
		background: #fff;
		.rank-item{
			margin-bottom: 40rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			&:last-child{
				margin-bottom: 0;
			}
			.left{
				display: flex;
				align-items: center;
				.top-img{
					width: 44rpx;
					height: 58rpx;
					margin-right: 32rpx;
				}
				.avatar{
					width: 96rpx;
					height: 96rpx;
					border-radius: 50%;
					overflow: hidden;
					margin-right: 20rpx;
				}
				.name{
					max-width: 200rpx;
					height: 40rpx;
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;
					line-height: 40rpx;
				}
			}
			.right{
				.top{
					font-size: 24rpx;
					line-height: 50rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #666666;
					display: flex;
					margin-bottom: 9rpx;
					justify-content: flex-end;
					.number{
						font-size: 36rpx;
						font-weight: 500;
						color: #FF6D25;
						margin-right: 4rpx;
					}
				}
				.desc{
					text-align: right;
					width: 96rpx;
					height: 32rpx;
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #666666;
					line-height: 32rpx;
				}
			}

		}
	}

}
</style>
