<template>
	<div>
		<div class="box">
			<div v-if="userType == 1" @click="goRecord(1)" class="box-item flex align-center justify-center flex-wrap">
				<img src="./imags/send.png" class="box-item-icon" alt="" srcset="">
				<img src="./imags/send_.png" class="box-item-icons" alt="" srcset="">
				<div class="box-item-txt">
					已投递
				</div>
			</div>
			<div v-if="userType == 1" @click="goRecord(0)" class="box-item flex align-center justify-center flex-wrap">
				<img src="./imags/look.png" alt="" class="box-item-icon" srcset="">
				<img src="./imags/look_.png" alt="" class="box-item-icons" srcset="">
				<div class="box-item-txt">
					浏览过
				</div>
			</div>
			<div v-if="userType == 1" @click="goRecord(2)" class="box-item flex align-center justify-center flex-wrap">
				<img src="./imags/love.png" alt="" class="box-item-icon" srcset="">
				<img src="./imags/love_.png" alt="" class="box-item-icons" srcset="">
				<div class="box-item-txt">
					已收藏
				</div>
			</div>
			<div v-if="userType == 1" @click="goInterview()"
				class="box-item flex align-center justify-center flex-wrap">
				<img src="./imags/interview.png" alt="" class="box-item-icon" srcset="">
				<img src="./imags/interview_.png" alt="" class="box-item-icons" srcset="">
				<div class="box-item-txt">
					面试
				</div>
			</div>

			<!-- <div @click="goKefu()" class="box-item flex align-center justify-center flex-wrap">
				<img src="./imags/kefu.png" alt="" class="box-item-icon" srcset="">
				<img src="./imags/kefu_.png" alt="" class="box-item-icons" srcset="">
				<div class="box-item-txt">
					客服
				</div>
			</div> -->
			<el-popover trigger="click" :show-arrow="false" placement="left" :width="178">
				<template #reference>
					<div @click="goKefu()" class="box-item flex align-center justify-center flex-wrap">
						<img src="./imags/kefu.png" alt="" class="box-item-icon" srcset="">
						<img src="./imags/kefu_.png" alt="" class="box-item-icons" srcset="">
						<div class="box-item-txt">
							客服
						</div>
					</div>
				</template>
				<div>
					<VueQrcode type="image/png" :color="qrColor" :value="options" :margin="0"
						errorCorrectionLevel="quartile" :width="size" />
					<!-- <img style="width: 150px;height: 150px;" src="../../../public/default.jpg" alt="" /> -->
				</div>
				<div style="width: 100%;text-align: center;margin-top: 10rpx;color: #333333;">
					扫描二维码联系客服
				</div>
			</el-popover>

		</div>
	</div>
</template>

<script>
	import VueQrcode from 'vue-qrcode'
	export default {
		components: {
			VueQrcode
		},
		props: {
			userType: {
				type: Number,
				default: 1
			}
		},
		data() {
			return {
				kefu: '',
				kefuAppid: '',
				kefuq: '',
				kefuAppidq: '',
				size: 150, //二维码大小
				qrColor: {
					'background': '#ffffff'
				},
				options: '', //生成二维码的内容
			}
		},
		created() {
			this.getPages()
		},
		methods: {
			goKefu() {
				if (this.userType == 1) { //用户
					// window.location.href = this.kefu
					this.options = this.kefu
				} else { //企业
					this.options = this.kefuq
					// window.location.href = this.kefuq
				}
			},
			getPages() {
				// 企业微信链接 274
				this.$Request.get('/app/common/type/322').then(res => {
					if (res.code == 0) {
						this.kefu = res.data.value
						// this.$queue.setData('kefu', res.data.value);
					}
				});
				// 企业微信客服APPID 275
				this.$Request.get('/app/common/type/324').then(res => {
					if (res.code == 0) {
						this.kefuAppid = res.data.value
						// this.$queue.setData('kefuAppid', res.data.value);
					}
				});
				//企业端客服
				this.$Request.get('/app/common/type/321').then(res => {
					if (res.code == 0) {
						this.kefuq = res.data.value
						// this.$queue.setData('kefuq', res.data.value);
					}
				});
				// 企业微信客服APPID 275
				this.$Request.get('/app/common/type/323').then(res => {
					if (res.code == 0) {
						this.kefuAppidq = res.data.value
						// this.$queue.setData('kefuAppidq', res.data.value);
					}
				});
			},
			//跳转记录
			goRecord(type) { //0: 浏览 1:投递 2:收藏
				if (localStorage.getItem('token')) {
					this.$router.push({
						name: 'recordUser',
						query: {
							type: type
						}
					})
				} else {
					this.$router.push({
						name: 'login'
					})
				}
			},
			goInterview() {
				if (localStorage.getItem('token')) {
					this.$router.push({
						name: 'interview'
					})
				} else {
					this.$router.push({
						name: 'login'
					})
				}

			},
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		width: 44px;
		border-radius: 30px;
		background-color: #ffffff;
		box-shadow: 0 0 10px 0 rgba(153, 153, 153, 0.3);

	}

	.box-item:hover {
		.box-item-icons {
			display: block;
		}

		.box-item-icon {
			display: none;
		}


		.box-item-txt {
			color: #00DD9A;
		}
	}

	.box-item-icons {
		display: none;
	}

	.box-item {
		width: 100%;
		height: 60px;
		cursor: pointer;
		align-content: center;

		img {
			width: 24px;
			height: 24px;
			margin-bottom: 4px;
		}
	}

	.box-item-txt {
		font-size: 12px;
		width: 100%;
		text-align: center;
		color: #666666;
	}
</style>