<template>
	<view class="page">
		<view class="backImg">
			<image src="https://api.ccttiot.com/smartmeter/img/static/utkroSMjT09nmCYaA7FT" mode=""></image>
		</view>
		<view class="tipbox">
			<view class="tip_cont">
				<image src="https://api.ccttiot.com/smartmeter/img/static/uKW514Tl8TVUiaJW2ygl" mode=""></image>
				<view class="txt">
					蜂箱数量:10
				</view>
			</view>
			<view class="tip_cont" style="margin-top: 48rpx;">
				<image src="https://api.ccttiot.com/smartmeter/img/static/uBEd8suIZ2vdqOGI8rP6" mode=""></image>
				<view class="txt">
					蜂箱数量:10
				</view>
			</view>
			<view class="tip_cont" style="margin-top: 48rpx;">
				<image src="https://api.ccttiot.com/smartmeter/img/static/ufgkE5w8AND4eLZD94RR" mode=""></image>
				<view class="txt">
					蜂箱数量:10
				</view>
			</view>
		</view>
		<u-loadmore :status="status" :icon-type="iconType" :load-text="loadText" v-if="isLoading" />
		<view class="warp_box">
			<swiper class="swiper" :style="{ height: swiperHeight + 'rpx' }" :current='curtitidx'
				previous-margin='50rpx' next-margin='50rpx' :circular='true' @change="swiperchange">
				<swiper-item v-for="(item, index) in swiperItems" :key="index"
					:class="{ 'active': curtitidx === index }">
					<view class="swiper-item">
						<view class="card_box">
							<view class="card">
								<image src="https://api.ccttiot.com/smartmeter/img/static/uMgejepZdfttR61bJlpP" mode="">
								</image>
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="info_cont">
			<view class="cont">
				<view class="cont_top">
					电量不足
				</view>
				<view class="cont_bot">
					0
				</view>
			</view>
			<view class="cont">
				<view class="cont_top">
					电量不足
				</view>
				<view class="cont_bot">
					0
				</view>
			</view>
			<view class="cont">
				<view class="cont_top">
					电量不足
				</view>
				<view class="cont_bot">
					0
				</view>
			</view>
			<view class="cont">
				<view class="cont_top">
					电量不足
				</view>
				<view class="cont_bot">
					0
				</view>
			</view>
			<view class="cont">
				<view class="cont_top">
					电量不足
				</view>
				<view class="cont_bot">
					0
				</view>
			</view>
			<view class="cont">
				<view class="cont_top">
					电量不足
				</view>
				<view class="cont_bot">
					0
				</view>
			</view>
			
		</view>
		<tab-bar :indexs='0'></tab-bar>
	</view>
</template>


