<template>
	<view class="">
		<view class="box-pack-between flex-y-center bg-model-store">
			<view class="flex-y-center">
				<picker mode="selector" :range="storeList" @change="bindStore" :range-key="'title'">
					<view class="flex-y-center">
						<view class="text-1" style="max-width: 200rpx;">{{store_name}}</view>
						<text class="iconfont iconsanjiao"></text>
					</view>
				</picker>
			</view>
			<view class="flex-y-center" @click="getTime">
				{{date}} 
				<text class="iconfont iconriqi" style="margin-left:10rpx;"></text>
			</view>
		</view>

		<view class="mg-24" style="padding-top: 100rpx;">
			<view class="bg">
				<image src="../static/images/dataBg.png"></image>
			</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="obj1" :textCollection="textCollection" />
			</view>
		</view>

		<view class="mg-24">
			<view class="bg-model">
				<view class="bg-model-pa">
					<image class="bg-model-img" src="../static/images/bg1.png"></image>
				</view>
				<card :date="date" :obj="obj2" :textCollection="textCollection1" />
			</view>
		</view>

		<view class="mg-24">
			<view class="bg-model">
				<view class="bg-model-pa">
					<image class="bg-model-img" src="../static/images/bg2.png"></image>
				</view>
				<card :date="date" :obj="obj3" :textCollection="textCollection2" />
			</view>
		</view>

		<view class="mg-24">
			<view class="bg-model">
				<view class="bg-model-pa">
					<image class="bg-model-img" src="../static/images/bg3.png"></image>
				</view>
				<card :date="date" :obj="obj4" :textCollection="textCollection3" />
			</view>
		</view>

		<view class="mg-24">
			<view class="bg-model">
				<view class="bg-model-pa">
					<image class="bg-model-img" src="../static/images/bg4.png"></image>
				</view>
				<card :date="date" :obj="obj5" :textCollection="textCollection4" />
			</view>
		</view>

		<uni-popup ref="uniScroll" type="bottom">
			<view class="popup-content">
				<view class="box-pack-between ft32 flex-center popup-content-title">
					<text @click="close">关闭</text>
					<text style="color: #003A9B;" @click="confirm">确认</text>
				</view>

				<view class="flex">
					<scroll-view scroll-y class="popup-content-scroll">

						<view @click="bindCheck(index)" :class="index==check_index?'hg-act':''"
							class="popup-content-scroll-li flex-y-center box-pack-between"
							v-for="(item,index) of timeArr" :key='index'>
							<text>{{item.title}}</text>
							<view class="round flex-center" :class="index==check_index?'blue-br':''">
								<view class="solid" v-if="index==check_index"></view>
							</view>
						</view>

						<!-- <picker mode="selector" :range="storeList" @change="bindStore" :range-key="'title'">
							<text>{{store_name}}</text>
							<text class="iconfont iconsanjiao"></text>
						</picker> -->

						<view @click="bindCheck(5)" :class="5==check_index?'hg-act':''"
							class="popup-content-scroll-li  box-pack-between flex-y-center" 
							style="height: auto;padding: 20rpx 40rpx;">
							<text>自定义时间</text>
							
							<view class="">
								<view class="flex-y-center" style="margin-bottom: 20rpx;">
									<picker mode="date" @change="bindStart">
										<view class="flex-y-center ">
											<text>{{start_time}}</text>
										</view>
									</picker>
									<text style="margin: 0 10rpx;"> </text>
									<picker mode="time" @change="bindStartTime">
										<view class="flex-y-center">
											<text>{{start_time_ms}}</text>
										</view>
									</picker>
									<text class="iconfont icongengduo" style="font-size: 26rpx;"></text>
								</view>
								
								<view class="flex-y-center">
									<picker mode="date" @change="bindEnd">
										<view class="flex-y-center ">
											<text>{{end_time}}</text>
										</view>
									</picker>
									<text style="margin: 0 10rpx;"> </text>
									<picker mode="time" @change="bindEndTime">
										<view class="flex-y-center">
											<text>{{end_time_ms}}</text>
										</view>
									</picker>
									<text class="iconfont icongengduo" style="font-size: 26rpx;"></text>
								</view>
								
						  </view>
							
						</view>
					</scroll-view>

				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import card from '../components/card/card.vue'
	export default {
		components: {
			card,
		},
		data() {
			return {
				store_name: "所有门店",
				storeList: [],
				check_index: 1,
				date: '今日',
				textCollection: {
					title: "营业额(元)",
					type: 2, //'首页'
					wx: '微信支付',
					ali: '支付宝支付',
					money: '现金支付',
					menber: '会员支付',
					juhe: '聚合支付',
				},
				textCollection1: {
					title: "收入(元)",
					type: 2, //'首页'
					wx: '微信收入',
					ali: '支付宝收入',
					money: '现金收入',
					menber: '会员充值',
					juhe: '聚合收入',
				},
				textCollection2: {
					title: "收款笔数",
					type: 2, //'首页'
					wx: '微信收款',
					ali: '支付宝收款',
					money: '现金收款',
					menber: '聚合码收款',
				},
				textCollection3: {
					title: "退款笔数",
					type: 2, //'首页'
					wx: '微信退款',
					ali: '支付宝退款',
					money: '现金退款',

				},
				textCollection4: {
					title: "总订单数",
					type: 2, //'首页'
					wx: '堂食订单',
					ali: '外卖订单',
					money: '自提订单',
				},
				obj1: {},
				obj2: {},
				obj3: {},
				obj4: {},
				obj5: {},

				time: 'today',

				day: 1,

				store_id: "",

				start_time: "开始日期",
				
				start_time_ms:"开始时间",
				
				
				end_time: "结束日期",
				
				end_time_ms: "结束时间",
				
				timeArr: [{
						title: "全部时间",
						time: '',
					}, {
						title: "今日",
						time: 'today',
					}, {
						title: "昨日",
						time: 'yesterday',
					},
					{
						title: "本月",
						time: 'month',
					}, {
						title: "本年",
						time: 'year',
					},
				]
			}
		},
		onLoad() {
			this.shop_store_index();
			this.http();
		},

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

		methods: {

			close() {
				this.$refs.uniScroll.close();
			},
			
			confirm() {
				if (this.check_index == 5) {
					this.date = this.start_time +' '+
					(this.start_time_ms=='开始时间'?'00:00':this.start_time_ms) + '至' + 
					this.end_time+' '+ (this.end_time_ms=='结束时间'?'00:00':this.end_time_ms);
					this.time = "";
					this.day = 2
				} else {
					this.date = this.timeArr[this.check_index].title;
					this.time = this.timeArr[this.check_index].time;
					this.day = 1;
				}
				this.$refs.uniScroll.close();
				this.http();
			},

			bindCheck(index) {
				this.check_index = index;
			},

			bindStart(e) {
				this.start_time = e.detail.value;
			},
			bindStartTime(e){
				this.start_time_ms = e.detail.value;
			},
			bindEnd(e) {
				this.end_time = e.detail.value;
			},
			
			bindEndTime(e) {
				this.end_time_ms = e.detail.value;
			},
			
			getTime(e) {
				this.$refs.uniScroll.open();
			},

			bindStore(e) {
				console.log(e, "e")
				this.store_name = this.storeList[e.detail.value].title;
				this.store_id = this.storeList[e.detail.value].id;
				this.http();
			},

			shop_store_index() {
				let admin_id = uni.getStorageSync("admin_id");
				let storeinfo = uni.getStorageSync("storeinfo");
				this.request({
					url: 'Smdcshop/shop_store_index',
					data: {
						admin_id: admin_id,
					}
				}).then(res => {
					if (res.code == 200) {
						if (res.data.length > 0) {
							this.storeList = res.data;
							this.storeList.unshift({
								title:"所有门店",
								id:""
							})
						}else {
							this.store_id =storeinfo.id;
							this.store_name=storeinfo.title;
							this.storeList = [{
								title: storeinfo.title,
								id: storeinfo.id,
							}];
						}	
					}
				})
			},

			http(e) {
				this.request({
					url: 'Smdcshop/store_search',
					data: {
						admin_id: uni.getStorageSync("admin_id"),
						time: this.time,
						day: this.day,
						store_id: this.store_id,
						start_time: this.day==2?this.start_time+' '+ (this.start_time_ms=='开始时间'?'00:00':this.start_time_ms):'',
						end_time: this.day==2?this.end_time+' '+ (this.end_time_ms=='结束时间'?'00:00':this.end_time_ms):'',
					}
				}).then(res => {
					if (res.code == 200) {
						this.obj1 = {
							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,
							juhe:res.data.jh_ping_juhema1
						};
						this.obj2 = {
							total: res.data.jr_zong_price,
							wx: res.data.jr_wx,
							zfb: res.data.jr_zfb,
							cash: res.data.jrxz_order,
							menber: res.data.today_total,
							juhe:res.data.jh_ping_juhema1
						};
						this.obj3 = {
							total: res.data.today_num,
							wx: res.data.today_numwx,
							zfb: res.data.today_numzfb,
							cash: res.data.today_numxj,
							menber: res.data.jh_ping_num
						};
						this.obj4 = {
							total: res.data.total_refund,
							wx: res.data.wx_refund,
							zfb: res.data.zhf_refund,
							cash: res.data.xj_ping,
						};

						this.obj5 = {
							total: res.data.total_order_num,
							wx: res.data.ts_num_total,
							zfb: res.data.wm_num_total,
							cash: res.data.zt_num_total,
						};

					}
				}).catch((res) => {
					uni.showToast({
						title: res.message,
						icon: 'none'
					})
				});
			},
		}
	}
