<template>
	<view class="center">
		<view class="img">
			<image src="../../static/img/logo.png" mode=""></image>
		</view>
		<!-- 头部轮播 -->
		<view class="carousel-section">
			<view class="carousel-box">
				<swiper class="carousel" autoplay="true" interval="5000" duration="500">
					<swiper-item v-for="(item,index) in carouselList " class="carousel-item" :key="index">
						<image :src="item" />
					</swiper-item>
				</swiper>
			</view>
		</view>
		<!-- 公司介绍跳转 -->
		<view class="introduce" @click="navto('/pages/about/about')">
			公司介绍
			<view class="more">
				更多>>
			</view>
		</view>
		<!-- <view class="teachingPrinciple" v-html="gsjj.content"> -->
		<!-- <view class="teachingPrinciple_img">
				<image :src='gsjj.coverimage'  mode=""></image>
			</view>
			<text>{{gsjj.content}}</text> -->
		<!-- </view> -->
		<view class="gsjj" v-html="gsjj.content">
			<!-- ooooooooooooooooooo -->
		</view>
		<!-- 节水实时数据 -->
		<view class="introduce" @click="navto('/pages/test/test')">
			节水实时数据
			<view class="more">
				物联网登录>>
			</view>
		</view>

		<view class="swiper-item">
			<!-- 数据看板 -->
			<!-- <view class="title1"><text class="tit">数据看板</text></view> -->
			<view class="map">
				<view class="mapbox" v-if="mapLoding&&showMap">
					<baidu-map @click="onAction" @zoomend="zoomendChange" @movestart="onAction(false)"
						@moveend="onAction" class="map-mian" @ready="init" :min-zoom="0" :max-zoom="20">
						<bm-navigation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" class="bm-marker1"></bm-navigation>
						<bm-marker class="bm-marker" v-for="item in companyList" :position="{
								lng: item.longtitude,
								lat: item.lattitude
							}" animation="BMAP_ANIMATION_BOUNCE" @click="showData(item)">
							<bm-label v-if="zoomActive >= 15" :content="item.name" :labelStyle="item.style"
								:offset="item.textType" />
						</bm-marker>
					</baidu-map>
					<view class="map-info">
						<view class="map2">
							<view class="map-icon">
								<image src="../../static/images/info001.png" mode=""></image>
							</view>
							<view class="map-2">
								<view class="info2">合作企业(家)</view>
								<view class="num2">
									<text class="tit1">{{ machineData.machine_company_num }}</text>
								</view>
							</view>
						</view>
						<view class="map2">
							<view class="map-icon">
								<image src="../../static/images/info002.png" mode=""></image>
							</view>
							<view class="map-2">
								<view class="info2">用水总量(万吨)</view>
								<view class="num2">
									<!-- <text class="tit1">{{ machineData.machine_use_water}}</text> -->
									<text
										class="tit1">{{ parseFloat(machineData.machine_use_water / 10000).toFixed(2) }}</text>
								</view>
							</view>
						</view>
						<view class="map2">
							<view class="map-icon">
								<image src="../../static/images/info002.png" mode=""></image>
							</view>
							<view class="map-2">
								<view class="info2">节水总量(万吨)</view>
								<view class="num2">
									<text
										class="tit1">{{ parseFloat(machineData.machine_save_water / 10000).toFixed(2) }}</text>
								</view>
							</view>
						</view>
						<view class="map2">
							<view class="map-icon">
								<image src="../../static/images/info003.png" mode=""></image>
							</view>
							<view class="map-2">
								<view class="info2">经济效益（万元）</view>
								<view class="num2">
									<!-- machineData.machine_save_money -->
									<text
										class="tit1">{{ parseFloat(machineData.machine_save_money / 10000).toFixed(2) }}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 案例展示 -->
		<view class="introduce" @click="navto('/pages/case/case')">
			案例展示
			<view class="more">
				更多>>
			</view>
		</view>
		<view class="case" v-for="(item,index) in caseList" @click="navId('/pages/case/case?id='+item.id)">
			<view class="case_img">
				<image :src="baseUrl+item.coverimage" mode=""></image>
			</view>
			<view class="caseBox">
				<view class="caseBox_top">
					{{item.title}}
				</view>
				<view class="caseBox_bottom">
					<view class="img">
						<!-- 	<image :src="item.coverimage" mode=""></image> -->
						<image src="../../static/tabBar/1.png" mode=""></image>
					</view>
					<text>发布时间：{{item.fb}}</text>
					<!-- <view class="date">
						{{item.content}}
					</view> -->
				</view>
			</view>
		</view>
		<!-- 新闻动态 -->
		<view class="introduce" @click="navto('/pages/news/news')">
			新闻动态
			<view class="more">
				更多>>
			</view>
		</view>
		<view class="case" v-for="(item,index) in newsList" @click="nav">
			<view class="case_img">
				<image :src="baseUrl+item.coverimage" mode=""></image>
			</view>
			<view class="caseBox">
				<view class="caseBox_top">
					{{item.title}}
				</view>
				<view class="caseBox_bottom">
					<view class="img">
						<image src="../../static/tabBar/1.png" mode=""></image>
					</view>
					<text>发布时间：{{item.fb}}</text>
					<view class="date">
						{{item.date}}
					</view>
				</view>
			</view>
		</view>
		<view class="botton-box">

		</view>
		<aboutUs></aboutUs>
	</view>
