<template>
	<div class="customerPopover">
		<div class="btnBox">
			<slot></slot>
		</div>
		<div class="contentPopover" v-if="show">
			<div class="bodyMain">
				<span class="arrow"></span>
				<div class="refreshBox">{{refreshDom}}</div>
			</div>
		</div>
	</div>
</template>

<script>
import {eventBus} from "@/utils/eventBus";

export default {
	name: "emailSync",
	props:{
		size:{type: String, default: "small" },
		show:{type: Boolean, default: false},
		text:{type: String},
	},
	watch:{
		text: {
			handler (v) {
				this.refreshDom = v;
			},
			immediate:true,
			deep:true,
		}
	},
	data(){
		return{
			refreshDom:this.text,
		}
	},
	mounted() {
		// 获取新消息
		eventBus.$on('sockBack', this.getWsResult);
	},
	unmounted() {
		eventBus.$off('sockBack', this.getWsResult);
	},
	methods:{
		getWsResult(res){
			if(res.data && (res.data.type == 16)){
				this.$emit('updateSync', res.data);
			}
		},
	}
}
</script>

<style scoped lang="scss">
.exportPopover ::v-deep .el-progress-bar__innerText{
	height: 100%;
	display: flex;align-items: center;justify-content: flex-end;
	font-size: 10px;
}

.customerPopover{
	position: relative;
	height: auto;
	.btnBox{
		margin-left: 12px;
	}
	.contentPopover{
		width: 300px;
		padding: 12px;
		background: var(--el-bg-color-overlay);
		border: 1px solid var(--el-border-color-light);
		box-shadow: var(--el-box-shadow-light);
		border-radius: 4px;
		position: absolute;
		top: 38px;
		right: -10px;
		z-index: 200;
	}
	.bodyMain{
		position: relative;
		.arrow{
			position: absolute;
			right: 0;
			top: -18px;
			width: 8px;height: 8px;z-index: 10;
		}
		.arrow:before{
			position: absolute;
			top: 0;
			right: 0;
			z-index: -1;
			content: '';
			width: 8px;
			height: 8px;
			transform:rotate(135deg);
			border: 1px solid var(--el-border-color-light);
			background: #fff;
			border-bottom-left-radius:2px;
			border-right-color:transparent;
			border-top-color:transparent;
		}
	}
}
</style>
