<template>
	<div class="shield">
		<div class="shield-top">
			<div class="tips">
				添加屏蔽公司后，你和这些公司Boss，都不会被相互推荐, 你的查看行为也不会告知对方。
			</div>
			<div class="search">
				<el-autocomplete style="width: 600px;" v-model="companyName" :fetch-suggestions="querySearchAsync"
					placeholder="输入添加屏蔽公司名称" @select="handleSelect">
					<template #prefix>
						<el-icon>
							<Memo />
						</el-icon>
					</template>
				</el-autocomplete>
				<el-button class="btn" @click="saveComPany()" type="primary">添加</el-button>
			</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 v-if="item.company" class="list-item-l flex align-center">
						<img :src="item.company.companyLogo" alt="" />
						{{item.company.companyName}}
					</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,
					userId: localStorage.getItem('userId')
				}
				this.$Request.get('/app/shieldCompany/selectShieldList', {
					params: data
				}).then(res => {
					if (res.code == 0) {
						this.list = res.data.list
					}
				})
			},
			//屏蔽公司
			saveComPany() {
				if (!this.companyId) {
					ElMessage({
						message: '请选择公司',
						type: 'info',
						duration: 1500,
						offset: this.screenHeight / 2
					})
					return
				}
				ElMessageBox.confirm(
					'确认屏蔽该公司吗？',
					'温馨提示', {
						confirmButtonText: '确认',
						cancelButtonText: '取消',
						type: 'warning',
					}
				).then(() => {
					this.$Request.post('/app/shieldCompany/insertShieldCompany', {
						companyId: this.companyId,
						shieldType: 1,
						userId: localStorage.getItem('userId')
					}, {
						type: 'json'
					}).then(res => {
						if (res.code == 0) {
							ElMessage({
								message: '屏蔽成功',
								type: 'success',
								duration: 1500,
								offset: this.screenHeight / 2
							})
							this.companyId = ''
							this.companyName = ''
							this.getDataList();
						} else {
							ElMessage({
								message: res.msg,
								type: 'error',
								duration: 1500,
								offset: this.screenHeight / 2
							})
							this.companyId = ''
							this.companyName = ''
							this.getDataList();
						}
					})
				}).catch(() => {

				})
			},
			//选择公司
			handleSelect(item) {
				this.companyName = item.companyName
				this.companyId = item.companyId
			},
			// 岗位的搜索
			querySearchAsync(queryString, cd) {
				if (!queryString) {
					cd([])
					return
				}

				let data = {
					page: 1,
					limit: 999,
					status: 2,
					companyName: queryString
				}
				this.$Request.get('/app/company/selectCompanyList', {
					params: data
				}).then(res => {
					if (res.code == 0) {
						let arr = res.data.records
						arr.map(item => {
							item.value = item.companyName
						})
						cd(arr)
						// this.companyList = res.data.records

					}
				})
				// let data = {
				// 	ruleClassifyName: queryString
				// }
				// this.$Request.get('/app/rule/userGetClassify', {
				// 	params: data
				// }).then(res => {
				// 	if (res.code == 0) {
				// 		let arr = res.data
				// 		arr.map(item => {
				// 			item.value = item.ruleClassifyName
				// 		})
				// 		cd(arr)
				// 	}
				// })
			},
		}
	}
</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>