<template>
	<view id="data-list-box">
		<view class="header">
			<view class="header-item">
				<text>设备名称</text>
				<text>{{deviceName}}</text>
			</view>
			<view class="header-item">
				<text>运行状态</text>
				<text>{{deviceStateName}}</text>
			</view>
		</view>
		<u-tabs :list="tabList" :is-scroll="false" :current="tabCurrent" :bar-width="138" :bold="false" :duration="0.1"
			@change="tabChange"></u-tabs>
		<!-- 自定义时间 -->
		<view class="time-selcet-box" v-if="tabCurrent==3">
			<view class="time-selcet">
				<text @click="selectTime(0,startTime)">{{startTime?startTime:'开始时间'}}</text>
				<view class="iconfont icon-shijian"></view>
				<text @click="selectTime(1,endTime)">{{endTime?endTime:'结束时间'}}</text>
			</view>
		</view>
		
		<view class="menu-list">
			<view class="menu-left">
				<view class="menu-btn" :class="btnActive==0?'active':''" @click="changeBtn(0)">列表模式</view>
				<view class="menu-btn" :class="btnActive==1?'active':''" @click="changeBtn(1)">图表模式</view>
			</view>
			<view class="iconfont icon-reload" @click="getDataList"></view>
		</view>
		
		<!-- 列表 -->
		<view class="data-list" v-if="btnActive==0">
			<view class="data-list-header">
				<text>时间</text>
				<text>值</text>
			</view>
			<view class="data-item" v-for="(item,index) in dataList" :key="index">
				<text>{{$u.timeFormat(item.fg_device_ts, 'yyyy-mm-dd hh:MM:ss')}}</text>
				<text>{{item[fields]}}</text>
			</view>
			<u-empty :show="emptyShow" text="没有找到数据" :font-size="40" :icon-size="300" :margin-top="20" mode="list"
				style="background: #fff;"></u-empty>
		</view>
		
		<!-- 图表 -->
		<view class="data-chart"  v-else>
			<qiun-data-charts
				type="line"
				:opts="opts"
				:chartData="chartData"
				:canvas2d="true"
				:canvasId="canvasId"
				:enableScroll="true"
				:ontouch="true"
			/>
		</view>
		
		<!-- 分页 -->
		<view  class="list-pagination">
			<uni-pagination :current="pageNum" :pageSize="pageSize" :total="total"
				@change="changePagination"></uni-pagination>
		</view>
		
		<!-- 时间选择器 -->
		<u-picker mode="time" v-model="timeShow" :default-time="defaultTime" :params="timeParams"
			@confirm="confirmTime"></u-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				btnActive:0,
				tabList: [{
					name: '近一天'
				}, {
					name: '近一周'
				}, {
					name: '近一月'
				}, {
					name: '自定义'
				}],
				tabCurrent: 0,
				emptyShow: false, //是否显示数据为空
				dataList: [],
				// 时间选择是否显示
				timeShow: false,
				// 时间参数
				timeParams: {
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: true
				},
				defaultTime: '',
				startTime: '',
				endTime: '',
				selectIndex: 0,

				pageNum: 1,
				pageSize: 10,
				total: 10,
				
				devId:null,
				fields:null,

				cmdId: null,
				deviceKey: null,
				field: null,
				prodId: null,
				deviceStateName: null,

				// 时间范围
				listWhere: [{ // 大于xx时间
						field: "time",
						operator: "gt",
						val: 0,
						valType: "time",
					},
					{ // 小于xx时间
						field: "time",
						operator: "lt",
						val: 0,
						valType: "time",
					},
				],
				deviceName: null,
				
				chartData: {},
				selectValue:this.value,
				charShow: true,
				canvasId:this.$u.guid(32),
				opts: {
					color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
					enableScroll: true,
					legend: {
						show:false,
					},
					xAxis: {
						disableGrid: true,
						scrollShow: true,
						itemCount: 6,
						fontSize:10,
						rotateAngle:60,
						rotateLabel:true,
						// boundaryGap:"justify",
					},
					yAxis: {
						gridType: "dash",
						dashLength: 1,
						type:'value',
						splitNumber:3,
						data:[{tofix:2,min:0}]
					},
					extra: {
						area: {
							type: "straight",
							width: 2,
							activeType: "hollow"
						}
					}
				},
			}
		},
		components: {
		},
		onLoad(option) {
			this.defaultTime = this.$u.date(new Date(), 'yyyy-mm-dd hh:MM:ss')
			if (option) {
				console.log("获取到的参数", option)
				this.devId = option.devId;
				this.fields = option.fields;
				this.deviceName = option.devName;
				this.deviceStateName = option.devState;
				this.getDataList();
			}
			// this.getChartData();
		},
		onShow() {

		},
		methods: {
			changeBtn(index){
				this.btnActive = index;
				this.getDataList();
			},
			// 获取数据列表
			getDataList() {
				this.timeFormat();
				let params = {
					page: this.pageNum,
					pageSize: this.pageSize,
					devId: this.devId,
					startTs: this.listWhere[0].val,
					endTs: this.listWhere[1].val,
					fields: this.fields + ',fg_device_ts'
				}
				console.log("params", params)
				this.dataList = [];
				this.$api.iotsApi.getDeviceDataList(params).then(res => {
					console.log("getDataList", res);
					if (res.code == 0) {
						if (res.data) {
							this.dataList = res.data.list?res.data.list:[];
							this.pageNum = res.data.page;
							this.total = res.data.totalCount;
							// 判断当前是否显示空
							if (!this.dataList.length) {
								this.emptyShow = true;
							} else {
								this.emptyShow = false;
							}
							if(this.btnActive==1){
								this.getChartData(res.data.list?res.data.list:[]);
							}
							console.log('this.emptyShow', this.emptyShow)
						} else {}

					} else {
						this.$u.toast(res.msg);
						if (this.pageNum > 1) {
							this.pageNum = 1
						}
					}
				}, error => {
					this.$u.toast('服务器开小差了呢，请您稍后再试')
					if (this.pageNum > 1) {
						this.pageNum = 1
					}
				})
			},
			getChartData(data) {
				let resData = {
					categories: [],
					series: [{
						name: "值",
						data: []
					}]
				};
				data.map((item,index)=>{
					resData.categories.push(this.$u.timeFormat(item.fg_device_ts, 'yyyy-mm-dd hh:MM:ss'));
					resData.series[0].data.push(item[this.fields]);
				})
				console.log("resData",resData)
				this.chartData = JSON.parse(JSON.stringify(resData));
			},
			// 时间格式化
			timeFormat() {
				// 开始和结束时间
				let date = new Date();
				switch (this.tabCurrent) {
					case 0:
						this.listWhere[0].val = date.getTime() - 24 * 60 * 60 * 1000;
						this.listWhere[1].val = date.getTime();
						break;
					case 1:
						this.listWhere[0].val = date.getTime() - 24 * 7 * 60 * 60 * 1000;
						this.listWhere[1].val = date.getTime();
						break;
					case 2:
						this.listWhere[0].val = date.getTime() - 24 * 30 * 60 * 60 * 1000;
						this.listWhere[1].val = date.getTime();
						break;
					default:
						this.listWhere[0].val = 0
						this.listWhere[1].val = 0
						if (this.startTime) {
							console.log("this.startTime", this.startTime)
							let time1 = new Date(this.startTime);
							this.listWhere[0].val = time1.getTime();
							if (this.endTime) {
								let time2 = new Date(this.endTime);
								console.log("this.endTime", this.endTime)
								this.listWhere[1].val = time2.getTime();
							}
						}
				}
			},
			tabChange(index) {
				this.tabCurrent = index;
				this.pageNum = 1;
				this.total = 10;
				this.dataList = [];
				this.getDataList();
			},
			// 点击页面
			changePagination(e) {
				console.log("点击页面", e);
				this.pageNum = e.current;
				this.getDataList()
			},
			// 点击选择时间
			selectTime(index, defaultTime) {
				this.selectIndex = index;
				this.timeShow = true;
				if (defaultTime) {
					this.defaultTime = defaultTime;
				}
			},
			// 点击确认选择时间
			confirmTime(obj) {
				console.log(obj)
				let time = obj.year + '-' + obj.month + '-' + obj.day + ' ' + obj.hour + ':' + obj.minute + ':' + obj
					.second;
				if (this.selectIndex == 0) {
					this.startTime = time;
				} else {
					this.endTime = time;
				}
				if (this.startTime && this.endTime) {
					this.getDataList();
				}
			}
		}
	}
