<template>
  <view
    v-show="show"
    class="loading-box"
    :style="{
      'background-color': backColor
    }"
    @click="dismiss"
  >
    <image
      class="rotateKey"
      src="@/static/images/loading-svg.png"
    />
    <view class="loading">
      <text class="loading-text">
        {{ text }}
      </text>
    </view>
  </view>
</template>

<script>
export default {
	props:{
		backColor:{
			type:String,
			default:()=>{
				return '#fff';
			}
		},
		text:{
			type:String,
			default:()=>{
				return '加载中....';
			}
		}
	},
	data() {
		return {};
	},
	computed: {
		show() {
			return this.$store.state.loading;
		}
	},
	methods: {
		dismiss() {
			this.$store.commit('showLoading', false);
		}
	}
};
</script>

<style>
.loading-box {
	width: 100%;
	height: 100vh;
	
	position: fixed;
	left: 0;
	top: 0;
	z-index: 10000;
	display: flex;
	justify-content: center;
	align-items: center;
}

.loading-box image {
	margin-bottom: 40px;

}

.rotateKey {
	width: 108rpx;
	height: 108rpx;
	animation: rotateKey 1s ease-in-out infinite;
}

@keyframes rotateKey {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}
.loading-text {
	font-size: 28rpx;
	color: #666;
}
</style>
