<template>
	<div class="shield">
		<div class="shield-top">
			<div class="tips">
				添加黑名单后，你和这些人才，都不会被相互推荐, 你的查看行为也不会告知对方。
			</div>
			<div class="title">
				您已拉黑<span style="color: #00DD9A;">{{list.length}}</span>名求职者
			</div>
		</div>

		<!-- 屏蔽列表 -->
		<div v-if="list.length>0" class="list flex align-center justify-center">
			<div class="list-box">

				<div class="list-item flex align-center justify-between" v-for="(item,index) in list" :key="index">
					<div class="list-item-l flex align-center">
						<img :src="item.user?item.user.avatar:'/default.jpg'" alt="" />
						{{item.user?item.user.userName:'匿名用户'}}
					</div>
					<div class="list-item-r">
						<el-button type="primary" @click="jiebang(item.shieldCompanyId)" plain>移除黑名单</el-button>
					</div>
				</div>
			</div>

		</div>
		<div class="list" v-else>
			<el-empty description="暂无黑名单" />
		</div>
	</div>
</template>

<script>
	import {
		ElMessageBox,
		ElMessage,
	} from 'element-plus'
	export default {
		data() {
			return {
				companyName: '', //公司名称
				companyId: '', //公司id
				screenHeight: 0,
				list: [],
			}
		},
		mounted() {
			this.screenHeight = window.innerHeight
			this.getDataList()
		},
		methods: {
			//解除屏蔽
			jiebang(shieldCompanyId) {
				ElMessageBox.confirm(
					'确认把该用户移出黑名单？',
					'温馨提示', {
						confirmButtonText: '确认',
						cancelButtonText: '取消',
						type: 'warning',
					}
				).then(() => {
					this.$Request.post('/app/shieldCompany/deleteShieldCompany', {
						shieldCompanyId: shieldCompanyId
					}).then(res => {
						if (res.code == 0) {
							ElMessage({
								message: '移除黑名单成功',
								type: 'success',
								duration: 1500,
								offset: this.screenHeight / 2
							})
							this.getDataList();
						} else {
							ElMessage({
								message: res.msg,
								type: 'error',
								duration: 1500,
								offset: this.screenHeight / 2
							})
						}
					})
				}).catch(() => {

				})
			},
			//获取黑名单列表
			getDataList() {
				let data = {
					page: 1,
					limit: 9999,
					companyId: localStorage.getItem('companyId')
				}
				this.$Request.get('/app/shieldCompany/selectShieldList', {
					params: data
				}).then(res => {
					if (res.code == 0) {
						this.list = res.data.list
					}
				})
			},

		}
	}
</script>

<style lang="scss" scoped>
	.shield {
		.shield-top {
			top: 0;
		}


		.tips {
			width: 100%;
			font-weight: 400;
			font-size: 14px;
			color: #666666;
		}

		.search {
			width: fit-content;
			margin-top: 20px;
			position: relative;
			height: fit-content;
			background-color: #ffffff;

			.btn {
				position: absolute;
				right: 0;
			}
		}

		.title {
			margin-top: 40px;
		}

		.list {
			width: 100%;
			margin-top: 20px;

			.list-box {
				width: calc(100% - 40px);
				border: 1px solid #EBEBEB;
				padding: 20px;
				border-radius: 8px;
				background-color: #FCFCFC;
			}

			.list-item {
				color: #222222;
				font-size: 14px;
				font-weight: 400;
				padding: 10px 0;
			}

			.list-item-l {
				img {
					width: 40px;
					height: 40px;
					border-radius: 8px;
					margin-right: 20px;
				}
			}

		}
	}
</style>