</script>
<style>
	page,.data-list-box{
		background-color: #e9ecf3;
	}
</style>
<style scoped lang="scss">

	.header {
		padding: 10rpx 24rpx 0;
		background: #fff;
		margin-bottom: 20rpx;

		.header-item {
			height: 98rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 23rpx 0 17rpx;
			font-size: 28rpx;
			color: #444444;
			line-height: 55px;

			&:first-of-type {
				border-bottom: 1px solid #E8EBF2;
			}

			text {
				&:first-of-type {
					color: #666;
				}
			}
		}
	}

	// 时间选择器
	.time-selcet-box {
		padding: 18rpx 24rpx 0;

		.time-selcet {
			width: 702rpx;
			height: 84rpx;
			background: #FFFFFF;
			// box-shadow: 0px 6rpx 29rpx 0px rgba(174, 185, 190, 0.7);
			border-radius: 10rpx;
			display: flex;
			justify-content: space-around;
			align-items: center;

			text {
				font-size: 26rpx;
				color: #B4B4B4;
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.iconfont {
				font-size: 34rpx;
				color: #444;
			}
		}
	}
	
	.menu-list{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx;
		padding-bottom: 0;
		.menu-left{
			display: flex;
			align-items: center;
			.menu-btn{
				border: 1px solid #009CFF;
				color: #009CFF;
				border-radius: 10rpx;
				background-color: #fff;
				// height: 100rpx;
				padding: 10rpx 20rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				&.active{
					color: #fff;
					background: #009CFF;
				}
				&:first-child{
					margin-right: 10rpx;
				}
			}
		}
		.iconfont{
			font-size: 40rpx;
			color: #009CFF;
			font-weight: bold;
			padding: 10rpx;
		}
	}

	.data-list {
		padding: 20rpx 20rpx 0;

		.data-list-header {
			height: 80rpx;
			background: #FFFFFF;
			// box-shadow: 0px 6rpx 18rpx 0px rgba(174, 185, 190, 0.7);
			border-bottom: 1px solid #f5f5f5;
			border-radius: 10rpx 10rpx 0 0;
			z-index: 10;
			position: relative;
			display: flex;

			text {
				display: flex;
				align-items: center;
				justify-content: center;
				flex: 1;
				font-size: 26rpx;
				font-weight: bold;
				color: #444444;
			}
		}

		.data-item {
			background: #FFFFFF;
			height: 80rpx;
			border-bottom: 1px solid #f5f5f5;
			display: flex;

			&:last-of-type {
				border: none;
			}

			text {
				display: flex;
				align-items: center;
				justify-content: center;
				flex: 1;
				font-size: 24rpx;
				color: #444444;
			}
		}
	}
	.data-chart{
		margin: 20rpx 20rpx 0;
		padding-bottom: 5rpx;
		height: 800rpx;
		background: #fff;
	}

	.list-pagination {
		// width: 100%;
		margin: 0 20rpx;
		background: #FFFFFF;
		border-top: 1px solid #f5f5f5;
		border-radius: 0 0 10rpx 10rpx;
		padding: 20rpx 40rpx;

		/deep/ .uni-pagination__btn.uni-pagination__btn {
			width: 140rpx;
			height: 60rpx;
			background: #FFFFFF;
			border: 1px solid #DCDCDC;
			border-radius: 5rpx;
			font-size: 24rpx;
			line-height: 60rpx;

			text {
				color: #727272;
			}
		}

		/deep/ .uni-pagination--enabled.uni-pagination--enabled {
			border: 1px solid #009CFF;

			text {
				color: #009CFF;
			}
		}
	}
</style>
