<template>
	<view>

		<view class="">
			<view class="bg"></view>

			<view class="bg-model">
				<view class="bg-model-pa">
					<image class="bg-model-img" src="../static/images/bg.png"></image>
				</view>
				<card :date="date" :obj="info" :textCollection="textCollection" />
			</view>

		</view>

		<view class="box-pack-between menber">
			<view class="menber-left menber-content">
				<view class="">
					今日新增会员
				</view>
				<view class="number">
					{{obj.today_count||0}}
				</view>
			</view>
			<view class="menber-right menber-content">
				<view class="">
					今日会员充值(元)
				</view>
				<view class="number">
					{{obj.today_total||0}}
				</view>
			</view>
		</view>

		<view class="haeder-content">

			<view @click="moreOrder" class="flex-y-center box-pack-between haeder-title haeder-title-color">

				<view class="flex-y-center">
					<view class="haeder flex-center haeder-color">
						<view class="haeder-bg">
						</view>
					</view>
					<view class="">
						商品订单
					</view>
				</view>

				<text class="iconfont icongengduo"></text>
			</view>

			<view class="">
				<view class="haeder-bottom">
					<view class="haeder-bottom-price">
						{{obj.to_be_paid_order||0}}
					</view>
					<view class="haeder-bottom-title">
						待支付
					</view>
				</view>

				<view class="haeder-bottom">
					<view class="haeder-bottom-price">
						{{obj.paid_order||0}}
					</view>
					<view class="haeder-bottom-title">
						已支付
					</view>
				</view>

				<view class="haeder-bottom">
					<view class="haeder-bottom-price">
						{{obj.dai_peisong_order||0}}
					</view>
					<view class="haeder-bottom-title">
						待配送
					</view>
				</view>

				<view class="haeder-bottom">
					<view class="haeder-bottom-price">
						{{obj.peisong_order||0}}
					</view>
					<view class="haeder-bottom-title">
						配送中
					</view>
				</view>

				<view class="haeder-bottom">
					<view class="haeder-bottom-price">
						{{obj.picked_order||0}}
					</view>
					<view class="haeder-bottom-title">
						待自提
					</view>
				</view>

				<view class="haeder-bottom">
					<view class="haeder-bottom-price">
						{{obj.refund_order||0}}
					</view>
					<view class="haeder-bottom-title">
						已退款
					</view>
				</view>
			</view>
		</view>

		<view class="payCode" @click="upCode">
			<image src="../static/images/payCode.png" mode="widthFix"></image>
		</view>

		<view class="shopSolt haeder-content">
			<view class="flex-y-center haeder-title shop-titleColor">
				<view class="haeder flex-center shop-color">
					<view class="haeder-bg">
					</view>
				</view>
				<view class="">
					商品销量排行
				</view>
			</view>
			<view class="solt-num">
				排名实时更新
			</view>

			<view class="main">
				<view class="row tab-h sticky">
					<view class="td" :class="type==2?'flex-grow-1':'td'">排名</view>
					<view class="td" :class="type==2?'flex-grow-1':'td'">名称</view>
					<view class="td" :class="type==2?'flex-grow-1':'td'">数量</view>
					<!-- <view class="td" v-if="type==1">类型</view> -->
				</view>
				<view class="row" v-for="(item,index) in obj.goods_list" :key="item.id">
					<view class="td" :class="type==2?'flex-grow-1':'td'">
						<image class="number" v-if="index==0" src="../static/images/number1.png"></image>
						<image class="number" v-else-if="index==1" src="../static/images/number2.png"></image>
						<image class="number" v-else-if="index==2" src="../static/images/number3.png"></image>
						<block v-else>
							{{index+1}}
						</block>
					</view>
					<view class="td" :class="type==2?'flex-grow-1':'td'">{{item.name}}</view>
					<view class="td" :class="type==2?'flex-grow-1':'td'">{{item.num}}</view>
				</view>
			</view>
		</view>
		<!-- <zx-footer-bar :active="0" :type="type" /> -->
	</view>