</script>

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

	.mg-24 {
		margin-bottom: 24rpx;
	}

	.bg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 264rpx;
	}

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

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

	.bg-model-store {
		width: 100%;
		/* padding: 0 20rpx; */
		/* width: 690rpx; */
		margin: 0 auto;
		color: #FFFFFF;
		font-size: 30rpx;
		padding: 30rpx 25rpx;
		
		position: fixed;
		z-index: 2;
		top:0;
		background-color: #3387FF;
	}

	.bg-model-pa {
		position: absolute;
		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);
	}

	.popup-content {
		width: 100%;
		height: 656rpx;
		background: #fff;
		padding: 0rpx 30rpx;
		border-top-left-radius: 16rpx;
		border-top-right-radius: 16rpx;
	}

	.popup-content-title {
		border-bottom: 1rpx solid #F1F1F1;
		padding: 20rpx 0rpx;
	}

	.popup-content-scroll {
		height: 590rpx;
		width: 100%;
		text-align: center;
	}

	.popup-content-scroll-li {
		height: 88rpx;
		padding: 0 20rpx;
		font-size: 30rpx;
	}

	.round {
		width: 30rpx;
		height: 30rpx;
		border: 2rpx solid #e2e2e2;
		border-radius: 50%;
	}

	page .hg-act {
		background: rgba(51, 135, 255, 0.16);
		border-radius: 8rpx;

	}

	page .blue-br {
		border: 2rpx solid #007AFF;
	}

	.solid {
		background: #007AFF;
		width: 18rpx;
		height: 18rpx;
		border-radius: 40px;

	}
</style>
