<template>
	<view class="consumeRecord">
		<van-tabs v-model="active" animated sticky color="#01CB88" title-active-color="#1B1B1B"
			title-inactive-color="rgba(0,0,0,0.5)" @change="changeTabs">
			<van-tab title="门店">
				<!-- 标题 -->
				<template #title>
					<view :class="active!=1?'custstyle':'default'">门店</view>
				</template>
				<!-- 内容 -->
				<template #default>
					<Store v-if="active!=1" :totalCnt="totalCnt" :isperiod="isperiod" :StoreInfo_="StoreInfo_"
						:flowsList="flowsList" :storeInfo="storeInfo" @transactionDetails="transactionDetails"
						@selectTime="selectTime" @selectStore="selectStore" @Loadmore="Loadmore" :starttime="starttime"
						:endtime="endtime" :showPicker="showPicker" :calendar="calendar" :ImgUrl="ImgUrl"
						:ImgUrl2="ImgUrl2"></Store>
				</template>
			</van-tab>
			<van-tab title="设备">
				<!-- 标题 -->
				<template #title>
					<view :class="active==1?'custstyle':'default'">设备</view>
				</template>
				<!-- 内容 -->
				<template #default>
					<Device v-if="active==1" :isperiod="isperiod" :StoreInfo_="StoreInfo_" :deviceList_="deviceList_"
						:storeInfo="storeInfo" @transactionDetails="transactionDetails" @selectStore="selectStore"
						@selectTime="selectTime" :showPicker="showPicker" :calendar="calendar" :ImgUrl="ImgUrl"
						:ImgUrl2="ImgUrl2"></Device>
				</template>
			</van-tab>
		</van-tabs>
		<!-- 选择日期组件 -->
		<van-calendar v-model="calendar" :allow-same-day="true" :min-date="minDate" :max-range="93" :show-confirm="true" position="bottom"
			color="#01CB88" type="range" @confirm="onConfirm" />
		<!-- 门店选择 -->
		<van-popup v-model="showPicker" round position="bottom">
			<view class="" style="height: 600rpx;">
				<van-picker title="门店选择" show-toolbar :columns="stores" @confirm="onConfirmStore"
					@cancel="onCancelStore" @change="onChangeStore">
					<template #option="option">
						<view class="" style="white-space: nowrap; text-overflow: ellipsis; width: 100%;text-align: center;">
							{{option.storeName}}
						</view>
					</template>
				</van-picker>
			</view>
		</van-popup>
	</view>
</template>

