<template>
	<view class="message-popup" :class="{ 'show': config.show }">
		<view class="mask" @click="closeProgress" :class="{ 'show': config.show }"
			:style="{backgroundColor:config.maskBgColor,display:(config.showMask?'':'none')}">
		</view>

		<view class="progress-content" :style="{backgroundColor:config.contentBgColor}">
			<text
				:style="{color:config.txtColor,display:(config.showText?'':'none')}">{{config.curr}}/{{config.total}}</text>
			<view class="jdWai"
				:style="{borderRadius:config.borderRadius, backgroundColor:config.proBgColor,border:config.proBorder,height:config.height}">
				<view class="jdNei"
					:style="{borderRadius:config.borderRadius,height:config.height,backgroundColor:config.currBgColor,border:config.currBorder,width:(config.curr/config.total*100)+'%'}">
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "Progress",
		data() {
			return {

			};
		},
		props: {
			config: {
				type: Object,
				default: () => ({
					show: false, //是否显示
					showMask: true, //是否显示mask
					height:'20px',
					maskBgColor: '#00000000', //mask背景颜色
					contentBgColor: '#121212', //总背景颜色
					showText: true, //是否显示当前进度的文字
					txtColor: '#ffffffde', //文字的颜色
					curr: 0, //当前进度
					total: 100, //总进度
					proBgColor: '#2a2a2a', //进度条底色,
					proBorder: '', //进度条border
					currBgColor: '#bbe600', //当前进度底色
					currBorder: '', //当前进度border
					borderRadius:'10px'
				})
			}
		},methods: {
			closeProgress() {

				this.$emit('closeProgress');
			}
			}
	}
</script>

<style>
	.message-popup {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 9999;
		display: none;
		justify-content: center;
		align-items: center;
	}

	.message-popup.show {
		display: block;
	}

	.p100 {
		width: 100%;
		height: 100%;
		border-radius: 8rpx;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-content: center;
		justify-content: flex-start;
		align-items: center;
		box-sizing: border-box;
		padding: 0rpx 20rpx;
	}

	.displayNone {
		display: none !important;
	}



	.mask {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 9;
		width: 100%;
		height: 100%;
	}


	.progress-content {
		position: relative;
		width: 100%;
		padding: 30rpx;
		box-sizing: border-box;
		z-index: 10;

		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		align-content: center;
		align-items: center;
		height: 100%;
		justify-content: center;
	}

	.jdWai {
		width: 100%;
	}

	.jdNei {
		height: 100%;

	}
</style>