<template>
	<view style="padding-bottom: 30rpx;">
		<view class="order-index" ref="container">
			<view class="header acea-row">
				<navigator class="item" :url="`/pages/admin/orderList/index?types=1&merId=${mer_id}`"
					hover-class="none">
					<view class="num">{{ census.unpaid }}</view>
					<view>待付款</view>
				</navigator>
				<navigator class="item" :url="`/pages/admin/orderList/index?types=2&merId=${mer_id}`"
					hover-class="none">
					<view class="num">{{ census.unshipped }}</view>
					<view>待发货</view>
				</navigator>
				<navigator class="item" :url="`/pages/admin/orderList/index?types=3&merId=${mer_id}`"
					hover-class="none">
					<view class="num">{{ census.untake }}</view>
					<view>待收货</view>
				</navigator>
				<navigator class="item" :url="`/pages/admin/orderList/index?types=4&merId=${mer_id}`"
					hover-class="none">
					<view class="num">{{ census.unevaluate }}</view>
					<view>待评价</view>
				</navigator>
				<navigator class="item" :url="`/pages/admin/orderList/index?types=6&merId=${mer_id}`"
					hover-class="none">
					<view class="num">{{ census.refund }}</view>
					<view>退款</view>
				</navigator>
			</view>
			<view class="wrapper">
				<view class="title">
					<image src="@/static/images/sjtj.png" mode="widthFix" style="width:40rpx;translate: 0 10rpx;">
					</image>数据统计
				</view>
				<view class="list acea-row" v-if="orderData">
					<navigator class="item" :url="`/pages/admin/statistics/index?type=price&time=today&merId=${mer_id}`"
						hover-class="none">
						<view class="num">{{ orderData.today.payPrice }}</view>
						<view>今日成交额</view>
					</navigator>
					<navigator class="item"
						:url="`/pages/admin/statistics/index?type=price&time=yesterday&merId=${mer_id}`"
						hover-class="none">
						<view class="num">{{ orderData.yesterday.payPrice }}</view>
						<view>昨日成交额</view>
					</navigator>
					<navigator class="item" :url="`/pages/admin/statistics/index?type=price&time=month&merId=${mer_id}`"
						hover-class="none">
						<view class="num">{{ orderData.month.payPrice  }}</view>
						<view>本月成交额</view>
					</navigator>
					<navigator class="item" :url="`/pages/admin/statistics/index?type=order&time=today&merId=${mer_id}`"
						hover-class="none">
						<view class="num">{{ orderData.today.orderNum}}</view>
						<view>今日订单数</view>
					</navigator>
					<navigator class="item"
						:url="`/pages/admin/statistics/index?type=order&time=yesterday&merId=${mer_id}`"
						hover-class="none">
						<view class="num">{{ orderData.yesterday.orderNum }}</view>
						<view>昨日订单数</view>
					</navigator>
					<navigator class="item" :url="`/pages/admin/statistics/index?type=order&time=month&merId=${mer_id}`"
						hover-class="none">
						<view class="num">{{ orderData.month.orderNum}}</view>
						<view>本月订单数</view>
					</navigator>
				</view>
			</view>
			<view class="public-wrapper">
				<view class="title">
					<image src="@/static/images/xxsj.png" mode="widthFix" style="width:40rpx;translate: 0 10rpx;">
					</image>详细数据
				</view>
				<view class="nav acea-row row-between-wrapper">
					<view class="data">日期</view>
					<view class="browse">订单数</view>
					<view class="turnover">成交额</view>
					<view class="turnover">结算金额</view>
				</view>
				<view class="conter">
					<view class="item acea-row row-between-wrapper" v-for="(item, index) in list" :key="index">
						<view class="data">{{ item.day }}</view>
						<view class="browse">{{ item.total }}</view>
						<view class="turnover" @click="navToOrder(item, 2)">{{ item.pay_price }}</view>
						<view class="turnover" @click="navToOrder(item, 4)">{{ toFixed2(item.settlement_price) }}</view>
					</view>
				</view>
			</view>
			<!-- <view class="public_footer" v-if="this.type_id == 12">

				<view class="footer_bon">
					<view class="footer_top public-wrapper ">
						<image src="@/static/images/ddjk.png" mode="widthFix" style="width:40rpx;"></image>订单监控
					</view>

					<view v-for="(item,index) in OrderList" :key="index">


						<view class="" v-for="(val, key) in item.orderProduct">
							<view class="bon_top" :key="key" @click="toDetail(item)">
								<view class="public_img">
									<image class="public_img" :src="val.cart_info.product.image" mode=""></image>
								</view>
								<view>
									<view class="text_top">
										<view class="text">
											{{ val.cart_info.product.store_name }}
										</view>
										<view class="monry">
											￥{{ val.total_price }}
										</view>
									</view>
									<view class="text_order">
										订单号: {{ item.order_sn }}
									</view>
								</view>
							</view>
							<view class="bon_bon" :key="key" @click="toDetail(item)">
								<view class="order">
									采购数量
									<view class="txt">
										{{ val.product_num }}
									</view>
								</view>
								<view class="order"
									style="border-left: 1px solid #999999;border-right: 1px solid #999999;">
									已售数量
									<view class="txt">
										{{ val.sales_volume }}
									</view>
								</view>
								<view class="order">
									库存数量
									<view class="txt">
										{{ val.product_num - val.sales_volume }}
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view> -->

		</view>

		<!-- <button v-if="this.type_id == 12" class="footer-bnt" @click="navigator()">查看更多 ></button> -->
		<!-- <view class="public-wrapper">
		  <navigator class="item" :url="`/pages/admin/order/monitor?merId=${mer_id}`"
		    hover-class="none">
		    <view class="num">订单监控</view>
		  </navigator>
      </view> -->
		<Loading :loaded="loaded" :loading="loading"></Loading>
	</view>
	</view>
