<template>
	<view>
		<view class="backcorf06 height220 width100 fotct">
			<image src="../static/unioncard.png" v-if="types == 1" mode="widthFix" style="width: 120rpx;"></image>
			<image src="../static/oilcard.png" v-if="types == 2" mode="widthFix" style="width: 120rpx;"></image>
			<view class="mart10 font18 fontwig6 fcorfff" v-if="types == 1">工会卡</view>
			<view class="mart10 font18 fontwig6 fcorfff" v-if="types == 2">油卡
				<text class="fcor41c font14 margle" v-if="cardList.status == 1">(正常)</text>
				<text class="fcorred font14 margle" v-if="cardList.status == 2">(禁用)</text>
			</view>
			<view class="mart5 font18 fontwig6 fcorfff fontspec">余额: {{tongCardPrice}}</view>
			<view class="mart5 font18 fontwig6 fcorfff fontspec">{{cardNo}}</view>
			<view class="width40w height30 font16 fontlet fcorfff mart10 fotct border-r"
				style="background-color: #b2b2b2;" @click="delUserCard()">解绑</view>
		</view>
		<!-- <view class="width90 mart20 fcor666 font12">
			支付限额
		</view>
		<view class="width90 mart20 fcor666 font14 height25">
			<view class="width50 font14 fcor333 flleft">单笔限额</view>
			<view class="width50 font14 fcor666 flright fotrt">¥20000</view>
		</view>
		<view class="width90 mart20 fcor666 font14 mart5 height25">
			<view class="width50 font14 fcor333 flleft">每日限额</view>
			<view class="width50 font14 fcor666 flright fotrt">¥50000</view>
		</view> -->

		<view class="leave_cont">
			<view class="ul">
				<view class="li" v-if="types == 1">
					<text class="font15 fcor333">业务类型</text>
					<view class="flex1">
						<picker mode="selector" :range="title_list" range-key="name" @change="bindtitleList">
							<view class="date text1 margle10">{{titleName}}</view>
						</picker>
					</view>
				</view>
				<view class="li">
					<text class="font15 fcor333">开始时间</text>
					<view class="flex1">
						<picker mode="date" :value="start_date" :start="startDate" :end="endDate"
							@change="bindDateChange">
							<view class="date">{{start_date}}</view>
						</picker>
					</view>
				</view>
				<view class="li">
					<text class="font15 fcor333">结束时间</text>
					<view class="flex1">
						<picker mode="date" :value="end_date" :start="startDate" :end="endDate"
							@change="bindDateChange2">
							<view class="date">{{end_date}}</view>
						</picker>
					</view>
				</view>
			</view>
		</view>
		<view class="width90 mart30 fcor666 font12">
			订单列表
		</view>
		<view class="width90 mart20 alijusstart fcor666 font12">
			<view class="width40">订单号</view>
			<view class="width10 fotct">类型</view>
			<view class="width20 fotct">金额</view>
			<view class="width30">时间</view>
		</view>
		<view class="width100" v-if="types == 1">
			<view class="width90 mart5 alijusstart fcor666 font12" v-for="(item,index) in orderList" :key="index"
				@click="popupOrderNo(item.orderNo)">
				<view class="width40 fcor333 text1">{{item.orderNo}}</view>
				<view class="width10 fotct">支出</view>
				<view class="width20 fotct">¥{{item.tranAmount}}</view>
				<view class="width30">{{item.tranTime}}</view>
				<!-- {{phoneorderdes.createTimed | timeFormat('yyyy-mm-dd')}} {{phoneorderdes.createTimed | timeFormat('hh:mm')}} -->
			</view>
		</view>

		<view class="width100" v-if="types == 2">
			<view class="width90 mart5 alijusstart fcor666 font12" v-for="(item,index) in orderList" :key="index"
				@click="popupOrderNo(item.sourceOrderNo)">
				<view class="width40 fcor333 text1">{{item.sourceOrderNo}}</view>
				<view class="width10 fotct fcor41c" v-if="item.type == 1">收入</view>
				<view class="width10 fotct fcoreb5" v-if="item.type == 2">支出</view>
				<view class="width20 fotct fcor41c" v-if="item.type == 1">+{{item.amount}}</view>
				<view class="width20 fotct fcoreb5" v-if="item.type == 2">-{{item.amount}}</view>
				<view class="width30">
					<view class="width100">{{item.createTime | timeFormat('yyyy-mm-dd')}}</view>
					<view class="width100">{{item.createTime | timeFormat('hh:mm')}}</view>

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

