<template>
	<view class="customer-content" v-show="show">
		<div class="" v-show="!loading && pageEmpty">
			<noFound :nodata="true" :text="'抱歉，服务区采集样本数据过小，无法分析。'"/>
		</div>
			<div v-show="!loading  && !pageEmpty">
			<div class="tab-btn" @tap="tabChange(canvasTab==1?2:1,opt)">{{canvasTab==1 ? '消费能力分析' : '消费人群分析'}}</div>
			<div class="customer-title">{{canvasTab==1? '消费人群': '消费能力'}}占比</div>
			<canvas canvas-id="sexCate" id="sexCate" class="operation-cate-content" @touchend="tap"></canvas>
			<div class="customer-title">年龄层占比</div>
			<canvas canvas-id="stockShare1" id="stockShare1" class="operation-stock-content" v-show="canvasTab==1" @touchend="tap"></canvas>
			<canvas canvas-id="stockShare2" id="stockShare2" class="operation-stock-content" v-show="canvasTab==2" @touchend="tap"></canvas>
			<div class="analysis-text" v-if="proportionList[canvasTab]">
				<span class="key-text">分析</span><span>{{proportionList[canvasTab][1]}}</span>
			</div>
		</div>
	</view>
</template>

<script>
	import uCharts from '@/components/u-charts.js';
	let rincanvas = {}
	
	export default {
		props: {
			pieId: String,
			barId: String,
			show: Boolean
		},
		data() {
			return {
				tab: [
					{id:1,name:'消费人群分析'},
					{id:2,name:'消费能力分析'},
				],
				canvasTab: 1,
				proportionList: {
					1: [],
					2: []
				},
				opt: null,
				pageEmpty: false,
				loading: true
			}
		},
	
		methods: {
			refreshData(data) {
				// 刷新数据
				rincanvas['sexCate'].updateData({series:data[0]});
				this.$forceUpdate()
			},
			tabChange(name,opt) {
				this.canvasTab= name
				
				if (this.proportionList[name].length == 0) {
					
					this.getProportion(name, opt)
				} else {
					
					this.refreshData(this.proportionList[name])
				}
			},
			async getProportion(type, params) {
				let _this = this
				_this.opt = params
				const data = await this.$request.$webGet('Customer/GetCustomerRatio', {
					statisticsType: type,
					...params
				})
				_this.loading = false
				if (data.Result_Code === 100 && data.Result_Data.List.length > 0) {
					
					const list = data.Result_Data.List
					
					let pieSerise = [{
							name: list[0].name,
							data: list[0].data[0],
							formatter: function(arg) {
								
								if (typeof arg === 'number') {
									return [list[0].name, (arg * 100).toFixed(2) + '%']
								} else {
									return [arg.name, (arg._proportion_ * 100).toFixed(2) + '%']
								}
								// return [list[0].name, (arg * 100).toFixed(2) + '%']
							}
						},
						{
							name: list[1].name,
							data: list[1].data[0],
							formatter: function(arg) {
								if (typeof arg === 'number') {
									return [list[1].name, (arg * 100).toFixed(2) + '%']
								} else {
									return [arg.name, (arg._proportion_ * 100).toFixed(2) + '%']
								}
								
							}
						}
					]
					let clounm =  [{
						name: list[2].name,
						data: ([]).concat(list[2].data),
						formatter: function(arg) {
							return [ arg  + '%']
						}
					}]
					
					_this.proportionList[type] = [
						pieSerise, await _this.getAnalysisDesc(type,params)
					]
					
					_this.showPie({
						id: 'sexCate',
						data: pieSerise
					})
					_this.showClounm({
						id: 'stockShare'+type,
						data: clounm,
						categories: ['00后', '90后', '80后', '70后'],
					})
						
					
				this.$forceUpdate()
					
				} else {
					this.pageEmpty = true
				}
			},
			async getAnalysisDesc(analysisType, params) {
				let _this = this

				const data = await this.$request.$webGet('Customer/GetAnalysisDescDetail', {
					statisticsType: analysisType,
					...params
				})

				return data.Result_Data.Analysis_Content || ''
			},
			tap(e) {
				rincanvas[e.target.id].touchLegend(e);
				rincanvas[e.target.id].showToolTip(e);
			},
			showPie(obj) {
				let data = {
					series: []
				}
				const ctx = uni.createCanvasContext(obj.id, this);
				data.series = data.series.concat(obj.data)
				rincanvas[obj.id] = new uCharts({
					// $this: this,
					// canvasId: obj.id,
					context: ctx,
					color: ['#667ED5', '#F6B760'],
					type: 'ring',
					fontSize: 12,
					// padding: [15, 15, 25, 15],
					legend: {
						show: false,
						padding: 5,
						lineHeight: 11,
						margin: 0,
					},
					background: '#FFFFFF',
					pixelRatio: 1,
					series: obj.data,
					animation: false,
					width: uni.upx2px(666),
					height: uni.upx2px(480),
					dataLabel: true,
					extra: {
						ring: {
							ringWidth: 40,
							labelWidth: 20,
							border: true,
							borderWidth: 1,
							color: '#777',
							borderColor: '#fff'
						}
					},
				});

			},
			showClounm(obj) {

				let data = {
					series: []
				}
				const ctx = uni.createCanvasContext(obj.id, this);
				data.series = data.series.concat(obj.data)
				rincanvas[obj.id] = new uCharts({
					// $this: this,
					// canvasId: obj.id,
					context: ctx,
					type: 'column',
					legend: {
						show: false
					},
					color: ['#78BFB4'],
					fontSize: 12,
					background: '#FFFFFF',
					padding: [30, 12, 12, 12],
					animation: true,
					categories: obj.categories,
					series: data.series,
					enableScroll: false, //开启图表拖拽功能
					xAxis: {
						disabled: false,
						disableGrid: true,
						axisLine: false,
						fontColor: '#777777',
						labelCount: 5,

					},
					yAxis: {
						data: [{
							disabled: false,
							axisLine: false,
							fontColor: '#777777',
							formatter: (val) => {
								return parseInt(val) + '%'
							}
						}],

						gridType: 'dash',
						gridColor: '#eee',
						dashLength: 2,
						splitNumber: 3,
					},
					dataLabel: true,
					width: uni.upx2px(686),
					height: uni.upx2px(420),
					extra: {
						column: {
							type: 'group',
							width: uni.upx2px(50)
						}
					}
				});
			},
		}

	}
