<template>
	<div class="home">
		<div class="company">
			<div class="company-left">
				<item-title title="公司介绍" :topath="'/about'"></item-title>
				<div class="font" v-html="main.content">
					
				</div>
			</div>
			<div class="company-right">
				<div class="imgBox">
					<img class="img" :src="main.coverimage" />
				</div>
			</div>
		</div>
		<div class="home-body">
			<div class="new-pic">
				<el-carousel :interval="4000" height="320px" indicator-position="none">
					<el-carousel-item v-for="(item, index) in showNew" :key="index" >
						<img :src="item.coverimage" @click="navTo('/news/datatile?id='+ item.id)"/>
						<div class="title clamp hand">{{ item.title }}</div>
					</el-carousel-item>
				</el-carousel>
			</div>
			<div class="case">
				<item-title title="案例展示" :topath="'/product'"></item-title>
				<div class="item-wrapper">
					<div class="new-item hand" v-for="item in openNews" :key="item.id" @click="navTo('/product/detail?id='+ item.id)">
						<div class="title clamp ">
							<span></span>
							{{ item.title }}
						</div>
						<div class="time">{{ item.time }}</div>
					</div>
				</div>
			</div>
			<div class="news">
				<item-title title="新闻动态" :topath="'/news'"></item-title>
				<div class="item-wrapper">
					<div class="new-item hand" v-for="item in redNews" :key="item.id" @click="navTo('/news/datatile?id='+ item.id)">
						<div class="title clamp">
							<span></span>
							{{ item.title }}
						</div>
						<div class="time">{{ item.time }}</div>
					</div>
				</div>
			</div>
		</div>
		<div class="mpBoxTitle">
			<div class="mpBoxTitleBox">
			<div class="titleText">
				动态数据看板
			</div>
			</div>
			<div class="border"></div>
		</div>
		<div class="mapBox">
			<div class="sjkb_box">
				<div class="sjkb_frame">
					<!-- 数据 -->
					<baidu-map class="bm-view" @zoomend="zoomendChange" @ready="init" :min-zoom="5" :max-zoom="18">
						<bm-navigation anchor="BMAP_ANCHOR_BOTTOM_RIGHT"></bm-navigation>
						<bm-copyright
							anchor="BMAP_ANCHOR_TOP_RIGHT"
							:copyright="[
								{ id: 1, content: 'Copyright Message', bounds: { ne: { lng: 110, lat: 40 }, sw: { lng: 0, lat: 0 } } },
								{ id: 2, content: '<a>添利节能科技有限公司</a>' }
							]"
						></bm-copyright>
						<bm-marker
							class="bm-marker"
							v-for="(item, index) in companyList"
							:key="index"
							:position="{
								lng: item.longtitude,
								lat: item.lattitude
							}"
							@click="infoWindowOpen(item)"
						>
							<bm-label v-if="zoomActive >= 15" :content="item.name" :labelStyle="item.style" :offset="item.textType" />
							<my-overlay :position="{ lng: item.longtitude, lat: item.lattitude - 0.003 }" :item="item" v-if="item.alertShow == true"></my-overlay>
						</bm-marker>
					</baidu-map>
					
					<div class="sjkb_wrap">
						<div class="sjkb_item">
							<el-image class="iconMapTop" :src="require('@/assets/img/info001.png')" fit="cover"></el-image>
							<div class="shebeitji_box">
								<span class="sjkb_title">合作企业(家)</span>
								<div class="sjkb_content">
									<span class="sjkb_now">{{ machineList.machine_company_num || '0' }}</span>
									<!-- <el-image class="" :src="require('@/assets/index_up.png')" fit="cover"></el-image>
									<span class="sjkb_upNum">0</span> -->
								</div>
							</div>
						</div>
						<div class="sjkb_item">
							<el-image class="iconMapTop" :src="require('@/assets/img/info003.png')" fit="cover"></el-image>
							<div class="shebeitji_box">
								<span class="sjkb_title">经济效益(万元)</span>
								<div class="sjkb_content">
									<span class="sjkb_now">{{ parseFloat(machineList.machine_save_money / 10000).toFixed(2) || '0' }}</span>
									<!-- <el-image class="" :src="require('@/assets/index_up.png')" fit="cover"></el-image>
									<span class="sjkb_upNum">0</span> -->
								</div>
							</div>
						</div>
						<div class="sjkb_item">
							<el-image class="iconMapTop" :src="require('@/assets/img/info002.png')" fit="cover"></el-image>
							<div class="shebeitji_box">
								<span class="sjkb_title">用水总量(万吨)</span>
								<div class="sjkb_content">
									<span class="sjkb_now">{{ parseFloat(machineList.machine_use_water / 10000).toFixed(2) || '0' }}</span>
									<!-- <el-image class="" :src="require('@/assets/rili.png')" fit="cover"></el-image>
									<span class="sjkb_upNum">{{ machineList.machine_use_time_max }}</span> -->
								</div>
							</div>
						</div>
						<div class="sjkb_item">
							<el-image class="iconMapTop" :src="require('@/assets/img/info002.png')" fit="cover"></el-image>
							<div class="shebeitji_box">
								<span class="sjkb_title">节水总量(万吨)</span>
								<div class="sjkb_content">
									<span class="sjkb_now">{{ parseFloat(machineList.machine_save_water / 10000).toFixed(2) || '0' }}</span>
									<!-- <el-image class="" :src="require('@/assets/rili.png')" fit="cover"></el-image>
									<span class="sjkb_upNum">{{ machineList.machine_use_time_max }}</span> -->
								</div>
							</div>
						</div>
						
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import ItemTitle from './homeChild/ItemTitle.vue';
import { loadIndexs, aboutList, machine, companies, formBaoCun,caseslist,storylist } from '@/api/index';
import { getTime } from '../assets/js/time.js'
import { aboutInfo } from '@/api/product.js'
import MyOverlay from '@/components/MyOverlay.vue';
export default {
	components: {
		ItemTitle,
		MyOverlay
	},
	data() {
		return {
			main:'',//公司介绍
			openNews: [],//案例展示
			redNews: [],//新闻展示
			showNew: [{title:'111'},{title:'222'}],
			map: null, //保存地图
			// 公司列表
			companyList: [],
			// 默认层级
			zoomActive: 9,
			machineList: {} // 设备总体信息
		};
	},
	filters: {},
	computed: {},
	created() {
		this.loadData();
	},
	methods: {
		// 加载初始数据
		loadData(){
			//公司介绍
			aboutInfo({},7).then(e => {
				this.main = e.data;
			})
			//新闻展示
			storylist({page:1,limit:7}).then(e => {
				e.data.list.forEach(data => {
				data.time = getTime(data.createtime)
				})
				this.redNews = e.data.list
				this.showNew = e.data.list
			})
			//案例展示
			caseslist({page:1,limit:7}).then(e =>{
				e.data.list.forEach(data => {
				data.time = getTime(data.createtime)
				})
				
				this.openNews = e.data.list
			})
			companies().then(e => {
				this.companyList = e.data.map(e => {
					// 初始化弹窗显示隐藏
					e.alertShow = false;
					// e.lattitude = 28.243198;
					// e.longtitude = 121.279239;
					// 设置文字样式
					e.textType = {
						width: -((e.name.length / 2) * 10),
						height: 30
					};
					e.data = {};
					e.style = {
						background: 'none',
						color: '#333333',
						fontSize: '10px',
						border: 'none'
					};
					return e;
				});
				this.setCompanyData();
			})
			machine({}, 0).then(res => {
				this.machineList = res.data;
				
			});
		},
		// 保存处理公司数据
		setCompanyData() {
			let obj = this;
			
			for (let i = 0; i < this.companyList.length; i++) {
				let data = this.companyList[i];
				setTimeout(() => {
					obj.getData(data.id)
						.then(e => {
							data.data = e.data;
							data.data.machine_name = data.name;
						})
						.catch(e => {
							console.log(e);
						});
				}, 100 * i);
			}
		},
		// 获取单个公司数据
		getData(machineid) {
			return new Promise((ok, err) => {
				machine({}, machineid)
					.then(e => {
						ok(e);
					})
					.catch(e => {
						err(e);
						console.log(e);
					});
			});
		},
		/* 设置弹窗 */
		zoomendChange(type) {
			const obj = this;
			obj.zoomActive = type.target.getZoom();
			// if (obj.zoomActive >= 15) {
			// 	for(let i=0; i< obj.companyList.length; i++) {
			// 		obj.companyList[i].alertShow = true;
			// 	}
			// }
			if (obj.zoomActive <= 10) {
				for (let i = 0; i < obj.companyList.length; i++) {
					obj.companyList[i].alertShow = false;
				}
			}
		},
		navTo(url) {
			this.$router.push(url);
		},
		// 显示数据
		infoWindowOpen(item) {
			item.alertShow = true;
		},
		// 初始化地图
		init({ BMap, map }) {
			this.map = map;
			// 初始化地图,设置中心点坐标
			var point = new BMap.Point(121.434817, 29.653849);
			map.centerAndZoom(point, this.zoomActive);
			// this.setMarker();
			// 添加鼠标滚动缩放
			map.enableScrollWheelZoom();
		}
	}
};
</script>

