<template>
	<view class="assemble">
		<view style="height: 20rpx;"></view>
		<!--    市场人员展示-->
		<view class="div-style">
			<view style="height: 38vh;">
				<view style="display: flex;align-items: center;padding: 20rpx 0 0 20rpx;">
					<view>
						<image :src="$util.img('/uniapp_src/static/images/index/danlan.png')" class="drop-image">
						</image>
					</view>
					<view class="title">本月业绩</view>
				</view>
				<view class="coach-message">
					<view class="left1">
						<view style="padding: 20rpx 0;">
							<view style="display: flex;align-items: center;">
								<view style="padding: 12rpx;">
									<image :src="$util.img('/uniapp_src/static/images/index/huang.png')"
										class="drop-image-x"></image>
								</view>
								<view class="title-x">资源总数</view>
							</view>
							<view class="title-x1">{{infoData.month.new_total}}人</view>
						</view>

						<view>
							<view style="display: flex;align-items: center;">
								<view style="padding: 12rpx;">
									<image :src="$util.img('/uniapp_src/static/images/index/lvs.png')"
										class="drop-image-x"></image>
								</view>
								<view class="title-x">已分配</view>
							</view>
							<view class="title-x1">{{infoData.month.new_total}}人</view>
						</view>

						<view>
							<view style="display: flex;align-items: center;">
								<view style="padding: 12rpx;">
									<image :src="$util.img('/uniapp_src/static/images/index/shenlan.png')"
										class="drop-image-x"></image>
								</view>
								<view class="title-x">昨日新增</view>
							</view>
							<view class="title-x1">{{infoData.month.yesterday_new}}人</view>
						</view>

						<view>
							<view style="display: flex;align-items: center;">
								<view style="padding: 12rpx;">
									<image :src="$util.img('/uniapp_src/static/images/index/lan.png')"
										class="drop-image-x"></image>
								</view>
								<view class="title-x">今日新增</view>
							</view>
							<view class="title-x1">{{infoData.month.today_new}}人</view>
						</view>
					</view>
					<!--					统计图-->
					<view class="right1">
						<view style="text-align: center;">{{infoData.date_range}}</view>
						<view class="statistics_box">

							<view class="item">
								<view class="box">
									<view class="progress-bar"
										:style="{ height: `${infoData.month.yesterday_new_rate}%`, background: '#f59a23' }">
									</view>
									<view class="ratio"
										:style="{ color: infoData.month.yesterday_new_rate <= 0 ? '#333333' : '#000' }">
										{{ infoData.month.yesterday_new_rate }}%
									</view>
								</view>
								<view class="title">昨日</view>
							</view>

							<view class="item">
								<view class="box">
									<view class="progress-bar"
										:style="{ height: `${infoData.month.assigned_sales_rate}%`, background: '#039f64' }">
									</view>
									<view class="ratio"
										:style="{ color: infoData.month.assigned_sales_rate <= 0 ? '#333333' : '#000' }">
										{{ infoData.month.assigned_sales_rate }}%
									</view>
								</view>
								<view class="title">分配</view>
							</view>

							<view class="item">
								<view class="box">
									<view class="progress-bar"
										:style="{ height: `${infoData.month.today_new_rate}%`, background: '#4066f2' }">
									</view>
									<view class="ratio"
										:style="{ color: infoData.month.today_new_rate <= 0 ? '#333333' : '#000' }">
										{{ infoData.month.today_new_rate }}%
									</view>
								</view>
								<view class="title">今日</view>
							</view>

						</view>
					</view>

				</view>
			</view>

			<view style="width: 90%;background: #EFF3F8;height: 4rpx;margin: auto;"></view>

			<view style="height: 38vh;">
				<view style="display: flex;align-items: center;padding: 20rpx 0 0 20rpx;">
					<view>
						<image :src="$util.img('/uniapp_src/static/images/index/danlv.png')" class="drop-image"></image>
					</view>
					<view class="title">个人业绩</view>
				</view>

				<view class="coach-message">
					<view class="this_month">
						<view style="padding: 20rpx 0;display: flex;justify-content: space-between;">
							<view style="width: 48%;">
								<view style="display: flex;align-items: center;">
									<view style="padding: 12rpx;">
										<image :src="$util.img('/uniapp_src/static/images/index/danlv.png')"
											class="drop-image-x"></image>
									</view>
									<view class="title-x">今日新增资源</view>
								</view>
								<view class="title-x1">{{infoData.last_month.xzzy}}人</view>
							</view>

							<view style="width: 48%;">
								<view style="display: flex;align-items: center;">
									<view style="padding: 12rpx;">
										<image :src="$util.img('/uniapp_src/static/images/index/danlv.png')"
											class="drop-image-x"></image>
									</view>
									<view class="title-x">今日业绩收入</view>
								</view>
								<view class="title-x1">{{infoData.last_month.yjsr}}人</view>
							</view>
						</view>

						<view style="padding: 20rpx 0;display: flex;justify-content: space-between;">
							<view style="width: 48%;">
								<view style="display: flex;align-items: center;">
									<view style="padding: 12rpx;">
										<image :src="$util.img('/uniapp_src/static/images/index/danlv.png')"
											class="drop-image-x"></image>
									</view>
									<view class="title-x">历史关单数量</view>
								</view>
								<view class="title-x1">{{infoData.last_month.gdsl}}人</view>
							</view>

							<view style="width: 48%;">
								<view style="display: flex;align-items: center;">
									<view style="padding: 12rpx;">
										<image :src="$util.img('/uniapp_src/static/images/index/danlv.png')"
											class="drop-image-x"></image>
									</view>
									<view class="title-x">资源未分配数量</view>
								</view>
								<view class="title-x1">{{infoData.last_month.wfpsl}}人</view>
							</view>


						</view>
						<view style="padding: 20rpx 0;display: flex;justify-content: space-between;">
							<view style="width: 48%;">
								<view style="display: flex;align-items: center;">
									<view style="padding: 12rpx;">
										<image :src="$util.img('/uniapp_src/static/images/index/danlv.png')"
											class="drop-image-x"></image>
									</view>
									<view class="title-x">本月提成</view>
								</view>
								<view class="title-x1">{{infoData.last_month.wfpsl}}人</view>
							</view>

							<view style="width: 48%;">
								<view style="display: flex;align-items: center;">
									<view style="padding: 12rpx;">
										<image :src="$util.img('/uniapp_src/static/images/index/danlv.png')"
											class="drop-image-x"></image>
									</view>
									<view class="title-x">今日提成</view>
								</view>
								<view class="title-x1">{{infoData.last_month.wfpsl}}人</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<AQTabber />
	</view>
