<template>
	<view v-if="data" class="order-sum">
		<view class="data-bar">
			<view @click="chooseTime(0)"><text>{{ this.date[0] ? this.date[0] : '开始时间' }}</text> <text v-if="!this.date[0]" class="cuIcon-triangledownfill"></text></view>
			<view @click="chooseTime(1)"><text>{{ this.date[1] ? this.date[1] : '结束时间' }}</text> <text v-if="!this.date[1]" class="cuIcon-triangledownfill"></text></view>
		</view>
		<view class="data-area">
			<view class="total">
				<text>订货总金额(元）</text>
				<text class="num">{{ data.money | numDot }}</text>
			</view>
			<view class="pay-nopay">
				<view class="left">
					<text>已付款（元）</text>
					<text class="num">{{ data.pay_money | numDot }}</text>
				</view>
				<view class="line"></view>
				<view class="right">
					<text>未付款（元）</text>
					<text class="num">{{ data.no_pay_money | numDot }}</text>
				</view>
			</view>
			<view @click="choosePicker" class="activity">{{ choosedActie > -1 ? activeList[choosedActie].label : '活动查询' }}</view>
		</view>
		<view class="type-bar">
			<view :class="{ active: type == 0 }" @click="type=0">订货数量统计</view>
			<view :class="{ active: type == 1 }" @click="type=1">订货排名统计</view>
		</view>
		<view v-if="type == 0" class="data-detail">
			<view class="chart">
				<image class="l1" src="../../static/icon/h-line.png"></image>
				<image class="l2" src="../../static/icon/s-line.png"></image>
				<image class="l3" src="../../static/icon/o-line.png"></image>
				<view class="l-d l1">
					<text>精装版</text>
					<text>{{ data.hard | numDot }}件</text>
				</view>
				<view class="l-d l2">
					<text>简约版</text>
					<text>{{ data.simple | numDot }}套</text>
				</view>
				<view class="l-d l3">
					<text>老人版</text>
					<text>{{ data.old | numDot }}套</text>
				</view>
				<view class="center">
					<chart-progress backgroundColor="#E7E9EB" chartID="c1" :chartData="chartData.old" width="240" height="240" />
				</view>
				<view class="center c2">
					<chart-progress backgroundColor="#E7E9EB" chartID="c2" :chartData="chartData.simple" width="200" height="200" />
				</view>
				<view class="center c3">
					<chart-progress backgroundColor="#E7E9EB" chartID="c3" :chartData="chartData.hard" width="160" height="160" />
				</view>
				<view class="bottom-bar">
					<view class="l">精装版</view>
					<view class="c">简约版</view>
					<view class="r">老人版</view>
				</view>
			</view>
			<view class="type-detal">
				<view class="detail-item">
					<view class="name">款式</view>
					<view class="num">订货数量</view>
					<view class="money">订货金额</view>
				</view>
				<view class="detail-item">
					<view class="name">精装版</view>
					<view class="num">{{ data.hard | numDot }}（套）</view>
					<view class="money">￥{{ data.hard_money | numDot }}</view>
				</view>
				<view class="detail-item">
					<view class="name">简约版</view>
					<view class="num">{{ data.simple | numDot }}（件）</view>
					<view class="money">￥{{ data.simple_money | numDot }}</view>
				</view>
				<view class="detail-item">
					<view class="name">老人版</view>
					<view class="num">{{ data.old | numDot }}（件）</view>
					<view class="money">￥{{ data.old_money | numDot }}</view>
				</view>
			</view>
		</view>
		<view v-if="type == 1" class="data-detail">
			<view class="rankItem header">
				<view>姓名</view>
				<view>手机号</view>
				<view>精装版</view>
				<view>简约版</view>
				<view>老人版 </view>
			</view>
			<view class="rankItem" v-for="(item, index) in rank" :key="index">
				<view>{{ item.username }}</view>
				<!-- <view>{{ item.mobile.replace(/(?<=\d{3})\d{4}(?=\d{4})/, '...') }}</view> -->
				<view>{{ item.mobile }}</view>
				<view>{{ item.hard }}</view>
				<view>{{ item.simple }}</view>
				<view>{{ item.old }} </view>
			</view>
			<view v-if="!rank.length" class="rankItem">暂无排名</view>
		</view>
		<uni-calendar ref="calendar" :insert="false" :lunar="true" @confirm="confirm" />
		<w-picker ref="Selector" mode="selector" themeColor="#F76454" :selectList="activeList"  @confirm="confirmActice" />
	</view>
</template>

<script>
	import { _API_OrderSum, _API_OrderRank } from '@/apis/fortune.js'
	import WPicker from '@/components/w-picker/w-picker.vue'
	import chartProgress from '@/components/charts/chart-progress.vue'
	import uniCalendar from '@/components/uni-calendar/uni-calendar.vue'
	export default {
		components: { WPicker, uniCalendar, chartProgress },
		data() {
			return {
				type: 0,
				date: {
					0: '',
					1: ''
				},
				data: null,
				rank: [],
				choosedActie: -1,
				activeList: [
					{ label: '五月重启 强力回归', value: '1', start: '2020-05-11', end: '2020-05-15' }
				]
			};
		},
		computed: {
			chartData() {
				return {
					hard: {
						series: [
							{
								name: '精装版',
								data: this.data.hard / this.data.hard_all,
								color: '#8EDC80'
							}
						]
					},
					simple: {
						series: [
							{
								name: '简约版',
								data: this.data.simple / this.data.simple_all,
								color: '#7B78B7'
							}
						]
					},
					old: {
						series: [
							{
								name: '老人版',
								data: this.data.old / this.data.old_all,
								color: '#FF9F31'
							}
						]
					}
				}
			}
		},
		watch: {
			date: {
				deep: true,
				handler(n) {
					if (n[0] && n[1]) {
						this.request()
					}
				},
			}
		},
		mounted() {
			if (this.$store.state.userinfo.level !== '代理公司') {
				uni.navigateBack()
				setTimeout(() => uni.$emit('noopening'))
				return
			}
			this.request()
		},
		onPullDownRefresh() {
			this.request()
			this.type = 0
		},
		methods: {
			request() {
				uni.loading()
				if (this.date[0] && this.date[1]) {
					_API_OrderSum({ start: this.date[0], end: this.date[1] }).then(({ data }) => {
						this.data = data
						uni.loading()
						_API_OrderRank({ start: this.date[0], end: this.date[1] }).then(({ data: { list } }) => {
							list.sort((a, b) => b.all - a.all)
							this.rank = list
						})
					})
				} else {
					_API_OrderSum().then(({ data }) => {
						this.data = data
						uni.loading()
						_API_OrderRank().then(({ data: { list } }) => {
							list.sort((a, b) => b.all - a.all)
							this.rank = list
						})
					})
				}
			},
			chooseTime(type) {
				this.type = type
				this.$refs.calendar.open()
			},
			confirm({ fulldate }) {
				if (this.type == 0) {
					this.date[0] = fulldate
				} else if (this.type == 1) {
					this.date[1] = fulldate
				}
			},
			choosePicker() { // 点击选择商品
				this.$refs.Selector.show()
			},
			confirmActice({ defaultVal: [index] }) {
				this.choosedActie = index
				this.date[0] = this.activeList[index].start
				this.date[1] = this.activeList[index].end
			}
		}
	}
</script>

<style lang="scss" scoped>
	.order-sum {
		height: 100vh;
		@include flex(column);
		background: $app-base-bg;
		.data-bar {
			@include flex();
			width: 100%;
			height: 80rpx;
			background: #FFFFFF;
			> view {
				flex: 1;
				height: 100%;
				@include flex();
			}
		}
		.data-area {
			width: 100%;
			height: 320rpx;
			padding: 30rpx;
			color: #FFFFFF;
			font-size: 28rpx;
			position: relative;
			@include flex(column);
			box-sizing: border-box;
			justify-content: space-between;
			background:linear-gradient(90deg,rgba(251,117,58,1) 0%,rgba(251,171,56,1) 100%);
			.activity {
				position: absolute;
				top: 28rpx;
				right: -20rpx;
				min-width: 217.5rpx;
				height: 57rpx;
				padding: 0 24rpx;
				@include flex();
				color: #EEEBEB;
				font-size: 28rpx;
				background: #FF7701;
				border-radius: 57rpx;
			}
			.total {
				width: 100%;
				margin-left: 87rpx;
				@include flex(column);
				align-items: flex-start;
				.num {
					font-size: 48rpx;
					margin-top: 12rpx;
				}
			}
			.pay-nopay {
				height: 100rpx;
				width: 100%;
				@include flex()
				.line {
					width: 1rpx;
					height: 100%;
					background: #FFFFFF;
				}
				.left, .right {
					@include flex(column);
					align-items: flex-start;
					margin-left: 60rpx;
					justify-content: space-between;
					height: 100%;
					flex: 1;
					.num {
						font-size: 30rpx;
						font-weight: bold;
					}
				}
			}
		}
		.type-bar {
			width: 100%;
			height: 80rpx;
			@include flex()
			background: #FFFFFF;
			> view {
				flex: 1;
				height: 100%;
				@include flex();
				position: relative;
				&.active::after {
					content: "";
					bottom: 0;
					left: 50%;
					height: 4rpx;
					width: 190rpx;
					position: absolute;
					border-radius: 2rpx;
					transform: translateX(-50%);
					background: $app-base-color;
				}
			}
		}
		.data-detail {
			flex: 1;
			width: 100%;
			margin-top: 10rpx;
			overflow-y: auto;
			.chart {
				height: 360rpx;
				background: #FFFFFF;
				position: relative;
				image {
					width: 200rpx;
					height: 34rpx;
					position: absolute;
					z-index: 1;
					&.l1 {
						top: 56rpx;
						right: 370rpx;
					}
					&.l2 {
						width: 138rpx;
						top: 88rpx;
						left: 450rpx;
					}
					&.l3 {
						width: 138rpx;
						top: 180rpx;
						left: 450rpx;
					}
				}
				.l-d {
					font-size: 24rpx;
					position: absolute;
					@include flex(column);
					&.l1 {
						top: 30rpx;
						right: 579rpx;
					}
					&.l2 {
						top: 60rpx;
						left: 600rpx;
					}
					&.l3 {
						top: 155rpx;
						left: 600rpx;
					}
				}
				.center {
					@include flex();
					top: 31rpx;
					left: 50%;
					width: 240rpx;
					height: 240rpx;
					position: absolute;
					background: transparent;
					transform: translate(-50%);
					&.c2 {
						top: 51rpx;
						width: 200rpx;
						height: 200rpx;
					}
					&.c3 {
						top: 71rpx;
						width: 160rpx;
						height: 160rpx;
					}
				}
				.bottom-bar {
					height: 80rpx;
					width: 450rpx;
					position: absolute;
					@include flex();
					justify-content: space-between;
					left: 50%;
					bottom: 0;
					transform: translateX(-50%);
					view::before {
						content: "";
						display: inline-block;
						width: 20rpx;
						height: 20rpx;
						border-radius: 50%;
						background: #8EDC80;
						margin-right: 14rpx;
					}
					view {
						font-size: 30rpx;
						&.c::before {
							background: #7B78B7;
						}
						&.r::before {
							background: #FF9F31;
						}
					}
					
				}
			}
			.type-detal {
				margin-top: 10rpx;
				.detail-item {
					@include flex();
					height: 90rpx;
					background: #FFFFFF;
					margin-bottom: 1rpx;
					> view {
						height: 100%;
						flex: 1;
						@include flex();
					}
				}
			}
			.rankItem {
				@include flex();
				height: 80rpx;
				background: #FFFFFF;
				margin-bottom: 1rpx;
				font-size: 24rpx;
				color: #666666;
				&.header {
					font-size: 28rpx;
					color: #333333;
				}
				> view {
					height: 100%;
					flex: 1;
					@include flex();
				}
			}
		}
	}
</style>
