<template>
	<view style="width: 100vw;height: 100vh;margin-top: 0;">
		<view class="bg">
			<view class="bgbox">
				<view class="title flex align-center">
					<image src="../../static/images/shuju01.png" style="width: 30upx;height: 30upx;margin-right: 10rpx;"></image>
					服务数据
				</view>
				<view class="box" style="color: #333;">
					<view class="text-center">
						<view class="tit">{{ordersScore}}</view>
						<view class="texast">综合评分</view>
					</view>
					<view class="text-center">
						<view class="tit">{{succeedRate}}%</view>
						<view class="texast">成交量</view>
					</view>
					<view class="text-center">
						<view class="tit">{{sumCount}}</view>
						<view class="texast">服务次数</view>
					</view>
					<view class="text-center">
						<view class="tit">{{creditScore}}</view>
						<view class="texast">信用分</view>
					</view>
				</view>
			</view>
			<view class="bgbox">
				<view class="flex align-center justify-between">
					<view class="title flex align-center">
						<image src="../../static/images/shuju02.png" style="width: 30upx;height: 30upx;margin-right: 10rpx;"></image>
						收益数据
					</view>
					<view class="flex align-center padding-left">
						<view class="margin-left-xs flex align-center" style="color: #333;">
							<view class="select-time-style" @click="bindData(5)">{{startTimes?startTimes:'开始时间'}}</view>
							至
							<view class="select-time-style" @click="bindData(6)">{{endTimes?endTimes:'结束时间'}}</view>
						</view>
					</view>
				</view>
				<view class="box2">
					<view class="text-center" style="width: 32%; padding: 30rpx 40rpx 10rpx;border-radius: 10rpx;">
						<view class="tit">{{sumMoney5 ? sumMoney5 : 0}}</view>
						<view class="texast">总收益</view>
					</view>
					<view class="text-center" style="width: 32%; padding: 30rpx 40rpx 10rpx;border-radius: 10rpx;">
						<view class="tit">{{sumCount5}}</view>
						<view class="texast">总销量</view>
					</view>
					<view class="text-center" style="width: 32%; padding: 30rpx 40rpx 10rpx;border-radius: 10rpx;">
						<view class="tit">{{sumRefund5}}</view>
						<view class="texast">退款金额</view>
					</view>
				</view>
			</view>
			<view class="bgbox">
				<view class="flex align-center justify-between">
					<view class="title flex align-center">
						<image src="../../static/images/shuju03.png" style="width: 30upx;height: 30upx;margin-right: 10rpx;"></image>
						订单数据
					</view>
					<view class="flex align-center padding-left">
						<view class="margin-left-xs flex align-center" style="color: #333;">
							<view class="select-time-style" @click="bindData(1)">{{startTime?startTime:'开始时间'}}</view>
							至
							<view class="select-time-style" @click="bindData(2)">{{endTime?endTime:'结束时间'}}</view>
						</view>
					</view>
				</view>
				<view class="box2">
					<view class="text-center" style="width: 32%; padding: 30rpx 40rpx 10rpx;border-radius: 10rpx;">
						<view class="tit">{{orderMoney}}</view>
						<view class="texast">订单收入</view>
					</view>
					<view class="text-center" style="width: 32%; padding: 30rpx 40rpx 10rpx;border-radius: 10rpx;">
						<view class="tit">{{sumCount1}}</view>
						<view class="texast">总订单数</view>
					</view>
					<view class="text-center" style="width: 32%; padding: 30rpx 40rpx 10rpx;border-radius: 10rpx;">
						<view class="tit">{{sumRefund}}</view>
						<view class="texast">退款金额</view>
					</view>
				</view>
			</view>
			<view class="bgbox">
				<view class="flex align-center justify-between">
					<view class="title flex align-center">
						<image src="../../static/images/shuju04.png" style="width: 30upx;height: 30upx;margin-right: 10rpx;"></image>
						用户评价
					</view>
					<view class="flex align-center padding-left">
						<view class="margin-left-xs flex align-center" style="color: #333;">
							<view class="select-time-style" @click="bindData(3)">{{startTime1?startTime1:'开始时间'}}</view>
							至
							<view class="select-time-style" @click="bindData(4)">{{endTime1?endTime1:'结束时间'}}</view>
						</view>
					</view>
				</view>
				<view class="box2">
					<view class="text-center good-evn">
						<view class="tit">{{goodsRate}}%</view>
						<view class="texast">用户好评率</view>
					</view>
					<view class="text-center low-evn">
						<view class="tit">{{loseRate}}%</view>
						<view class="texast">用户差评率</view>
					</view>
				</view>
			</view>
			
		</view>

		<!-- 开始时间 -->
		<u-picker v-model="startshow" mode="time" :params="paramsStart" @confirm="startData"></u-picker>
		<!-- 结束时间 -->
		<u-picker v-model="endshow" mode="time" :params="paramsEnd" @confirm="endData"></u-picker>

		<!-- 开始时间 -->
		<u-picker v-model="startshows" mode="time" :params="paramsStarts" @confirm="startDatas"></u-picker>
		<!-- 结束时间 -->
		<u-picker v-model="endshows" mode="time" :params="paramsEnds" @confirm="endDatas"></u-picker>

		<!-- 开始时间 -->
		<u-picker v-model="startshow1" mode="time" :params="paramsStart1" @confirm="startData1"></u-picker>
		<!-- 结束时间 -->
		<u-picker v-model="endshow1" mode="time" :params="paramsEnd1" @confirm="endData1"></u-picker>
	</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				succeedRate: 0,
				sumMoney5: 0,
				sumCount5: 0,
				sumRefund5: 0,
				sumMoney: 0,
				ordersScore: 0,
				creditScore: 0,
				orderMoney: 0,
				sumCount: 0,
				sumCount1: 0,
				sumRefund: 0,
				goodsRate: 0,
				loseRate: 0,
				startshow: false,
				endshow: false,
				paramsStart: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				paramsEnd: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				startTime: '',
				endTime: '',

				startTime1: '',
				endTime1: '',
				startshow1: false,
				endshow1: false,
				paramsStart1: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				paramsEnd1: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},

				startTimes: '',
				endTimes: '',
				startshows: false,
				endshows: false,
				paramsStarts: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				paramsEnds: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
			}
		},
		onLoad() {
			this.getArtificer();
			this.getCount();
			this.getCount1();
			this.getCount5();
			this.getCount3();
		},
		onShow() {

		},
		methods: {
			//获取理疗师的信息
			getArtificer() {
				this.$Request.getT("/app/artificer/selectArtificer").then(res => {
					if (res.code == 0) {
						this.ordersScore = res.data.ordersScore ? res.data.ordersScore : 0;
						this.creditScore = res.data.creditScore ? res.data.creditScore : 0;
						// uni.setStorageSync("status", res.data.status)
						uni.setStorageSync('artificerId', res.data?.artificerId)
					}
				});
			},
			getCount() {
				this.$Request.get("/app/artificer/selectArtificerIndex").then(res => {
					if (res.code == 0) {
						this.sumMoney = res.data.sumMoney;
						this.succeedRate = res.data.succeedRate ? parseFloat(parseFloat(res.data.succeedRate) *
							100).toFixed(2) : 0;
						this.sumCount = res.data.sumCount;
					}
				})
			},
			getCount3() {
				this.$Request.get("/app/artificer/selectArtificerIndex?startTime=" + this.startTime1 + '&endTime=' + this
					.endTime1).then(res => {
					if (res.code == 0) {
						this.goodsRate = res.data.goodsRate ? parseFloat(parseFloat(res.data.goodsRate) * 100)
							.toFixed(2) : 0;
						this.loseRate = res.data.loseRate ? parseFloat(parseFloat(res.data.loseRate) * 100)
							.toFixed(2) : 0;
					}
				})
			},
			getCount1() {
				this.$Request.get("/app/artificer/selectArtificerIndex?startTime=" + this.startTime + '&endTime=' + this
					.endTime).then(res => {
					if (res.code == 0) {
						this.sumRefund = res.data.sumRefund;
						this.sumCount1 = res.data.countOrder;
						this.orderMoney = res.data.orderMoney;
					}
				})
			},
			getCount5() {
				this.$Request.get("/app/artificer/selectArtificerIndex?startTime=" + this.startTimes + '&endTime=' + this
					.endTimes).then(res => {
					if (res.code == 0) {
						this.sumMoney5 = res.data.sumMoney;
						this.sumCount5 = res.data.countOrderNum;
						this.sumRefund5 = res.data.sumRefund;
					}
				})
			},
			//时间弹框开关
			bindData(index) {
				// console.log(index, 1111)
				if (index == 1) {
					this.startshow = true
				} else if (index == 2) {
					this.endshow = true
				} else if (index == 3) {
					this.startshow1 = true
				} else if (index == 4) {
					this.endshow1 = true
				} else if (index == 5) {
					this.startshows = true
				} else if (index == 6) {
					this.endshows = true
				}
			},
			//开始时间
			startData(e) {
				// console.log(e)
				this.startTime = e.year + '-' + e.month + '-' + e.day
			},
			// 结束时间
			endData(e) {
				if (this.startTime) {
					this.endTime = e.year + '-' + e.month + '-' + e.day
					this.getCount1();
				} else {
					this.$queue.showToast("请先选择开始时间");
				}
			},
			//开始时间
			startData1(e) {

				this.startTime1 = e.year + '-' + e.month + '-' + e.day
			},
			// 结束时间
			endData1(e) {
				if (this.startTime1) {
					this.endTime1 = e.year + '-' + e.month + '-' + e.day
					this.getCount3();
				} else {
					this.$queue.showToast("请先选择开始时间");
				}
			},

			//开始时间
			startDatas(e) {
				this.startTimes = e.year + '-' + e.month + '-' + e.day
			},
			// 结束时间
			endDatas(e) {
				if (this.startTimes) {
					this.endTimes = e.year + '-' + e.month + '-' + e.day
					this.getCount5();
				} else {
					this.$queue.showToast("请先选择开始时间");
				}
			},
		}
	}
