<template>
	<view>
		<view @tap="clickme">点击显示底部弹框</view>
		<!-- 变暗的背景 -->
		<view class="mask" @tap="hideModal" v-if="showModalStatus"></view>
		<!-- 底部弹出框 -->
		<view :animation="animationData" class="bottom_box" v-if="showModalStatus">
			<view class="title">送货单</view>
			<view class="productInfo">
				<view class="font1">已选产品</view>
				<view class="font2">清空</view>
			</view>
			<view v-for="(item,index) in list" :key="item.id" class="productItem">
				<uni-swipe-action>
					<uni-swipe-action-item :right-options="options2" :show="right" :auto-close="false" @change="change"
						@click="bindClick(index)">
						<view class="content-box">
							<view class="line1">
								<view class="fontColor">{{item.name}}</view>
								<view class="fontColor">{{item.count}}</view>
							</view>
							<view class="fontColor1">{{item.info}}</view>
						</view>
					</uni-swipe-action-item>
				</uni-swipe-action>

			</view>
			<view class="buttonFooter">
				<view class="count">货物清单</view>
				<view class="submit">提交</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				animationData: {},
				showModalStatus: false,
				options2: [{
					text: '删除',
					style: {
						backgroundColor: 'rgba(212, 48, 48, 1)'
					}
				}],
				list: [{
						id: 1,
						name: '砂浆-普通砂浆',
						count: '225.55',
						info: '砌筑砂浆配合比设计规程（JGJ/T 98-2010）/型号名称型号名称'
					},
					{

						name: '砂浆-普通砂浆',
						count: '225.55',
						info: '砌筑砂浆配合比设计规程（JGJ/T 98-2010）/型号名称型号名称'
					},
				]
			}
		},
		onLoad: function(options) {},
		methods: {
			change() {

			},
			bindClick(index) {
				console.log('11')
				this.list.splice(index, 1)
			},
			//点击显示底部弹出框
			clickme: function() {
				this.showModal();
			},

			//显示对话框
			showModal: function() {
				// 显示遮罩层

				var animation = uni.createAnimation({
					transformOrigin: "50% 50%",
					duration: 1000,
					timingFunction: "ease",
					delay: 0
				})

				var animation = uni.createAnimation({
					//duration	Integer 动画持续时间，单位ms
					duration: 200,
					//timingFunction	String  默认"linear"（动画从头到尾的速度是相同的）	定义动画的效果
					timingFunction: 'linear',
					//delay	Integer		默认 0	动画延迟时间，单位 ms
					delay: 0
				})
				animation.translateY('400rpx').step()
				this.animationData = animation.export(),
					setTimeout(() => {

						//隐藏底部栏
						uni.hideTabBar();

						animation.translateY(0).step(),
							this.animationData = animation.export(),
							this.showModalStatus = true
					}, 100)
			},

			//隐藏对话框
			hideModal: function() {
				// 隐藏遮罩层
				var animation = uni.createAnimation({
					//duration	Integer 动画持续时间，单位ms
					duration: 200,
					//timingFunction	String  默认"linear"（动画从头到尾的速度是相同的）	定义动画的效果
					timingFunction: 'linear',
					//delay	Integer		默认 0	动画延迟时间，单位 ms
					delay: 0
				});
				animation.translateY('400rpx').step(),
					this.animationData = animation.export(),
					setTimeout(() => {

						// 显示底部栏
						uni.showTabBar();

						animation.translateY(0).step(),
							this.showModalStatus = false
					}, 100)
			},

		}
	}
</script>
<style lang="scss" scoped>
	/*遮罩层  */
	.mask {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background: #000;
		opacity: 0.2;
		overflow: hidden;
		z-index: 1000;
		color: #fff;
	}

	/*底部框 */
	.bottom_box {
		height: 800rpx;
		width: 100%;
		overflow: hidden;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 2000;
		background: #fff;
		border-radius: 8px 8px 0px 0px;

		.title {
			/* 			width: 375px; */
			height: 51px;
			line-height: 51px;
			opacity: 1;
			border-radius: 8px 8px, 0px, 0px;
			background: rgba(232, 243, 255, 1);
			box-shadow: inset 0px -0.5px 0px 0px rgba(229, 230, 235, 1);
			padding-left: 16px;
			font-size: 16px;
			font-weight: 700;
			color: rgba(29, 33, 41, 1);
		}

		.productInfo {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 16px;
			padding-bottom: 0px;

			.font1 {
				font-size: 14px;
				font-weight: 500;
				color: rgba(29, 33, 41, 1);
			}

			.font2 {
				font-size: 14px;
				font-weight: 400;
				color: rgba(153, 153, 153, 1);
			}
		}

		.productItem {
			border-radius: 2px;
			background: rgba(247, 250, 255, 1);
			margin: 16px;
			margin-top: 12px;

			.line1 {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 8px;
				padding-bottom: 0px;
				margin-bottom: 13px;

				.fontColor {
					font-size: 14px;
					font-weight: 400;
					color: rgba(26, 26, 26, 1);
				}


			}

			.fontColor1 {
				font-size: 14px;
				font-weight: 400;
				color: rgba(102, 102, 102, 1);
				padding: 8px;
				padding-bottom: 0px;
			}
		}

		.buttonFooter {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 16px 16px 16px 16px;
			position: fixed;
			bottom: 16px;

			.count {
				padding: 13px 11px;
				border-radius: 2px;
				border-radius: 2px;
				background: rgba(232, 243, 255, 1);
				font-size: 16px;
				font-weight: 400;
				color: rgba(0, 122, 255, 1);
			}

			.submit {
				width: 483rpx;
				height: 84rpx;
				line-height: 44px;
				opacity: 1;
				border-radius: 2px;
				background: rgba(22, 93, 255, 1);
				font-size: 16px;
				font-weight: 400;
				color: rgba(255, 255, 255, 1);
				text-align: center;
				margin-left: 12px;
			}
		}
	}
</style>

<!-- <template>
	<view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style>

</style> -->