<script>
	import uniEcCanvas from '@/components/uni-ec-canvas/uni-ec-canvas.vue'
	import * as echarts from '@/components/uni-ec-canvas/echarts'
	let chart = null

	export default {
		components: {
			uniEcCanvas
		},
		data() {
			return {
				ec: {
					lazyLoad: true
				},
				bgc: {
					backgroundColor: "#F7FAFE",

				},
				iconType: 'flower',
				status: 'loadmore',
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '实在没有了'
				},
				curtitidx: 1,
				swiperHeight: 426,
				activeSwiperHeight: 500, // 激活的swiper高度
				swiperItems: [1, 2, 3], // Placeholder for swiper items
			}
		},

		onShow() {


		},
		onPullDownRefresh() {



		},

		methods: {
			swiperchange(e) {
				this.curtitidx = e.detail.current
				// console.log(e, 'aaaa');
			},
			initChart(canvas, width, height, canvasDpr) {
				let that = this
				console.log(canvas, width, height, canvasDpr)
				let value = 100;
				let value2 = this.deviceInfo.totalElectriQuantity
				const option = {
					// backgroundColor:"#061740",
					// title: {
					// 	show: false,
					// 	text: `历史请求满意度`, // 图表标题
					// 	x: 'center',
					// 	y: '20',
					// 	textStyle: {
					// 		color: '#333', //'#fff',
					// 		fontSize: 20,
					// 	},
					// },
					series: [{
							type: 'pie', // 饼图类型
							radius: ['98%', '70%'], // 饼图半径，第一个值是内半径，第二个值是外半径
							silent: true,
							clockwise: true,
							startAngle: 90, // 起始角度
							z: 0,
							zlevel: 0,
							data: [{
									value: value,
									name: '占比', // 数据项名称
									itemStyle: {
										normal: {
											color: '#8883F0', // 数据项颜色
										},
									},
									label: {
										normal: {
											position: 'center',
											formatter: ` {a|${value2}}\n\n{b|剩余电量}`, // 标签内容格式
											rich: {
												a: {
													fontSize: 15,
													fontWeight: '700',
													color: '#333',
												},
												b: {
													fontSize: 11,
													color: '#888',
												},
											},
										},
									},
								},
								// {
								// 	value: 100 - value2,
								// 	name: '',
								// 	label: {
								// 		normal: {
								// 			show: false,
								// 		},
								// 	},
								// 	itemStyle: {
								// 		normal: {
								// 			color: '#173164',
								// 		},
								// 	},
								// },
							],
						},
						// {
						// 	type: 'gauge', // 仪表盘类型
						// 	radius: '130%', // 仪表盘半径，占图表容器的百分比
						// 	center: ['50%', '50%'], // 仪表盘中心位置
						// 	startAngle: 359,
						// 	endAngle: 359.9,
						// 	splitNumber: 2, // 刻度分割段数
						// 	hoverAnimation: true,
						// 	axisTick: {
						// 		show: true, // 是否显示刻度线
						// 		length: 10, // 刻度线长度
						// 		lineStyle: {
						// 			color: 'auto',
						// 			width: 1,
						// 		},
						// 	},
						// 	splitLine: {
						// 		length: 0, // 刻度线分隔线长度
						// 		lineStyle: {
						// 			width: 1,
						// 			color: '#061740',
						// 		},
						// 	},
						// 	axisLabel: {
						// 		show: false, // 是否显示刻度标签
						// 	},
						// 	pointer: {
						// 		show: false, // 是否显示指针
						// 	},
						// 	axisLine: {
						// 		lineStyle: {
						// 			opacity: 0,
						// 		},
						// 	},
						// 	detail: {
						// 		show: false, // 是否显示仪表盘详情
						// 	},
						// 	data: [{
						// 		value: 0,
						// 		name: '',
						// 	}, ],
						// },
					],
				};
				chart = echarts.init(canvas, null, {
					width: width,
					height: height,
					devicePixelRatio: canvasDpr
				})
				console.log(chart);
				// option.series[0].data = that.chartData
				canvas.setChart(chart)
				chart.setOption(option)
				return chart
			},
			// 获取设备详情

		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F7FAFE;
	}

	.page {
		width: 750rpx;

		.backImg {
			position: fixed;
			top: 0;
			z-index: -1;

			image {
				width: 750rpx;
				height: 870rpx;
			}
		}

		.info_cont {
			display: flex;
			flex-wrap: wrap;
			// justify-content: space-around;
			padding: 38rpx 74rpx 28rpx 74rpx;
			margin: 32rpx auto;
			width: 638rpx;
			height: 256rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0, 0, 0, 0.15);
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			.cont:nth-child(3n){
				margin-right: 0rpx;
			}
			.cont{
				margin-right: 100rpx;
				width: 96rpx;
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				.cont_top{
					font-weight: 400;
					font-size: 24rpx;
					color: #808080;
				
				}
				.cont_bot{
					
					margin-top: 4rpx;
					width: 96rpx;
					text-align: center;
					font-weight: 500;
					font-size: 32rpx;
					color: #3D3D3D;
				}
			}
		}

		.warp_box {
				margin-top: 128rpx;
		
				.swiper {
					.swiper-item {
						display: flex;
						justify-content: center;
						transition: height 0.3s ease-in-out;
		
						&.active {
							height: 500rpx; // 激活状态的高度
						}
		
						&:not(.active) {
							height: 426rpx; // 非激活状态的高度
						}
		
						.card_box {
							display: flex;
							flex-wrap: wrap;
		
							.card {
								width: 638rpx;
		
								image {
									width: 638rpx;
									height: 428rpx;
								}
							}
						}
					}
				}
			}

		.tipbox {
			width: 300rpx;
			display: flex;
			flex-wrap: wrap;
			// position: relative;
			margin-top: 186rpx;
			margin-left: 56rpx;

			.tip_cont {
				display: flex;
				flex-wrap: nowrap;
				align-items: center;

				image {
					margin-right: 6rpx;
					width: 38rpx;
					height: 38rpx;
				}

				// display: inline-flexbox;
				flex-wrap: nowrap;
				padding: 8rpx 22rpx;
				background: rgba(61, 61, 61, 0.5);
				box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0, 0, 0, 0.15);
				border-radius: 20rpx 20rpx 20rpx 20rpx;

				font-weight: 500;
				font-size: 32rpx;
				color: #FAFDFD;

			}
		}
	}
</style>