<template>
	<view>
		<view class="top">
			<view class="top_right">
				<view
					:class="is_have == 0 ? 'top_right_itrm is_have' : 'top_right_itrm'"
					@click="is_have_fun(0)"
				>加油记录</view>
				<view
					:class="is_have == 1 ? 'top_right_itrm is_have' : 'top_right_itrm'"
					@click="is_have_fun(1)"
				> 油耗统计</view>
			</view>
			<view class="top_left">
			<image
				src="../../static/images/my/date.png"
				style="margin-right: 20rpx; width: 36rpx; height: 36rpx"
			></image>
			<view class="top_left_1">
				<picker
					mode="date"
					:value="date"
					:start="startDate"
					:end="endDate"
					@change="bindDateChange"
				>
					<view class="uni-input">{{ date }}</view>
				</picker>
			</view>
			<view class="xian" style="padding: 0 10rpx" v-if="is_have == 1">--</view>
			<view class="top_left_1" v-if="is_have == 1">
				<picker
					mode="date"
					:value="date"
					:start="startDate2"
					:end="endDate"
					@change="bindDateChange2"
				>
					<view class="uni-input">{{ date2 }}</view>
				</picker>
			</view>
			<navigator url="../fule_add/fule_add">
				<image
					src="../../static/images/my/add.png"
					style="margin-left: 20rpx; width: 40rpx; height: 40rpx;transform: translateY(4rpx);"
				></image>
			</navigator>
			</view>
		</view>
		<scroll-view class="bottom" scroll-y @scrolltolower="Scrolltolower">
			<!-- 加油记录 -->
			<view v-show="is_have == 0">
				<view class="tb_item background" style="font-weight: 600">
					<view class="tb_item1">日期</view>
					<view class="tb_item2">设备号</view>
					<view class="tb_item3">加油单号</view>
					<view class="tb_item4">加油量</view>
					<view class="tb_item5">单价</view>
					<view class="tb_item6">金额</view>
				</view>
				<view
					:class="index % 2 == 0 ? 'tb_item' : 'tb_item background'"
					v-for="(item, index) in data_list"
					:key="item.id"
					@longtap="to_fun(item, index)"
				>
					<view class="tb_item1">{{ item.plusOilDate }}</view>
					<view class="tb_item2">{{ item.vehicleCode }}</view>
					<view class="tb_item3">{{ item.plusOilOrder }}</view>
					<view class="tb_item4">{{ item.plusOilAmount }}</view>
					<view class="tb_item5">{{ item.oilPrice }}</view>
					<view class="tb_item6">{{ item.amountMoney }}</view>
				</view>
				<view
					style="text-align: center; padding: 20rpx; color: #b3b3b3"
					v-if="is_no"
				>
					没有数据
				</view>
			</view>
			<!-- 油耗统计 -->
			<view v-show="is_have == 1">
				<view class="tb_item background" style="font-weight: 600">
					<view class="tb_item2">设备号</view>
					<view class="tb_item3">加油次数</view>
					<view class="tb_item4">加油量</view>
					<view class="tb_item6">金额</view>
				</view>
				<view
					:class="index % 2 == 0 ? 'tb_item' : 'tb_item background'"
					v-for="(item, index) in data_list.censusOilList"
					:key="item.id"
					@longtap="to_fun(item, index)"
				>
					<!-- <view class="tb_item1">{{item.plusOilDate}}</view> -->
					<view class="tb_item2">{{ item.vehicleCode }}</view>
					<view class="tb_item3">{{ item.plusOilCount }}</view>
					<view class="tb_item4">{{ item.plusOilAmount }}</view>
					<view class="tb_item6">{{ item.amountMoney }}</view>
				</view>
				<view :class="data_list.length % 2 != 0 ? 'tb_item' : 'tb_item background'">
					<!-- <view class="tb_item1">{{item.plusOilDate}}</view> -->
					<view class="tb_item2" style="font-weight: 600">合计:</view>
					<view class="tb_item3" style="font-weight: 600">
						{{data_list.allPlusOilCount}}
					</view>
					<view class="tb_item4" style="font-weight: 600">
						{{data_list.allPlusOilAmount}}
					</view>
					<view class="tb_item6" style="font-weight: 600">
						{{data_list.allAmountMoney}}
					</view>
				</view>
			</view>
		</scroll-view>
		<!-- 弹框 -->
		<uni-popup ref="popup" type="center">
			<view class="popup">
				<view class="cz"> 请选择操作 </view>
				<view class="cz2">
					<view class="eidt" @click="to_eide"> 修改 </view>
					<view class="del" @click="to_del"> 删除 </view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>