</template>

<script>
	// #ifdef MP-WEIXIN
	import saveImgToPhotosAlbum from "@/static/js/saveImgToPhotosAlbum.js";
	// #endif
	// import zxFooterBar from '../../components/zx-footer-bar/zx-footer-bar.vue'
	import card from '../components/card/card.vue'
	export default {
		components: {
			card,
		},
		data() {
			return {
				textCollection: {
					title: "营业额",
					type: 1, //'首页'
					wx: '微信支付',
					ali: '支付宝支付',
					money: '现金支付',
					menber: '会员支付',
				},
				info: {},
				obj: {},
				type: 2,
				list: [],
				URL: getApp().globalData.URL,
				date: "今日"
			}
		},

		onLoad() {
			this.http();
		},

		onPullDownRefresh() {
			uni.showNavigationBarLoading();
			this.http();
			setTimeout(() => {
				uni.hideNavigationBarLoading()
				uni.stopPullDownRefresh()
			}, 1000)
		},

		methods: {
			
			moreOrder(e){
				
				// url="`/saomaDiancan/orderList/orderList?store_id=${store_id}`"
				let store_id= uni.getStorageSync("store_id");
				uni.navigateTo({
					url:`/saomaDiancan/orderList/orderList?store_id=${store_id}`
				})
			},
			
			http(e) {
				this.request({
					url: 'Smdcshop/store_index',
					data: {
						admin_id: uni.getStorageSync("admin_id")
					}
				}).then(res => {
					if (res.code == 200) {
						let info = {
							total: res.data.jryye_price,
							wx: res.data.jr_wx,
							zfb: res.data.jr_zfb,
							cash: res.data.jrxz_order,
							menber: res.data.jr_hy,
						}
						this.info = info;
						this.obj = res.data;
					}
				}).catch((res) => {
					uni.showToast({
						title: res.message,
						icon: 'none'
					})
				});
			},

			upCode(e) {
				// #ifdef H5
				uni.showModal({
					title: '提示',
					content: '请长按二维码图片进行保存',
					showCancel: false,
					confirmText: '好的',
				});
				// #endif
				// #ifdef MP-WEIXIN 
				var url = this.URL + this.obj.skm_qrcode;
				console.log(url, "url")
				saveImgToPhotosAlbum.saveImgToPhotosAlbum(url).then((res) => {
					//成功的逻辑
					console.log(res, "保存成功")
					uni.showToast({
						title: '保存成功',
						icon: 'none',
						mask: true,
					})
				}).catch((err) => {
					console.log(err, "保存失败")
					if (err.errMsg === "saveImageToPhotosAlbum:fail:auth denied" ||
						err.errMsg === "saveImageToPhotosAlbum:fail auth deny" || err.errMsg ===
						"saveImageToPhotosAlbum:fail authorize no response") {
						// 这边微信做过调整，必须要在按钮中触发，因此需要在弹框回调中进行调用
						uni.showModal({
							title: '提示',
							content: '需要您设置授权保存相册',
							showCancel: false,
							success: modalSuccess => {
								uni.openSetting({
									success(settingdata) {
										console.log("settingdata", settingdata)
										if (settingdata.authSetting[
												'scope.writePhotosAlbum']) {
											uni.showModal({
												title: '提示',
												content: '获取权限成功,再次点击图片即可保存',
												showCancel: false,
											})
										} else {
											uni.showModal({
												title: '提示',
												content: '获取权限失败，将无法保存到相册哦~',
												showCancel: false,
											})
										}
									},
									fail(failData) {
										console.log("failData", failData)
									},
									complete(finishData) {
										console.log("finishData", finishData)
									}
								})

							}
						})
					}
					// 失败后的逻辑
				})
				// #endif			
			},


		},
	}
</script>