</template>

<script>
	import {
		getStatisticsInfo,
		getStatisticsMonth,
		orderStatistics,
		orderPrice,
		purchaseOrder
	} from "@/api/admin";
	import Loading from '@/components/Loading/index.vue'
	export default {
		name: 'adminOrder',
		components: {
			Loading
		},
		data() {
			return {
				census: {},
				orderData: {
					today: {},
					yesterday: {},
					month: {}
				},
				list: [],
				OrderList: [], //订单数组
				where: {
					page: 1,
					limit: 10,
					status: 1,
					keyword: '',
					product_type: ''
				},
				loaded: false,
				loading: false,
				mer_id: '',
				type_id: '', //店铺类型
			}
		},
		onLoad(options) {
			this.type_id = options.type_id
			this.where.product_type = options.product_type ?? 0
			this.mer_id = options.mer_id
			options.product_type ? uni.setStorageSync("PRODUCT_TYPE", 98) : uni.removeStorageSync("PRODUCT_TYPE");
			this.getOrderStatistics(this.mer_id);
			this.getList(this.mer_id)
			this.purchaseOrderList(this.mer_id)
		},
		methods: {
			getIndex: function() {
				var that = this;
				getStatisticsInfo().then(
					res => {
						that.census = res.data;
					},
					err => {
						that.$util.Tips({
							title: err.msg
						})
					}
				);
			},
			getList: function(mer_id) {
				var that = this;
				if (that.loading || that.loaded) return;
				that.loading = true;
				orderPrice(that.where, mer_id).then(
					res => {
						that.loading = false;
						that.loaded = res.data.length < that.where.limit;
						that.list.push.apply(that.list, res.data);
						that.where.page = that.where.page + 1;
					},
					error => {
						that.$util.Tips({
							title: error.msg
						})
					},
					300
				);
			},
			getOrderStatistics: function(mer_id) {
				let that = this;
				const data = {
					product_type: this.where.product_type
				}
				orderStatistics(mer_id, data).then(
					res => {
						that.census = res.data.order;
						that.orderData = res.data.data;
					},
					err => {
						that.$util.Tips({
							title: err.msg
						})
					}
				);
			},
			toDetail(item) {
				uni.navigateTo({
					url: `/pages/admin/orderDetail/index?id=${item.order_id}&mer_id=${item.mer_id}`
				})
			},
			navigator() {
				uni.navigateTo({
					url: `/pages/admin/order/monitor?merId=${this.mer_id}`
				})
			},
			purchaseOrderList(mer_id) {
				this.where.limit = 2
				purchaseOrder(this.where, mer_id).then(res => {
					// console.log(res);
					this.OrderList = res.data
					// console.log(this.OrderList);
				})
			},
      // 保留两位小数
      toFixed2(num){
        let str = num;
        if(typeof num =='string'){
          str = +str;
          str = str.toFixed(2);
        }else str = str.toFixed(2);
        return str || '0.00';
      },
      navToOrder(item, type=2){
        uni.navigateTo({
          url: `/pages/admin/orderList/index?merId=${this.mer_id}&types=${type}&pay_time=${item.pay_time.split(' ')[0]}`
        })
      }
		},
		onReachBottom() {
			this.getList(this.mer_id)
		}
	}
</script>