<script>
const { urlList, https } = require("@/static/api");
export default {
	data() {
		return {
			// 日期
			startDate: "1999-05",
			startDate2: "1999-05",
			endDate: new Date(),
			date: "",
			date2: "",
			startTime: "",
			endTime: "",
			currentPage: 1,
			pageSize: 30,
			data_list: [],
			is_no: false,
			is_have: 0,
			// 长按对象
			item: {},
			index: 0,
		};
	},
	onLoad(options) {
		// console.log(options.id)
	},
	onShow() {
		var year = new Date().getFullYear();
		var methods = new Date().getMonth() + 1;
		var day = new Date().getDate();
		if (methods < 10) {
			methods = "0" + methods;
		}
		if (day < 10) {
			day = "0" + day;
		}
		// var endday =new Date(year,methods,0).getDay()
		var endday = new Date(year, methods, 0).getDate();
		this.date = year + "-" + methods + "-" + day;
		this.date2 = year + "-" + methods + "-" + day;
		this.startTime = year + "-" + methods + "-" + day + " 00:00:00";
		this.startDate2 = year + "-" + methods + "-" + day;
		this.endTime = year + "-" + methods + "-" + day + " 23:59:59";
		// this.startTime=year+"-"+methods+"-01"
		// this.endTime=year+"-"+methods+"-"+endday
		this.currentPage = 1;
		this.data_list = [];
		this.get_list();
	},
	methods: {
		to_fun(item, index) {
			this.item = item;
			this.index = index;
			this.$refs.popup.open("center");
			// console.log(item)
			// uni.navigateTo({
			// 	url: "/pages/fule_add/fule_add?id="+item.id,
			// });
		},
		to_del() {
			var url = urlList.operation_oil + "/" + this.item.id;
			https(url, "DELETE", "", "").then((res) => {
				console.log(res.data);
				this.data_list.splice(this.index, 1);
				this.$refs.popup.close();
			}).catch((err) => {
				console.log(err);
			});
		},
		to_eide() {
			this.$refs.popup.close();
			uni.navigateTo({
				url: "/pages/fule_add/fule_add?id=" + this.item.id,
			});
		},
		close() {
			this.$refs.popup.close();
		},
		is_have_fun(index) {
			if (this.is_have == index) {
				return;
			}
			if (index == 1) {
				// console.log(this.startTime,this.endTime)
				this.date2 = this.date;
			}
			if (index == 0) {
				// this.endTime=this.startTime
				var year = new Date().getFullYear();
				var methods = new Date().getMonth() + 1;
				var day = new Date().getDate();
				if (methods < 10) {
					methods = "0" + methods;
				}
				if (day < 10) {
					day = "0" + day;
				}
				// var endday =new Date(year,methods,0).getDay()
				var endday = new Date(year, methods, 0).getDate();
				this.date = year + "-" + methods + "-" + day;
				this.date2 = year + "-" + methods + "-" + day;
				this.startTime = year + "-" + methods + "-" + day + " 00:00:00";
				this.endTime = year + "-" + methods + "-" + day + " 23:59:59";
			}
			this.is_have = index;
			this.currentPage = 1;
			this.data_list = [];
			this.get_list();
		},
		bindDateChange(e) {
			this.date = e.detail.value;
			console.log(this.date);
			// this.startTime=this.date+"-01"
			// var year=new Date(this.startTime).getFullYear()
			// var methods=new Date(this.startTime).getMonth()+1
			// var endday =new Date(year,methods,0).getDate()
			// this.endTime=this.date+"-"+endday
			if (this.is_have == 0) {
				this.startTime = e.detail.value + " 00:00:00";
				this.endTime = e.detail.value + " 23:59:59";
			} else if (this.is_have == 1) {
				this.startTime = e.detail.value + " 00:00:00";
				this.startDate2 = e.detail.value;
			}
			this.currentPage = 1;
			this.data_list = [];
			this.get_list();
		},
		bindDateChange2(e) {
			this.date2 = e.detail.value;
			console.log(this.date);
			// this.startTime=this.date+"-01"
			// var year=new Date(this.startTime).getFullYear()
			// var methods=new Date(this.startTime).getMonth()+1
			// var endday =new Date(year,methods,0).getDate()
			// this.endTime=this.date+"-"+endday
			// this.startTime=e.detail.value+' 00:00:00'
			this.endTime = e.detail.value + " 23:59:59";
			// console.log(this.endTime)
			this.currentPage = 1;
			this.data_list = [];
			this.get_list();
		},
		Scrolltolower() {
			if (this.is_no == true) {
				return;
			}
			this.currentPage = this.currentPage + 1;
			this.get_list();
		},
		get_list() {
			console.log(this.startTime, this.endTime);
			if (this.is_have == 0) {
				var url = urlList.getoils_list;
				var data = {
					startTime: this.startTime,
					endTime: this.endTime,
					currentPage: this.currentPage,
					pageSize: this.pageSize,
				};
				https(url, "GET", data, "").then((res) => {
					if (res.data.items.length != 0) {
						this.data_list = [...this.data_list, ...res.data.items];
						this.is_no = false;
					} else {
						this.is_no = true;
					}
				}).catch((err) => {
					console.log(err);
				});
			} else if (this.is_have == 1) {
				console.log(this.startTime, this.endTime);
				var url = urlList.getoils_census;
				var data = {
					startTime: this.startTime,
					endTime: this.endTime,
				};
				https(url, "GET", data, "").then((res) => {
					console.log(res);
					this.data_list = res.data;
					if (res.data.censusOilList.length != 0) {
						this.is_no = false;
					} else {
						this.is_no = true;
					}
				}).catch((err) => {
					console.log(err);
				});
			}
		},
	},
};
</script>