<style lang="scss" spcode>
.company {
	width: 100%;
	margin: 0 auto;
	display: flex;
	justify-content: start;
	padding: 50px 0 50px;
	.company-left {
		max-width: 50%;
		min-width: 25%;
		// height: 414px;
		.font {
			margin-top: 37px;
			font-size: 14px;
			font-family: Adobe Heiti Std;
			font-weight: normal;
			color: #000000;
			line-height: 50px;
		}
	}
	.company-right {
		margin-left: 20px;
		width: 50%;
		padding-top: 30%;
		position: relative;
		height: 0;
		.imgBox {
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			.img {
				width: 100%;
				height: 100%;
			}
		}
		
	}
}
.home-body {
	width: 100%;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	.new-pic {
		// max-width: 550px;
		// min-width: 400px;
		width: 380px;;
		height: 350px;
		position: relative;
		img {
			// max-width: 550px;
			// min-width: 400px;
			width: 380px;
			height: 320px;
		}
		
		.title {
			text-align: center;
			// max-width: 550px;
			// min-width: 400px;
			padding: 0 10px;
			width: 380px;
			height: 60px;
			background: #d2d3d3;
			opacity: 0.8;
			line-height: 60px;
			font-size: 24px;
			font-family: inpinheiti;
			font-weight: 400;
			color: #ffffff;
			position: absolute;
			bottom: 0;
		}
	}
	.case {
		width: 32%;
		height: 350px;
		background: #ffffff;
		margin-left: 20px;
	}
	.news {
		width: 32%;
		height: 350px;
		background: #ffffff;
		margin-left: 20px;
	}
}
.el-carousel__button {
	width: 16px;
	height: 16px;
	border-radius: 50%;
}