<script>
	import Store from "../components/store/store.vue"
	import Device from "../components/device/device.vue"
	import dayjs from "dayjs"
	import isBetween from "dayjs/plugin/isBetween"
	dayjs.extend(isBetween)
	// const starttime = dayjs().subtract(1, 'day').format('YYYY/MM/DD')
	const starttime = dayjs().format('YYYY/MM/DD')
	const endtime = dayjs().format('YYYY/MM/DD')
	import login from "../mixin/login.js"
	// 高峰期限制
	// "上午"   06:00:00-08:30:00
	// "中午"   11:00:00-13:00:00
	// "晚上"   17:00:00-19:00:00
	const s1 = dayjs().format('YYYY-MM-DD 06:00:00')
	const s2 = dayjs().format('YYYY-MM-DD 08:30:00')
	const z1 = dayjs().format('YYYY-MM-DD 11:00:00')
	const z2 = dayjs().format('YYYY-MM-DD 13:00:00')
	const x1 = dayjs().format('YYYY-MM-DD 17:00:00')
	const x2 = dayjs().format('YYYY-MM-DD 19:00:00')
	const isperiod = dayjs().isBetween(s1, s2) || dayjs().isBetween(z1, z2) || dayjs().isBetween(x1,
		x2)
	console.warn("高峰期====>>>", isperiod)

	import {
		Dialog,
		Toast
	} from 'vant';
	import config from '../../common/config.js'
	import {
		requestGet,
		requestPost
	} from '../../common/request.js'
	export default {
		name: "consumeRecord",
		mixins: [login],
		components: {
			Store,
			Device
		},
		data() {
			return {
				// 是否高峰期
				isperiod,
				// 默认时间
				starttime,
				endtime,
				ImgUrl: this.$ImgUrl,
				ImgUrl2: this.$ImgUrl + 'xzfalipay/',
				active: 0,
				// 日历选择弹框
				calendar: false,
				// 门店选择弹框
				showPicker: false,
				minDate: new Date(2021, 0, 1),
				// 门店列表
				stores: [],
				// 选择的门店
				StoreInfo_: {},
				// 门店流水列表数据
				flowsList: [],
				// 门店流水列表数据
				deviceList_: [],
				pageIndex: 1,
				pageSize: 20,
				// 数据总条数
				totalCnt: 0
			}
		},
		onLoad: function(options) {

		},
		methods: {
			// 加载更多
			Loadmore() {
				this.pageIndex += 1
				this.StoreFlows(this.StoreInfo_['id'])
			},
			//门店设备
			async DeviceList(storeId) {
				// 高峰期禁止请求接口
				if (this.isperiod) {
					return
				}
				const loading = Toast.loading('数据加载中...');
				let data = await requestPost('/cgi-xpay/app/busi/DeviceList', {
					"businessId": 0,
					"storeId": storeId || 0
				})
				loading.clear();
				if (data['code'] != 200) {
					await Dialog({
						title: '温馨提示',
						message: "门店设备查询失败",
						confirmButtonText: "知道了"
					})
					return
				}
				let jsonData = JSON.parse(JSON.stringify(data || {}))
				const backData = jsonData.data.backData || []
				this.deviceList_ = backData
			},
			//门店流水
			async StoreFlows(storeId) {
				// 高峰期禁止请求接口
				if (this.isperiod) {
					return
				}
				const loading = Toast.loading('数据加载中...');
				let data = await requestPost('/cgi-xpay/app/busi/StoreFlows', {
					"businessId": 0,
					"startDate": this.starttime.replaceAll("/", "-"),
					"endDate": this.endtime.replaceAll("/", "-"),
					"pageIndex": this.pageIndex,
					"pageSize": this.pageSize,
					"storeId": storeId || 0
				})
				loading.clear();
				if (data['code'] != 200) {
					await Dialog({
						title: '温馨提示',
						message: "门店流水查询失败",
						confirmButtonText: "知道了"
					})
					return
				}
				let jsonData = JSON.parse(JSON.stringify(data || {}))
				const backData = jsonData.data.backData || []
				this.totalCnt = jsonData.data.totalCnt || 0
				if (this.pageIndex == 1) {
					this.flowsList = backData.map((v, index) => {
						v['amount'] = parseFloat(v.amount / 100).toFixed(2)
						return v
					})
				} else {
					const arr = backData.map((v, index) => {
						v['amount'] = parseFloat(v.amount / 100).toFixed(2)
						return v
					})
					this.flowsList.push(...arr)
				}
			},
			// 设备查看明细
			async transactionDetails(item, index) {
				const loading = Toast.loading('数据加载中...');
				console.warn(item, index)
				uni.setStorageSync("details", item)
				uni.navigateTo({
					url: `../transactionDetails/transactionDetails?starttime=${this.starttime}&endtime=${this.endtime}`,
					success: () => {
						loading.clear();
					}
				})
			},
			onConfirmStore(value, index) {
				this.selectStore()
				const StoreInfo_ = this.stores[index]
				this.StoreInfo_ = StoreInfo_
				// 查询门店交易数据
				if (this.active === 0) {
					this.StoreFlows(StoreInfo_['id'])
					this.StoreData()
				} else {
					this.DeviceList(StoreInfo_['id'])
					this.StoreData()
				}
				this.showPicker = false
			},
			onChangeStore(picker, value, index) {

			},
			onCancelStore() {
				this.showPicker = false
			},
			// 选择门店
			selectStore() {
				this.showPicker = true
			},
			// 组件提交时间
			onConfirm(date) {
				const [start, end] = date;
				// this.calendar = false;
				this.starttime = dayjs(start).format('YYYY/MM/DD')
				this.endtime = dayjs(end).format('YYYY/MM/DD')
				this.calendar = false

				// 查询门店交易数据
				if (this.active === 0) {
					this.StoreFlows(this.StoreInfo_['id'])
					this.StoreData()
				} else {
					this.DeviceList(this.StoreInfo_['id'])
					this.StoreData()
				}
			},
			// 选择时间
			selectTime(status) {
				this.calendar = status
			},
			// tab切换
			async changeTabs(e) {
				// 清空选择的门店信息
				this.StoreInfo_ = {}
				this.pageIndex = 1;
				this.pageSize = 20;
				if (e === 0) {
					this.StoreFlows()
					this.StoreData()
				} else {
					this.DeviceList()
					this.StoreData()
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		height: 100vh;
		background: #F3F3F3;
	}

	.consumeRecord {
		.default {
			font-size: 32rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: rgba(0, 0, 0, 0.5);
		}

		.van-tabs__line {
			background: #01CB88 !important;
			border-radius: 8rpx !important;
			width: 68rpx;
			height: 6rpx;
		}

		.custstyle {
			font-size: 34rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #1B1B1B;
		}
	}
</style>