<style lang="scss">
.top {
	background: #3476fe;
	color: white;
	display: flex;
	align-items: center;
	font-size: 24rpx;
	box-sizing: border-box;
	height: 80rpx;
	.top_left {
		display: flex;
		align-items: center;
		margin-left: 20rpx;
		margin-right: 20rpx;

		.top_left_1 {
		}
		image {
		  width: 30rpx;
		  height: 30rpx;
		}
	}
	.top_right {
		display: flex;
		align-items: center;
		flex: 1;
		color: #76c9f2;
		.top_right_itrm {
			flex: 1;
			text-align: center;
		}
		.is_have {
			color: white;
		}
	}
}
.bottom {
	height: calc(100vh - 80rpx);
	box-sizing: border-box;
	width: 100%;
	.background {
		background: #f5f9ff;
	}
	.tb_item {
		width: 100%;
		display: flex;
		justify-content: space-between;
		text-align: center;
		font-size: 24rpx;
		padding: 20rpx 0;
		color: #7f8081;

		.tb_item1 {
			flex: 2;
		}

		.tb_item2 {
			flex: 1.5;
		}

		.tb_item3 {
			flex: 2;
		}

		.tb_item4 {
			flex: 1.5;
		}

		.tb_item5 {
			flex: 1;
		}

		.tb_item6 {
			flex: 1.5;
		}
	}
}
.popup {
	background: white;
	border-radius: 10rpx;
	font-size: 32rpx;
	text-align: center;
	.cz {
		width: 500rpx;
		height: 200rpx;
		line-height: 200rpx;
		color: #656565;
		border-bottom: solid 2rpx #f4f4f4;
	}
	.cz2 {
		width: 500rpx;
		display: flex;
		font-size: 28rpx;
		.eidt {
			flex: 1;
			padding: 20rpx;
			color: #266bf8;
			border-right: solid 1rpx #f4f4f4;
		}
		.del {
			flex: 1;
			padding: 20rpx;
			border-left: solid 1rpx #f4f4f4;
			color: #ea2222;
		}
	}
}
</style>
