<template>
	<view :class="[AppTheme]" class="all_box">
		 
		<view class="monitor">
			<view class="monitor_1">
				<view v-for="(item, index) of title" :key="index">
					<view :class="{active1:activeIndex==index,active2:activeIndex==index,active3:activeIndex==index}">
						<view class="view1" @click="moust(item.id,index)">{{item.name}}</view>
					</view>

				</view>
			</view>
			<view class="monitor_2">
				<view v-for="(item, index) of title" :key="index">
					<view :class="{active1:activeIndex==index,active2:activeIndex==index,active3:activeIndex==index}">
						<view class="view1" @click="moust(item.id,index)">{{item.title}}</view>
					</view>
				</view>
			</view>
		</view>
		<u-divider :text="arrs.y"></u-divider>
		<view class="fram_oper_1">
			<view class="fram_oper_2">
				<view class="views1">日均成交量</view>
				<view class="views1">当月成交量</view>
				<view class="views1">对比上月</view>
			</view>
			<view class="fram_oper_2">
				<view class="views1">{{arrs.dayliang}}</view>
				<view class="views1">{{arrs.mousling}}</view>
				<view class="views1">{{arrs.title}}</view>
			</view>
		</view>
	 
		<view class="container">
			<!-- <u-scroll-list> -->
			<view v-for="(item, index) in arr" :key="index">
				<view class="bgwh qiun-title-bar tc">
					<view class="f30 g6" style="text-align: left;">{{item.title}}</view>
				</view>
				<view class="bgwh">
					<uCharts :scroll="item.opts.enableScroll" :show="canvas" :canvasId="item.id"
						:chartType="item.chartType" :extraType="item.extraType" :cWidth="cWidth" :cHeight="cHeight"
						:opts="item.opts" :ref="item.id" />
				</view>
			</view>
			 
			<!-- </u-scroll-list> -->
		</view>



	</view>
</template>
<script>
	import mineApi from "@/api/mine/index.js"
	import uCharts from '@/pagesC/components/leiqch-ucharts/u-charts.vue';
	import crt from '@/pagesC/components/leiqch-ucharts/js/chartsUtil.js';
	export default {
		name: 'index',
		components: {
			uCharts
		},
		data() {
			return {
				canvas: true,
				cWidth: '',
				cHeight: '',
				arr: [],
				title: [],
				active: 0,
				page: 1,
				current_page: 1,
				teamList: [],
				swiperCurrent: 0,
				current: 0,
				teamLists: [],
				tabsa: 1,
				index: 0,
				selfachievement: 0.00,
				teamachievement: 0.00,
				totalnum: 0,
				validnum: 0,
				farm_id: '',
				arrs: '',
				activeIndex: 2,
				mousts: ''
			};
		},
		onLoad(options) {
			this.farm_id = options.id
			this.init()
			this.page = 1;

		},

		methods: {
			moust(id, index) {
				this.activeIndex = index
				this.mousts = id
				this.getServerData()
			},
			init() {
				this.cWidth = uni.upx2px(750);
				this.cHeight = uni.upx2px(400);
				this.getServerData();
			},
			change(idx, type, etype) {
				this.$refs[this.arr[idx].id][0].changeData(this.arr[idx].id, this.arr[idx].opts, type, etype)
			},
			getServerData() {
				mineApi.teamindex({
                    farm_id:this.farm_id,
					mousts: this.mousts,
				}).then(res => {
					if (res.status == 1) {
						var sample = crt.getSampleData()
						var LineB = {
							rotate: false,
							enableScroll: false,
							unit: '人'
						}
						LineB.categories = res.data.categories //result.data.LineB.categories
						LineB.series = res.data.series //result.data.LineB.series
						var serverData = [{
							title: '用户增长趋势',
							opts: LineB,
							chartType: "line",
							extraType: "curve",
							id: "c3"
						}];
						console.log('serverData', JSON.stringify(res.data))
						this.arr = res.data.data;
						this.title = res.data.title;
						this.arrs = res.data.arr
					}
				});

			},


		}
	};
