<template>
	<scroll-view scroll-y="true" @scroll="showFixed" style="height:100%" class="page-body" v-if="showPage">
	
		<div class="page-title" :style="'opacity:'+(1-opacity)+';'" v-if="pageData">
			<text>{{pageData.Serverpart_Name || ''}}</text>
			<text>¥ {{pageData.Revenue_Amount ? $util.fmoney(pageData.Revenue_Amount,2) : '0.00'}}</text>
		</div>
		<cover-view class="fixed-box page-title" :style="'transform: translateY('+fixedY+'px);opacity:'+opacity+';'">
			<cover-view>{{pageData.Serverpart_Name || ''}}</cover-view>
			<cover-view class="price-text" style="width: 200rpx;text-align: right;">¥ {{pageData.Revenue_Amount ? $util.fmoney(pageData.Revenue_Amount,2) : '0.00'}}</cover-view>
		</cover-view>
		<canvas canvas-id="sellCate" id="sellCate" class="operation-cate-content" @touchstart="touchPie($event,'sellCate')"></canvas>
		
		<div class="shop-box">
			<scroll-view scroll-x class="tab-shop" scroll-with-animation :scroll-left="scrollLeft">
				
				<div v-for="(n,i) in cateBrandList" :key="i" :id="`tabNum${i}`" class="cate-name" :class="{'active': nowShop==i}" @click="selectCate(i)">{{n.Bussiness_Name}}</div>
				
			</scroll-view>
			<div class="tab-content" v-if="cateBrandList.length" >
				<div class="shop-card" v-for="(m,i) in cateBrandList[nowShop].listBrandModel" :key="i" @click="toBrandPage(m,i)" >
					<div>
						<image v-if="m.Brand_ICO" :src="m.Brand_ICO" mode="aspectFit"></image>
						<image v-else src="/static/images/revenue/home.png" mode="aspectFit"></image>
					</div>
					<div class="shop-name">{{m.Brand_Name}}</div>
					<div class="price-num">¥ {{m.Revenue_Amount ? $util.fmoney(m.Revenue_Amount,2) : '0.00'}}</div>
				</div>
			</div> 
			<!-- <div class="more-brand " v-if="cateBrandList[nowShop].listBrandModel.length>6" @click="showAll=!showAll"><image src="/static/images/revenue/more-brand.png" mode="aspectFit" :class="{'transfrom':showAll}"></image></div> -->
		</div>
	</scroll-view>
</template>

