<template>
	<block>
		<view class="t-toast" :style="{'top': getWindowTop+'px'}" @touchstart.stop="moveStart"
		 @touchmove.stop.prevent="moveM" @touchend.stop="moveEnd">
			<view class="iconfont" :class="'type-' + type">
			   <!-- {{type=='fail'?'&#xe629;':'&#xe6ff;'}} -->
			  <image v-if="type=='fail'" src="/static/tRefresh/fail.png" mode="widthFix"></image>
			  <image v-if="type=='success'" src="/static/tRefresh/success.png" mode="widthFix"></image>
			</view>
			<text>{{msg}}</text>
		</view>
	</block>
</template>

<script>
	export default {
		name: 't-toast',
		props:{
			//展示时长
			showTime:{
				type:[String,Number],
				default:1500
			}
		},
		data() {
			return {
				getWindowTop: 0,  //顶部距离
				msg:'success',   //提示类型
				type:'成功',     //提示文案
			}
		},
		methods: {
			show(type,msg){
				if (type === 'fail') {
					msg?this.msg=msg:this.msg = '失败'
					this.type = 'fail'
				} else {
					msg?this.msg=msg:this.msg = '成功'
					this.type = 'success'
				}
				if(uni.getSystemInfoSync().model=="iPad"){
					this.getWindowTop=270
				}else{
					this.getWindowTop=130
				}
			   setTimeout(()=>{
				   this.getWindowTop=0
			   },this.showTime)
			},
			//触摸消失
			moveStart(e) {
				this.getWindowTop=0
			},
			moveM(e) {
				this.getWindowTop=0
			},
		}
	}
</script>

<style lang="scss" scoped>
	.t-toast {
		position: fixed;
		padding: 0 60rpx; 
		height:80rpx;
		line-height:80rpx;
		text-align: center;
		background-color: #fff;
		left: 50%;
		box-shadow: 0px 0px 10rpx 0px rgba(0, 0, 0, 0.2);
		border-radius: 12rpx;
		transition: all .5s;
		color: #000;
		font-size:26rpx;
		transform: translate(-50%,-300%);
		display: flex;
		align-items: center;
		flex-direction: row;
		z-index: 999999;
		.iconfont {
			margin-right: 10rpx;
			display: flex;
			align-items: center;
			image{
				width:32rpx;
			}
		}
		.type-success {
			color: #00c300;
		}
		.type-fail {
			color: red;
		}
	}
</style>