</script>

<style scoped>
	.customer-content {
		margin: 0 30rpx;
		border-radius: 8rpx;
		box-shadow: 0 2rpx 10rpx 0 rgba(230, 230, 230, 0.49);
		background-color: #fff;
		position: relative;
		margin-bottom: 48rpx;
		padding-bottom: 50rpx;
	}

	.customer-title {
		padding: 0 20rpx;
		line-height: 80rpx;
		font-size: 26rpx;
	}

	.operation-cate-content {
		height: 480rpx;
		width: 690rpx;
		margin: 0 auto;
	}
	.operation-stock-content {
		height: 440rpx;
		width: 690rpx;
		margin: 0 auto;
	}
	.tab-btn {
		position: absolute;
		color: #fff;
		font-size: 24rpx;
		width: 241rpx;
		height: 52rpx;
		line-height: 52rpx;
		right: 0;
		top: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		background: url(../../../static/images/revenue/tab-bg.png)  no-repeat right;
		background-size: contain;
	}
	.tab-btn::before {
		content: '';
		background: url(../../../static/images/revenue/next.png) no-repeat center;
		background-size: contain;
		width: 40rpx;
		height: 16rpx;
	}
	.analysis-text {
		color: #9498A4;
		display: flex;
		align-items: flex-start;
		font-size: 24rpx;
		margin: 0 30rpx 0 30rpx;
	}

	.key-text {
		min-width: 50rpx;
		background: #EA7F56;
		font-size: 22rpx;
		text-align: center;
		color: #ffffff;
		background: #ea7f56;
		border-radius: 5rpx;
		margin-right: 16rpx;
		height: 30rpx;
		line-height: 30rpx;
		margin-top: 4rpx;
	}
</style>