<script>
	import uCharts from '@/components/u-charts/u-charts.js';
	let rincanvas = {}
	var _self;
	export default {
		data() {
			return {
				scrollLeft: 0,
				theRequest:{},
				showAll:false,
				showHeight: uni.upx2px(484)+'px',
				sellData : [
					{
						name: '休闲餐饮',
						data: 136763.00,
						active: true
					},
					{
						name: '正餐饮',
						data: 126763.00
					},
					{
						name: '零售',
						data: 86763.00
					},
					{
						name: '司乘服务',
						data: 36763.00
					},
					{
						name: '汽车服务',
						data: 56763.00
					}
				],
				pageData: {},
				cateBrandList:[],
				ringColor: ['#FFAC37', '#d8ece9', '#e0e3f7', '#f7f5f6', '#b2b7e3'],
				nowShop: 0,
				showPage: false,
				fixedY:0,
				opacity: 0,
			}
		},
		
		onLoad(option) {
			_self = this
			uni.showLoading({
				title: '正在加载...'
			})
			if(option.ProvinceCode){
				this.theRequest = option
				this.getData(option)
			}else{
				
			}
			
		},
		methods: {
			showFixed(e){
				let options = e.detail
				let maxHeight = uni.upx2px(110)
				let minHeight = 0
				let selfHeight = uni.upx2px(110) 
				if(options.scrollTop > minHeight && options.scrollTop < maxHeight){
					
					this.fixedY = -selfHeight+ (options.scrollTop -minHeight)
					this.opacity = (options.scrollTop -minHeight)/selfHeight
				}else if(options.scrollTop>maxHeight){
					// uni.setNavigationBarColor({
					// 	backgroundColor:"#fcfcfc"
					// })
					this.fixedY = 0
					this.opacity = 1
				}else{
					this.fixedY = 0-selfHeight
					this.opacity = 0
				}
			
			},
			toBrandPage(item,index){
				let theRequest = this.theRequest
				let nowShop = this.nowShop
				
				let btid = this.cateBrandList[nowShop].Business_Trade
				
				let pages = `/pages/everdayRenven/serviceDetail?bid=${item.Brand_Id}&id=${theRequest.ServerpartIds}&time=${theRequest.time}&provinceId=${theRequest.ProvinceCode}&btid=${item.Business_Trade}`
				this.$util.toNextRoute('navigateTo', pages)
			},
			async selectCate(index){
				if(index==this.nowShop) return
				this.nowShop = index
				this.showAll = false
				let leftWidthSum = 0;
				for (var i = 0; i <= index; i++) {
					let nowElement = await this.getWidth('tabNum' + i)
					leftWidthSum = leftWidthSum + nowElement.width
				}
				let winWidth = uni.getSystemInfoSync().windowWidth
				winWidth = (winWidth-60)/1.5
				this.scrollLeft = leftWidthSum > winWidth ? (leftWidthSum - winWidth) : 0
				
				this.$forceUpdate()
			},
			getWidth(id) { //得到元素的宽高
				return new Promise((res, rej) => {
					uni.createSelectorQuery().select("#" + id).fields({
						size: true,
						scrollOffset: true
					}, (data) => {
						res(data)
						// console.log(data)
					}).exec()
				})
			},
			operationFn() { //昨日营收占比
				let _this = this;
			
			 // 业态营收占比
				let colors1 = ['#FFAC37', '#d8ece9', '#e0e3f7', '#f7f5f6', '#b2b7e3'];
				let list = []
				_this.pageData.listBusinessModel.map((m,i)=>{
					let n = {
						name: m.Bussiness_Name,
						data: m.Revenue_Amount
					}
					// if(i==0) {
					// 	n.textColor='#999'
					// 	n.active =true
					// }else{
						n.textColor='#D1D1D1'
					// }
					n.textSize= uni.upx2px(26)
					n.format = function(arg) {
						return [n.name,(arg*100).toFixed(2)+'%']
					}
					list.push(n)
				})
				_this.sellData = list
				
				// this.regionProgress = businessData[1]
				_this.showPie({
					id: 'sellCate',
					data: list,
					colors: colors1,
				});
		
			},
			showPie(obj) {
				let data= {
					series: []
				}
				
				data.series = data.series.concat(obj.data)
				rincanvas[obj.id] = new uCharts({
					$this: _self,
					canvasId: obj.id,
					colors: obj.colors,
					type: 'ring',
					
					padding: [uni.upx2px(36),uni.upx2px(16),uni.upx2px(36),uni.upx2px(16)],
					legend: {
						show: false,
					},
					title: {
						name: data.series[0].name,
						fontSize: uni.upx2px(26),
						color: '#666666',
						// offsetY: uni.upx2px(-16),
					},
					
					animation: false,
					subtitle: {
						name: '¥'+this.$util.fmoney(data.series[0].data,2),
						color: '#666666',
						fontSize: uni.upx2px(30),
						offsetX: uni.upx2px(16),
					},
					fontSize: uni.upx2px(40),
					background: '#FFFFFF',
					pixelRatio: 1,
					series: data.series,
					animation: true,
					width: uni.upx2px(720),
					height: uni.upx2px(586),
					dataLabel: true,
					disablePieStroke: true,
					dataPointShape: false,
					extra: {
						pie: {
							ringWidth: uni.upx2px(102),
							labelWidth: uni.upx2px(40),
							activeOpacity: 1,
							activeRadius: 10
						},
						tooltip: {
							showBox: false,
							bgColor: '#000',
							bgOpacity: 0.4,
							
						}
					},
				});
				
			},
			touchPie(e,id,opt) {
				
				let index = rincanvas[id].getCurrentDataIndex(e) 
				if(index==-1) return
				let item = this.sellData[index]
				this.sellData.map(n=>{n.textColor="#d1d1d1"})
				item.textColor = "#999"
				let showData = {
					title: {
						name: item.name,
						fontSize: uni.upx2px(26),
						color: '#666666',
						offsetY: uni.upx2px(-16),
					},
					series: this.sellData,
					animation: false,
					subtitle: {
						name: '￥'+this.$util.fmoney(item.data,2),
						color: '#666666',
						fontSize: uni.upx2px(30),
						offsetY: uni.upx2px(-16),
					},
				}
				rincanvas[id].updateData(showData);
				
				rincanvas[id].showToolTip(e);
				this.nowShop = index+1
			},
			getData(theRequest){
				let _this = this
			
				
				this.$request.$webGet('WeChat/GetServerpartBrand',{
					Serverpart_Id: theRequest.ServerpartIds,
					statictics_Time: theRequest.time,
					pushProvinceCode: theRequest.ProvinceCode
				}).then(res=>{
					uni.hideLoading()
					if(res.Result_Code !=100 ) return
					_this.showPage= true
					
					_this.pageData = res.Result_Data
				
					let list = JSON.parse(JSON.stringify(res.Result_Data.listBusinessModel))
					// _this.cateBrandList = res.Result_Data.listBusinessModel
					let all = {
						Bussiness_Name:'全部',
						
						listBrandModel:[]
					}
					list.map(n=>{
						all.listBrandModel.push(...n.listBrandModel)
					})
					all.listBrandModel.sort((a,b)=>{
						if(a.Revenue_Amount<b.Revenue_Amount){
							return 1
						}else{
							return -1
						}
						})
					_this.cateBrandList = [all,...list]
					_this.operationFn()
				})
					
				
			},
			
		},
		onPageScroll(e){
			let options = e.detail
			let maxHeight = uni.upx2px(110)
			let minHeight = 0
			let selfHeight = uni.upx2px(110) 
			if(options.scrollTop > minHeight && options.scrollTop < maxHeight){
				
				this.fixedY = Math.ceil(-selfHeight+ (options.scrollTop -minHeight))
				this.opacity = Math.ceil( (options.scrollTop -minHeight)/selfHeight)
			}else if(options.scrollTop>maxHeight){
				
				this.fixedY = 0
				this.opacity = 1
			}else{
				this.fixedY = 0-selfHeight
				this.opacity = 0
			}
			console.log(options.scrollTop)
		}
	}