<style>
	page {
		background-color: #F4F5F7;
	}

	.bg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 313rpx;
		background: #3387ff;
	}

	.bg-model {
		position: relative;
		width: 100%;
	}

	.bg-model-pa {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
	}

	.bg-model-img {
		width: 690rpx;
		height: 361rpx;
		display: block;
		margin: 0 auto;
		border-radius: 8rpx;
		box-shadow: 0px 6rpx 12rpx 0px rgba(230, 233, 240, 0.50);
	}

	.menber {
		width: 690rpx;
		margin: 40rpx auto;

	}

	.menber-content {
		width: 330rpx;
		height: 160rpx;
		border-radius: 8rpx;
		box-shadow: 0px 6px 16rpx 0px rgba(0, 60, 32, 0.06);
		color: #FFFFFF;
		padding: 31rpx 40rpx;
		font-size: 28rpx;
	}

	.menber-left {
		background: linear-gradient(180deg, #6fa8f8, #328afe);
	}

	.menber-right {
		background: linear-gradient(180deg, #fbd652, #fda03c);
	}

	.menber-content .number {
		font-size: 36rpx;
	}

	.haeder-content {
		width: 690rpx;
		margin: 0 auto;
		background-color: #FFFFFF;
		padding-bottom: 40rpx;
		border-radius: 8rpx;
	}

	.haeder-title {
		height: 90rpx;
		font-size: 32rpx;
		font-family: PingFang SC, PingFang SC-Medium;
		font-weight: 500;
		text-align: center;
		color: #333333;
		border-radius: 8rpx 8rpx 0px 0px;
		padding: 0 24rpx;
	}

	.haeder-title-color {
		background: linear-gradient(90deg, rgba(114, 178, 255, 0.30), rgba(114, 178, 255, 0.00));
	}

	.haeder-color {
		background: linear-gradient(136deg, #6397fd 4%, #3377ff 100%);
	}

	.shop-titleColor {
		background: linear-gradient(90deg, rgba(254, 160, 51, 0.30), rgba(254, 160, 51, 0.00));
	}

	.shop-color {
		background: linear-gradient(138deg, #ffb660 5%, #fea033 97%);
	}

	.haeder {
		width: 36rpx;
		height: 36rpx;
		border-radius: 50%;
		margin-right: 10rpx;
	}

	.haeder-bg {
		width: 16rpx;
		height: 19rpx;
		background: linear-gradient(180deg, #ffffff, rgba(255, 255, 255, 0.60) 100%);
		border-radius: 4rpx;
	}

	.haeder-bottom {
		padding: 30rpx 0 0rpx 0;
		width: 25%;
		display: inline-block;
		text-align: center;
	}

	.haeder-bottom-price {
		font-size: 36rpx;
		font-family: PingFang SC, PingFang SC-Medium;
		font-weight: 500;
		text-align: center;
		color: #333333;
		margin-bottom: 12rpx;
	}

	.haeder-bottom-title {
		font-size: 24rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		text-align: center;
		color: #a2a2a2;
	}

	.payCode {
		width: 690rpx;
		margin: 29rpx auto;
		/* height: 216rpx; */
	}

	.payCode image {
		width: 100%;
		height: 100%;
	}

	.solt-num {
		font-size: 24rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		text-align: center;
		color: #999999;
		padding: 30rpx 0 24rpx 0;
	}

	.main {
		background-color: #fff;
		display: table;
		width: 100%;
		z-index: 3;
	}

	.main .row {
		display: flex;
		flex-flow: row nowrap;
		justify-content: flex-start;
		align-items: center;
		/* height: 80rpx; */
		padding: 20rpx 0;
		border-bottom: 2rpx solid #f5f5f5;

	}

	.main .row.tab-h {
		top: var(--window-top);
		background-color: #F9FBFF;

	}

	.main .row .td {
		text-align: center;
		font-size: 24rpx;
		color: #333;
	}

	.main .row .td:nth-child(1) {
		width: 10%;
	}

	.main .row .td:nth-child(2) {
		width: 40%;
	}

	.main .row .td:nth-child(3) {
		width: 30%;
	}

	.main .row .td:nth-child(4) {
		width: 20%;
	}

	.main .number {
		width: 36rpx;
		height: 43rpx;
	}
</style>