</template>

<script>
	import {
		banner,
		category,
		articleDetail,
		articlelist,
		loadIndexs,
		caseslist,
		newslist,
		casesDetail
	} from '@/api/index.js';
	import {
		getTime
	} from '@/utils/time.js'
	import {
		changeTaber
	} from '@/utils/tarberChange.js'
	//调用完组件需要声明一下，在data()上声明
	import aboutUs from "@/components/introduce/introduce.vue"
	export default {
		components: {
			aboutUs
		},
		data() {
			return {
				isshow: true,
				// 是否自动切换
				autoPlay: true,
				// 保存自动切换倒计时
				outPlay: null,
				// 设置动画时间间隔
				setOutTime: 5000,
				// 保存地图
				map: null,
				// 公司列表
				companyList: [],
				// 保存弹窗数据
				itemData: {},
				// 默认层级
				zoomActive: 6,
				// 默认未加载地图
				mapLoding: false, //判断是否地图数据已经加载完毕
				showMap: false, //判断是否到切换地图页面
				list3: [],
				machineid: '',
				//

				gsjj: {},
				baseUrl: 'http://tianli.liuniu946.com',
				newsList: [],
				caseList: [
					// 	{
					// 	title: '1大家谁都i啊手机都i阿迪啊就能看见你空间空间帮',
					// 	src: "../../static/img/introduce.png",
					// 	date: '2021-06-08 16:26',
					// }, {
					// 	title: '2大家谁都i啊手机都i阿迪啊就能看见你空间空间帮',
					// 	src: "../../static/img/introduce.png",
					// 	date: '2021-06-08 16:26'
					// }, {
					// 	title: '3大家谁都i啊手机都i阿迪啊就能看见你空间空间帮',
					// 	src: "../../static/img/introduce.png",
					// 	date: '2021-06-08 16:26'
					// }
				],
				newsCid: 30,
				caseCid: 27,
				swiperCurrent: 0,
				carouselList: [
					// {
					// 	pic: '../../static/img/logo.png'
					// },
					// {
					// 	pic: '../../static/img/logo.png'
					// },
					// {
					// 	pic: '../../static/img/logo.png'
					// },
					// {
					// 	pic: '../../static/tabBar/1.png'
					// }
				],
				dataList: [],

			};
		},
		onLoad() {
			// this.loadData();
			this.loadIndexs();
			this.$nextTick(function(){
				changeTaber(0)
			})
			this.getGsjj(2)
			this.getCaseList()
			this.getNewsList()
		},
		methods: {
			//方案案例列表
			getCaseList() {
				let obj = this
				caseslist({
					category_id: obj.caseCid,
					page: 1,
					limit: 4
				}).then(({
					data
				}) => {
					data.list.forEach(e => {
						e.fb = getTime(e.createtime)
					})
					console.log(data, '1111111111111111')
					this.caseList = data.list
				})
			},
			//新闻动态
			getNewsList() {
				let obj = this
				newslist({
					category_id: obj.newsCid,
					page: 1,
					limit: 4
				}).then(({
					data
				}) => {
					data.list.forEach(e => {
						e.fb = getTime(e.createtime)
					})
					console.log(data, '1111111111111111')
					this.newsList = data.list
				})
			},
			// nav(url) {
			// 	uni.navigateTo({
			// 		url: url
			// 	});
			// },
			// navto(e){
			// 	uni.navigateTo({
			// 		url:'/pages/index/message?id=' + e.id
			// 	})
			// },
			//轮播图跳转页面
			nav(item) {
				if (item.url != '/') {
					console.log("1111");
					uni.navigateTo({
						url: '/' + item.url,
						fail(error) {
							console.log(error);
						}
					})
				}
			},
			//跳转详情
			navId(id) {
				casesDetail({}, id).then(res => {
					console.log(res, "111111")
					this.caseDetail = res.data

				})
			},
			//跳转
			navto(url) {
				uni.navigateTo({
					url: url,
					fail(error) {
						uni.switchTab({
							url
						});
					}
				});
			},
			loadIndexs() {
				loadIndexs().then(({
					data
				}) => {
					console.log(data, 'data000000000000')
					console.log(data.loop, '2222')
					let arr = data.loop.split(',')
					this.carouselList = arr.map(xhr => {
						console.log('http://tianli.liuniu946.com' + xhr)
						return xhr = 'http://tianli.liuniu946.com' + xhr
					})
				})
			},
			async loadData() {
				const obj = this;
				// banner({}).then(e => {
				// 	obj.carouselList = obj.carouselList.concat(e.data.banner);
				// 	console.log(obj.carouselList)
				// // });
				// category({
				// 	page: 1,
				// 	limit: 1000
				// }, 2).then(({
				// 	data
				// }) => {
				// 	console.log(data)
				// 	obj.dataList = data

				// });
			},
			swiperChange(e) {
				const index = e.detail.current;
				this.swiperCurrent = index;
			},
			getGsjj(id) {
				articleDetail({}, id).then(res => {
					console.log(res, "111111")
					this.gsjj = res.data
				}).catch(err => {
					this.gsjj = err.data
					console.log("2222222222")
					console.log(err, 'cuoww')
				})
			}

		}
	};