</script>
<style lang="scss" scoped>
	page {
		display: block;
		height: 100%;
		background-color: #efeff4;
	}

	.fl-row {
		display: flex;
		flex-direction: row;
	}

	.bgwh {
		background-color: #FFFFFF;
	}

	/*白色*/
	.g6 {
		color: #666;
	}

	/*浅黑*/
	.tc {
		text-align: center;
	}

	.f30 {
		font-size: 30upx;
	}

	.p10 {
		padding: 10upx;
	}

	.mt10 {
		margin-top: 10upx;
	}

	.mb10 {
		margin-bottom: 10upx;
	}

	.ml10 {
		margin-left: 10upx;
	}

	.mr10 {
		margin-right: 10upx;
	}

	.qiun-title-bar {
		width: 96%;
		padding: 10upx 2%;
		flex-wrap: nowrap;
	}

	.container {
		box-sizing: border-box;
		height: 100%;
		background-color: #efeff4;
	}

	.content {
		width: 750upx;
		height: calc(100% - 100upx);
		background-color: #efeff4;
	}

	.title {
		line-height: 80upx;
		background-color: #eee;
		text-indent: 20upx;
		font-size: 30upx;
		color: #000000;
		letter-spacing: 1px;
	}

	.i-cube {
		width: 12upx;
		height: 60upx;
		background-color: #007AFF;
		margin-right: 20upx;
	}

	.s-btn {
		font-size: 28upx;
		background-color: transparent;
		color: #f6a121;
		line-height: 1.8;
		padding-left: 20upx;
		padding-right: 20upx;
	}

	.s-btn:after {
		border: 2upx solid #8799A3;
	}

	.s-btn-hover {
		background-color: #f6a121;
		color: #FFFFFF;
	}

	.s-btn1 {
		font-size: 28upx;
		background-color: transparent;
		color: #f6a121;
		line-height: 1.8;
		padding-left: 20upx;
		padding-right: 20upx;
	}

	.s-btn1:after {
		border: 2upx solid #8799A3;
	}

	.s-btn1-hover {
		background-color: #007AFF;
		color: #FFFFFF;
	}

	.botoms {
		color: #bbb;
		font-size: 26rpx;
		text-align: center;
		margin-top: 30rpx;
		margin-bottom: 30rpx;
	}

	.dad {
		padding-left: 30rpx;
		padding-right: 30rpx;
		display: flex;
		justify-content: left;
		height: 150rpx;
		border-radius: 16rpx;
		margin: auto;
		margin-top: 20rpx;
		background: #fff;
		padding-top: 20rpx;

		.context {
			width: 100%;
			padding-left: 30rpx;

			.row1 {
				display: flex;
				justify-content: start;

				.name {
					font-size: 28rpx;
					color: #464646;
					display: flex;
					justify-content: center;
					justify-items: center;
					align-items: center;
				}

				.name1 {
					margin-left: 20rpx;
					font-size: 26rpx;
					display: flex;
					justify-content: center;
					justify-items: center;
					align-items: center;
					color: #bcbcbc;
				}
			}

			.row2 {
				font-size: 22rpx;
				color: #818181;
				padding-top: 10rpx;
				display: flex;
				justify-content: space-between;
			}
		}
	}

	.mag {
		width: 140rpx;
		height: 140rpx;
		width: 140rpx;
		margin: 200rpx auto;
	}

	.header {
		width: 750rpx;
		height: 350rpx;
		background-size: 111% 100%;
		background-position: -20rpx;
		margin: 0 auto;
	}

	.time {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 200rpx;
		text-align: left;
		margin-left: 40rpx;
		padding-top: 20rpx;

		image {
			width: 36rpx;
			height: 20rpx;
		}

		text {
			font-size: 32rpx;
			color: #fff;
		}
	}

	.money {
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
		// margin-top: 30rpx;
		text-align: center;
	}

	.money_a {
		margin-bottom: 20rpx;
	}

	.money>view {
		width: 50%;
		color: #fff;
		font-size: 38rpx;
	}

	.tex {
		font-size: 30rpx;
		// margin-top: 20rpx;
	}

	section {
		margin-top: 40rpx;
		width: 720rpx;
		background: #f2f2f2;
		display: flex;
		justify-content: space-around;
	}

	section>text {
		width: 160rpx;
		height: 56rpx;
		line-height: 56rpx;
		font-size: 30rpx;
		text-align: center;
		border-radius: 56rpx;
	}

	.active {
		color: #fff;
		background: -webkit-linear-gradient(right, #fda96d 0%, #ff435b 100%);
	}

	ul {
		width: 680rpx;
		border-radius: 16rpx;
		margin: auto;
		background: #fff;
	}

	li {
		width: 100%;
		border-bottom: 2rpx solid #f2f2f2;
		display: flex;
		align-items: flex-start;
		box-sizing: border-box;
		padding: 20rpx;
	}

	.imgsa {
		width: 100rpx;
		height: 100rpx;
		margin-top: 20rpx;
		border-radius: 50%;
	}

	li>view {
		flex: 1;
	}


	.left {
		margin-right: 200rpx;
	}

	.jiye {
		font-size: 34rpx;
	}

	.p {
		text {
			font-size: 34rpx;
			margin-top: 10rpx;
		}
	}

	.top {
		width: 280rpx;
	}

	.p {
		font-size: 26rpx;
		color: #999;
	}

	.tabs {
		width: 100%;
	}

	.monitor {
		display: flex;
		flex-direction: column;
		font-size: 26rpx;
		width: 40%;

		.monitor_1 {
			display: flex;
			justify-content: space-between;
			padding: 30rpx 0rpx 5rpx 20rpx;
			align-items: center;

			.view1 {
				padding: 0 15rpx;

			}

			.back {
				background-color: red;
			}
		}

		.monitor_2 {
			display: flex;
			justify-content: space-between;
			padding: 0rpx 0rpx 5rpx 20rpx;
			align-items: center;

			.view1 {

				padding: 0 20rpx;
			}
		}
	}

	 
	.active1 {

		.view1 {
			color: red;
		}
	}
	.fram_oper_1 {
		display: flex;
		flex-direction: column;	 
		margin-top: 50rpx;
		margin-bottom: 100rpx;
	
		.fram_oper_2 {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 10rpx 0;
	
			.views1 {
				text-align: center;
				font-size: 24rpx;
				width: 30%;
				-webkit-line-clamp: 1;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				overflow: hidden;
				text-overflow: ellipsis;
			}
	
			.views11 {
				text-align: center;
				font-size: 24rpx;
				width: 1rpx;
				background-color: #dedede;
				-webkit-line-clamp: 1;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}
	}
</style>
