<template>
	<div class="pageBody">
		<div class="rowView">
			<div class="rowList">
				<div class="colItem" v-for="(item,index) in list" :key="index" @click="linkDetail(item)">
					<div class="cardView">
						<el-icon size="56" v-if="item.icon"><component :is="item.icon"/></el-icon>
						<div class="name">
							{{item.name}}
							<el-icon class="icon" size="30"><sc-icon-ArrowRightServe/></el-icon>
						</div>
					</div>
					<div class="describe">
						<el-icon size="56" v-if="item.icon"><component :is="item.icon"/></el-icon>
						<div class="name">
							{{item.text}}
							<el-icon class="icon" size="30"><sc-icon-ArrowRightServe/></el-icon>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="recommend">
			<div class="title">智能推荐</div>
			<div class="mainView" ref="bubble"></div>
		</div>
		<div class="history">
			<div class="title">搜索历史</div>
			<div class="mainView">
				<div class="viewItem" v-for="(item,index) in historyList" :key="index">{{item.content}}</div>
			</div>
		</div>
		<footerPage></footerPage>
	</div>
</template>

<script>
import footerPage from "@/views/serveView/components/footerPage";
import {eventBus} from "@/utils/eventBus";
export default {
	name: "mainView",
	components:{
		footerPage
	},
	data(){
		return{
			list:[
				{name:"技术支持与服务",icon:"sc-icon-TechnicalSupport",url:'serveView',page:"term", text:"维保支持与服务包括故障修复、定期检查、软件更新及技术支持"},
				{name:"常见问题",icon:"sc-icon-Problem",url:'personalCenter',page:"queryHistory",text:"常见问题包括响应延迟、故障频发、配件缺货及技术支持不足，影响服务效率"},
				{name:"咨询与联系方式",icon:"sc-icon-SeekAdviceFrom",url:'personalCenter',page:"problem",text:'提供电话、邮件支持，设立在线客服，确保快速响应客户需求与咨询'},
				{name:"其他",icon:"sc-icon-OtherServe",url:'personalCenter',page:"editAccount",text:'涵盖预防性维护、性能优化、培训服务及远程监控，全面提升系统可靠性'},
			],
			recommendList:[],
			historyList:[],

			// 智能推荐跳转映射数组
			recommendRouter:[
				{method:"customerWorkOrderMyList",name:"personalCenter",page:"feedback",text:"我的工单列表"},
				{method:"userInformation",name:"personalCenter",page:"editAccount",text:"用户中心"},
				{method:"maintenancePeriodQuery",name:"serveView",page:"term",text:"维保期限"},
				{method:"myQuery",name:"personalCenter",page:"queryHistory",text:"我的查询记录"},
				{method:"customerWorkOrderSubmit",name:"personalCenter",page:"problem",text:"提交问题工单"},
			]
		}
	},
	activated() {

	},
	deactivated() {

	},
	mounted() {
		this.getRecommendation();
		this.getRecentlyQuery();
	},
	beforeUnmount() {

	},
	methods:{
		linkDetail(item){
			eventBus.$emit('headerRouterBack',{name:item.url});
			if(item.url === 'serveView'){
				this.$nextTick(()=>{
					eventBus.$emit('queryBack',{name:item.page});
				})
			}else{
				this.$nextTick(()=>{
					eventBus.$emit('userBack',{name:item.page});
				})
			}
		},
		getCreateBubble(item){
			const containerWidth = this.$refs.bubble.offsetWidth;
			const containerHeight = this.$refs.bubble.offsetHeight;
			const bubble = document.createElement('div');
			bubble.className = 'bubble';

			const maxX = containerWidth - 160;
			const maxY = containerHeight - 38;
			const x = Math.floor(Math.random() * maxX);
			const y = Math.floor(Math.random() * maxY);

			bubble.style.left = `${x}px`;
			bubble.style.top = `${y}px`;
			bubble.style.maxWidth = '160px';
			bubble.style.maxHeight = '38px';
			bubble.style.background = this.getRandomColor();
			bubble.innerText =`${item.description}`;

			bubble.addEventListener('click', () => {
				this.recommendRouter.forEach(em=>{
					if(em.method === item.method){
						eventBus.$emit('headerRouterBack',{name:em.name});
						if(em.name === 'serveView'){
							this.$nextTick(()=>{
								eventBus.$emit('queryBack',{name:em.page});
							})
						}else{
							this.$nextTick(()=>{
								eventBus.$emit('userBack',{name:em.page});
							})
						}
					}
				})
			});
			return bubble
		},
		getRandomColor() {
			const letters = '0123456789ABCDEF';
			let color = '#';
			for (let i = 0; i < 6; i++) {
				color += letters[Math.floor(Math.random() * 16)];
			}
			return color;
		},

		async getRecommendation() {
			const res = await this.$API.customer.recommendation.post();
			if(res.code === 200){
				for (let i = 0; i < res.data.length; i++) {
					const bubble = this.getCreateBubble(res.data[i]);
					this.$refs.bubble.appendChild(bubble);
				}
			}
		},

		async getRecentlyQuery() {
			const res = await this.$API.customer.customerRecentlyQuery.post();
			if (res.code === 200) {
				this.historyList = res.data;
			}
		}

	}
}
</script>