</script>

<style lang="scss">
	.center {
		background-color: rgb(255, 255, 255);
		height: 100%;
	}
	.aboutUs {
		width: 100%;
		position: fixed;
		left: 0;
		bottom: 0;
		margin-bottom: 100rpx;
	}

	.img {
		margin: 17rpx 0 17rpx 41rpx;
		width: 208rpx;
		height: 52rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.map {
		margin-top: 44rpx;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 24rpx;
		padding-bottom: 288rpx;

		.mapbox {
			width: 94%;
			border: 1rpx solid #c1c1c1;
			height: 145vw;
			// height: 1202rpx;
			background-color: #f8f8f8;
			// display: flex;
			// justify-content: center;
			// align-items: center;
			position: relative;

			.map-mian {
				width: 100%;
				height: 100%;
			}

			.bm-marker1 {
				// height: calc(100vh - 280rpx);
			}

			.bm-marker {
				// height: calc(100vh - 280rpx);
			}

			.map-info {
				position: absolute;
				top: 20rpx;
				left: 15rpx;

				.map1 {
					padding: 8rpx 8rpx;
					// width: 100%;
					// height: 78rpx;
					border-radius: 10rpx;
					background-color: #ffffff;
					display: flex;
					align-items: center;

					.map1-left {
						// width: 50%;
						padding-right: 18rpx;
						border-right: 2rpx solid #f0f0f0;
						display: flex;

						.map-icon {
							width: 68rpx;
							height: 68rpx;

							image {
								width: 68rpx;
								height: 68rpx;
							}
						}

						.map-2 {
							display: flex;
							flex-direction: column;

							.info2 {
								color: #101010;
								font-size: 16rpx;
							}

							.num2 {
								display: flex;
								align-items: center;

								image {
									margin: 0 6rpx;
									width: 8rpx;
									height: 11rpx;
								}

								.tit2 {
									font-size: 4rpx;
								}
							}
						}
					}

					.map1-right {
						padding: 0 16rpx;
						// width: 50%;
						font-size: 8rpx;

						.warn1 {
							display: flex;
							align-items: center;

							.circle {
								width: 8rpx;
								height: 8rpx;
								border-radius: 4rpx;
								margin-right: 6px;
								background-color: #448ef7;
							}

							.circle1 {
								width: 8rpx;
								height: 8rpx;
								border-radius: 4rpx;
								margin-right: 6px;
								background-color: #d9d2be;
							}

							.circle2 {
								width: 8rpx;
								height: 8rpx;
								border-radius: 4rpx;
								margin-right: 6px;
								background-color: #eeeeee;
							}
						}
					}
				}

				.map2 {
					margin-top: 12rpx;
					// width: 260rpx;
					border-radius: 8rpx;
					background-color: #fff;
					display: flex;
					align-items: center;
					padding: 12rpx 0 12rpx 6rpx;

					.map-icon {
						width: 72rpx;
						height: 72rpx;
						margin-right: 6rpx;

						image {
							width: 72rpx;
							height: 72rpx;
						}
					}

					.map-2 {
						display: flex;
						flex-direction: column;

						.info2 {
							color: #101010;
							font-size: 16rpx;
						}

						.num2 {
							display: flex;
							align-items: center;

							image {
								margin: 0 6rpx;
								width: 8rpx;
								height: 11rpx;
							}

							.tit2 {
								font-size: 4rpx;
							}
						}
					}
				}
			}
		}
	}

	.carousel-section {
		background-color: #FFFFFF;
		width: 100%;
		height: 300rpx;

		.carousel-box {
			background-color: #FFFFFF;
			width: 100%;
			height: 300rpx;

			.carousel {
				background-color: #FFFFFF;
				width: 100%;
				height: 300rpx;

				.carousel-item {
					background-color: #FFFFFF;
					width: 100%;
					height: 300rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}
		}
	}

	.introduce {
		position: relative;
		margin-top: 18rpx;
		width: 100%;
		height: 60rpx;
		background: #127FD5;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 22rpx;
		font-family: Adobe Heiti Std;
		font-weight: normal;
		color: #FFFFFF;

		.more {
			position: absolute;
			right: 15rpx;
			bottom: 5rpx;
			font-size: 16rpx;
			font-family: Adobe Heiti Std;
			font-weight: normal;
			color: #FFFFFF;

		}
	}

	.teachingPrinciple {
		margin-top: 44rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		.teachingPrinciple_img {
			width: 580rpx;
			height: 248rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		text {
			font-size: 16rpx;
			font-family: Adobe Heiti Std;
			font-weight: normal;
			color: #000000;
			margin: 23rpx 40rpx 10rpx 40rpx;

		}
	}

	.case {
		display: flex;
		border-bottom: 1rpx solid #E9E9E9;
		justify-content: center;
		padding: 30rpx 0;

		.case_img {
			flex-shrink: 1;
			width: 158rpx;
			height: 124rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.caseBox {
			width: 460rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.caseBox_top {
				padding-left: 30rpx;
				max-width: 460rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.caseBox_bottom {
				margin-left: -10rpx;
				display: flex;
				align-items: center;

				.img {
					margin-right: 10rpx;
					width: 30rpx;
					height: 30rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				text {
					color: #9F9F9F;
					font-size: 24rpx;
					font-family: Adobe Heiti Std;
					font-weight: normal;
				}

				.date {
					font-size: 24rpx;
					font-family: Adobe Heiti Std;
					font-weight: normal;
				}
			}
		}
	}
</style>