<style lang="scss" scoped>
	.popupn {
		position: fixed;
		width: 100%;
		text-align: center;
		top: 0;
		left: 0;
		background: transparent;
		height: 90rpx;
		line-height: 90rpx;
		z-index: 100;

		.spin {
			display: block;
			transform: rotate(180deg);
			font-size: 36rpx;
		}

		.title {
			max-width: 560rpx;
			margin: 0 auto;
			position: relative;
			display: inline;
			padding: 10rpx 30rpx 10rpx 50rpx;
			background-color: rgba(0, 0, 0, 0.15);
			border-radius: 30rpx;
			color: #fff;
		}

		.supervisory_img {
			display: inline-block;
			width: 500rpx;
			height: 500rpx;
			background-color: red;
			overflow: hidden;
		}

		.iconfont {
			display: inline-block;
			position: relative;
			top: 4rpx;
			right: 0;
		}

		.mer_logo {
			width: 34rpx;
			height: 34rpx;
			position: relative;
			top: 6rpx;
			right: 10px;
		}

		.mer_name {
			display: inline-block;
			max-width: 650rpx;
		}

		.invoice-content {
			background-color: #ffffff;
		}
	}

	/*订单首页*/
	.order-index .header {
		background: url("@/static/images/beijin.png") no-repeat;
		background-size: 100% 100%;
		width: 100%;
		height: 280rpx;
		padding: 40rpx 3rpx 0 3rpx;
		box-sizing: border-box;
	}

	.order-index .header .item {
		flex: 1;
		-webkit-flex: 1;
		-o-flex: 1;
		-ms-flex: 1;
		text-align: center;
		font-size: 24rpx;
		color: #fff;
	}

	.order-index .header .item .num {
		font-size: 40rpx;
		margin-bottom: 7rpx;
		height: 60rpx;
	}

	.order-index .wrapper {
		width: 690rpx;
		background-color: #fff;
		border-radius: 10rpx;
		margin: -115rpx auto 0 auto;
		padding-top: 25rpx;
	}

	.order-index .wrapper .title {
		font-size: 30rpx;
		color: #282828;
		padding: 0 30rpx;
		margin-bottom: 40rpx;
	}

	.order-index .wrapper .title .iconfont {
		color: #2291f8;
		font-size: 40rpx;
		margin-right: 13rpx;
		vertical-align: middle;
	}

	.order-index .wrapper .list .item {
		width: 33.33%;
		text-align: center;
		font-size: 24rpx;
		color: #999;
		margin-bottom: 45rpx;
	}

	.order-index .wrapper .list .item .num {
		font-size: 40rpx;
		color: #333;
	}

	.public-wrapper .title {
		font-size: 30rpx;
		color: #282828;
		padding: 0 30rpx;
		margin-bottom: 20rpx;
	}

	.public-wrapper .title .iconfont {
		color: #2291f8;
		font-size: 40rpx;
		margin-right: 13rpx;
		vertical-align: middle;
	}

	.public-wrapper {
		margin: 18rpx auto 0 auto;
		width: 690rpx;
		background-color: #fff;
		border-radius: 10rpx;
		padding-top: 25rpx;

		.item {
			.num {
				display: flex;
				justify-content: flex-start;
				align-items: center;
			}
		}
	}

	.public-wrapper .nav {
		padding: 0 30rpx;
		height: 70rpx;
		line-height: 70rpx;
		font-size: 24rpx;
		color: #999;
	}

	.public-wrapper .data {
		width: 130rpx;
		text-align: left;
	}

	.public-wrapper .browse {
		width: 110rpx;
		text-align: right;
	}

	.public-wrapper .turnover {
		width: 180rpx;
		text-align: right;
	}

	.public-wrapper .conter {
		padding: 0 30rpx;
	}

	.public-wrapper .conter .item {
		border-bottom: 1px solid #f7f7f7;
		height: 70rpx;
		font-size: 24rpx;

	}

	.public-wrapper .conter .item .turnover {
		color: #d84242;
	}

	.public_footer {
		width: 90vw;
		margin: auto;

		.footer_top {
			display: flex;
			align-items: center;
			margin: 16px 0 16px 25rpx;

			.jk_img {
				width: 18px;
				height: 18px;
				overflow: hidden;
				// border: 1px solid red;
				border-radius: 40px;

				image {
					width: 22px;
					height: 22px;
					margin-right: 5px;

				}
			}

		}

		.footer_bon {
			width: 100%;
			border-radius: 8px;
			background-color: #fff;
			padding-bottom: 10px;
			margin-bottom: 10px;

			.bon_top {
				display: flex;
				justify-content: flex-start;
				align-items: center;

				.public_img {
					width: 60px;
					height: 60px;
					margin: 12px;
				}

				.text_top {
					display: flex;
					justify-content: flex-start;
					align-items: center;
					margin: 3px 0 3px 3px;

					.text {
						width: 140px;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}

					.monry {
						margin-left: 10px;
						color: #F84221;
					}
				}

				.text_order {
					width: 200px;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					margin-left: 3px;
				}
			}

			.bon_bon {
				width: 90%;
				height: 66px;
				background: #F5F5F5;
				border-radius: 4px 4px 4px 4px;
				display: flex;
				justify-content: center;
				align-items: center;
				text-align: center;
				margin: auto;
				margin-bottom: 10px;
				margin-top: 5px;

				.order {
					width: 120px;

					.txt {
						margin-top: 5px;
					}
				}
			}
		}
	}

	.footer-bnt {
		width: 100px;
		height: 40px;
		border-radius: 15px;
		margin: auto;
		line-height: 40px;
		border: 1px solid #CCCCCC;
		background-color: #f5f5f5;
		color: #999999;
		font-size: 13px
	}
</style>