<template>
	<el-popover
		placement="bottom-end"
		title=""
		trigger="click"
		content=""
		width="300"
		v-bind="$attrs"
		:visible="show"
	>
		<template #reference>
			<slot></slot>
		</template>
		<template #default>
			<div v-for="item in list" :key="item">
				<div v-if="list.length>0 && type == item.type">
					<div class="exportHeader">
						<div class="name">{{item.type_desc}}</div>
						<div class="status" v-if="item.status==0">{{item.msg}}</div>
						<div class="finish" v-if="item.status==1"><i class="icon"><sc-icon-Finish/></i> 文件生成完成</div>
					</div>
					<el-progress class="exportPopover" :text-inside="true" :stroke-width="12" :percentage="item.rate" />
				</div>
			</div>
		</template>
	</el-popover>
</template>

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

export default {
	name: "index",
	props:{
		size:{type: String, default: "small" },
		show:{type:Boolean, default: false},
		type:{type: String, default: ""}
	},
	watch:{

	},
	data(){
		return{
			list:[{},{},{},{},{},{}],
		}
	},
	setup(){

	},
	mounted() {
		// 获取新消息
		eventBus.$on('sockBack', this.getWsResult);
	},
	unmounted() {
		eventBus.$off('sockBack', this.getWsResult);
	},
	methods:{
		getWsResult(res){
			if(res.data && (res.data.type == 6 || res.data.type == 7 || res.data.type == 8 || res.data.type == 11 || res.data.type == 19 || res.data.type == 20)){
				let item = {
					type:res.data.type,
					type_desc:res.data.type_desc,
					msg:res.data.msg,
					status:res.data.status,
					rate:res.data.rate,
				}
				if(res.data.type == 6){
					this.list[0] = item;
				}
				if(res.data.type == 7){
					this.list[1] = item;
				}
				if(res.data.type == 8){
					this.list[2] = item;
				}
				if(res.data.type == 11){
					this.list[3] = item;
				}
				if(res.data.type == 19){
					this.list[4] = item;
				}
				if(res.data.type == 20){
					this.list[5] = item;
				}
				this.$emit('updateShow', item);

				if(res.data.status==1){
					this.down(res.data);
				}
			}
		},
		down(item){
			const link = document.createElement('a');
			link.href = item.file_url;
			link.setAttribute('download', '');
			document.body.appendChild(link);
			link.click();
			document.body.removeChild(link);
		},
		exportClick(){
			this.$emit('exportData');
		},
	}
}
</script>

<style scoped lang="scss">
	.exportHeader{
		font-size: 12px;
		display: flex;align-items: center;justify-content: space-around;
		margin-bottom: 6px;
		.name{width: 50%;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}
		.status{width: 50%;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}
		.finish{
			display: flex;align-items: center;justify-content: flex-end;color: var(--el-color-success);
			.icon{width: 14px;height: 14px;margin-right: 4px;}
		}
	}
	.exportPopover :deep(.el-progress-bar__innerText){
		height: 100%;
		display: flex;align-items: center;justify-content: flex-end;
		font-size: 10px;
	}
</style>