</template>

<script>
	import apiRoute from '@/api/apiRoute.js';

	import AQTabber from "@/components/AQ/AQTabber.vue"

	export default {
		components: {
			AQTabber,
		},
		data() {
			return {
				infoData: {}, //详情

				userInfo: {}, //当前登录的用户信息
			}
		},
		onShow() {
			this.init()
		},
		methods: {
			async init() {
				await this.getUserInfo()
				await this.getXsIndex()
			},

			//获取用户信息
			async getUserInfo() {
				let res = await apiRoute.getPersonnelInfo({})
				if (res.code != 1) {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
					return
				}

				this.userInfo = res.data
			},

			//获取销售首页详情
			async getXsIndex() {
				let role_key_arr = this.userInfo.role_key_arr.join(',')
				let params = {
					personnel_id: this.userInfo.id, //员工表id
					role_key_arr: role_key_arr, // 角色key 转换数组为字符串，若为空则赋予空字符串
				}
				let res = await apiRoute.xs_statisticsMarketHome(params)
				if (res.code != 1) {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
					return
				}
				this.infoData = res.data
				console.log('统计', this.infoData)
			},
		}
	}
</script>

<style lang="less" scoped>
	//自定义导航栏
	.navbar_section {
		border: 1px solid #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #fff;

		.title {
			padding: 40rpx 0rpx;

			/* 小程序端样式 */
			// #ifdef MP-WEIXIN
			padding: 80rpx 0rpx;
			// #endif

			font-size: 30rpx;
			color: #858585;
		}
	}

	.assemble {
		width: 100%;
		height: 100vh;
		background: #292929;
	}

	.div-style {
		width: 92%;
		height: 85vh;
		background: #fff;
		border-radius: 16rpx;
		margin: auto;
	}

	.coach-message {
		width: 92%;
		margin: 10rpx auto;
		display: flex;
		align-items: center;
		padding-top: 20rpx;
	}

	.drop-image {
		width: 50rpx;
		height: 50rpx;
	}

	.title {
		font-size: 30rpx;
		color: #7F7F7F;
		padding-left: 20rpx;
	}

	.left1 {
		width: 48%;
		height: 95%;
		margin: auto;
	}

	.right1 {
		width: 48%;
		height: 95%;
		margin: auto;

		.statistics_box {
			margin: auto;
			margin-top: 10rpx;
			display: flex;
			justify-content: space-between;

			.item {
				width: 90rpx;
				display: flex;
				flex-direction: column;
				align-items: center;

				.box {
					width: 100%;
					height: 328rpx;
					border: 1px solid #ddd;
					border-radius: 6rpx;
					background: #f5f5f5;
					position: relative;

					.progress-bar {
						width: 100%;
						height: 0;
						transition: height 0.3s ease;
						position: absolute;
						bottom: 0;
					}

					.ratio {
						width: 100%;
						position: absolute;
						bottom: -0rpx;
						font-size: 26rpx;
						text-align: center;
					}
				}

				.title {
					margin-top: 5rpx;
					padding: 0;
					font-size: 26rpx;
					color: #999999;
					;
					text-align: center;
				}
			}
		}
	}

	.this_month {
		width: 100%;
		height: 95%;
		margin: auto;
	}

	.drop-image-x {
		width: 20rpx;
		height: 20rpx;
	}

	.title-x {
		font-size: 28rpx;
		color: #7F7F7F;
		padding-left: 20rpx;
	}

	.title-x1 {
		font-size: 28rpx;
		color: #333333;
		padding-left: 60rpx;
	}
</style>