</script>

<style>
	page {
		background: #F5F5F5;
	}

	.bg {
		padding: 30rpx;
	}
	.bgbox{
		background-color: #ffffff;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
		padding: 30rpx;
	}
	.select-time-style {
		background: linear-gradient(to right, #223845, #00a85b);
		color: #ffffff;
		width: 74px;
		height: 24px;
		line-height: 24px;
		text-align: center;
		border-radius: 20px;
		margin: 0 3px;
		font-size: 24rpx;
	}

	.good-evn {
		/* background-color:"#00a85b"; */
		width: 49%;
		padding: 30rpx 40rpx;
		border-radius: 10rpx;
	}
	.low-evn {
		width: 49%;
		padding: 30rpx 40rpx;
		border-radius: 10rpx;
	}
	.title {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333;
	}
	.box {
		display: flex;
		justify-content: space-between;
		border-radius: 16rpx;
		padding: 30rpx 0 0 0;
	}
	.box2 {
		display: flex;
		justify-content: space-between;
		flex-grow: 1;
		border-radius: 16rpx;
	}

	.tit {
		font-size: 40rpx;
		font-weight: bold;
		color: #333333;
	}
	.texast{
		font-size: 26rpx;
		color: #999;
	}
	.box1 {
		display: flex;
		justify-content: space-between;
		background: #F7F7F7;
		border-radius: 16rpx;
		padding: 35rpx 65rpx;
		margin-top: 35rpx;
	}
</style>