<template>
	<view class="pageBox" :style="{'height':pageHeight + 'px'}">
		<scroll-view :scroll-y="scrollY" :style="{'height':pageHeight + 'px'}" class="pageScrollBox" :enhanced="true"
			:bounces="false" :show-scrollbar="false" @scroll="scroll" :scroll-top="scrollTop">
			<slot></slot>
		</scroll-view>
		<!-- <backtop @back="topback" :show="topshow"></backtop> -->
		<!-- 日历组件 -->
		<!-- <u-calendar :show="calendarShow" :mode="mode" :monthNum="25" :closeOnClickOverlay="true"
			@confirm="dateSelectAction" @close="closeCalendar" :minDate="minDate" :maxDate="maxDate" :title="title">
		</u-calendar>
		<u-datetime-picker :formatter="formatters" :show="datetimePickerShow" @confirm="dateSelectAction"
			@cancel="closeCalendar" mode="datetime" :minDate="pickerMinDate" :maxDate="pickerMaxDate"
			:closeOnClickOverlay="true" v-model="defaultDate" @close="close"></u-datetime-picker>
		<noteDialog :show="textAreaShow" :title="textAreaTitle" :note="textAreaValue" @save_note="get_note"
			@close="closeNoteDialog">
		</noteDialog>
		<tabspopup :tag="tags" :data="list" :type="true" :name="titles" :show_="show"></tabspopup> -->
		<!-- 选择器 块状 或 列表状 根据 传 selectionMode参数区分 -->
		<!-- <block-select :popupShow="blockSelectShow" :blockSelectTitle="blockSelectTitle" :selectionMode="selectionMode"
			:selectData="orderList" :typeList="typeList" ref="child">
		</block-select> -->
	</view>
</template>

<script>
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	// import backtop from '@/pages/mobile_order/sale_order/coms/backtop.vue'
	// import tabspopup from '@/pages/mobile_order/sale_order/coms/tabspopup.vue'
	// import noteDialog from '@/components/form/new-form/note_dialog.vue';
	const d = new Date().getTime()
	export default {
		name: "default-pages-box",
		props: {
			scrollY: {
				type: Boolean,
				default: true,
			},
			isButtonBox: {
				type: Boolean,
				default: true,
			}
		},
		// components: {
		// 	backtop,
		// 	noteDialog,
		// 	tabspopup
		// },
		data() {
			return {
				topshow: false,
				scrollTop: 0,
				oldScrollTop: 0,
				defaultDate: d,
			};
		},
		onPageScroll(e) {
			// e.scrollTop 表示当前页面滚动的距离
			console.log('页面滚动距离：', e.scrollTop);
			// 在这里编写你的滚动相关逻辑
		},
		created() {

		},
		computed: {
			...mapGetters(['screenHeight', 'customTabBarHeight', 'naviStatusHeight']),
			pageHeight() {
				if (this.isButtonBox) {
					return this.screenHeight - this.naviStatusHeight - this.customTabBarHeight;
				} else {
					return this.screenHeight - this.naviStatusHeight
				}
			},
		},
		methods: {
			...mapActions(['closeCalendar', 'dateSelect', 'confirmTextArea', 'closeTextArea']),
			//备注弹窗vuex管理示例
			get_note(textAreaValue) {
				let option = {
					textAreaValue: textAreaValue,
				}
				console.log(option)
				this.confirmTextArea(option);
			},
			closeNoteDialog() {
				this.closeTextArea();
			},
			//时间组件vuex管理示例
			dateSelectAction(e) {
				if (this.mode == 'datetime') {
					//滚轮选择器
					let valueStart = this.$moment(e.value).format('YYYY-MM-DD HH:mm');
					let option = {
						valueStart: valueStart,
						valueEnd: '',
					}
					this.dateSelect(option);
				} else {
					let option = {
						valueStart: e[0],
						valueEnd: '',
					}
					if (e.length > 0) {
						option.valueEnd = e[1];
					}
					this.dateSelect(option);
				}


			},
			close() {
				this.closeCalendar();
			},

			scroll(e) {
				this.oldScrollTop = e.detail.scrollTop
				if (e.detail.scrollTop >= 1.5 * this.screenHeight) {
					this.topshow = true
				} else {
					this.topshow = false
				}
			},
			topback() {
				//视图会发生重新渲染
				this.scrollTop = this.oldScrollTop
				//当视图渲染结束 重新设置为0
				this.$nextTick(() => {
					this.scrollTop = 0
				});
			},
			formatters(type, value) {
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				if (type === 'day') {
					return `${value}日`
				}
				if (type === 'hour') {
					return `${value}时`
				}
				if (type === 'minute') {
					return `${value}分`
				}
				return value
			},
			que_ding_click() {

			}
		},
	}
</script>

<style>
	.pageBox {
		background-color: #FAFAFAFF;
		z-index: 921;
	}

	.pageScrollBox {
		z-index: 922;
	}
</style>