.is-active {
	.el-carousel__button {
		background-color: #d82020 !important;
	}
}
.item-wrapper {
	padding: 20px 15px 0 13px;

	.new-item {
		width: 100%;;
		display: flex;
		justify-content: space-between;
		margin-bottom: 17px;
		&:hover {
			span {
				border-color: #0165B5;
			}
			.title {
				color: #0165B5;
			}
			.time {
				color: #0165B5;
			}
		}
		span {
			display: inline-block;
			margin-right: 8px;
			width: 5px;
			height: 5px;
			border-left: 1px solid #d8d8d8;
			border-bottom: 1px solid #d8d8d8;
			-webkit-transform: translate(0,-50%) rotate(-135deg);
			transform: translate(0,-50%) rotate(-135deg);
		}
		.title {
			
			height: 14px;
			font-size: 14px;
			font-family: PingFang SC;
			font-weight: bold;
			color: #101010;
			// &:hover {
			// 	color: red;
			// }
		}
		.time {
			min-width: 80px;
			font-size: 14px;
			font-family: PingFang SC;
			font-weight: 500;
			color: #999999;
		}
	}
}
// 地图样式
.mpBoxTitle{
	display: flex;
	align-items: center;
	height: 50px;
	position: relative;
	margin-top: 30px;
	.border{
		height: 1px;
		width: 100%;
		background-color: #E0E2E4;
	}
	.mpBoxTitleBox{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		.titleText{
			background-color: #FFFFFF;
			font-size: 26px;
			padding:  30px;
			font-weight: bold;
		}
	}
}
.mapBox{
	max-width: 1200px;
	min-width: 1080px;
	position: relative;
	padding-top: 50%;
	margin: 15px auto 35px;
}
.sjkb_box {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	.sjkb_frame {
		width: 100%;
		height: 100%;
		position: relative;
		// 地图
		.bm-view {
			width: 100%;
			height: 100%;
		}
		// 数据
		.sjkb_wrap {
			position: absolute;
			top: 20px;
			left: 20px;
			display: flex;
			align-items: center;
			.sjkb_item {
				padding: 10px;
				margin-right: 15px;
				line-height: 1;
				background: #ffffff;
				display: flex;
				align-items: center;
				border-radius: 5px;
				&:last-of-type {
					margin-right: 0;
					// padding-right: 20px;
				}
				.iconMapTop{
					width: 70px;
					height: 70px;
				}
				// align-items: center;
				.shebeitji_box {
					margin-left: 5px;
					padding-right: 20px;
					// padding-top: 8px;
					// border-right: 1px solid #f0f0f0;
					text-align: left;
					.sjkb_title {
						font-size: 18px;
						font-family: PingFang SC;
						font-weight: 500;
						color: #101010;
					}
					.sjkb_content {
						margin-top: 10px;
						text-align: left;
						.sjkb_now {
							font-size: 20px;
							font-family: PingFang SC;
							font-weight: 500;
							color: #101010;
						}
						.sjkb_upNum {
							margin-left: 3px;
							font-size: 20px;
							font-family: PingFang SC;
							font-weight: 500;
							color: #101010;
						}
					}
				}
				.sbtj_tongji {
					padding: 0 70px 10px 20px;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: space-around;
					.sbtj_shuju {
						display: flex;
						align-items: center;
						font-size: 18px;
						font-family: PingFang SC;
						font-weight: bold;
						color: #101010;
						.sbtj_dian {
							margin-right: 3px;
							width: 10px;
							height: 10px;
							border-radius: 50%;
						}
						.lanse {
							background: #1890ff;
						}
						.hongse {
							background: #f25657;
						}
						.huise {
							background: #eeeeee;
						}
					}
				}
			}
		}
	}
}
</style>
