<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,index) in list" :key="item">
				<div :class="list.length-1==index?'':'exportItem'" 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">
							<el-tooltip effect="dark" :content="item.msg">
								<span size="mini">{{item.msg}}</span>
							</el-tooltip>
						</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: "exportList",
	props:{
		size:{type: String, default: "small" },
		show:{type:Boolean, default: false},
		type:{type: String, default: ""},
		exportList:{type: Array},
	},
	watch:{
		exportList: {
			handler (v) {
				this.list = v;
			},
			immediate:true,
			deep:true,
		}
	},
	data(){
		return{
			list:this.exportList,
		}
	},
	setup(){

	},
	mounted() {
		// 获取新消息
		// eventBus.$on('sockBack', this.getWsResult);

		eventBus.$on('sseBack', this.getWsResult);
	},
	unmounted() {
		// eventBus.$off('sockBack', this.getWsResult);

		eventBus.$off('sseBack', this.getWsResult);
	},
	methods:{
		getWsResult(res){
			if(res.data && (res.data.type == 14)){
				let ids = this.list.map(em=>em.file_unique_id);
				if(ids.indexOf(res.data.file_unique_id) == -1){
					this.list.push({file_unique_id:res.data.file_unique_id,client_file_name:res.data.client_file_name})
				}
				this.list.forEach(item=>{
					if(item.file_unique_id == res.data.file_unique_id){
						item.type = res.data.type;
						item.rate = res.data.rate;
						item.type_desc = item.client_file_name;
						item.status = res.data.rate!=100?0:1;
						item.msg = res.data.msg;
					}
				})
				let data = this.list.filter(em=>em.status!=1);
				let params = {
					type:res.data.type,
					data: data
				}
				this.$emit('updateShow', params);

				if(res.data.rate==100){
					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">
.exportItem{
	margin-bottom: 12px;
}
.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 ::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: 0;
		z-index: 200;
	}
	.bodyMain{
		position: relative;
		.arrow{
			position: absolute;
			right: 10px;
			top: -18px;
			width: 8px;height: 8px;z-index: 10;
		}
		.arrow:before{
			position: absolute;
			top: 0;
			right: 10px;
			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>

