<template>
	<view @touchmove.stop.prevent>
		<view v-if="mask" class="tui-drawer-mask" :class="{ 'tui-drawer-mask_show': visible }" :style="{zIndex:maskZIndex}" @click="handleMaskClick"></view>
		<view class="tui-drawer-container" :class="[visible ? 'tui-drawer-container_show' : '']" :style="{zIndex:zIndex}">
			<slot></slot>
		</view>
	</view>
</template>

<script>
/**
 * 超过一屏时插槽使用scroll-view
 **/
export default {
	name: 'tuiDrawerUp',
	props: {
		visible: {
			type: Boolean,
			default: false
		},
		mask: {
			type: Boolean,
			default: true
		},
		maskClosable: {
			type: Boolean,
			default: true
		},
		mode: {
			type: String,
			default: 'true' // left right
		},
		//drawer z-index
		zIndex: {
			type: [Number, String],
			default: 995
		},
		//mask z-index
		maskZIndex: {
			type: [Number, String],
			default: 994
		}
	},
	methods: {
		handleMaskClick() {
			if (!this.maskClosable) {
				return;
			}
			this.$emit('close', {});
		}
	}
};
</script>

<style scoped>
.tui-drawer-mask {
	opacity: 0;
	visibility: hidden;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.6);
	transition: all 0.3s ease-in-out;
}
.tui-drawer-mask_show {
	display: block;
	visibility: visible;
	opacity: 1;
}
.tui-drawer-container {
  /* height: 55%; */
  width: 100%;
  position: fixed;
  bottom: 0;
	right: 0;
  transform: translate3d(0, 0, 0);
  transform-origin: center;
  transition: all 0.3s ease-in-out;
  display: none;
  /* overflow-y: scroll; */
  background-color: #fff;
  -webkit-overflow-scrolling: touch;
  -ms-touch-action: pan-y cross-slide-y;
  -ms-scroll-chaining: none;
  -ms-scroll-limit: 0 50 0 50;
}
.tui-drawer-container_show {
	display: flex;
	transform: translate3d(0, 0, 0);
}
</style>