<style scoped lang="scss">
.pageBody{
	display: flex;
	flex-direction: column;
	padding: 0 20px;
	.rowView{
		height: 240px;
		padding: 20px 0;
	}
	.rowList{
		max-width: 1200px;
		margin: 0 auto;
		height: 100%;
		display: flex;
		.colItem{
			flex: 1;
			border: 1px solid #aaa;
			padding: 20px;
			display: flex;
			position: relative;
			margin-left: -1px;
			.cardView{
				height: 100%;
				width: 100%;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				.name{
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: 18px;
					.icon{
						margin-left: 10px;
					}
				}
			}

			.describe{
				display: none;
			}
		}
		.colItem:first-child{
			border-top-left-radius: 4px;
			border-bottom-left-radius: 4px;
		}
		.colItem:last-child{
			border-top-right-radius: 4px;
			border-bottom-right-radius: 4px;
		}
		.colItem:hover{
			border-top-color: var(--el-color-primary);
			border-bottom-color: var(--el-color-primary);
		}
		.colItem:hover .describe{
			height: 100%;
			width: 100%;
			background: rgba(255,255,255,1);
			color: var(--el-color-primary);
			position: absolute;
			left: 0;
			top: 0;
			z-index: 10;
			cursor: pointer;
			padding: 20px;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			.name{
				display: flex;
				align-items: flex-end;
				justify-content: space-between;
				font-size: 16px;
				.icon{
					margin-left: 10px;
				}
			}
		}
	}
	.recommend{
		.title{
			max-width: 1200px;
			margin: 0 auto;
			height: 80px;
			display: flex;
			align-items: center;
			font-size: 22px;
		}
		.mainView{
			padding: 20px 0;
			max-width: 1200px;
			margin: 0 auto;
			background: #F8F8F8;
			border-radius: 4px;
			display: flex;
			justify-content: flex-start;
			flex-wrap: wrap;
			position: relative;
			height: 280px;
			::v-deep .bubble{
				display: flex;
				align-items: center;
				justify-content: center;
				border: 1px solid #F8F8F8;
				position: absolute;
				border-radius: 50px;
				color: #fff;
				padding:6px 20px;
				box-shadow: 0 2px 4px rgba(0,0,0,0.2);
			}
			::v-deep .bubble:hover{
				transform: scale(1.1);
				cursor: pointer;
			}
		}
	}
	.history{
		.title{
			max-width: 1200px;
			margin: 0 auto;
			height: 80px;
			display: flex;
			align-items: center;
			border-bottom: 1px solid #f0f0f0;
			font-size: 22px;
		}
		.mainView{
			padding: 20px 0 30px 0;
			max-width: 1200px;
			margin: 0 auto;
			display: flex;
			flex-wrap: wrap;
			.viewItem{
				width: 33%;
				padding: 10px 0;
				font-size: 16px;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
		}
	}
}
</style>