</script>

<style scoped>
	.page-body {
		background-color: #fff;
		padding-bottom: 60rpx;
		box-sizing: border-box;
	}
	cover-view {
		color: #fff;
	}
	
	.page-title {
		background-color: #fcfcfc;
		display: flex;
		align-items: center;
		height: 110rpx;
		padding: 0 24rpx;
		justify-content: space-between;
		/* font-family: Bahnschrift Regular !important; */
		color: #000;
		font-size: 30rpx;
	}
	.page-title text:last-child {
		/* font-size: 42rpx; */
		color: #383838;
		/* font-family: 'Bahnschrift Regular' !important; */
	}
	.fixed-box {
	
		background-color: #686D8F;
		/* background: linear-gradient(to right, #686D8F, #A1ACC6); */
		transition: all .2s;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 999;
		box-sizing: border-box;
		color: #fff;
	}
	/* 业态 */
	.operation-cate-content {
		height: 585rpx;
		width: 750rpx;
		margin: 0 auto;
	}
	/* 门店 */
	.shop-box {
		margin: 0 20rpx;
		border-radius: 8rpx;
		background-color: #F6F8FA;
		padding: 36rpx 20rpx;
	}
	.tab-shop {
		
		color: #999999;
		white-space: nowrap;
		/* display: flex;
		align-items: center; */
		
	}
	.tab-shop .cate-name {
		padding-right: 16rpx;
		font-size: 26rpx;
		display: inline-block;
		vertical-align: middle;
	}
	.tab-shop .cate-name + .cate-name::before {
		content: '|';
		color: #eeeeee;
		padding-right: 16rpx;
	}
	.tab-shop .cate-name.active {
		color: #000;
		font-size: 28rpx;
		font-weight: 600;
		
	}
	.tab-content {
		display: flex;
		flex-wrap: wrap;
		margin-top: 24rpx;
		transition: all 0.5s  cubic-bezier(0, 1, 0.5, 1);
		margin: 24rpx auto 0 auto;
		overflow: hidden;
		height: inherit; 
	    width: inherit;
	}
	
	/* 门店卡片 */
	.shop-card {
		width: 210rpx;
		height: 227rpx;
		border-radius: 8rpx;
		color: #fff;
		text-align: center;
		padding-top: 20rpx;
		box-sizing: border-box;
		margin-top: 16rpx;
	}
	.shop-card:nth-child(6n-5){
		background: url(/static/images/revenue/shop-card.png)  no-repeat center 50%,linear-gradient(-35deg, #ed7c77 , #d6524c);
		background-size: contain;
	}
	
	.shop-card:nth-child(6n-4){
		background: url(/static/images/revenue/shop-card.png)  no-repeat center 50%,linear-gradient(-35deg, #d1bea8 , #ba9d7b );
		margin-left: 18rpx;
		background-size: contain;
	}
	.shop-card:nth-child(6n-3) {
		background: url(/static/images/revenue/shop-card.png)  no-repeat center 50%,linear-gradient(-35deg, #929cc0 , #aab3d0 );
		margin-left: 18rpx;
		background-size: contain;
	}
	.shop-card:nth-child(6n-2) {
		background: url(/static/images/revenue/shop-card.png)  no-repeat center 50%,linear-gradient(-35deg, #779cb1 , #a3bbc9 );
		background-size: contain;
		margin-left: 0rpx;
	}
	.shop-card:nth-child(6n-1) {
		background: url(/static/images/revenue/shop-card.png)  no-repeat center 50%,linear-gradient(-35deg, #c08d80 , #e8cbc7 );
		margin-left: 18rpx;
		background-size: contain;
	}
	.shop-card:nth-child(6n) {
		background: url(/static/images/revenue/shop-card.png)  no-repeat center 50%,linear-gradient(-35deg, #5cbe9c , #95d5bf );
		margin-left: 18rpx;
		background-size: contain;
		margin-left: 18rpx;
	}
	.shop-card .shop-name {
		font-size: 24rpx;
		text-shadow: 0 2rpx 2rpx #A9a5a0;
		line-height: 1.4;
	}
	.shop-card image {
		border-radius: 50%;
		border: 2rpx solid #fff;
		background-color: #FFFFFF;
		width: 62rpx;
		height: 62rpx;
	}
	.shop-card .price-num {
		
		font-size: 38rpx;
		font-family: Bahnschrift Regular;
	}
	/* 更多品牌 */
	.more-brand {
		text-align: center;
		padding-top: 44rpx;
	}
	.more-brand image {
		width: 62rpx;
		height: 36rpx;
		transition: all 0.5s  cubic-bezier(0, 1, 0.5, 1);
	}
	image.transfrom {
		transform: rotate(-180deg);
		
	}
</style>