<script>
	import {
		delUserCard,
		getDetailByCardNo,
		getHuiLianTongCardBalance,
		getOilCardRecordList,
		getHuiLianTongCardConsume
	} from '../../Utils/Api.js';
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				types: '', //卡类型
				orderList: [], //消费列表
				cardNo: '', //卡号
				tongCardPrice: 0, //账户余额 
				start_date: currentDate, //开始时间
				end_date: currentDate, //结束时间
				pageNum: 1,
				pageSize: 10,
				titleValue: 'sinopec_oil_code', //工会卡
				titleName: '中石化加油券',
				title_list: [{
						name: '中石化加油券',
						value: 'sinopec_oil_code'
					},
					{
						name: '其他商品或服务',
						value: 'hisen_consume'
					}
				],
				isNoMoreData: false,
				cardList: ''
			}
		},

		onLoad(options) {
			let that = this;
			that.cardNo = options.cardNo;
			that.types = options.des;
			if (options.des == 1) {
				that.getHuiLianTongCardBalance();
				that.getHuiLianTongCardConsume();
			}
			if (options.des == 2) {
				that.getDetailByCardNo();
				that.getOilCardRecordList();
			}
		},
		//上滑刷新
		onReachBottom() {
			if (this.types == 1) {
				this.getHuiLianTongCardConsume();
			}
			if (this.types == 2) {
				this.getOilCardRecordList();
			}
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		methods: {
			// 获取当前时间
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			//弹出二维码
			popupOrderNo(item) {
				uni.showToast({
					title: item,
					icon: 'none',
					duration: 2000
				})
			},
			// 选择日期
			bindDateChange: function(e) {
				this.start_date = e.target.value;
				this.pageNum = 1;
				this.isNoMoreData = false;
				this.orderList = [];
				if (this.types == 1) {
					this.getHuiLianTongCardConsume();
				}
				if (this.types == 2) {
					this.getOilCardRecordList();
				}
			},
			bindDateChange2: function(e) {
				this.end_date = e.target.value;
				this.pageNum = 1;
				this.isNoMoreData = false;
				this.orderList = [];
				if (this.types == 1) {
					this.getHuiLianTongCardConsume();
				}
				if (this.types == 2) {
					this.getOilCardRecordList();
				}
			},
			//选择类型
			bindtitleList(e) {
				this.titleName = this.title_list[e.target.value].name;
				this.titleValue = this.title_list[e.target.value].value;
				this.pageNum = 1;
				this.isNoMoreData = false;
				this.orderList = [];
				this.getHuiLianTongCardConsume();
			},
			//解除绑定我的卡号列表
			delUserCard() {
				let that = this;
				uni.showModal({
					content: '是否确定解除当前绑定卡号?',
					success: (res) => {
						if (res.confirm) {
							let params = {
								cardNo: that.cardNo
							}
							delUserCard(params).then(res => {
								if (res.return_code == '000000') {
									uni.showToast({
										title: '解除成功',
										duration: 2000,
										icon: 'success',
										success() {
											setTimeout(() => {
												uni.navigateBack({})
											}, 1000)
										}
									})
								} else {
									uni.showToast({
										title: res.return_msg,
										duration: 2000,
										icon: 'none'
									})
								}
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			//查询油卡
			getDetailByCardNo() {
				uni.showLoading({
					title: '查询中...'
				})
				let params = {
					cardNo: this.cardNo
				}
				getDetailByCardNo(params).then(res => {
					uni.hideLoading();
					if (res.return_code == '000000') {
						this.tongCardPrice = res.return_data.amount;
						this.cardList = res.return_data;
					} else {
						uni.showToast({
							title: res.return_msg,
							icon: "none"
						});
					}
				})
			},
			//查询详情
			getHuiLianTongCardBalance() {
				uni.showLoading({
					title: '查询中...'
				})
				let params = {
					cardNo: this.cardNo
				}
				getHuiLianTongCardBalance(params).then(res => {
					uni.hideLoading();
					if (res.return_code == '000000') {
						this.tongCardPrice = res.return_data.balance;
					} else {
						uni.showToast({
							title: res.return_msg,
							icon: "none"
						});
					}
				});
			},
			//查询油卡列表
			getOilCardRecordList() {
				uni.showLoading({
					title: '加载中...'
				})
				if (this.isNoMoreData) {
					uni.hideLoading()
					return;
				}
				let pagenum = this.pageNum;
				let Time1 = new Date(this.start_date.split('-').join('/'));
				let timestemp1 = Time1.getTime();
				let Time2 = new Date(this.end_date.split('-').join('/'));
				let timestemp2 = Time2.getTime() + 86399000;
				let params = {
					pageNum: pagenum,
					createTimeS: timestemp1,
					createTimeE: timestemp2,
					cardNo: this.cardNo,
					pageSize: this.pageSize
				}
				getOilCardRecordList(params).then(res => {
					if (res.return_code == '000000' && res.return_data.list != '') {
						uni.hideLoading();
						this.isNoMoreData = res.return_data.list.length == this.pageSize ? false : true;
						this.orderList = this.orderList.concat(res.return_data.list);
						if (res.return_data.total == (this.pageNum * this.pageSize)) {
							this.isNoMoreData = true;
						}
						this.pageNum = res.return_data.list.length == this.pageSize ? ++pagenum : pagenum;
					} else {
						this.orderList = [];
						uni.hideLoading()
					}
				})
			},
			//查询消费记录
			getHuiLianTongCardConsume() {
				uni.showLoading({
					title: '加载中...'
				})
				if (this.isNoMoreData) {
					return false;
				}
				let pagenum = this.pageNum;
				let Time1 = new Date(this.start_date.split('-').join('/'));
				let timestemp1 = Time1.getTime();
				let Time2 = new Date(this.end_date.split('-').join('/'));
				let timestemp2 = Time2.getTime() + 86399000;
				let params = {
					businessType: this.titleValue,
					sdate: timestemp1,
					edate: timestemp2,
					cardNo: this.cardNo,
					pageNum: pagenum,
					pageSize: this.pageSize
				}
				getHuiLianTongCardConsume(params).then(res => {
					uni.hideLoading();
					if (res.return_code == '000000' && res.return_data.records != '') {
						this.isNoMoreData = res.return_data.records.length == this.pageSize ? false : true;
						this.orderList = this.orderList.concat(res.return_data.records);
						this.pageNum = res.return_data.records.length == this.pageSize ? ++pagenum : pagenum;
					} else {
						this.orderList = [];
						uni.hideLoading();
						uni.showToast({
							title: res.return_msg,
							icon: 'none',
							duration: 2000
						})
						this.isNoMoreData = true;
					}
				});
			},
		}
	}
</script>

<style lang="scss">
	.leave_cont {
		background: #FFFFFF;
	}

	.leave_cont .ul {
		width: 90%;
		margin-left: 5%;
	}

	.leave_cont .ul .li {
		display: flex;
		align-items: center;
		border-bottom: 1px solid #efefef;
	}

	.leave_cont .ul .li text {
		padding: 40rpx 0;
	}

	.leave_cont .ul .li .flex1 {
		flex: 1;
		text-align: right;
		width: 70%;
		padding-right: 25rpx;
		color: #999999;
		font-size: 32rpx;
	}
</style>